Merge branch 'master' of https://github.com/TaggiD-Inc/Frontend

3 files changed, 211 insertions, 10 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 3f9cc56a..fd1b11ac 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -2,9 +2,7 @@ import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {Alert, Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
-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} from '../../services';
 import {
@@ -49,7 +47,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
       verbage,
       notification_type,
       notification_object,
-      unread,
       timestamp,
     },
     screenType,
@@ -323,13 +320,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
     </View>
   );
 
-  return unread ? (
-    <LinearGradient colors={BACKGROUND_GRADIENT_MAP[2]} useAngle angle={90}>
-      {renderContent()}
-    </LinearGradient>
-  ) : (
-    renderContent()
-  );
+  return renderContent();
 };
 
 const styles = StyleSheet.create({
diff --git a/src/components/notifications/NotificationPill.tsx b/src/components/notifications/NotificationPill.tsx
new file mode 100644
index 00000000..525cd7fa
--- /dev/null
+++ b/src/components/notifications/NotificationPill.tsx
@@ -0,0 +1,209 @@
+import React, {useEffect, useState, useRef} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {SCREEN_WIDTH, isIPhoneX, numberWithCommas} from '../../utils';
+import {
+  NOTIFICATION_ICON_GRADIENT,
+  CHIN_HEIGHT,
+  NAV_BAR_HEIGHT,
+} from '../../constants';
+import {getNotificationsUnreadCount} from '../../services';
+import {normalize} from 'react-native-elements';
+import PillIcon4 from '../../assets/images/Group 479.svg';
+
+interface NotificationPillProps {
+  showIcon: boolean;
+}
+
+export const NotificationPill: React.FC<NotificationPillProps> = ({
+  showIcon,
+}) => {
+  const [iconStart, setIconStart] = useState<number[]>([0, -100]);
+  const [tipStart, setTipStart] = useState<number[]>([0, -100]);
+  const [notificationSets, setNotificationSets] = useState<{
+    CMT?: number;
+    FRD_REQ?: number;
+    P_VIEW?: number;
+    MOM_TAG?: number;
+  }>({});
+  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;
+
+  // If there are notifications, determines the size of the pill
+  // and sets points for correct placement
+  useEffect(() => {
+    setTimeout(() => {
+      if (iconRef.current) {
+        iconRef.current.measure(
+          (
+            _fx: number,
+            _fy: number,
+            width: number,
+            height: number,
+            _px: number,
+            _py: number,
+          ) => {
+            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]);
+                  setTimeCount(true);
+                },
+              );
+            }
+          },
+        );
+      } else {
+      }
+    }, 100);
+  }, [notificationSets, iconRef, tipRef]);
+
+  // Used so that pill disappears after 10 seconds
+  useEffect(() => {
+    if (timeCount) {
+      setTimeout(() => {
+        setTimeOut(true);
+      }, 10000);
+    }
+  }, [timeCount]);
+
+  // Gets data from backend to check for unreads
+  useEffect(() => {
+    const getCount = async () => {
+      const data = await getNotificationsUnreadCount();
+      setTimeout(() => {
+        if (data) {
+          setNotificationSets(data);
+        }
+      }, 100);
+    };
+
+    getCount();
+  }, []);
+
+  return (
+    <>
+      {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.FRD_REQ && (
+                <>
+                  <Image
+                    source={require('../../assets/images/pill-icon-2.png')}
+                    style={styles.indicationIcon}
+                  />
+                  <Text style={styles.text}>
+                    {numberWithCommas(notificationSets.FRD_REQ)}
+                  </Text>
+                </>
+              )}
+              {notificationSets.P_VIEW && (
+                <>
+                  <Image
+                    source={require('../../assets/images/pill-icon-3.png')}
+                    style={styles.indicationIcon}
+                  />
+                  <Text style={styles.text}>
+                    {numberWithCommas(notificationSets.P_VIEW)}
+                  </Text>
+                </>
+              )}
+              {notificationSets.MOM_TAG && (
+                <>
+                  <PillIcon4 style={styles.indicationIcon} />
+                  <Text style={styles.text}>
+                    {numberWithCommas(notificationSets.MOM_TAG)}
+                  </Text>
+                </>
+              )}
+            </LinearGradient>
+            <Image
+              style={[styles.tip, {top: tipStart[1], left: tipStart[0]}]}
+              source={pillTip}
+              ref={tipRef}
+            />
+          </View>
+        )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  purpleContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    position: 'absolute',
+    zIndex: 999,
+  },
+  iconPurple: {
+    padding: 5,
+    borderRadius: 15,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text: {
+    margin: 2,
+    color: 'white',
+    fontSize: normalize(10),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 5,
+  },
+  tip: {
+    position: 'absolute',
+    zIndex: 999,
+    height: 12,
+    flex: 1,
+    resizeMode: 'contain',
+  },
+  indicationIcon: {
+    height: 14,
+    width: 14,
+    margin: 2,
+    marginLeft: 5,
+  },
+  svgIndicationIcon: {
+    height: 14,
+    width: 14,
+    margin: 3,
+  },
+});
diff --git a/src/components/notifications/index.ts b/src/components/notifications/index.ts
index 733b56f1..077c26a4 100644
--- a/src/components/notifications/index.ts
+++ b/src/components/notifications/index.ts
@@ -1,2 +1,3 @@
 export {default as Notification} from './Notification';
 export {InviteFriendsPrompt} from './NotificationPrompts';
+export {NotificationPill} from './NotificationPill';