diff --git a/Views/Menu.js b/Views/Menu.js index e0ce081..7bf98d4 100644 --- a/Views/Menu.js +++ b/Views/Menu.js @@ -16,26 +16,23 @@ let MenuView = ()=>{ return ( - - } - expanded={true} - > - } /> - + + } /> + } /> } /> - setValue(newValue)} value={value}> - - Español - - - - English - - - + + setValue(newValue)} value={value}> + + Español + + + + English + + + + ) } diff --git a/Views/Search.js b/Views/Search.js index 5ce1787..0d437aa 100644 --- a/Views/Search.js +++ b/Views/Search.js @@ -1,10 +1,13 @@ import React, { useEffect } from "react"; import { Searchbar } from 'react-native-paper'; -import { StyleSheet, SafeAreaView, FlatList } from 'react-native'; +import { StyleSheet, SafeAreaView, FlatList, Text } from 'react-native'; import API from "../API"; -import ProfileCard from "../components/ProfileCard"; +import ProfileCardHorizontal from "../components/ProfileCardHorizontal"; +import { useSnapshot } from 'valtio'; +import GlobalState from '../contexts/GlobalState.js'; const Search = () => { + const viewer = useSnapshot(GlobalState).me; const [searchQuery, setSearchQuery] = React.useState(''); const [profiles, setProfiles] = React.useState([]); const [queryTimer, setQueryTimer] = React.useState(0); @@ -31,7 +34,10 @@ const Search = () => { setQueryTimer(timerId); }; const renderProfile = (({ item }) => { - return (); + return (); + }); + const renderFollowing = (({ item }) => { + return (); }); return ( @@ -41,14 +47,26 @@ const Search = () => { value={searchQuery} elevation={3} /> + { + searchQuery.length ? item._id} + /> : + <> + Current Following: + item} /> + + } ) } diff --git a/components/ProfileCardHorizontal.js b/components/ProfileCardHorizontal.js new file mode 100644 index 0000000..9fe67d7 --- /dev/null +++ b/components/ProfileCardHorizontal.js @@ -0,0 +1,91 @@ +import React, { useState, useEffect } from 'react'; +import { Text, StyleSheet, View } from 'react-native'; +import Icon from 'react-native-vector-icons/MaterialIcons'; +import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper'; +import API from './../API.js'; +import { useNavigation } from '@react-navigation/native'; +import AsyncStorage from '@react-native-async-storage/async-storage'; +import FollowButton from './basics/FollowButton.js'; + +const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png"; + +const storeName = async (key, value) => { + try { + const jsonValue = JSON.stringify(value) + await AsyncStorage.setItem('Name_' + key, jsonValue) + } catch (e) { + } +} + +const getName = async (key) => { + try { + const value = await AsyncStorage.getItem('Name_' + key) + if (value !== null) { + return JSON.parse(value); + } + } catch (e) { + return [] + } +} + +let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => { + let [profile, setProfile] = useState(profileObj || {}); + const navigation = useNavigation(); + + useEffect(() => { + let subscribed = true; + const getData = async () => { + if (profile?._id) return 0; + let cacheProfile = await getName(profileid); + if (cacheProfile && cacheProfile.profile && subscribed) setProfile(cacheProfile); + let p = await API.getUserProfile(profileid).catch(() => { return {} }); + if (subscribed) setProfile(p); + storeName(profileid, p) + }; + getData(); + return () => { + subscribed = false; + } + }, [profileid]); + + let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : ''; + icon = icon === "person-outline" && profile.subscription && profile.subscription > (new Date() - 0) ? "assignment-ind" : icon; + icon = icon === "group" && profile.isCourse ? "subscriptions" : icon; + let photoUrl = profile.profile?.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto; + + const onPress = () => { + return navigation.navigate('Profile', { profileid: profile._id }) + } + + return ( + + + + + + + + + + <Text> + {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName} + </Text> + + {profile.profile?.description} + + + + + + + + ); +} + +export default React.memo(ProfileCardHorizontal); + +const styles = StyleSheet.create({ + content: { + margin: 4, + }, +});