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>
     )