diff --git a/App.js b/App.js index 3991853..f4f9618 100644 --- a/App.js +++ b/App.js @@ -25,6 +25,7 @@ import InviteView from './Views/Invite.js'; import MediaView from './components/MediaView.js'; import { useSnapshot } from 'valtio'; import GlobalState from './contexts/GlobalState.js'; +import NewGroup from './Views/NewGroup.js'; const Tab = createBottomTabNavigator(); @@ -148,7 +149,7 @@ const MainNavigation = () => { }} listeners={({ navigation, route }) => ({ tabPress: e => { - navigation.navigate('Feed') + navigation.navigate('Feed', {reRender: Math.random()}); }, })} @@ -247,7 +248,7 @@ export default function App() { {props.navigation.canGoBack() ? { props.navigation.goBack(); - }} /> : <>} + }} /> : {props.navigation.navigate('Menu');}} />} {alert("Chats are comming soon.")}} /> {props.navigation.navigate("Search")}} /> @@ -268,6 +269,10 @@ export default function App() { name="NewPost" component={NewPostView} /> + { let Feed = ({ navigation, route }) => { let [Posts, setPosts] = useState([]); + const flatListRef = React.useRef() console.log("Render Feed"); useEffect(() => { let subscribed = true; @@ -39,15 +40,18 @@ let Feed = ({ navigation, route }) => { if (route.params && route.params.profileid) { return navigation.navigate('Profile', { profileid: route.params.profileid }) } - API.getMe().then((me) => { - if (subscribed){ - GlobalState.me = me; - } - }); - console.log("Feed from cache") - let cacheFeed = await getFeed() || []; - if (cacheFeed.length && subscribed) setPosts(cacheFeed); - console.log("Feed from server") + if(!route.params?.reRender){ + API.getMe().then((me) => { + if (subscribed){ + GlobalState.me = me; + } + }); + console.log("Feed from cache") + let cacheFeed = await getFeed() || []; + if (cacheFeed.length && subscribed) setPosts(cacheFeed); + console.log("Feed from server") + } + flatListRef.current.scrollToOffset({ animated: true, offset: 0 }) let posts = await API.getPosts(); if (subscribed) { setPosts(posts); @@ -83,6 +87,7 @@ let Feed = ({ navigation, route }) => { maxToRenderPerBatch={3} removeClippedSubviews={true} style={styles.container} + ref={flatListRef} /> ); diff --git a/Views/Groups.js b/Views/Groups.js index 3da19db..2d41a8b 100644 --- a/Views/Groups.js +++ b/Views/Groups.js @@ -1,13 +1,15 @@ -import React, { useEffect } from "react"; -import { Searchbar, Title } from 'react-native-paper'; -import { StyleSheet, SafeAreaView, FlatList } from 'react-native'; +import React, { useEffect, useRef } from "react"; +import { Searchbar, Title, IconButton } from 'react-native-paper'; +import { StyleSheet, SafeAreaView, FlatList, View } from 'react-native'; import API from "../API"; import GroupCard from "../components/GroupCard"; -const Groups = () => { +const Groups = ({navigation}) => { const [searchQuery, setSearchQuery] = React.useState(''); + const [searchVisible, setSearchVisible] = React.useState(false); const [groups, setGroups] = React.useState([]); const [queryTimer, setQueryTimer] = React.useState(0); + const searchTextBox = useRef(null); useEffect(() => { let subscribed = true; @@ -43,18 +45,53 @@ const Groups = () => { }); return ( - item._id} - ListHeaderComponent={searchQuery ? <> : Groups you follow:} + ListHeaderComponent={ + <> + + {!searchVisible ? + + { + navigation.navigate('NewGroup'); + }} /> + { + setSearchVisible(true); + console.log(searchTextBox) + //searchTextBox.current.focus(); + }} /> + : + { + setSearchVisible(false); + }} + forwardRef={searchTextBox} + /> + } + + {searchQuery ? "Results:" : "Your Groups:"} + + } + style={{backgroundColor: "#edf2f7",}} /> ) @@ -68,6 +105,7 @@ const styles = StyleSheet.create({ }, title: { padding: 10, + paddingTop:5, fontSize: 30, marginTop: 15, fontWeight: "bold", diff --git a/Views/NewGroup.js b/Views/NewGroup.js new file mode 100644 index 0000000..cc8db75 --- /dev/null +++ b/Views/NewGroup.js @@ -0,0 +1,39 @@ +import React, { useEffect } from "react"; +import { Searchbar, Title, IconButton } from 'react-native-paper'; +import { StyleSheet, SafeAreaView, ImageBackground, View } from 'react-native'; +import API from "../API"; +import GroupCard from "../components/GroupCard"; + +const NewGroup = () => { + + + useEffect(() => { + }, []) + + return ( + + + New Group: + + + ) +} + +export default NewGroup; + +const styles = StyleSheet.create({ + container: { + padding: 5, + }, + title: { + padding: 10, + paddingTop:5, + fontSize: 30, + marginTop: 15, + fontWeight: "bold", + color: "#777" + } +}); diff --git a/components/GroupCard.js b/components/GroupCard.js index 37ed6d2..bebac7e 100644 --- a/components/GroupCard.js +++ b/components/GroupCard.js @@ -60,11 +60,11 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => { return ( - + { descriptionStyle={{}} onPress={onPress} descriptionNumberOfLines={4} + style={{padding:0}} /> @@ -86,6 +87,8 @@ export default React.memo(ProfileCard); const styles = StyleSheet.create({ content: { margin: 4, + padding: 0, + borderRadius: 10, }, centerItems: { justifyContent: 'center', diff --git a/components/Post.js b/components/Post.js index 9fde10e..ea9f696 100644 --- a/components/Post.js +++ b/components/Post.js @@ -124,7 +124,8 @@ const styles = StyleSheet.create({ }, card: { margin: 8, - backgroundColor: "#FFFFFF" + backgroundColor: "#FFFFFF", + borderRadius: 10, }, comment: { margin: 8,