Merge pull request #112 from bambu-group-03/feat/notification-persistent

Feat/notification persistent

src/navigation/feed-navigator.tsx

@@ -18,7 +18,7 @@ export type FeedStackParamList = {
   Snap: { snap: SnapType };
   AddSnap: undefined;
   Auth: undefined;
-  UserProfile: { user: UserType };
+  Profile: { user: UserType };
 };
 
 const Stack = createNativeStackNavigator<FeedStackParamList>();
@@ -52,7 +52,7 @@ export const FeedNavigator = () => {
       </Stack.Group>
 
       <Stack.Screen name="AddSnap" component={AddSnap} />
-      <Stack.Screen name="UserProfile" component={ProfileScreen} />
+      <Stack.Screen name="Profile" component={ProfileScreen} />
     </Stack.Navigator>
   );
 };

src/navigation/root.tsx

@@ -54,7 +54,7 @@ export const Root = ({ navigationRef }: RootProps) => {
     <Stack.Navigator
       screenOptions={{
         title: 'Snap',
-        headerShown: true,
+        headerShown: false,
         gestureEnabled: false,
         animation: 'none',
       }}

src/screens/chat/chat-header.tsx

@@ -9,7 +9,7 @@ const ChatHeader = ({ chatUser }: { chatUser: UserType }) => {
       <View className="relative flex items-center space-x-4">
         <View className="relative">
           <Image
-            source={chatUser?.profile_photo_id || 'https://i.pravatar.cc/300'}
+            source={chatUser?.profile_photo_id || ''}
             className="h-10 w-10 rounded-full sm:h-16 sm:w-16"
           />
         </View>

src/screens/chat/chat-list-body.tsx

@@ -65,7 +65,7 @@ const ChatListBody = ({
                 <Image
                   className="mr-4 h-12 w-12 rounded-full"
                   source={{
-                    uri: user?.profile_photo_id || 'https://i.pravatar.cc/100',
+                    uri: user?.profile_photo_id || '',
                   }}
                 />
                 <View className="flex-1">

src/screens/feed/components/card/card-header.tsx

@@ -1,12 +1,12 @@
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { memo } from 'react';
+import { useEffect, useState } from 'react';
 
 import { client } from '@/api/common/client';
 import type { Snap } from '@/api/snaps/types';
 import type { UserType } from '@/core/auth/utils';
-import { Image, Pressable, TouchableOpacity, Text, View } from '@/ui';
-import { useEffect, useState } from 'react';
+import { Image, Text, TouchableOpacity, View } from '@/ui';
 
 import CardSharedInfo from './card-shared-info';
 
@@ -18,7 +18,7 @@ const CardHeader = memo(
         `/api/auth/users/${snap.author}`
       );
 
-      navigate.navigate('UserProfile', { user });
+      navigate.navigate('Profile', { user });
     };
 
     const [parentSnap, setParentSnap] = useState<Snap | null>(null);

src/screens/notifications/mentions-view.tsx

@@ -35,7 +35,7 @@ const MentionScreen = () => {
   );
 
   return (
-    <View>
+    <>
       <FocusAwareStatusBar />
 
       <FlatList
@@ -52,7 +52,7 @@ const MentionScreen = () => {
           index,
         })}
       />
-    </View>
+    </>
   );
 };
 

src/screens/notifications/notification-card.tsx

@@ -1,9 +1,32 @@
-import { Text, TouchableOpacity, View } from 'react-native';
-
-import { Image } from '@/ui';
+import {
+  faBell,
+  faComment,
+  faMessage,
+  faPlus,
+  faThumbsUp,
+  faUserPlus,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { Text, View } from 'react-native';
 
 import type { Notification } from './types';
 
+function getTypeIcon(title: string | undefined) {
+  if (title?.includes('follower')) {
+    return faUserPlus;
+  } else if (title?.includes('like')) {
+    return faThumbsUp;
+  } else if (title?.includes('comment')) {
+    return faComment;
+  } else if (title?.includes('message')) {
+    return faMessage;
+  } else if (title?.includes('mention')) {
+    return faBell;
+  } else {
+    return faPlus;
+  }
+}
+
 export default function NotificationCard({
   notification,
 }: {
@@ -12,26 +35,28 @@ export default function NotificationCard({
   return (
     <View className="max-w-md flex-1 overflow-hidden rounded-lg bg-white shadow-black">
       <View style={{ width: 2, backgroundColor: 'gray-800' }} />
-      <View style={{ flexDirection: 'row', alignItems: 'center', padding: 6 }}>
-        <Image
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          padding: 6,
+          marginLeft: 5,
+        }}
+      >
+        {/* <Image
           style={{ width: 48, height: 48, borderRadius: 24 }}
           source={{
             uri: notification?.user?.profile_photo_id
               ? notification?.user?.profile_photo_id
               : 'https://i1.wp.com/www.kickassfacts.com/wp-content/uploads/2016/11/panda-bear.jpg',
           }}
-        />
-        <View style={{ marginLeft: 9 }}>
-          <Text style={{ fontSize: 18, fontWeight: '600', color: 'gray-800' }}>
-            Hello john
-          </Text>
-          <Text style={{ color: 'gray-600' }}>
-            Sara was replied on the{' '}
-            <TouchableOpacity>
-              <Text style={{ color: 'blue-500' }}>Upload Image</Text>
-            </TouchableOpacity>
-            .
+        /> */}
+        <FontAwesomeIcon icon={getTypeIcon(notification?.title)} />
+        <View style={{ marginLeft: 11 }}>
+          <Text style={{ fontSize: 18, fontWeight: '600' }}>
+            {notification?.title}
           </Text>
+          <Text>{notification?.content}</Text>
         </View>
       </View>
     </View>

src/screens/notifications/types.ts

@@ -4,6 +4,7 @@ export type Notification = {
   id: number;
   user_id: number;
   type: string;
+  title: string;
   content: string;
   created_at: string;
   updated_at: string;

src/screens/profile/components/card-header-profile.tsx

@@ -56,7 +56,7 @@ const CardHeaderProfile = memo(
         `/api/auth/users/${snap.author}`
       );
 
-      navigate('UserProfile', { user });
+      navigate('Profile', { user });
     };
     return (
       <Pressable className="group block shrink-0" onPress={handlePress}>

src/screens/profile/components/profile-stats.tsx

@@ -81,7 +81,7 @@ export const ProfileStats = ({
       </View>
 
       {user?.id === currentUser?.id ? (
-        <View className="p-3 text-center ">
+        <View className="p-2 text-center ">
           <TouchableOpacity onPress={() => setOption(!option)}>
             <Text className=" tracking-wide text-slate-700" />
             <Text className="text-sm text-blue-600">

src/screens/profile/components/profle-header.tsx

@@ -1,9 +1,9 @@
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import React from 'react';
 
 import type { UserType } from '@/core/auth/utils';
 import { Image, Text, View } from '@/ui';
-import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 
 type ProfileHeaderProps = {
   user: UserType | undefined;
@@ -12,25 +12,22 @@ type ProfileHeaderProps = {
 export const ProfileHeader = ({ user }: ProfileHeaderProps) => {
   return (
     <>
-      <View className="flex w-full items-center justify-center text-center">
-        <View className="relative">
-          <Image
-            source={user?.profile_photo_id}
-            className="order-1 h-28 w-28 rounded-full"
-          />
-        </View>
+      <View className="relative flex w-full items-center justify-center text-center">
+        <Image
+          source={user?.profile_photo_id}
+          className="order-1 h-28 w-28 rounded-full"
+        />
       </View>
-      <View className=" border-gray-200 flex py-5 justify-between items-center">
-        <Text className="block text-center text-xl font-bold tracking-wide text-slate-700">
-          @{user?.username}
+
+      <View className=" flex items-center justify-between border-gray-200 py-5">
+        <Text className="block text-center text-xl font-bold tracking-wide text-slate-700 ">
+          @{user?.username}{' '}
+          {user?.certified ? (
+            <FontAwesomeIcon icon={faCheckCircle} size={18} color="#1DA1F2" />
+          ) : (
+            <></>
+          )}
         </Text>
-        {user?.certified ? (
-          <View className="py-2">
-            <FontAwesomeIcon icon={faCheckCircle} size={20} color="#1DA1F2" />
-          </View>
-        ) : (
-          <></>
-        )}
       </View>
     </>
   );

src/screens/profile/profile-navigator.tsx

@@ -1,20 +1,20 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import * as React from 'react';
 
+import type { Snap } from '@/api';
 import type { UserType } from '@/core/auth/utils';
 import { SignInComplete } from '@/navigation/signin-complete';
 
 import type { Chat } from '../chat/chat-list-screen';
 import ChatScreen from '../chat/chat-screen';
+import FavoriteSnapScreen from './fav-snaps-screen';
 import InteractionsScreen from './interaction-view';
 import ProfileScreen from './profile-screen';
 import StadisticsScreen from './stadistics-screen';
 import VerifyScreen from './verify-screen';
-import { Snap } from '@/api';
-import FavoriteSnapScreen from './fav-snaps-screen';
 
 export type ProfileStackParamList = {
-  UserProfile: { user: UserType };
+  Profile: { user: UserType };
   Followers: { users: UserType[] | undefined };
   Following: { users: UserType[] | undefined };
   FavSnaps: { snaps: Snap[] };
@@ -32,7 +32,7 @@ const Stack = createNativeStackNavigator<ProfileStackParamList>();
 export const ProfileNavigator = () => {
   return (
     <Stack.Navigator>
-      <Stack.Screen name="UserProfile" component={ProfileScreen} />
+      <Stack.Screen name="Profile" component={ProfileScreen} />
       <Stack.Screen name="Followers" component={InteractionsScreen} />
       <Stack.Screen name="Following" component={InteractionsScreen} />
       <Stack.Screen name="FavSnaps" component={FavoriteSnapScreen} />

src/screens/profile/profile-screen.tsx

@@ -14,7 +14,7 @@ import ProfileSnapsView from './profile-snaps-view';
 import ProfileScreenView from './profile-view';
 
 const ProfileScreen = () => {
-  const route = useRoute<RouteProp<ProfileStackParamList, 'UserProfile'>>();
+  const route = useRoute<RouteProp<ProfileStackParamList, 'Profile'>>();
   const currentUser = getUserState();
   const [userData, setUserData] = useState<{
     user: UserType | undefined;

src/screens/profile/profile-view.tsx

@@ -44,7 +44,7 @@ const ProfileScreenView = ({
   }, [user]);
 
   return (
-    <View className="mx-auto mb-2 mt-3 w-full px-6">
+    <View className="mx-auto mb-2 mt-8 w-full px-6 ">
       <ProfileHeader user={user} />
       <FollowActions
         user={user}

src/screens/search/search-navigator.tsx

@@ -15,8 +15,8 @@ import SnapList from './snap-list';
 import Users from './users';
 
 export type SearchStackParamList = {
-  SearchView: any;
-  UserProfile: { user: UserType };
+  Search: any;
+  Profile: { user: UserType };
   Users: { users: UserType[] | undefined };
   Followers: { users: UserType[] | undefined };
   Following: { users: UserType[] | undefined };
@@ -34,9 +34,9 @@ const Stack = createNativeStackNavigator<SearchStackParamList>();
 export const SearchNavigator = () => {
   return (
     <Stack.Navigator>
-      <Stack.Screen name="SearchView" component={SearchView} />
+      <Stack.Screen name="Search" component={SearchView} />
       <Stack.Screen name="Users" component={Users} />
-      <Stack.Screen name="UserProfile" component={ProfileScreen} />
+      <Stack.Screen name="Profile" component={ProfileScreen} />
       <Stack.Screen name="Followers" component={InteractionsScreen} />
       <Stack.Screen name="Following" component={InteractionsScreen} />
       <Stack.Screen name="SnapList" component={SnapList} />

src/screens/users/user-list.tsx

@@ -15,7 +15,7 @@ const UserList = ({ users }: { users: UserType[] }) => {
       <UserCard
         user={item}
         onPress={() => {
-          navigate('UserProfile', { user: item });
+          navigate('Profile', { user: item });
         }}
       />
     );

src/screens/users/user-navigate.tsx

@@ -10,7 +10,7 @@ import InteractionsScreen from '../profile/interaction-view';
 import ProfileScreen from '../profile/profile-screen';
 
 export type UserStackParamList = {
-  UserProfile: { user: UserType };
+  Profile: { user: UserType };
   Followers: { users: UserType[] | undefined };
   Following: { users: UserType[] | undefined };
   EditProfileScreen: { user: UserType | undefined };
@@ -25,7 +25,7 @@ const Stack = createNativeStackNavigator<UserStackParamList>();
 export const UserNavigator = () => {
   return (
     <Stack.Navigator>
-      <Stack.Screen name="UserProfile" component={ProfileScreen} />
+      <Stack.Screen name="Profile" component={ProfileScreen} />
       <Stack.Screen name="Followers" component={InteractionsScreen} />
       <Stack.Screen name="Following" component={InteractionsScreen} />
       <Stack.Screen name="EditProfileScreen" component={SignInComplete} />