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

Some more UI changes for circle profile

Browse Source
This commit is contained in:
Adolfo Reyna
2023-07-22 22:52:24 -04:00
parent 919cd4be3b
commit 0c8aa9fc21
7 changed files with 65 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Views/Groups.js
View File

@@ -101,7 +101,7 @@ export default Groups;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
padding: 5, padding: 0,
}, },
title: { title: {
padding: 10, padding: 10,

9
Views/Profile.js
View File

@@ -34,6 +34,7 @@ let Profile = ({ navigation, route }) => {
let [profile, setProfile] = useState({}); let [profile, setProfile] = useState({});
const [showNewPost, setShowNewPost] = useState(false); const [showNewPost, setShowNewPost] = useState(false);
const [tag, setTag] = useState(''); const [tag, setTag] = useState('');
const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
let subscribed = true; let subscribed = true;
@@ -50,6 +51,7 @@ let Profile = ({ navigation, route }) => {
await getProfilePosts(route.params.profileid).then(setPosts); await getProfilePosts(route.params.profileid).then(setPosts);
console.log('Loaded Cache Profile:' + route.params.profileid); console.log('Loaded Cache Profile:' + route.params.profileid);
API.getPosts(route.params.profileid).then((data) => { API.getPosts(route.params.profileid).then((data) => {
setLoading(false);
if(!subscribed) return 0; if(!subscribed) return 0;
setPosts(data); setPosts(data);
storeProfilePosts(route.params.profileid, data); storeProfilePosts(route.params.profileid, data);
@@ -135,20 +137,21 @@ let Profile = ({ navigation, route }) => {
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View> <View>
{(Posts.length !== 0 || profile._id) && {(Posts.length !== 0 || profile._id) ?
<FlatList <FlatList
data={Posts} data={Posts}
renderItem={renderPost} renderItem={renderPost}
keyExtractor={item => item.lastUpdated || item._id || item.ceatedAt} keyExtractor={item => item.lastUpdated || item._id || item.ceatedAt}
ListHeaderComponent={header} ListHeaderComponent={header}
refreshing={Posts.length === 0} refreshing={loading}
initialNumToRender={3} initialNumToRender={3}
maxToRenderPerBatch={3} maxToRenderPerBatch={3}
removeClippedSubviews={true} removeClippedSubviews={true}
onRefresh={() => { onRefresh={() => {
API.getPosts(route.params.profileid).then(setPosts); API.getPosts(route.params.profileid).then(setPosts);
}} }}
/> /> :
<></> //TODO: Add empty profile card here
} }
</View> </View>
<StatusBar style="auto" /> <StatusBar style="auto" />

16
Views/Search.js
View File

@@ -15,10 +15,12 @@ const Search = () => {
useEffect(() => { useEffect(() => {
let subscribed = true; let subscribed = true;
API.searchProfiles('').then((data) => { // Igonred as we are using following
if (subscribed) //API.searchProfiles('').then((data) => {
setProfiles(data.profiles || []); // if (subscribed && data.profiles){
}); // setProfiles(filteredProfiles);
// }
//});
return () => { return () => {
subscribed = false; subscribed = false;
} }
@@ -29,6 +31,7 @@ const Search = () => {
if (queryTimer) clearTimeout(queryTimer); if (queryTimer) clearTimeout(queryTimer);
let timerId = setTimeout(() => { let timerId = setTimeout(() => {
API.searchProfiles(query).then((data) => { API.searchProfiles(query).then((data) => {
console.log("DataChange Search view")
setProfiles(data.profiles || []); setProfiles(data.profiles || []);
}); });
}, 300); }, 300);
@@ -40,6 +43,7 @@ const Search = () => {
const renderFollowing = (({ item }) => { const renderFollowing = (({ item }) => {
return (<ProfileCardHorizontal profileid={item} />); return (<ProfileCardHorizontal profileid={item} />);
}); });
const followers = viewer.following.slice().reverse().slice(0, 10);
return ( return (
<SafeAreaView style={{ flex: 1, backgroundColor: "#edf2f7", }}> <SafeAreaView style={{ flex: 1, backgroundColor: "#edf2f7", }}>
<Searchbar <Searchbar
@@ -59,10 +63,10 @@ const Search = () => {
<FlatList <FlatList
contentContainerStyle={styles.container} contentContainerStyle={styles.container}
numColumns={1} numColumns={1}
data={viewer.following} data={followers}
renderItem={renderFollowing} renderItem={renderFollowing}
keyExtractor={item => item} keyExtractor={item => item}
ListHeaderComponent={<Text style={{fontSize:20, padding:10, alignSelf: "center"}}>Current Following</Text>} ListHeaderComponent={<Text style={{fontSize:20, padding:10, alignSelf: "center"}}>Recently Following</Text>}
/> />
} }
</SafeAreaView> </SafeAreaView>

9
components/GroupCard.js
View File

@@ -6,6 +6,7 @@ import API from './../API.js';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import FollowButton from './basics/FollowButton.js'; import FollowButton from './basics/FollowButton.js';
import ProfilePhotoCircle from './ProfilePhotoCircle.js';
const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png"; const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
@@ -66,8 +67,9 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
right: 0, right: 0,
top: 0, top: 0,
}} /> }} />
<List.Item <List.Item
title={profile.profile?.firstName + " " + profile.profile?.lastName} title={<ProfilePhotoCircle profileid={profile._id} />}
description={profileObj.profile.description} description={profileObj.profile.description}
//left={props => <List.Icon {...props} icon={icon} />} //left={props => <List.Icon {...props} icon={icon} />}
titleStyle={{fontWeight:"bold", fontSize:20}} titleStyle={{fontWeight:"bold", fontSize:20}}
@@ -86,9 +88,10 @@ export default React.memo(ProfileCard);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
content: { content: {
margin: 4, margin: 0,
padding: 0, padding: 0,
borderRadius: 5, borderRadius: 0,
marginBottom: 2,
}, },
centerItems: { centerItems: {
justifyContent: 'center', justifyContent: 'center',

15
components/Post.js
View File

@@ -63,22 +63,25 @@ let Post = (props) => {
<Card.Content style={{ <Card.Content style={{
padding: 0, padding: 0,
margin: 0, margin: 0,
marginBottom: 0
}}> }}>
<Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}> <Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}>
{!post.nonOrganicType ? {!post.nonOrganicType ?
<View> <View>
<ProfilePhotoCircle profileid={post.profileid} /> <ProfilePhotoCircle profileid={post.profileid} />
<View style={{ flexDirection: 'row', alignItems: 'center', margin:0, marginLeft: 35, top: -5 }}> <View style={{ flexDirection: 'row', alignItems: 'center', margin: 0, marginLeft: 37, marginTop: -5, paddingBottom: 2 }}>
{toProfileText} {toProfileText}
<Text style={{ fontWeight: 'normal', fontSize: 12 }}> <Text style={{ fontWeight: 'normal', fontSize: 10 }}>
{" " + Moment(post.createdAt).fromNow()} {" " + Moment(post.createdAt).fromNow()}
</Text> </Text>
</View> </View>
{ cleanContent.length ? {cleanContent.length ?
<Text style={{ fontSize: 15, padding: 0 }}>{cleanContent}</Text> <Text style={{ fontSize: 15, padding: 3 }}>{
cleanContent
}</Text>
: <></> : <></>
} }
<View style={{paddingTop: 5}}> <View style={{ paddingTop: 2 }}>
<Media content={post.content} postId={post._id} post={post} /> <Media content={post.content} postId={post._id} post={post} />
</View> </View>
</View> : </View> :
@@ -90,7 +93,7 @@ let Post = (props) => {
} }
</Hyperlink> </Hyperlink>
</Card.Content> </Card.Content>
<Card.Actions style={{ flexDirection: "row", flow: 4, fontSize: 16 }}> <Card.Actions style={{ flexDirection: "row", flow: 4, fontSize: 16, marginLeft: 0 }}>
<Button <Button
icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"} icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"}
labelStyle={{ fontSize: 16 }} labelStyle={{ fontSize: 16 }}

52
components/ProfileCardHorizontal.js
View File

@@ -6,6 +6,7 @@ import API from './../API.js';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import FollowButton from './basics/FollowButton.js'; import FollowButton from './basics/FollowButton.js';
import ProfilePhotoCircle from './ProfilePhotoCircle.js';
const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png"; const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
@@ -54,39 +55,39 @@ let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj, skipFollow, skip
let photoUrl = profile.profile?.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto; let photoUrl = profile.profile?.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
const onPress = () => { const onPress = () => {
if(skiptOnPress) return 0; if (skiptOnPress) return 0;
return navigation.navigate('Profile', { profileid: profile._id }) return navigation.navigate('Profile', { profileid: profile._id })
} }
//console.log(profile)
return ( return (
<Card style={styles.content} mode="elevated"> <Card style={styles.content} mode="elevated">
<Card.Content> <Card.Content style={{
<View style={{ flexDirection: "row", alignItems: "center" }}> marginLeft: -8,
<View onPress={onPress}> marginTop: -8,
<Avatar.Image size={75} source={{ uri: photoUrl }} /> marginBottom: -4
</View> }}>
<View style={{ paddingLeft: 10 }}> <View style={{ flexDirection: "row", alignItems: "center", marginBottom: -8 }}>
<Title onPress={onPress} numberOfLines={1}> <ProfilePhotoCircle profileid={profile._id} />
<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> </View>
<Paragraph lineBreakMode="clip" numberOfLines={2} style={{ marginLeft: 40, top: 0, fontSize: 13, lineHeight: 0 }} color={"#FFF"}>{profile.profile?.description}</Paragraph>
{
profile.subscribed && Object.keys(profile.subscribed).length ?
<Text style={{ marginLeft: 40, top: 0, fontSize: 11, marginTop: 0, fontSize: 10, fontWeight: "500" }} >{Object.keys(profile.subscribed).length} Following</Text>
: <></>
}
{skipFollow ? <></> : {skipFollow ? <></> :
<View style={{ <View style={{
position: "absolute", position: "absolute",
top: 0, top: 15,
right: 0, right: 10,
width: 50, width: 30,
height: 50, height: 30,
backgroundColor:"#ddd", backgroundColor: "#ddd",
borderRadius: 25, borderRadius: 25,
opacity: 0.7 opacity: 0.5,
}}> }}>
<FollowButton profile={profile._id ? profile : { _id: profileid }} /> <FollowButton profile={profile._id ? profile : { _id: profileid }} iconSize={14} />
</View> </View>
} }
</Card.Content> </Card.Content>
@@ -98,6 +99,11 @@ export default React.memo(ProfileCardHorizontal);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
content: { content: {
margin: 4, margin: 0,
marginBottom: 1,
padding: 0,
//backgroundColor: "rgba(0,0,0,0)"
marginLeft: -5,
marginRight: -5,
}, },
}); });

6
components/ProfilePhotoCircle.js
View File

@@ -51,12 +51,12 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
profileName: { profileName: {
fontSize: 16, fontSize: 17,
fontWeight: 'bold', fontWeight: '500',
}, },
smallProfileName: { smallProfileName: {
fontSize: 14, fontSize: 14,
fontWeight: 'bold', fontWeight: '500',
}, },
}); });