From de4e8228d85d2b91e3152e1000ce1f1b644bba4e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 30 Dec 2020 21:01:49 -0500 Subject: finished --- src/components/notifications/Notification.tsx | 51 ++++++++++----------------- src/constants/api.ts | 1 + src/services/MomentServices.ts | 28 ++++++++++++++- 3 files changed, 47 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 184e3f27..2bcee89e 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -1,22 +1,9 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; -import { - ActivityIndicatorBase, - Alert, - Image, - StyleSheet, - Text, - View, -} from 'react-native'; +import {Image, StyleSheet, Text, View} from 'react-native'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import {useDispatch, useSelector, useStore} from 'react-redux'; -import {MomentCommentsScreen} from '../../screens'; -import {loadAvatar} from '../../services'; -import { - EMPTY_MOMENTS_LIST, - EMPTY_MOMENT_CATEGORIES, -} from '../../store/initialStates'; -import {userSocialsReducer} from '../../store/reducers'; +import {loadAvatar, loadMomentThumbnail} from '../../services'; import {RootState} from '../../store/rootReducer'; import {NotificationType, ScreenType} from '../../types'; import { @@ -70,20 +57,21 @@ const Notification: React.FC = (props) => { }; }, [id]); - // TODO: this should be moment thumbnail, waiting for that to complete - // useEffect(() => { - // let mounted = true; - // const loadMomentImage = async (user_id: string) => { - // const response = await loadAvatar(user_id, true); - // if (mounted) { - // setMomentURI(response); - // } - // }; - // loadMomentImage(id); - // return () => { - // mounted = false; - // }; - // }, [id, notification_object]); + useEffect(() => { + let mounted = true; + const loadMomentImage = async (moment_id: string) => { + const response = await loadMomentThumbnail(moment_id); + if (mounted) { + setMomentURI(response); + } + }; + if (notification_type === 'CMT' && notification_object) { + loadMomentImage(notification_object.moment_id); + return () => { + mounted = false; + }; + } + }, [id, notification_object, notification_type]); const onNotificationTap = async () => { switch (notification_type) { @@ -144,13 +132,12 @@ const Notification: React.FC = (props) => { {verbage} - {/* TODO: Still WIP */} - {/* {notification_type === 'CMT' && notification_object && ( + {notification_type === 'CMT' && notification_object && ( - )} */} + )} ); }; diff --git a/src/constants/api.ts b/src/constants/api.ts index de43b94d..701070eb 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -18,6 +18,7 @@ export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/'; export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/'; export const SEARCH_ENDPOINT: string = API_URL + 'search/'; export const MOMENTS_ENDPOINT: string = API_URL + 'moments/'; +export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/'; export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/'; export const COMMENTS_ENDPOINT: string = API_URL + 'comments/'; export const FRIENDS_ENDPOINT: string = API_URL + 'friends/'; diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts index 217b5857..6d16de96 100644 --- a/src/services/MomentServices.ts +++ b/src/services/MomentServices.ts @@ -1,6 +1,11 @@ import AsyncStorage from '@react-native-community/async-storage'; import {Alert} from 'react-native'; -import {COMMENTS_ENDPOINT, MOMENTS_ENDPOINT} from '../constants'; +import RNFetchBlob from 'rn-fetch-blob'; +import { + COMMENTS_ENDPOINT, + MOMENTS_ENDPOINT, + MOMENT_THUMBNAIL_ENDPOINT, +} from '../constants'; import { ERROR_FAILED_TO_COMMENT, ERROR_UPLOAD, @@ -190,3 +195,24 @@ export const deleteMoment = async (momentId: string) => { return false; } }; + +export const loadMomentThumbnail = async (momentId: string) => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await RNFetchBlob.config({ + fileCache: true, + appendExt: 'jpg', + }).fetch('GET', MOMENT_THUMBNAIL_ENDPOINT + `${momentId}/`, { + Authorization: 'Token ' + token, + }); + const status = response.info().status; + if (status === 200) { + return response.path(); + } else { + return ''; + } + } catch (error) { + console.log(error); + return ''; + } +}; -- cgit v1.2.3-70-g09d2 From 1c9a6321ea355e202a043ffe5b6044f94afbeb77 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 30 Dec 2020 21:38:29 -0500 Subject: fixed padding --- src/components/notifications/Notification.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 2bcee89e..761ea950 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -42,6 +42,7 @@ const Notification: React.FC = (props) => { const [avatarURI, setAvatarURI] = useState(undefined); const [momentURI, setMomentURI] = useState(undefined); const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)'; + const contentRightMargin = notification_type === 'CMT' ? '15%' : 0; useEffect(() => { let mounted = true; @@ -121,22 +122,20 @@ const Notification: React.FC = (props) => { style={styles.avatar} source={ avatarURI - ? {uri: avatarURI, cache: 'only-if-cached'} + ? {uri: avatarURI} : require('../../assets/images/avatar-placeholder.png') } /> - + {first_name} {last_name} {verbage} {notification_type === 'CMT' && notification_object && ( - + )} ); -- cgit v1.2.3-70-g09d2 From a296cf6e26ad57f951487c94009cb1693c281c1f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 15 Jan 2021 17:16:20 -0500 Subject: styling change --- src/components/notifications/Notification.tsx | 2 +- src/screens/main/NotificationsScreen.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 761ea950..62aa0a0b 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -149,7 +149,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, avatarContainer: { - marginLeft: '5%', + marginLeft: '8%', flex: 1, justifyContent: 'center', }, diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 8aa47299..ba52d988 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -134,7 +134,7 @@ const NotificationsScreen: React.FC = () => { const styles = StyleSheet.create({ header: { - marginLeft: '5%', + marginLeft: '8%', marginTop: '5%', alignSelf: 'flex-start', flexDirection: 'column', @@ -156,10 +156,10 @@ const styles = StyleSheet.create({ backgroundColor: '#f3f2f2', }, sectionHeader: { - marginLeft: '5%', + marginLeft: '8%', marginTop: '5%', marginBottom: '2%', - fontSize: 16, + fontSize: 15, }, }); -- cgit v1.2.3-70-g09d2 From b138c10822e399c84e54c35e2775e4eb53da1567 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 15 Jan 2021 17:53:05 -0500 Subject: fixed some bugs --- src/components/notifications/Notification.tsx | 6 ++---- src/screens/main/NotificationsScreen.tsx | 8 +------- src/services/MomentServices.ts | 4 ++-- 3 files changed, 5 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 62aa0a0b..5efa8b98 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -15,7 +15,6 @@ import { interface NotificationProps { item: NotificationType; - userXId: string | undefined; screenType: ScreenType; } @@ -28,7 +27,6 @@ const Notification: React.FC = (props) => { notification_object, unread, }, - userXId, screenType, } = props; const navigation = useNavigation(); @@ -62,7 +60,7 @@ const Notification: React.FC = (props) => { let mounted = true; const loadMomentImage = async (moment_id: string) => { const response = await loadMomentThumbnail(moment_id); - if (mounted) { + if (mounted && response) { setMomentURI(response); } }; @@ -97,7 +95,7 @@ const Notification: React.FC = (props) => { if (moment) { navigation.push('IndividualMoment', { moment, - userXId, + userXId: undefined, // we're only viewing our own moment here screenType, }); setTimeout(() => { diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index ba52d988..da1e7a2b 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -96,13 +96,7 @@ const NotificationsScreen: React.FC = () => { }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( - + ); const renderSectionHeader = ({section: {title, data}}) => diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts index 6d16de96..514b674c 100644 --- a/src/services/MomentServices.ts +++ b/src/services/MomentServices.ts @@ -209,10 +209,10 @@ export const loadMomentThumbnail = async (momentId: string) => { if (status === 200) { return response.path(); } else { - return ''; + return undefined; } } catch (error) { console.log(error); - return ''; + return undefined; } }; -- cgit v1.2.3-70-g09d2 From c2f9dfe523f446104bbf1ae08648f0527d5264b3 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 15 Jan 2021 19:03:21 -0500 Subject: fixed padding --- src/components/notifications/Notification.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 5efa8b98..301a3c90 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -6,12 +6,7 @@ import {useDispatch, useSelector, useStore} from 'react-redux'; import {loadAvatar, loadMomentThumbnail} from '../../services'; import {RootState} from '../../store/rootReducer'; import {NotificationType, ScreenType} from '../../types'; -import { - fetchUserX, - SCREEN_HEIGHT, - SCREEN_WIDTH, - userXInStore, -} from '../../utils'; +import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils'; interface NotificationProps { item: NotificationType; @@ -40,7 +35,6 @@ const Notification: React.FC = (props) => { const [avatarURI, setAvatarURI] = useState(undefined); const [momentURI, setMomentURI] = useState(undefined); const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)'; - const contentRightMargin = notification_type === 'CMT' ? '15%' : 0; useEffect(() => { let mounted = true; @@ -125,8 +119,7 @@ const Notification: React.FC = (props) => { } /> - + {first_name} {last_name} @@ -162,7 +155,7 @@ const styles = StyleSheet.create({ height: '80%', flexDirection: 'column', justifyContent: 'space-around', - marginRight: SCREEN_WIDTH / 6, + marginRight: '15%', }, actorName: { fontSize: 15, -- cgit v1.2.3-70-g09d2 From 33b3bff63969e9da23722e8a70f60c5b94fe3cfb Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 15 Jan 2021 20:53:49 -0500 Subject: not fetching data in child component --- src/components/notifications/Notification.tsx | 10 ++++------ src/screens/main/NotificationsScreen.tsx | 9 ++++++++- 2 files changed, 12 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 301a3c90..94937053 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -2,15 +2,16 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; -import {useDispatch, useSelector, useStore} from 'react-redux'; +import {useDispatch, useStore} from 'react-redux'; import {loadAvatar, loadMomentThumbnail} from '../../services'; import {RootState} from '../../store/rootReducer'; -import {NotificationType, ScreenType} from '../../types'; +import {MomentType, NotificationType, ScreenType} from '../../types'; import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils'; interface NotificationProps { item: NotificationType; screenType: ScreenType; + moments: MomentType[]; } const Notification: React.FC = (props) => { @@ -23,14 +24,11 @@ const Notification: React.FC = (props) => { unread, }, screenType, + moments: loggedInUserMoments, } = props; const navigation = useNavigation(); const state: RootState = useStore().getState(); const dispatch = useDispatch(); - const {moments: loggedInUserMoments} = - notification_type === 'CMT' - ? useSelector((state: RootState) => state.moments) - : {moments: undefined}; const [avatarURI, setAvatarURI] = useState(undefined); const [momentURI, setMomentURI] = useState(undefined); diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index da1e7a2b..219a0be9 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -18,6 +18,9 @@ import {getDateAge, SCREEN_HEIGHT} from '../../utils'; const NotificationsScreen: React.FC = () => { const {user: loggedInUser} = useSelector((state: RootState) => state.user); + const {moments: loggedInUserMoments} = useSelector( + (state: RootState) => state.moments, + ); const [refreshing, setRefreshing] = useState(false); // used for figuring out which ones are unread const [lastViewed, setLastViewed] = useState( @@ -96,7 +99,11 @@ const NotificationsScreen: React.FC = () => { }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( - + ); const renderSectionHeader = ({section: {title, data}}) => -- cgit v1.2.3-70-g09d2