Adding tags filters to profiles

Views/Profile.js

@@ -1,6 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import React, { useState, useEffect } from 'react';
 import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { Button, IconButton } from 'react-native-paper';
 import API from './../API.js';
 import Post from './../components/Post.js';
 import NewPost from "./../components/NewPost.js";
@@ -31,12 +32,14 @@ const getProfilePosts = async (profileid) => {
 let Profile = ({ navigation, route }) => {
     let [Posts, setPosts] = useState([]);
     let [profile, setProfile] = useState({});
+    const [showNewPost, setShowNewPost] = useState(false);
+    const [tag, setTag] = useState('');
 
     useEffect(() => {
         let subscribed = true;
         const getData = async () => {
             setPosts([]);
-            if (route.params && route.params.profileid) {
+            if (route.params && route.params.profileid && tag == '') {
                 console.log('Loading Cache Profile:' + route.params.profileid);
                 await API.getUserProfile(route.params.profileid).then((profileObj) => {
                     if(!subscribed) return 0;
@@ -53,14 +56,32 @@ let Profile = ({ navigation, route }) => {
                     console.log('Store Cache Profile:' + route.params.profileid);
                 });
             } else {
-                navigation.navigate('Feed')
+                if(route.params && route.params.profileid){
+                    console.log('Getting posts with tag', tag)
+                    API.getPostsWithTag(route.params.profileid, tag).then((data) => {
+                        if(!subscribed) return 0;
+                        setPosts(data.posts);
+                    });
+                } else {
+                    // if no profile information is pressent should load feed
+                    navigation.navigate('Feed')
+                }
             }
         }
         getData();
         return ()=>{
             subscribed = false;
         }
-    }, [route.params?.profileid]);
+    }, [tag, route.params?.profileid]);
+
+    const getTagPosts = ()=>{
+        API.getPostsWithTag(tag).then((data) => {
+            //if(!subscribed) return 0;
+            console.log(data.posts);
+            setPosts(data.posts);
+        });
+    }
+
     const renderPost = (({ item }) => {
         if (item.nonOrganicType)
             return (<></>);
@@ -69,7 +90,42 @@ let Profile = ({ navigation, route }) => {
     const header = (
         <View>
             <ProfileHeader profileObj={profile} key={profile._id} />
-            <NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />
+            <View style={{
+                flexDirection: "row", 
+                alignItems:"center", 
+                justifyContent: "space-evenly",
+                paddingTop: 10
+            }}>
+                <View style={{
+                            height: 40,
+                            width: 40,
+                            top: 0,
+                            borderRadius: 28,
+                            backgroundColor: "#c44d56",
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                           }}>
+                    <IconButton icon={showNewPost ? 'remove' : "add"} mode="outlined" color="white" onPress={()=>{
+                        setShowNewPost(!showNewPost);
+                    }} />
+                </View>
+                <Button title="Images" icon={tag == 'images' ? 'remove' : "image"} mode="outlined" onPress={()=>{
+                    if(tag == 'images') return setTag('');
+                    setTag('images');
+                }}>Images</Button>
+                <Button title="Media" icon={tag == 'media' ? 'remove' : "subscriptions"} mode="outlined" onPress={()=>{
+                    if(tag == 'media') return setTag('');
+                    setTag('media');
+                }}>Media</Button>
+                <Button title="Embedded" icon={tag == 'embedded' ? 'remove' : "folder"} mode="outlined" onPress={()=>{
+                    if(tag == 'embedded') return setTag('');
+                    setTag('embedded');
+                }}>Files</Button>
+            </View>
+            { showNewPost ? 
+                <NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />
+                : <></>
+            }
         </View>
     )
 

Views/ProfileSettings.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, ImageBackground, ScrollView } from "react-native";
-import { Text, TextInput, Button, Divider } from "react-native-paper";
+import { Text, TextInput, Button, Divider, Checkbox } from "react-native-paper";
 import i18n from "../i18nMessages.js";
 import Moment from 'moment';
 import 'moment/min/locales';
@@ -125,6 +125,51 @@ let ProfileSettings = ()=>{
                     <ProfileCardHorizontal profileObj={GlobalState.me} skipFollow={true} skiptOnPress={true} key={updateKey} />
                 </View>
                 <Button mode="outlined" onPress={updateProfile}>{i18n.t("message.update")}</Button>
+                <Divider />
+                <Text style={{fontSize:20, padding: 5, color:"#666"}}>Optional:</Text>
+                <View style={{flexDirection:"row", justifyContent:"space-between"}}>
+                <Checkbox.Item status={'unchecked'} label="Married" />
+                <Checkbox.Item status={'unchecked'} label="With Kids" />
+                </View>
+                <View style={{flexDirection:"row", justifyContent:"space-between"}}>
+                    <TextInput
+                        label={"Birthday Day:"}
+                        style={{width:"48%", backgroundColor:"rgba(0,0,0,0)"}}
+                        //value={name}
+                        //onChangeText={text => setName(text)}
+                    />
+                    <TextInput
+                        label={"Birtday Month:"}
+                        style={{width:"48%", backgroundColor:"rgba(0,0,0,0)"}}
+                        //value={lastName}
+                        //onChangeText={text => setLastName(text)}
+                    />
+                </View>
+                <TextInput
+                        label={"Local Ministry"}
+                        style={{backgroundColor:"rgba(0,0,0,0)"}}
+                        //value={lastName}
+                        //onChangeText={text => setLastName(text)}
+                    />
+                <TextInput
+                        label={"Country"}
+                        style={{backgroundColor:"rgba(0,0,0,0)"}}
+                        //value={lastName}
+                        //onChangeText={text => setLastName(text)}
+                    />
+                <TextInput
+                        label={"ZipCode"}
+                        style={{backgroundColor:"rgba(0,0,0,0)"}}
+                        //value={lastName}
+                        //onChangeText={text => setLastName(text)}
+                    />
+                <TextInput
+                        label={"Ocupation"}
+                        style={{backgroundColor:"rgba(0,0,0,0)"}}
+                        //value={lastName}
+                        //onChangeText={text => setLastName(text)}
+                    />
+                <Button mode="outlined" onPress={updateProfile}>{i18n.t("message.update")}</Button>
             </ImageBackground>
         </ScrollView>
     )