New post view + fix moment location

Views/Feed.js

@@ -1,10 +1,7 @@
-import { StatusBar } from 'expo-status-bar';
 import React, { useState, useEffect } from 'react';
-import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from './../API.js';
 import Post from './../components/Post.js';
-import NewPost from "./../components/NewPost.js";
-import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';

Views/Menu.js

@@ -4,6 +4,8 @@ import { Text, List, RadioButton } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import i18n from "../i18nMessages.js";
 import Moment from 'moment';
+import 'moment/min/locales';
+Moment.locale(i18n.locale);
 
 
 let MenuView = ()=>{

Views/NewPost.js

@@ -1,14 +1,129 @@
-import { View } from "react-native";
+import React, { useState } from 'react';
-import NewPost from "../components/NewPost";
+import { View, TextInput, Image } from "react-native";
+import { Text, Button, Divider } from "react-native-paper";
+import { SafeAreaView } from "react-native-safe-area-context";
+import API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
+import * as ImagePicker from 'expo-image-picker';
+import i18n from "../i18nMessages";
+import Media from '../components/Media';
 
 
-let NewPostView = ()=>{
+let NewPostView = ({writeTo})=>{
+    let [postContent, setPostContent] = useState('');
+    let [extraContent, setExtraContent] = useState([]);
+    const [photo, setPhoto] = React.useState(null);
+    const navigation = useNavigation();
+    const pickImage = async () => {
+        // No permissions request is necessary for launching the image library
+        let result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ImagePicker.MediaTypeOptions.Images,
+            //allowsEditing: true,
+            //aspect: [4, 3],
+            //quality: 1,
+            allowsMultipleSelection: true,
+        });
+        if (!result.cancelled) {
+            setPhoto(result);
+            let newPhotoURL = await handleUploadPhoto(result);
+            let newExtraContent = ["@image:" + newPhotoURL].concat(extraContent);
+            setExtraContent(newExtraContent);
+            console.log(newExtraContent.join(" "));
+            setPhoto(null);
+        }
+    };
+
+    const handleUploadPhoto = async (photo) => {
+        if (!photo) return;
+        const uri =
+            Platform.OS === "android"
+                ? photo.uri
+                : photo.uri.replace("file://", "");
+        const filename = photo.uri.split("/").pop();
+        const match = /\.(\w+)$/.exec(filename);
+        const ext = match?.[1];
+        const type = match ? `image/${match[1]}` : `image`;
+        const formData = new FormData();
+        formData.append("banner", {
+            uri,
+            name: `image.${ext}`,
+            type,
+        });
+        try {
+            let uploadedFile = await fetch("https://social.emmint.com/upload.php", {
+                method: "POST",
+                body: formData,
+                headers: { "Content-Type": "multipart/form-data" }
+            })
+                .then((res) => res.json())
+                .then((data) => {
+                    console.log(data);
+                    return data.fileName;
+                })
+                .catch((err) => console.error(err));
+            return uploadedFile;
+        } catch (err) {
+            console.log(err);
+            alert("Something went wrong");
+        }
+
+    };
+
+    const handleNewPostButton = async () => {
+        //setPostContent('');
+        API.newPost(postContent + " " + extraContent.join(" ")).then((newPost) => {
+            setPostContent('');
+            setExtraContent([]);
+            navigation.goBack();
+            //if (newPostCB) newPostCB(newPost);
+        });
+    }
+
     return (
-        <View>
+        <SafeAreaView>
-            <NewPost >
+            <View style={{padding: 10}}>
-
+                <View style={{flexDirection:"row", marginBottom:10, justifyContent:"space-around"}}>
-            </NewPost>
+                    <Text style={{fontSize: 25}}>{i18n.t("message.statusUpdate")}:</Text>
-        </View>
+                    <Button icon="send" mode="outlined" onPress={handleNewPostButton}>
+                        {i18n.t("message.post")}
+                    </Button>
+                </View>
+                <Divider bold={true}/>
+                <TextInput
+                    value={postContent}
+                    onChangeText={setPostContent}
+                    multiline={true}
+                    numberOfLines={8}
+                    style={{
+                        backgroundColor: "rgba(0,0,0,0)",
+                        textAlignVertical: "center",
+                        textAlign: "center",
+                        fontSize: 20,
+                    }}
+                    autoFocus={true}
+                />
+                <Divider  bold={true} />
+                <View style={{flexDirection:"row", marginTop:10, justifyContent:"space-around"}}>
+                    <Button icon="add-a-photo" mode="outlined" onPress={pickImage}>
+                        Add Photos
+                    </Button>
+                </View>
+                {photo && (
+                    <View>
+                        <Text>Uploading...</Text>
+                        <Image
+                            source={{ uri: photo.uri }}
+                            style={{ width: 100, height: 100 }}
+                        />
+                    </View>
+                )}
+                {
+                    extraContent.length > 0 && (
+                        <Media content={extraContent.join(" ")} />
+                    )
+                }
+            </View>
+        </SafeAreaView>
     )
 }
 

components/Comment.js

@@ -5,7 +5,10 @@ import API from './../API.js';
 import UserName from './UserName.js';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
-
+import Moment from 'moment';
+import i18n from "../i18nMessages.js";
+import 'moment/min/locales';
+Moment.locale(i18n.locale);
 
 let Comment = ({ comment, postid }) => {
     const gState = useSnapshot(GlobalState);
@@ -30,7 +33,7 @@ let Comment = ({ comment, postid }) => {
                     <View style={{flex:8}}>
                         <Text style={styles.userName}>
                             <UserName profileid={comment.profileid} key={comment.profileid} />
-
+                            <Text style={{fontSize: 12, fontWeight: "normal"}}> {Moment(comment.createdAt).fromNow()}</Text>
                         </Text>
                     </View>
                     <View style={{flex:2}}>
@@ -42,6 +45,7 @@ let Comment = ({ comment, postid }) => {
                     </View>
                 </View>
                 <Text style={{fontSize: 16}}>{comment.content}</Text>
+                
             </Card.Content>
         </Card>
     );

components/ProfileCardHorizontal.js

@@ -62,20 +62,29 @@ let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => {
             <Card.Content>
                 <View style={{ flexDirection: "row" }}>
                     <View onPress={onPress}>
-                        <Avatar.Image size={100} source={{ uri: photoUrl }} />
+                        <Avatar.Image size={75} source={{ uri: photoUrl }} />
-                        
                     </View>
-                    <View style={{paddingLeft: 10}}>
+                    <View style={{ paddingLeft: 10 }}>
                         <Title onPress={onPress} numberOfLines={1}>
                             <Text>
                                 {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
                             </Text>
                         </Title>
-                        <Paragraph lineBreakMode="clip" numberOfLines={3} style={{width:250}}>{profile.profile?.description}</Paragraph>
+                        <Paragraph lineBreakMode="clip" numberOfLines={3} style={{ width: 250 }}>{profile.profile?.description}</Paragraph>
-                    </View>
-                    <View>
-                        <FollowButton profile={profile._id ? profile : {_id: profileid}} />
                     </View>
+
+                </View>
+                <View style={{
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    width: 50,
+                    height: 50,
+                    backgroundColor:"#ddd",
+                    borderRadius: 25,
+                    opacity: 0.7
+                }}>
+                    <FollowButton profile={profile._id ? profile : { _id: profileid }} />
                 </View>
             </Card.Content>
         </Card>

components/basics/FollowButton.js

@@ -44,7 +44,7 @@ const unfollowProfile = async (profileid, me, setFollowing, setPending) => {
 }
 
 
-let FollowButton = ({ profile }) => {
+let FollowButton = ({ profile, iconSize }) => {
     const viewer = useSnapshot(GlobalState).me;
     const [following, setFollowing] = useState(false);
     const [pending, setPending] = useState(false);
@@ -70,9 +70,11 @@ let FollowButton = ({ profile }) => {
             {
                 profile._id && profile._id !== viewer._id ? 
                 <IconButton 
-                    mode='outlined' 
                     icon={following ? 'person-remove' : 'person-add'}
-                    onPress={toggleFollowThisProfile} /> : 
+                    onPress={toggleFollowThisProfile} 
+                    size={iconSize || 25}
+                    iconColor={following ? "#c44d56" : "#93faa5"}
+                /> : 
                 <></>
             }
         </>

i18nMessages.js

@@ -1,7 +1,7 @@
 //import { getLocales } from 'expo-localization';
 import { I18n } from 'i18n-js';
-import Moment from 'moment';
+import moment from 'moment'
-import 'moment/min/locales.min';
+import 'moment/min/locales'
 
 const messages = {
     en: {
@@ -129,6 +129,6 @@ const i18n = new I18n(messages);
 
 // Set the locale once at the beginning of your app.
 i18n.locale = 'es';//getLocales()[0].languageCode;
-Moment.updateLocale(i18n.locale);
+moment.locale(i18n.locale);
 
 export default i18n;