From bbeb05fcc6b1c45f9273d1a78000c8f143d62451 Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Wed, 3 Feb 2021 17:02:01 -0800 Subject: Done --- src/components/notifications/Notification.tsx | 52 +++++++++++++++------------ src/services/MomentService.ts | 29 ++++++++++++++- src/types/types.ts | 4 +++ 3 files changed, 62 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 951a5bf6..077cdb64 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -8,8 +8,8 @@ import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import {ERROR_DELETED_OBJECT} from '../../constants/strings'; import { loadImageFromURL, - loadMoments, loadMomentThumbnail, + loadSingleMoment, } from '../../services'; import { acceptFriendRequest, @@ -19,7 +19,12 @@ import { updateUserXFriends, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {MomentType, NotificationType, ScreenType} from '../../types'; +import { + MomentType, + MomentWithUserType, + NotificationType, + ScreenType, +} from '../../types'; import { fetchUserX, getTokenOrLogout, @@ -53,7 +58,6 @@ const Notification: React.FC = (props) => { const [avatar, setAvatar] = useState(undefined); const [momentURI, setMomentURI] = useState(undefined); - const [onTapLoadProfile, setOnTapLoadProfile] = useState(false); useEffect(() => { (async () => { @@ -66,16 +70,6 @@ const Notification: React.FC = (props) => { })(); }, []); - useEffect(() => { - if (onTapLoadProfile) { - fetchUserX(dispatch, {userId: id, username: username}, screenType); - } - return () => { - setOnTapLoadProfile(false); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [onTapLoadProfile]); - useEffect(() => { let mounted = true; const loadMomentImage = async (moment_id: string) => { @@ -139,23 +133,37 @@ const Notification: React.FC = (props) => { let moment: MomentType | undefined = loggedInUserMoments?.find( (m) => m.moment_id === moment_id, ); + let userXId; - // If moment does not belong to the logged in user, then the comment was probably a reply to logged in user's comment - // on userX's moment - // Load moments for userX + // If moment does not belong to the logged in user, then the comment was probably a reply to some comment + // Figure out who userX is and Load details for userX if (!moment) { - let moments: MomentType[] = []; try { - //Populate local state in the mean time - setOnTapLoadProfile(true); const token = await getTokenOrLogout(dispatch); - moments = await loadMoments(id, token); + const momentAndUser: + | MomentWithUserType + | undefined = (await loadSingleMoment( + moment_id, + token, + )) as MomentWithUserType; + + if (momentAndUser) { + const {user, ...momentFetched} = momentAndUser; + userXId = user.id; + moment_id = momentFetched.moment_id; + moment = {...momentFetched}; + if (!userXInStore(state, screenType, user.id)) { + fetchUserX( + dispatch, + {username: user.username, userId: user.id}, + screenType, + ); + } + } } catch (err) { console.log(err); } - moment = moments?.find((m) => m.moment_id === moment_id); - userXId = id; } //Now if moment was found, navigate to the respective moment diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index 2354d18e..514ca776 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -1,7 +1,7 @@ import AsyncStorage from '@react-native-community/async-storage'; import RNFetchBlob from 'rn-fetch-blob'; import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants'; -import {MomentType} from '../types'; +import {MomentType, MomentWithUserType} from '../types'; import {checkImageUploadStatus} from '../utils'; export const postMoment: ( @@ -78,6 +78,33 @@ export const loadMoments: ( return moments; }; +export const loadSingleMoment: ( + momentId: string, + token: string, +) => Promise = async (momentId, token) => { + let moment: MomentWithUserType; + try { + const response = await fetch(MOMENTS_ENDPOINT + `${momentId}/`, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + const status = response.status; + if (status === 200) { + const data = await response.json(); + moment = data; + } else { + console.log('Could not load moments!'); + return undefined; + } + } catch (err) { + console.log(err); + return undefined; + } + return moment; +}; + export const deleteMoment = async (momentId: string) => { try { const token = await AsyncStorage.getItem('token'); diff --git a/src/types/types.ts b/src/types/types.ts index f1ba12f4..e71c4e5c 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -88,6 +88,10 @@ export interface MomentType { thumbnail_url: string; } +export interface MomentWithUserType extends MomentType { + user: ProfilePreviewType; +} + export interface CommentBaseType { comment_id: string; comment: string; -- cgit v1.2.3-70-g09d2 From 607e0204ab1a8b2d91a96ba58abb34423bcbfcca Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Thu, 4 Feb 2021 00:50:30 -0800 Subject: Clean refactoring for comment notifications --- src/components/notifications/Notification.tsx | 144 +++++++++++++------------- src/screens/main/NotificationsScreen.tsx | 5 +- src/types/types.ts | 28 +++-- 3 files changed, 94 insertions(+), 83 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 077cdb64..93853198 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -6,11 +6,7 @@ import LinearGradient from 'react-native-linear-gradient'; import {useDispatch, useStore} from 'react-redux'; import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import {ERROR_DELETED_OBJECT} from '../../constants/strings'; -import { - loadImageFromURL, - loadMomentThumbnail, - loadSingleMoment, -} from '../../services'; +import {loadImageFromURL} from '../../services'; import { acceptFriendRequest, declineFriendRequest, @@ -20,23 +16,21 @@ import { } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import { + CommentNotificationType, + CommentThreadType, MomentType, - MomentWithUserType, NotificationType, ScreenType, + ThreadNotificationType, + UserType, } from '../../types'; -import { - fetchUserX, - getTokenOrLogout, - SCREEN_HEIGHT, - userXInStore, -} from '../../utils'; +import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils'; import AcceptDeclineButtons from '../common/AcceptDeclineButtons'; interface NotificationProps { item: NotificationType; screenType: ScreenType; - moments: MomentType[]; + loggedInUser: UserType; } const Notification: React.FC = (props) => { @@ -49,7 +43,7 @@ const Notification: React.FC = (props) => { unread, }, screenType, - moments: loggedInUserMoments, + loggedInUser, } = props; const navigation = useNavigation(); @@ -72,30 +66,34 @@ const Notification: React.FC = (props) => { useEffect(() => { let mounted = true; - const loadMomentImage = async (moment_id: string) => { - const response = await loadMomentThumbnail(moment_id); - if (mounted && response) { - setMomentURI(response); + const setMomentThumbnailUrl = async (url: string) => { + if (mounted && url) { + setMomentURI(url); } else { // if not set to empty, it will re-use the previous notification's state setMomentURI(undefined); } }; - if ( - (notification_type === 'CMT' || + if (notification_object) { + let url: string | undefined; + let obj; + if ( notification_type === 'MOM_3+' || - notification_type === 'MOM_FRIEND') && - notification_object - ) { - loadMomentImage( - notification_object.moment_id - ? notification_object.moment_id - : notification_object.parent_comment.moment_id, - ); - return () => { - mounted = false; - }; + notification_type === 'MOM_FRIEND' + ) { + obj = notification_object as MomentType; + url = obj.thumbnail_url; + } else if (notification_type === 'CMT') { + obj = notification_object as CommentNotificationType; + url = obj.notification_data.thumbnail_url; + } + if (url) { + setMomentThumbnailUrl(url); + } } + return () => { + mounted = false; + }; }, [id, notification_object, notification_type]); const onNotificationTap = async () => { @@ -120,60 +118,58 @@ const Notification: React.FC = (props) => { Alert.alert(ERROR_DELETED_OBJECT); break; } - let {moment_id} = notification_object; - let {comment_id} = notification_object; - //If this is a thread, get comment_id and moment_id from parent_comment - if (!notification_object?.moment_id) { - moment_id = notification_object?.parent_comment?.moment_id; - comment_id = notification_object?.parent_comment?.comment_id; - } - - // Now find the moment we need to display - let moment: MomentType | undefined = loggedInUserMoments?.find( - (m) => m.moment_id === moment_id, - ); + /** + * Notification object knows + * 1 - Which comment + * 2 - Which user + * The comment / reply belongs to + * STEP 1 : Populate reply / comment + * STEP 2 : Load user data if moment does not belong to the logged in user + * STEP 3 : Navigate to relevant moment + */ + let comment_id: string; + let not_object; + let reply: CommentThreadType | undefined; let userXId; - // If moment does not belong to the logged in user, then the comment was probably a reply to some comment - // Figure out who userX is and Load details for userX - if (!moment) { - try { - const token = await getTokenOrLogout(dispatch); - const momentAndUser: - | MomentWithUserType - | undefined = (await loadSingleMoment( - moment_id, - token, - )) as MomentWithUserType; + // STEP 1 + if ('parent_comment' in notification_object) { + //This is a reply + not_object = notification_object as ThreadNotificationType; + comment_id = not_object.parent_comment; + reply = { + parent_comment: {comment_id: comment_id}, + comment_id: not_object.comment_id, + }; + } else { + not_object = notification_object as CommentNotificationType; + comment_id = not_object.comment_id; + } - if (momentAndUser) { - const {user, ...momentFetched} = momentAndUser; - userXId = user.id; - moment_id = momentFetched.moment_id; - moment = {...momentFetched}; - if (!userXInStore(state, screenType, user.id)) { - fetchUserX( - dispatch, - {username: user.username, userId: user.id}, - screenType, - ); - } - } - } catch (err) { - console.log(err); - } + //STEP 2 + const {user, ...moment} = not_object.notification_data; + if (user.id !== loggedInUser.userId) { + fetchUserX( + dispatch, + {userId: user.id, username: user.username}, + screenType, + ); + userXId = user.id; } - //Now if moment was found, navigate to the respective moment + const {moment_id} = moment; + + //STEP 3 if (moment) { - if (notification_object?.parent_comment) { - dispatch(updateReplyPosted(notification_object)); + //Now if moment was found, navigate to the respective moment + if (reply) { + dispatch(updateReplyPosted(reply)); } navigation.push('IndividualMoment', { moment, - userXId: userXId, // we're only viewing our own moment here + userXId, // 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 d9952aa8..f35bb22c 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -35,6 +35,9 @@ const NotificationsScreen: React.FC = () => { const {notifications} = useSelector( (state: RootState) => state.notifications, ); + + const {user: loggedInUser} = useSelector((state: RootState) => state.user); + const [sectionedNotifications, setSectionedNotifications] = useState< {title: 'Today' | 'Yesterday' | 'This Week'; data: NotificationType[]}[] >([]); @@ -130,7 +133,7 @@ const NotificationsScreen: React.FC = () => { ); diff --git a/src/types/types.ts b/src/types/types.ts index e71c4e5c..ab995292 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -87,11 +87,6 @@ export interface MomentType { moment_url: string; thumbnail_url: string; } - -export interface MomentWithUserType extends MomentType { - user: ProfilePreviewType; -} - export interface CommentBaseType { comment_id: string; comment: string; @@ -169,7 +164,7 @@ export enum CategorySelectionScreenType { export enum BackgroundGradientType { Light, Dark, - Notification + Notification, } /** @@ -181,11 +176,28 @@ export type TaggPopupType = { next?: TaggPopupType; }; +export interface MomentWithUserType extends MomentType { + user: ProfilePreviewType; +} + +export interface CommentNotificationType { + comment_id: string; + notification_data: MomentWithUserType; +} + +export interface ThreadNotificationType extends CommentNotificationType { + parent_comment: string; +} + export type NotificationType = { actor: ProfilePreviewType; verbage: string; notification_type: TypeOfNotification; - notification_object: CommentType | CommentThreadType | MomentType | undefined; + notification_object: + | CommentNotificationType + | ThreadNotificationType + | MomentType + | undefined; timestamp: string; unread: boolean; }; @@ -200,7 +212,7 @@ export type TypeOfNotification = | 'FRD_ACPT' // notification_object is undefined | 'FRD_DEC' - // notification_object is CommentType || CommentThreadType + // notification_object is CommentNotificationType || ThreadNotificationType | 'CMT' // notification_object is MomentType | 'MOM_3+' -- cgit v1.2.3-70-g09d2 From 6335532f33fa74229881a3eb0b66c2ebcb076c76 Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Thu, 4 Feb 2021 00:55:07 -0800 Subject: Sc --- src/services/MomentService.ts | 29 +---------------------------- 1 file changed, 1 insertion(+), 28 deletions(-) (limited to 'src') diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index 514ca776..2354d18e 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -1,7 +1,7 @@ import AsyncStorage from '@react-native-community/async-storage'; import RNFetchBlob from 'rn-fetch-blob'; import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants'; -import {MomentType, MomentWithUserType} from '../types'; +import {MomentType} from '../types'; import {checkImageUploadStatus} from '../utils'; export const postMoment: ( @@ -78,33 +78,6 @@ export const loadMoments: ( return moments; }; -export const loadSingleMoment: ( - momentId: string, - token: string, -) => Promise = async (momentId, token) => { - let moment: MomentWithUserType; - try { - const response = await fetch(MOMENTS_ENDPOINT + `${momentId}/`, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, - }, - }); - const status = response.status; - if (status === 200) { - const data = await response.json(); - moment = data; - } else { - console.log('Could not load moments!'); - return undefined; - } - } catch (err) { - console.log(err); - return undefined; - } - return moment; -}; - export const deleteMoment = async (momentId: string) => { try { const token = await AsyncStorage.getItem('token'); -- cgit v1.2.3-70-g09d2 From c1775f31b218a9c9b804de77e6ce6c1e95e968d9 Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Thu, 4 Feb 2021 00:58:35 -0800 Subject: Removed unnecessary code --- src/components/notifications/Notification.tsx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 93853198..64454bfc 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -65,15 +65,6 @@ const Notification: React.FC = (props) => { }, []); useEffect(() => { - let mounted = true; - const setMomentThumbnailUrl = async (url: string) => { - if (mounted && url) { - setMomentURI(url); - } else { - // if not set to empty, it will re-use the previous notification's state - setMomentURI(undefined); - } - }; if (notification_object) { let url: string | undefined; let obj; @@ -88,12 +79,9 @@ const Notification: React.FC = (props) => { url = obj.notification_data.thumbnail_url; } if (url) { - setMomentThumbnailUrl(url); + setMomentURI(url); } } - return () => { - mounted = false; - }; }, [id, notification_object, notification_type]); const onNotificationTap = async () => { -- cgit v1.2.3-70-g09d2 From cb6fb946a230fc8d6328533ccb0c952260c75853 Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Thu, 4 Feb 2021 10:40:10 -0800 Subject: remove code --- src/components/notifications/Notification.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 64454bfc..c2c6c4e4 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -151,20 +151,19 @@ const Notification: React.FC = (props) => { //STEP 3 if (moment) { - //Now if moment was found, navigate to the respective moment if (reply) { dispatch(updateReplyPosted(reply)); } navigation.push('IndividualMoment', { moment, - userXId, // we're only viewing our own moment here + userXId, screenType, }); setTimeout(() => { navigation.push('MomentCommentsScreen', { - moment_id: moment_id, + moment_id, screenType, - comment_id: comment_id, + comment_id, }); }, 500); } -- cgit v1.2.3-70-g09d2 From 432c191c585b4f1319e7ebbaf87b749f2c5631da Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Feb 2021 10:49:10 -0800 Subject: adjusted colour of unread notification --- src/constants/constants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 7fcc457f..bc0112c7 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -131,8 +131,8 @@ export const BACKGROUND_GRADIENT_MAP: Record< [BackgroundGradientType.Light]: ['#9F00FF', '#27EAE9'], [BackgroundGradientType.Dark]: ['#421566', '#385D5E'], [BackgroundGradientType.Notification]: [ - 'rgba(143, 1, 255, 0.5)', - 'rgba(110, 231, 231, 0.5)', + 'rgba(143, 1, 255, 0.3)', + 'rgba(110, 231, 231, 0.3)', ], }; -- cgit v1.2.3-70-g09d2 From 037ff4baa3dc34ee717c9020f05a1b56b1cf153e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Feb 2021 11:22:16 -0800 Subject: notification colour change --- src/constants/constants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/constants/constants.ts b/src/constants/constants.ts index bc0112c7..3bad0ed7 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -131,8 +131,8 @@ export const BACKGROUND_GRADIENT_MAP: Record< [BackgroundGradientType.Light]: ['#9F00FF', '#27EAE9'], [BackgroundGradientType.Dark]: ['#421566', '#385D5E'], [BackgroundGradientType.Notification]: [ - 'rgba(143, 1, 255, 0.3)', - 'rgba(110, 231, 231, 0.3)', + 'rgba(143, 1, 255, 0.4)', + 'rgba(110, 231, 231, 0.4)', ], }; -- cgit v1.2.3-70-g09d2