diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/tabs/NavigationBar.tsx | 185 |
1 files changed, 82 insertions, 103 deletions
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 0e08d834..1693d057 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -6,13 +6,8 @@ import {useSelector} from 'react-redux'; import {NavigationIcon} from '../../components'; import {NO_NOTIFICATIONS} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; -import {ScreenType, NotificationType} from '../../types'; -import { - haveUnreadNotifications, - getUnreadNotifications, - SCREEN_WIDTH, - isIPhoneX, -} from '../../utils'; +import {ScreenType} from '../../types'; +import {haveUnreadNotifications, SCREEN_WIDTH, isIPhoneX} from '../../utils'; import MainStackScreen from '../main/MainStackScreen'; import { NOTIFICATION_ICON_GRADIENT, @@ -21,6 +16,7 @@ import { } from '../../constants'; import {normalize} from 'react-native-elements'; import {numberWithCommas} from '../../utils'; +import PillIcon4 from '../../assets/images/Group 479.svg'; const Tabs = createBottomTabNavigator(); @@ -32,13 +28,6 @@ const NavigationBar: React.FC = () => { const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector( (state: RootState) => state, ); - - const [unread, setUnread] = useState({ - CMT: 4, - FR_REQ: 5, - PR_V: 3, - TAG: 7, - }); const [showIcon, setShowIcon] = useState<boolean>(true); const [iconStart, setIconStart] = useState<number[]>([0, -100]); const [tipStart, setTipStart] = useState<number[]>([0, -100]); @@ -50,31 +39,18 @@ const NavigationBar: React.FC = () => { TAG: 712321, }); const [timeCount, setTimeCount] = useState<boolean>(false); + const [timeOut, setTimeOut] = useState<boolean>(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<boolean>(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 () => { setUnreadNotificationsPresent( @@ -90,7 +66,12 @@ const NavigationBar: React.FC = () => { useEffect(() => { setTimeout(() => { - console.log('notifications', notifications.length, 'unread', unread); + console.log( + 'notifications', + notifications.length, + 'unread', + notificationSets, + ); if (iconRef.current) { iconRef.current.measure( ( @@ -132,12 +113,12 @@ const NavigationBar: React.FC = () => { console.log('ISSUE', iconRef.current); } }, 100); - }, [unread, iconRef, tipRef]); + }, [notificationSets, iconRef, tipRef]); useEffect(() => { if (timeCount) { setTimeout(() => { - setShowIcon(false); + setTimeOut(true); }, 5000); } }, [timeCount]); @@ -156,68 +137,68 @@ const NavigationBar: React.FC = () => { return ( <> - {unread && Object.keys(unread).length !== 0 && showIcon && ( - <View - style={[ - styles.purpleContainer, - {bottom: iconStart[1], left: iconStart[0]}, - ]} - ref={iconRef}> - <LinearGradient - colors={NOTIFICATION_ICON_GRADIENT} - style={styles.iconPurple}> - {notificationSets.CMT && ( - <> - <Image - source={require('../../assets/images/pill-icon-1.png')} - style={styles.indicationIcon} - /> - <Text style={styles.text}> - {numberWithCommas(notificationSets.CMT)} - </Text> - </> - )} - {notificationSets.FR_REQ && ( - <> - <Image - source={require('../../assets/images/pill-icon-2.png')} - style={styles.indicationIcon} - /> - <Text style={styles.text}> - {numberWithCommas(notificationSets.FR_REQ)} - </Text> - </> - )} - {notificationSets.PR_V && ( - <> - <Image - source={require('../../assets/images/pill-icon-3.png')} - style={styles.indicationIcon} - /> - <Text style={styles.text}> - {numberWithCommas(notificationSets.PR_V)} - </Text> - </> - )} - {notificationSets.TAG && ( - <> - <Image - source={require('../../assets/images/pill-icon-4.png')} - style={styles.indicationIcon} - /> - <Text style={styles.text}> - {numberWithCommas(notificationSets.TAG)} - </Text> - </> - )} - </LinearGradient> - <Image - style={[styles.tip, {top: tipStart[1], left: tipStart[0]}]} - source={pillTip} - ref={tipRef} - /> - </View> - )} + {notificationSets && + Object.keys(notificationSets).length !== 0 && + showIcon && + !timeOut && ( + <View + style={[ + styles.purpleContainer, + {bottom: iconStart[1], left: iconStart[0]}, + ]} + ref={iconRef}> + <LinearGradient + colors={NOTIFICATION_ICON_GRADIENT} + style={styles.iconPurple}> + {notificationSets.CMT && ( + <> + <Image + source={require('../../assets/images/pill-icon-1.png')} + style={styles.indicationIcon} + /> + <Text style={styles.text}> + {numberWithCommas(notificationSets.CMT)} + </Text> + </> + )} + {notificationSets.FR_REQ && ( + <> + <Image + source={require('../../assets/images/pill-icon-2.png')} + style={styles.indicationIcon} + /> + <Text style={styles.text}> + {numberWithCommas(notificationSets.FR_REQ)} + </Text> + </> + )} + {notificationSets.PR_V && ( + <> + <Image + source={require('../../assets/images/pill-icon-3.png')} + style={styles.indicationIcon} + /> + <Text style={styles.text}> + {numberWithCommas(notificationSets.PR_V)} + </Text> + </> + )} + {notificationSets.TAG && ( + <> + <PillIcon4 style={styles.indicationIcon} /> + <Text style={styles.text}> + {numberWithCommas(notificationSets.TAG)} + </Text> + </> + )} + </LinearGradient> + <Image + style={[styles.tip, {top: tipStart[1], left: tipStart[0]}]} + source={pillTip} + ref={tipRef} + /> + </View> + )} <Tabs.Navigator screenOptions={({route}) => ({ tabBarIcon: ({focused}) => { @@ -320,22 +301,16 @@ const NavigationBar: React.FC = () => { 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: { @@ -344,21 +319,25 @@ const styles = StyleSheet.create({ fontSize: normalize(10), justifyContent: 'center', alignItems: 'center', + marginRight: 10, }, tip: { - // borderWidth: 1, position: 'absolute', zIndex: 999, height: 12, - // aspectRatio: 12 / 8, flex: 1, resizeMode: 'contain', }, indicationIcon: { - height: 15, - width: 15, + height: 14, + width: 14, margin: 2, }, + svgIndicationIcon: { + height: 14, + width: 14, + margin: 3, + }, }); export default NavigationBar; |