feat: added saved tab screen

- add empty list component for saved and explore

src/containers/Post.tsx

@@ -1,14 +1,15 @@
 import PostCard from '@components/Post/PostCard';
 import { PostType } from '@store/PostStore';
+import savedStore from '@store/SavedStore';
 import { observer } from 'mobx-react-lite';
 
 const Post = ({ post }: { post: PostType }) => (
   <PostCard
     image={post.image}
     title={post.title}
-    onPressSave={() => null}
     category={post.category}
     onPressPost={() => null}
+    onPressSave={() => savedStore.addPost(post)}
   />
 );
 

src/navigators/BlogNavigator.tsx

@@ -6,7 +6,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import ExploreScreen from '@screens/Blog/ExploreScreen';
 import BlogHomeScreen from '@screens/Blog/HomeScreen';
-import TestScreen from '@screens/Test';
+import SavedScreen from '@screens/Blog/SavedScreen';
 
 export type BlogTabNavigatorParamList = {
   Home: undefined;
@@ -35,7 +35,7 @@ const BlogTab = () => (
     }}>
     <Tab.Screen name="Home" component={BlogHomeScreen} />
     <Tab.Screen name="Explore" component={ExploreScreen} />
-    <Tab.Screen name="Saved" component={TestScreen} />
+    <Tab.Screen name="Saved" component={SavedScreen} />
   </Tab.Navigator>
 );
 

src/screens/Blog/ExploreScreen.tsx

@@ -3,10 +3,11 @@ import Post from '@containers/Post';
 import useDebounce from '@hooks/useDebounce';
 import searchStore from '@store/SearchStore';
 import colors from '@theme/colors';
-import { Search } from 'lucide-react-native';
+import { text } from '@theme/text';
+import { BookText, Search } from 'lucide-react-native';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import { ActivityIndicator, FlatList, SafeAreaView, View } from 'react-native';
+import { ActivityIndicator, FlatList, SafeAreaView, Text, View } from 'react-native';
 
 const ExploreScreen = () => {
   const value = useDebounce(searchStore.term, 300);
@@ -17,6 +18,13 @@ const ExploreScreen = () => {
     }
   }, [value]);
 
+  const ListEmpty = () => (
+    <View className="items-center mt-4">
+      <BookText className="text-zinc-500 mb-2" size={28} />
+      <Text className={text({ type: 'subtitle', class: 'text-zinc-600' })}>There is no posts.</Text>
+    </View>
+  );
+
   return (
     <SafeAreaView className="bg-white flex-1">
       <View className="px-4 mb-4">
@@ -41,6 +49,7 @@ const ExploreScreen = () => {
         maxToRenderPerBatch={6}
         data={searchStore.listResult || []}
         renderItem={({ item }) => <Post post={item} />}
+        ListEmptyComponent={!searchStore.loading && searchStore.term ? ListEmpty : null}
       />
     </SafeAreaView>
   );

src/screens/Blog/SavedScreen.tsx

@@ -0,0 +1,34 @@
+import Post from '@containers/Post';
+import savedStore from '@store/SavedStore';
+import { text } from '@theme/text';
+import { BookMarked } from 'lucide-react-native';
+import { observer } from 'mobx-react-lite';
+import { FlatList, SafeAreaView, Text, View } from 'react-native';
+
+const SavedScreen = () => {
+  const ListEmpty = () => (
+    <View className="items-center mt-4">
+      <BookMarked className="text-zinc-500 mb-2" size={28} />
+      <Text className={text({ type: 'subtitle', class: 'text-zinc-600' })}>
+        There is no saved posts.
+      </Text>
+    </View>
+  );
+
+  return (
+    <SafeAreaView className="bg-white flex-1">
+      <FlatList
+        windowSize={6}
+        className="px-5 pt-4"
+        removeClippedSubviews
+        initialNumToRender={6}
+        maxToRenderPerBatch={6}
+        ListEmptyComponent={ListEmpty}
+        data={savedStore.listResult || []}
+        renderItem={({ item }) => <Post post={item} />}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default observer(SavedScreen);

src/store/SavedStore.ts

@@ -0,0 +1,42 @@
+import { destroy, t } from 'mobx-state-tree';
+
+import { Post, PostType } from './PostStore';
+
+const SavedStore = t
+  .model('SavedStore', {
+    saved: t.map(Post),
+  })
+  .views(self => ({
+    get listResult() {
+      return Array.from(self.saved.values());
+    },
+  }))
+  .actions(self => ({
+    addPost: (post: PostType) => {
+      const savedPost = self.saved.get(post.id);
+      if (savedPost) {
+        destroy(savedPost);
+
+        return;
+      }
+      self.saved.set(
+        post.id,
+        Post.create({
+          id: post.id,
+          mediaUrl: post.mediaUrl,
+          title: post.title,
+          category: post.category,
+          image: post.image,
+          imageLoaded: post.imageLoaded,
+        }),
+      );
+    },
+
+    clearAll() {
+      self.saved.clear();
+    },
+  }));
+
+const savedStore = SavedStore.create({});
+
+export default savedStore;