adolforeyna/EMI-ExpoAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Horizontal Users

Browse Source
This commit is contained in:
Adolfo Reyna
2022-12-22 17:52:04 -05:00
parent 7bf7d8feae
commit 3d50977520
3 changed files with 129 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
Views/Menu.js
View File

@@ -16,26 +16,23 @@ let MenuView = ()=>{
return (
<View>
<List.Section title="Settings">
<List.Accordion
title="User Actions"
left={props => <List.Icon {...props} icon="person" />}
expanded={true}
>
<List.Item title="Sign out" left={props => <List.Icon {...props} icon="logout" />} />
</List.Accordion>
<List.Section title="User Actions">
<List.Item title="Settings" left={props => <List.Icon {...props} icon="settings" />} />
<List.Item title="Sign out" left={props => <List.Icon {...props} icon="logout" />} />
<List.Item title="About" left={props => <List.Icon {...props} icon="more" />} />
</List.Section>
<RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
<View>
<Text>Español</Text>
<RadioButton value="es" />
</View>
<View>
<Text>English</Text>
<RadioButton value="en" />
</View>
</RadioButton.Group>
<View>
<RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
<View>
<Text>Español</Text>
<RadioButton value="es" />
</View>
<View>
<Text>English</Text>
<RadioButton value="en" />
</View>
</RadioButton.Group>
</View>
</View>
)
}

28
Views/Search.js
View File

@@ -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 (<ProfileCard profileObj={item} />);
return (<ProfileCardHorizontal profileObj={item} />);
});
const renderFollowing = (({ item }) => {
return (<ProfileCardHorizontal profileid={item} />);
});
return (
<SafeAreaView style={{ flex: 1 }}>
@@ -41,14 +47,26 @@ const Search = () => {
value={searchQuery}
elevation={3}
/>
{
searchQuery.length ?
<FlatList
contentContainerStyle={styles.container}
numColumns={2}
columnWrapperStyle={{ justifyContent: "space-evenly" }}
numColumns={1}
data={profiles}
renderItem={renderProfile}
keyExtractor={item => item._id}
/> :
<>
<Text>Current Following:</Text>
<FlatList
contentContainerStyle={styles.container}
numColumns={1}
data={viewer.following}
renderItem={renderFollowing}
keyExtractor={item => item}
/>
</>
}
</SafeAreaView>
)
}

91
components/ProfileCardHorizontal.js Normal file
View File

@@ -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 (
<Card style={styles.content} mode="elevated">
<Card.Content>
<View style={{ flexDirection: "row" }}>
<View onPress={onPress}>
<Avatar.Image size={100} source={{ uri: photoUrl }} />
</View>
<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>
</View>
<View>
<FollowButton profile={profile._id ? profile : {_id: profileid}} />
</View>
</View>
</Card.Content>
</Card>
);
}
export default React.memo(ProfileCardHorizontal);
const styles = StyleSheet.create({
content: {
margin: 4,
},
});