From 68fcf7c533ba7612c94760b1171c506f64bfc0ae Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 1 Jun 2021 14:43:30 -0700 Subject: Filled out basic front-end, need to integrate with back-end --- src/constants/constants.ts | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/constants') diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 99d3901b..e6c23554 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -21,6 +21,9 @@ export const AVATAR_GRADIENT_DIM = 50; export const TAGG_ICON_DIM = 58; export const TAGG_RING_DIM = normalize(60); +// default height of the navigation bar, from react native library, unless on ipad +export const NAV_BAR_HEIGHT = 49; + export const INTEGRATED_SOCIAL_LIST: string[] = [ 'Instagram', 'Facebook', @@ -89,6 +92,7 @@ export const BADGE_GRADIENT_REST = [ 'rgba(78, 54, 41, 1)', 'rgba(236, 32, 39, 1)', ]; +export const NOTIFICATION_ICON_GRADIENT = ['#8F01FF', '#7B02DA']; export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, -- cgit v1.2.3-70-g09d2 From 19630f8bc3b4b53244007e08436c5be67a4d7ef1 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Mon, 7 Jun 2021 15:58:08 +0900 Subject: Basic integration with API --- src/constants/api.ts | 1 + src/routes/tabs/NavigationBar.tsx | 31 ++++++------ src/services/NotificationService.ts | 99 +++++++++++++++++++++++++++---------- 3 files changed, 91 insertions(+), 40 deletions(-) (limited to 'src/constants') diff --git a/src/constants/api.ts b/src/constants/api.ts index f02ee407..8d2e1a1e 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -45,6 +45,7 @@ export const BLOCK_USER_ENDPOINT: string = API_URL + 'block/'; export const PASSWORD_RESET_ENDPOINT: string = API_URL + 'password-reset/'; export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/'; export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/'; +export const NOTIFICATIONS_COUNT_ENDPOINT: string = API_URL + 'notifications/unread_count/' export const DISCOVER_ENDPOINT: string = API_URL + 'discover/'; export const SEARCH_BUTTONS_ENDPOPINT: string = DISCOVER_ENDPOINT + 'search_buttons/'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 1693d057..3359fc0d 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -6,6 +6,7 @@ import {useSelector} from 'react-redux'; import {NavigationIcon} from '../../components'; import {NO_NOTIFICATIONS} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; +import {getNotificationsUnreadCount} from '../../services'; import {ScreenType} from '../../types'; import {haveUnreadNotifications, SCREEN_WIDTH, isIPhoneX} from '../../utils'; import MainStackScreen from '../main/MainStackScreen'; @@ -32,12 +33,7 @@ const NavigationBar: React.FC = () => { const [iconStart, setIconStart] = useState([0, -100]); const [tipStart, setTipStart] = useState([0, -100]); const [complete, setComplete] = useState(false); - const [notificationSets, setNotificationSets] = useState({ - CMT: 412314213123, - FR_REQ: 52131, - PR_V: 3, - TAG: 712321, - }); + const [notificationSets, setNotificationSets] = useState({}); const [timeCount, setTimeCount] = useState(false); const [timeOut, setTimeOut] = useState(false); const iconRef = useRef(null); @@ -130,10 +126,17 @@ const NavigationBar: React.FC = () => { }, [complete]); useEffect(() => { - setTimeout(() => { - console.log('iconRef', iconRef); - }, 60000); - }); + // setTimeout(() => { + // console.log('iconRef', iconRef); + // }, 60000); + + const getCount = async () => { + const data = await getNotificationsUnreadCount(); + setNotificationSets(data); + }; + + getCount(); + }, []); return ( <> @@ -172,22 +175,22 @@ const NavigationBar: React.FC = () => { )} - {notificationSets.PR_V && ( + {notificationSets.P_VIEW && ( <> - {numberWithCommas(notificationSets.PR_V)} + {numberWithCommas(notificationSets.P_VIEW)} )} - {notificationSets.TAG && ( + {notificationSets.MOM_TAG && ( <> - {numberWithCommas(notificationSets.TAG)} + {numberWithCommas(notificationSets.MOM_TAG)} )} diff --git a/src/services/NotificationService.ts b/src/services/NotificationService.ts index c5c843f5..92f1cdd1 100644 --- a/src/services/NotificationService.ts +++ b/src/services/NotificationService.ts @@ -1,31 +1,78 @@ import AsyncStorage from '@react-native-community/async-storage'; -import {NOTIFICATIONS_ENDPOINT} from '../constants'; +import { + NOTIFICATIONS_ENDPOINT, + NOTIFICATIONS_COUNT_ENDPOINT, +} from '../constants'; import {NotificationType} from '../types'; -export const getNotificationsData: () => Promise = - async () => { - try { - const token = await AsyncStorage.getItem('token'); - const response = await fetch(NOTIFICATIONS_ENDPOINT, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, - }, - }); - if (response.status === 200) { - const data: any[] = await response.json(); - let typedData: NotificationType[] = []; - for (const o of data) { - typedData.push({ - ...o.notification, - unread: false, - }); - } - return typedData; +export const getNotificationsData: () => Promise< + NotificationType[] +> = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(NOTIFICATIONS_ENDPOINT, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + if (response.status === 200) { + const data: any[] = await response.json(); + let typedData: NotificationType[] = []; + for (const o of data) { + typedData.push({ + ...o.notification, + unread: false, + }); } - return []; - } catch (error) { - console.log('Unable to fetch notifications'); - return []; + return typedData; } - }; + return []; + } catch (error) { + console.log('Unable to fetch notifications'); + return []; + } +}; + +export const getNotificationsUnreadCount: () => Promise<{ + CMT?: number; + FRD_REQ?: number; + P_VIEW?: number; + MOM_TAG?: number; +}> = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(NOTIFICATIONS_COUNT_ENDPOINT, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + if (response.status === 200) { + const data: any = await response.json(); + const typedData: { + CMT?: number; + FRD_REQ?: number; + P_VIEW?: number; + MOM_TAG?: number; + } = {}; + if (data.CMT && data.CMT > 0) { + typedData.CMT = data.CMT; + } + if (data.FRD_REQ && data.FRD_REQ > 0) { + typedData.FRD_REQ = data.FRD_REQ; + } + if (data.P_VIEW && data.P_VIEW > 0) { + typedData.P_VIEW = data.P_VIEW; + } + if (data.MOM_TAG && data.MOM_TAG > 0) { + typedData.MOM_TAG = data.MOM_TAG; + } + return typedData; + } + return []; + } catch (error) { + console.log('Unable to fetch notifications'); + return []; + } +}; -- cgit v1.2.3-70-g09d2 From 9c48eeee298eacf781f25907c231f503edb4c5a4 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 8 Jun 2021 18:17:21 +0900 Subject: Integrate with backend --- src/constants/api.ts | 3 +- src/routes/tabs/NavigationBar.tsx | 34 ++++++++++-------- src/services/NotificationService.ts | 72 +++++++++++++++++++++++-------------- 3 files changed, 67 insertions(+), 42 deletions(-) (limited to 'src/constants') diff --git a/src/constants/api.ts b/src/constants/api.ts index 8d2e1a1e..b55489d9 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -45,7 +45,8 @@ export const BLOCK_USER_ENDPOINT: string = API_URL + 'block/'; export const PASSWORD_RESET_ENDPOINT: string = API_URL + 'password-reset/'; export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/'; export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/'; -export const NOTIFICATIONS_COUNT_ENDPOINT: string = API_URL + 'notifications/unread_count/' +export const NOTIFICATIONS_COUNT_ENDPOINT: string = API_URL + 'notifications/unread_count/'; +export const NOTIFICATIONS_DATE: string = API_URL + 'notifications/seen/'; export const DISCOVER_ENDPOINT: string = API_URL + 'discover/'; export const SEARCH_BUTTONS_ENDPOPINT: string = DISCOVER_ENDPOINT + 'search_buttons/'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 4b291023..77131098 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -6,7 +6,10 @@ import {useSelector} from 'react-redux'; import {NavigationIcon} from '../../components'; import {NO_NOTIFICATIONS} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; -import {getNotificationsUnreadCount} from '../../services'; +import { + getNotificationsUnreadCount, + setNotificationsReadDate, +} from '../../services'; import {ScreenType} from '../../types'; import {haveUnreadNotifications, SCREEN_WIDTH, isIPhoneX} from '../../utils'; import MainStackScreen from '../main/MainStackScreen'; @@ -41,10 +44,8 @@ const NavigationBar: React.FC = () => { const navBarPos = 20; - const [ - unreadNotificationsPresent, - setUnreadNotificationsPresent, - ] = useState(false); + const [unreadNotificationsPresent, setUnreadNotificationsPresent] = + useState(false); useEffect(() => { const determine = async () => { @@ -56,6 +57,7 @@ const NavigationBar: React.FC = () => { }, [notifications]); useEffect(() => { + console.log('notifications', notificationSets); setTimeout(() => { if (iconRef.current) { iconRef.current.measure( @@ -94,18 +96,18 @@ const NavigationBar: React.FC = () => { }, 100); }, [notificationSets, iconRef, tipRef]); - useEffect(() => { - if (timeCount) { - setTimeout(() => { - setTimeOut(true); - }, 5000); - } - }, [timeCount]); + // useEffect(() => { + // if (timeCount) { + // setTimeout(() => { + // setTimeOut(true); + // }, 5000); + // } + // }, [timeCount]); useEffect(() => { const getCount = async () => { - // const data = await getNotificationsUnreadCount(); - const data = {}; + const data = await getNotificationsUnreadCount(); + // const data = {}; setTimeout(() => { setNotificationSets(data); }, 100); @@ -250,6 +252,7 @@ const NavigationBar: React.FC = () => { listeners={{ tabPress: (_) => { setShowIcon(false); + setNotificationsReadDate(); }, }} /> @@ -298,7 +301,7 @@ const styles = StyleSheet.create({ fontSize: normalize(10), justifyContent: 'center', alignItems: 'center', - marginRight: 10, + marginRight: 5, }, tip: { position: 'absolute', @@ -311,6 +314,7 @@ const styles = StyleSheet.create({ height: 14, width: 14, margin: 2, + marginLeft: 5, }, svgIndicationIcon: { height: 14, diff --git a/src/services/NotificationService.ts b/src/services/NotificationService.ts index 92f1cdd1..3c0245a5 100644 --- a/src/services/NotificationService.ts +++ b/src/services/NotificationService.ts @@ -2,37 +2,37 @@ import AsyncStorage from '@react-native-community/async-storage'; import { NOTIFICATIONS_ENDPOINT, NOTIFICATIONS_COUNT_ENDPOINT, + NOTIFICATIONS_DATE, } from '../constants'; import {NotificationType} from '../types'; -export const getNotificationsData: () => Promise< - NotificationType[] -> = async () => { - try { - const token = await AsyncStorage.getItem('token'); - const response = await fetch(NOTIFICATIONS_ENDPOINT, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, - }, - }); - if (response.status === 200) { - const data: any[] = await response.json(); - let typedData: NotificationType[] = []; - for (const o of data) { - typedData.push({ - ...o.notification, - unread: false, - }); +export const getNotificationsData: () => Promise = + async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(NOTIFICATIONS_ENDPOINT, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + if (response.status === 200) { + const data: any[] = await response.json(); + let typedData: NotificationType[] = []; + for (const o of data) { + typedData.push({ + ...o.notification, + unread: false, + }); + } + return typedData; } - return typedData; + return []; + } catch (error) { + console.log('Unable to fetch notifications'); + return []; } - return []; - } catch (error) { - console.log('Unable to fetch notifications'); - return []; - } -}; + }; export const getNotificationsUnreadCount: () => Promise<{ CMT?: number; @@ -76,3 +76,23 @@ export const getNotificationsUnreadCount: () => Promise<{ return []; } }; + +export const setNotificationsReadDate: () => Promise = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(NOTIFICATIONS_DATE, { + method: 'POST', + headers: { + Authorization: 'Token ' + token, + }, + }); + if (response.status === 204) { + return true; + } else { + return false; + } + } catch (error) { + console.log('Unable to fetch notifications'); + return false; + } +}; -- cgit v1.2.3-70-g09d2 From 17d41145a0791d2687c7f4abd934b83c008e6f12 Mon Sep 17 00:00:00 2001 From: hsalhab Date: Tue, 8 Jun 2021 17:08:26 -0400 Subject: fix regex, forward slash needs escape --- src/constants/regex.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/constants') diff --git a/src/constants/regex.ts b/src/constants/regex.ts index 61523203..f934185d 100644 --- a/src/constants/regex.ts +++ b/src/constants/regex.ts @@ -36,7 +36,7 @@ export const nameRegex: RegExp = /^[A-Za-z'\-,. ]{2,20}$/; * - match alphanumerics, and special characters used in URLs */ export const websiteRegex: RegExp = - /^$|^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,50}\.[a-zA-Z0-9()]{2,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]{0,35})$/; + /^$|^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,50}\.[a-zA-Z0-9()]{2,6}\b([-a-zA-Z0-9()@:%_+.~#?&\/=]{0,35})$/; /** * The website regex has the following constraints -- cgit v1.2.3-70-g09d2