aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/profile/Content.tsx79
-rw-r--r--src/components/profile/Moment.tsx41
-rw-r--r--src/components/profile/MomentTile.tsx33
3 files changed, 130 insertions, 23 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 8d368747..d52696a7 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,8 +1,11 @@
-import React, {useState} from 'react';
-import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
-import {Text} from 'react-native-animatable';
+import AsyncStorage from '@react-native-community/async-storage';
+import React, {useCallback, useEffect, useState} from 'react';
+import {Alert, LayoutChangeEvent, StyleSheet, View} from 'react-native';
+<!-- import {Text} from 'react-native-animatable'; -->
import Animated from 'react-native-reanimated';
-import {defaultMoments} from '../../constants';
+import {AuthContext} from '../../routes/authentication';
+import {MomentType, UserType} from 'src/types';
+import {defaultMoments, MOMENTS_ENDPOINT} from '../../constants';
import {SCREEN_HEIGHT} from '../../utils';
import TaggsBar from '../taggs/TaggsBar';
import Moment from './Moment';
@@ -14,12 +17,70 @@ interface ContentProps {
y: Animated.Value<number>;
isProfileView: boolean;
}
+
const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
const [profileBodyHeight, setProfileBodyHeight] = useState(0);
+ const {newMomentsAvailable, updateMoments} = React.useContext(AuthContext);
+
+ const [imagesList, setImagesList] = useState<MomentType[]>([]);
+ const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>(
+ new Map(),
+ );
const onLayout = (e: LayoutChangeEvent) => {
const {height} = e.nativeEvent.layout;
setProfileBodyHeight(height);
};
+
+ const {userId, username} = user;
+
+ const createImagesMap = useCallback(() => {
+ var map = new Map();
+ imagesList.forEach(function (imageObject) {
+ var moment_category = imageObject.moment_category;
+ if (map.has(moment_category)) {
+ map.get(moment_category).push(imageObject);
+ } else {
+ map.set(moment_category, [imageObject]);
+ }
+ });
+
+ setImagesMap(map);
+ console.log(map);
+ }, [imagesList]);
+
+ useEffect(() => {
+ if (!userId) {
+ return;
+ }
+
+ const retrieveMoments = async () => {
+ try {
+ const token = await AsyncStorage.getItem('token');
+ const response = await fetch(MOMENTS_ENDPOINT + `${userId}/`, {
+ method: 'GET',
+ headers: {
+ Authorization: 'Token ' + token,
+ },
+ });
+ const status = response.status;
+ if (status === 200) {
+ const data = await response.json();
+ setImagesList(data);
+ updateMoments(!newMomentsAvailable);
+ } else {
+ Alert.alert('Could not load moments!');
+ }
+ } catch (err) {
+ Alert.alert('Could not load moments!');
+ }
+ };
+
+ if (newMomentsAvailable) {
+ retrieveMoments();
+ createImagesMap();
+ }
+ }, [userId, createImagesMap, updateMoments, newMomentsAvailable]);
+
return (
<Animated.ScrollView
style={styles.container}
@@ -30,14 +91,16 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
<ProfileCutout>
<ProfileHeader {...{isProfileView}} />
</ProfileCutout>
+ <ProfileBody {...{onLayout}} />
+ <TaggsBar {...{y, profileBodyHeight}} />
<ProfileBody {...{onLayout, isProfileView}} />
<TaggsBar {...{y, profileBodyHeight, isProfileView}} />
{!isProfileView ? (
<View style={styles.momentsContainer}>
- {defaultMoments.map((title, index) => (
- <Moment key={index} title={title} images={[]} />
- ))}
- </View>
+ {defaultMoments.map((title, index) => (
+ <Moment key={index} title={title} images={imagesMap.get(title)} />
+ ))}
+ </View>
) : (
<React.Fragment />
)}
diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx
index 6ae8d38e..be7cbfba 100644
--- a/src/components/profile/Moment.tsx
+++ b/src/components/profile/Moment.tsx
@@ -1,6 +1,6 @@
import {useNavigation} from '@react-navigation/native';
import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Alert, StyleSheet, View} from 'react-native';
import {Text} from 'react-native-animatable';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
@@ -9,10 +9,12 @@ import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
import {MOMENTS_TITLE_COLOR} from '../../constants';
import {SCREEN_WIDTH} from '../../utils';
import ImagePicker from 'react-native-image-crop-picker';
+import MomentTile from './MomentTile';
+import {MomentType} from 'src/types';
interface MomentProps {
title: string;
- images: Array<string>;
+ images: MomentType[] | undefined;
}
const Moment: React.FC<MomentProps> = ({title, images}) => {
@@ -28,10 +30,13 @@ const Moment: React.FC<MomentProps> = ({title, images}) => {
})
.then((picture) => {
if ('path' in picture) {
- navigation.navigate('CaptionScreen', {title: title, image: picture});
+ navigation.navigate('CaptionScreen', {
+ title: title,
+ image: picture,
+ });
}
})
- .catch(() => {});
+ .catch((err) => {Alert.alert('Unable to upload moment!');});
};
return (
<View style={styles.container}>
@@ -47,17 +52,23 @@ const Moment: React.FC<MomentProps> = ({title, images}) => {
horizontal
showsHorizontalScrollIndicator={false}
style={styles.scrollContainer}>
- <TouchableOpacity onPress={() => navigateToImagePicker()}>
- <LinearGradient
- colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
- <View style={styles.defaultImage}>
- <BigPlusIcon width={50} height={50} />
- <Text style={styles.defaultImageText}>
- Add a moment of your {title.toLowerCase()}!
- </Text>
- </View>
- </LinearGradient>
- </TouchableOpacity>
+ {images &&
+ images.map((imageObj: MomentType) => (
+ <MomentTile key={imageObj.moment_id} moment={imageObj} />
+ ))}
+ {(images === undefined || images.length === 0) && (
+ <TouchableOpacity onPress={() => navigateToImagePicker()}>
+ <LinearGradient
+ colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
+ <View style={styles.defaultImage}>
+ <BigPlusIcon width={50} height={50} />
+ <Text style={styles.defaultImageText}>
+ Add a moment of your {title.toLowerCase()}!
+ </Text>
+ </View>
+ </LinearGradient>
+ </TouchableOpacity>
+ )}
</ScrollView>
</View>
);
diff --git a/src/components/profile/MomentTile.tsx b/src/components/profile/MomentTile.tsx
new file mode 100644
index 00000000..70b20d40
--- /dev/null
+++ b/src/components/profile/MomentTile.tsx
@@ -0,0 +1,33 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
+import {MomentType} from 'src/types';
+
+interface MomentTileProps {
+ moment: MomentType;
+}
+const MomentTile: React.FC<MomentTileProps> = ({moment}) => {
+ const navigation = useNavigation();
+ const {path_hash} = moment;
+ return (
+ <TouchableOpacity
+ onPress={() => {
+ navigation.navigate('IndividualMoment', {moment});
+ }}>
+ <View style={styles.image}>
+ <Image style={styles.image} source={{uri: path_hash}} />
+ </View>
+ </TouchableOpacity>
+ );
+};
+
+const styles = StyleSheet.create({
+ image: {
+ aspectRatio: 1,
+ height: '100%',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ },
+});
+export default MomentTile;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 21:02:18 +0000