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/assets/images/Profile Icon.png | Bin 0 -> 1504 bytes src/assets/images/pill-icon-1.png | Bin 0 -> 868 bytes src/assets/images/pill-icon-2.png | Bin 0 -> 1276 bytes src/assets/images/pill-icon-3.png | Bin 0 -> 1037 bytes src/assets/images/pill-icon-4.png | Bin 0 -> 1249 bytes src/assets/images/purple-tip.png | Bin 0 -> 680 bytes src/constants/constants.ts | 4 + src/routes/tabs/NavigationBar.tsx | 405 ++++++++++++++++++++++++++++++------- src/utils/common.ts | 25 +++ 9 files changed, 359 insertions(+), 75 deletions(-) create mode 100644 src/assets/images/Profile Icon.png create mode 100644 src/assets/images/pill-icon-1.png create mode 100644 src/assets/images/pill-icon-2.png create mode 100644 src/assets/images/pill-icon-3.png create mode 100644 src/assets/images/pill-icon-4.png create mode 100644 src/assets/images/purple-tip.png (limited to 'src') diff --git a/src/assets/images/Profile Icon.png b/src/assets/images/Profile Icon.png new file mode 100644 index 00000000..f8eae388 Binary files /dev/null and b/src/assets/images/Profile Icon.png differ diff --git a/src/assets/images/pill-icon-1.png b/src/assets/images/pill-icon-1.png new file mode 100644 index 00000000..06956c6a Binary files /dev/null and b/src/assets/images/pill-icon-1.png differ diff --git a/src/assets/images/pill-icon-2.png b/src/assets/images/pill-icon-2.png new file mode 100644 index 00000000..b2370b80 Binary files /dev/null and b/src/assets/images/pill-icon-2.png differ diff --git a/src/assets/images/pill-icon-3.png b/src/assets/images/pill-icon-3.png new file mode 100644 index 00000000..6cdf0b15 Binary files /dev/null and b/src/assets/images/pill-icon-3.png differ diff --git a/src/assets/images/pill-icon-4.png b/src/assets/images/pill-icon-4.png new file mode 100644 index 00000000..6e132647 Binary files /dev/null and b/src/assets/images/pill-icon-4.png differ diff --git a/src/assets/images/purple-tip.png b/src/assets/images/purple-tip.png new file mode 100644 index 00000000..27f5a89a Binary files /dev/null and b/src/assets/images/purple-tip.png differ 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, diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 000ac614..0e08d834 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -1,12 +1,26 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; -import React, {Fragment, useEffect, useState} from 'react'; +import React, {Fragment, useEffect, useState, useRef} from 'react'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; import {useSelector} from 'react-redux'; import {NavigationIcon} from '../../components'; import {NO_NOTIFICATIONS} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; -import {ScreenType} from '../../types'; -import {haveUnreadNotifications} from '../../utils'; +import {ScreenType, NotificationType} from '../../types'; +import { + haveUnreadNotifications, + getUnreadNotifications, + SCREEN_WIDTH, + isIPhoneX, +} from '../../utils'; import MainStackScreen from '../main/MainStackScreen'; +import { + NOTIFICATION_ICON_GRADIENT, + CHIN_HEIGHT, + NAV_BAR_HEIGHT, +} from '../../constants'; +import {normalize} from 'react-native-elements'; +import {numberWithCommas} from '../../utils'; const Tabs = createBottomTabNavigator(); @@ -19,8 +33,47 @@ const NavigationBar: React.FC = () => { (state: RootState) => state, ); - const [unreadNotificationsPresent, setUnreadNotificationsPresent] = - useState(false); + const [unread, setUnread] = useState({ + CMT: 4, + FR_REQ: 5, + PR_V: 3, + TAG: 7, + }); + const [showIcon, setShowIcon] = useState(true); + 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 [timeCount, setTimeCount] = useState(false); + const iconRef = useRef(null); + const tipRef = useRef(null); + const pillTip = require('../../assets/images/purple-tip.png'); + + const navBarPos = 20; + const tipSize = 8; + + const [ + unreadNotificationsPresent, + setUnreadNotificationsPresent, + ] = useState(false); + + const countNotifications = ( + notificationsList: NotificationType[], + values: string[], + ) => { + let outputNum = 0; + for (const n of notificationsList) { + if (values.includes(n.notification_type)) { + outputNum++; + } + } + return outputNum; + }; useEffect(() => { const determine = async () => { @@ -28,82 +81,284 @@ const NavigationBar: React.FC = () => { await haveUnreadNotifications(notifications), ); }; + // const establishUnread = async () => { + // setUnread(await getUnreadNotifications(notifications)); + // }; determine(); + // establishUnread(); }, [notifications]); + useEffect(() => { + setTimeout(() => { + console.log('notifications', notifications.length, 'unread', unread); + if (iconRef.current) { + iconRef.current.measure( + ( + _fx: number, + _fy: number, + width: number, + height: number, + _px: number, + _py: number, + ) => { + console.log('HERE 1'); + if (tipRef.current) { + tipRef.current.measure( + ( + __fx: number, + __fy: number, + width2: number, + __height: number, + __px: number, + __py: number, + ) => { + const x = SCREEN_WIDTH / 2 - width / 2; + const y = isIPhoneX() + ? CHIN_HEIGHT + NAV_BAR_HEIGHT + navBarPos + : NAV_BAR_HEIGHT + navBarPos; + setIconStart([x, y]); + setTipStart([width / 2 - width2 / 2, height - 1]); + setTimeout(() => { + setComplete(true); + console.log('HERE 2'); + }, 100); + setTimeCount(true); + }, + ); + } + }, + ); + } else { + console.log('ISSUE', iconRef.current); + } + }, 100); + }, [unread, iconRef, tipRef]); + + useEffect(() => { + if (timeCount) { + setTimeout(() => { + setShowIcon(false); + }, 5000); + } + }, [timeCount]); + + useEffect(() => { + setTimeout(() => { + console.log('complete', complete); + }, 100); + }, [complete]); + + useEffect(() => { + setTimeout(() => { + console.log('iconRef', iconRef); + }, 60000); + }); + return ( - ({ - tabBarIcon: ({focused}) => { - switch (route.name) { - case 'Home': - return ; - case 'Search': - return ; - case 'Upload': - return ; - case 'Notifications': - return ( - + {unread && Object.keys(unread).length !== 0 && showIcon && ( + + + {notificationSets.CMT && ( + <> + - ); - case 'Chat': - return ; - case 'Profile': - return ; - case 'SuggestedPeople': - return ( - - ); - default: - return ; - } - }, - })} - initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'} - tabBarOptions={{ - showLabel: false, - style: { - backgroundColor: 'transparent', - position: 'absolute', - borderTopWidth: 0, - left: 0, - right: 0, - bottom: '1%', - }, - }}> - - - - - - + + {numberWithCommas(notificationSets.CMT)} + + + )} + {notificationSets.FR_REQ && ( + <> + + + {numberWithCommas(notificationSets.FR_REQ)} + + + )} + {notificationSets.PR_V && ( + <> + + + {numberWithCommas(notificationSets.PR_V)} + + + )} + {notificationSets.TAG && ( + <> + + + {numberWithCommas(notificationSets.TAG)} + + + )} + + + + )} + ({ + tabBarIcon: ({focused}) => { + switch (route.name) { + case 'Home': + return ; + case 'Search': + return ; + case 'Upload': + return ; + case 'Notifications': + return ( + + ); + case 'Chat': + return ; + case 'Profile': + return ; + case 'SuggestedPeople': + return ( + + ); + default: + return ; + } + }, + })} + initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'} + tabBarOptions={{ + showLabel: false, + style: { + backgroundColor: 'transparent', + position: 'absolute', + borderTopWidth: 0, + left: 0, + right: 0, + bottom: '1%', + }, + }}> + { + setShowIcon(true); + }, + }} + /> + { + setShowIcon(true); + }, + }} + /> + { + setShowIcon(false); + }, + }} + /> + { + setShowIcon(true); + }, + }} + /> + { + setShowIcon(true); + }, + }} + /> + + ); }; +const styles = StyleSheet.create({ + purpleContainer: { + // borderWidth: 1, + flex: 1, + justifyContent: 'center', + position: 'absolute', + zIndex: 999, + // flexDirection: 'row', + // bottom: 50, + // height: normalize(20), + }, + iconPurple: { + padding: 5, + borderRadius: 15, + flex: 1, + flexDirection: 'row', + // justifyContent: 'center', + // alignContent: 'center', + alignItems: 'center', + }, + text: { + margin: 2, + color: 'white', + fontSize: normalize(10), + justifyContent: 'center', + alignItems: 'center', + }, + tip: { + // borderWidth: 1, + position: 'absolute', + zIndex: 999, + height: 12, + // aspectRatio: 12 / 8, + flex: 1, + resizeMode: 'contain', + }, + indicationIcon: { + height: 15, + width: 15, + margin: 2, + }, +}); + export default NavigationBar; diff --git a/src/utils/common.ts b/src/utils/common.ts index 95e77f64..9d0de64b 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -101,6 +101,27 @@ export const haveUnreadNotifications = async ( return false; }; +export const getUnreadNotifications = async ( + notifications: NotificationType[], +): Promise => { + const outputNotifications = []; + for (const n of notifications) { + const notificationDate = moment(n.timestamp); + const prevLastViewed = await AsyncStorage.getItem('notificationLastViewed'); + const lastViewed: moment.Moment | undefined = + prevLastViewed == null ? moment.unix(0) : moment(prevLastViewed); + const dateAge = getDateAge(notificationDate); + if (dateAge === 'unknown') { + continue; + } + const unread = lastViewed ? lastViewed.diff(notificationDate) < 0 : false; + if (unread) { + outputNotifications.push(n); + } + } + return outputNotifications; +}; + // https://stackoverflow.com/a/2450976 export const shuffle = (array: any[]) => { var currentIndex = array.length, @@ -197,3 +218,7 @@ export const validateImageLink = async (url: string | undefined) => { return false; }); }; + +export const numberWithCommas = (digits: number) => { + return digits.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); +}; -- cgit v1.2.3-70-g09d2