diff options
author | Brian Kim <brian@tagg.id> | 2021-06-02 11:58:59 -0700 |
---|---|---|
committer | Brian Kim <brian@tagg.id> | 2021-06-02 11:58:59 -0700 |
commit | 43a420ec518f122b684bb9d2f4dd4043bf65d2d2 (patch) | |
tree | 2493f8acf92a7da552522adb0a2f52f9297c9117 | |
parent | 68fcf7c533ba7612c94760b1171c506f64bfc0ae (diff) |
Some cosmetic changes
-rw-r--r-- | src/assets/images/Group 479.jpg | bin | 0 -> 753 bytes | |||
-rw-r--r-- | src/assets/images/Group 479.svg | 5 | ||||
-rw-r--r-- | src/routes/tabs/NavigationBar.tsx | 185 |
3 files changed, 87 insertions, 103 deletions
diff --git a/src/assets/images/Group 479.jpg b/src/assets/images/Group 479.jpg Binary files differnew file mode 100644 index 00000000..74abad92 --- /dev/null +++ b/src/assets/images/Group 479.jpg diff --git a/src/assets/images/Group 479.svg b/src/assets/images/Group 479.svg new file mode 100644 index 00000000..4e1eee01 --- /dev/null +++ b/src/assets/images/Group 479.svg @@ -0,0 +1,5 @@ +<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<ellipse cx="7.75104" cy="5.91915" rx="2.00104" ry="1.93282" fill="white"/> +<path d="M7.75195 8.0791C5.67981 8.0791 4 9.6062 4 11.49H11.5039C11.5039 9.6062 9.8241 8.0791 7.75195 8.0791Z" fill="white"/> +<path d="M7.99349 1C4.13109 1 1 4.13109 1 7.99349C1 11.1633 3.10881 13.8405 6 14.6987L8 17L9.98697 14.6987C12.8782 13.8405 14.987 11.1633 14.987 7.99349C14.987 4.13109 11.8559 1 7.99349 1Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> +</svg> 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; |