feat: giving icons to the app

bambu-group-03 · Nov 24, 2023 · 93855f3 · 93855f3
1 parent fcf1446
commit 93855f3
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 13 deletions.
diff --git a/src/api/snaps/types.ts b/src/api/snaps/types.ts
@@ -1,5 +1,6 @@
 export type Snap = {
   id: string;
+  parent_id: string;
   username: string;
   fullname: string;
   author: string;
@@ -13,4 +14,6 @@ export type Snap = {
   num_replies: number;
   profile_photo_url: string;
   visibility: number;
+  privacy: number;
+  is_shared_by: string[];
 };
diff --git a/src/navigation/auth-navigator.tsx b/src/navigation/auth-navigator.tsx
@@ -1,9 +1,11 @@
+import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import * as React from 'react';
 
 import { useAuth } from '@/core';
 import { Login } from '@/screens';
-import { Pressable, Text } from '@/ui';
+import { Pressable, View } from '@/ui';
 
 export const GoToLogout = () => {
   const status = useAuth.use.status();
@@ -13,7 +15,9 @@ export const GoToLogout = () => {
   const signOut = useAuth.use.signOut();
   return (
     <Pressable onPress={() => signOut()} className="p-2">
-      <Text className="text-red-600">Logout</Text>
+      <View className="ml-auto">
+        <FontAwesomeIcon icon={faRightFromBracket} />
+      </View>
     </Pressable>
   );
 };

diff --git a/src/navigation/feed-navigator.tsx b/src/navigation/feed-navigator.tsx
@@ -1,10 +1,12 @@
+import { faPencil } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import * as React from 'react';
 
 import type { Snap as SnapType } from '@/api';
 import { AddSnap, Feed, Snap } from '@/screens';
-import { Pressable, Text } from '@/ui';
+import { Pressable, View } from '@/ui';
 
 import { GoToLogout } from './auth-navigator';
 
@@ -21,7 +23,9 @@ const GoToAddSnap = () => {
   const { navigate } = useNavigation();
   return (
     <Pressable onPress={() => navigate('AddSnap')} className="p-2">
-      <Text className="text-primary-300">Snap</Text>
+      <View className="ml-auto pr-5">
+        <FontAwesomeIcon icon={faPencil} />
+      </View>
     </Pressable>
   );
 };
@@ -31,7 +35,6 @@ export const FeedNavigator = () => {
     <Stack.Navigator>
       <Stack.Group
         screenOptions={{
-          // eslint-disable-next-line react/no-unstable-nested-components
           headerRight: () => (
             <>
               <GoToAddSnap />

diff --git a/src/navigation/tab-data.ts b/src/navigation/tab-data.ts
@@ -1,10 +1,10 @@
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import {
-  faFeed,
+  faBell,
   faMessage,
-  faPersonDigging,
-  faPowerOff,
+  faPaw,
   faSearch,
+  faUser,
 } from '@fortawesome/free-solid-svg-icons';
 
 import { ChatNavigator } from '@/screens/chat/chat-navigator';
@@ -36,7 +36,7 @@ export const tabs: TabType[] = [
     name: 'FeedNavigator',
     component: FeedNavigator, // Stack.Navigator configuration, has inside screens
     label: 'Feed',
-    icon: faFeed,
+    icon: faPaw,
   },
   {
     name: 'SearchNavigator',
@@ -54,12 +54,12 @@ export const tabs: TabType[] = [
     name: 'NotificationsNavigator',
     component: NotificationNavigator, // React Profile component screen
     label: 'Notifications',
-    icon: faPersonDigging,
+    icon: faBell,
   },
   {
     name: 'ProfileNavigator',
     component: ProfileNavigator, // React Profile component screen
     label: 'Profile',
-    icon: faPowerOff,
+    icon: faUser,
   },
 ];
diff --git a/src/screens/feed/card.tsx b/src/screens/feed/card.tsx
@@ -1,9 +1,16 @@
+import {
+  faComment,
+  faGlobeAmericas,
+  faRetweet,
+  faUserGroup,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import type { AxiosInstance } from 'axios';
 import React, { useEffect, useState } from 'react';
 
 import type { Snap } from '@/api';
 import { getUserState } from '@/core';
-import { Image, Pressable, Text, TouchableOpacity, View } from '@/ui';
+import { Button, Image, Pressable, Text, TouchableOpacity, View } from '@/ui';
 
 import CommentButton from './comment-button';
 import HeartButton from './heart-button';
@@ -15,6 +22,8 @@ type Props = {
   onPress?: () => void;
 };
 
+const SNAP_VISIBLE = 1;
+
 export const Card = ({ snap, client, onPress = () => {} }: Props) => {
   const currentUser = getUserState();
 
@@ -42,8 +51,27 @@ export const Card = ({ snap, client, onPress = () => {} }: Props) => {
   console.log(snap);
 
   return (
-    <Pressable className="flex shrink-0 p-4 pb-0" onPress={onPress}>
+    <Pressable className="flex shrink-0 p-4  pb-0" onPress={onPress}>
       <TouchableOpacity className="group block shrink-0">
+        {snap.parent_id ? (
+          <View className="flex items-start justify-end pr-2">
+            {snap.parent_id ? (
+              <View className="ml-auto">
+                <FontAwesomeIcon icon={faComment} color={'#006AFF'} />
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+
+        {snap.is_shared_by.length > 0 ? (
+          <View className="flex flex-row items-center">
+            <FontAwesomeIcon icon={faRetweet} color={'green'} />
+            <Text className="font-small pl-2 text-base leading-6 text-black">
+              shared by @{snap.is_shared_by[0]}
+            </Text>
+          </View>
+        ) : null}
+
         <View className="flex flex-row items-center">
           <View>
             <Image
@@ -137,6 +165,24 @@ export const Card = ({ snap, client, onPress = () => {} }: Props) => {
               />
               <CommentButton commentCount={commentCount} onPress={() => {}} />
               {/* <ShareButton /> */}
+
+              {snap.privacy === SNAP_VISIBLE ? (
+                <View className="duration-350 flex flex-1 items-center text-xs text-gray-400 transition ease-in-out hover:text-blue-400 dark:text-white dark:hover:text-blue-400">
+                  <Button
+                    variant="icon"
+                    label={
+                      <FontAwesomeIcon icon={faGlobeAmericas} color="gray" />
+                    }
+                  />
+                </View>
+              ) : (
+                <View className="duration-350 flex flex-1 items-center text-xs text-gray-400 transition ease-in-out hover:text-blue-400 dark:text-white dark:hover:text-blue-400">
+                  <Button
+                    variant="icon"
+                    label={<FontAwesomeIcon icon={faUserGroup} color="gray" />}
+                  />
+                </View>
+              )}
             </View>
           </View>
         </View>