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({
container: {
padding: 5,
padding: 0,
},
title: {
padding: 10,

9
Views/Profile.js
View File

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

16
Views/Search.js
View File

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

9
components/GroupCard.js
View File

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

17
components/Post.js
View File

@@ -63,23 +63,26 @@ let Post = (props) => {
<Card.Content style={{
padding: 0,
margin: 0,
marginBottom: 0
}}>
<Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}>
{!post.nonOrganicType ?
<View>
<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}
<Text style={{ fontWeight: 'normal', fontSize: 12 }}>
<Text style={{ fontWeight: 'normal', fontSize: 10 }}>
{" " + Moment(post.createdAt).fromNow()}
</Text>
</View>
{ cleanContent.length ?
<Text style={{ fontSize: 15, padding: 0 }}>{cleanContent}</Text>
{cleanContent.length ?
<Text style={{ fontSize: 15, padding: 3 }}>{
cleanContent
}</Text>
: <></>
}
<View style={{paddingTop: 5}}>
<Media content={post.content} postId={post._id} post={post} />
<View style={{ paddingTop: 2 }}>
<Media content={post.content} postId={post._id} post={post} />
</View>
</View> :
<View>
@@ -90,7 +93,7 @@ let Post = (props) => {
}
</Hyperlink>
</Card.Content>
<Card.Actions style={{ flexDirection: "row", flow: 4, fontSize: 16 }}>
<Card.Actions style={{ flexDirection: "row", flow: 4, fontSize: 16, marginLeft: 0 }}>
<Button
icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"}
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 AsyncStorage from '@react-native-async-storage/async-storage';
import FollowButton from './basics/FollowButton.js';
import ProfilePhotoCircle from './ProfilePhotoCircle.js';
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;
const onPress = () => {
if(skiptOnPress) return 0;
if (skiptOnPress) return 0;
return navigation.navigate('Profile', { profileid: profile._id })
}
//console.log(profile)
return (
<Card style={styles.content} mode="elevated">
<Card.Content>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<View onPress={onPress}>
<Avatar.Image size={75} 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>
<Card.Content style={{
marginLeft: -8,
marginTop: -8,
marginBottom: -4
}}>
<View style={{ flexDirection: "row", alignItems: "center", marginBottom: -8 }}>
<ProfilePhotoCircle profileid={profile._id} />
</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 ? <></> :
<View style={{
position: "absolute",
top: 0,
right: 0,
width: 50,
height: 50,
backgroundColor:"#ddd",
top: 15,
right: 10,
width: 30,
height: 30,
backgroundColor: "#ddd",
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>
}
</Card.Content>
@@ -98,6 +99,11 @@ export default React.memo(ProfileCardHorizontal);
const styles = StyleSheet.create({
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',
},
profileName: {
fontSize: 16,
fontWeight: 'bold',
fontSize: 17,
fontWeight: '500',
},
smallProfileName: {
fontSize: 14,
fontWeight: 'bold',
fontWeight: '500',
},
});