Merge pull request #170 from himanshu8443/feature

fixed watchlist

android/app/build.gradle

@@ -86,8 +86,8 @@ android {
         applicationId "com.vega"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 84
-        versionName "2.5.7"
+        versionCode 85
+        versionName "2.5.8"
     }
     signingConfigs {
         release {

app.json

@@ -21,12 +21,12 @@
       ]
     ],
     "slug": "vega",
-    "version": "2.5.7",
+    "version": "2.5.8",
     "sdkVersion": "51.0.0",
     "android": {
       "minSdkVersion": 24,
       "package": "com.vega",
-      "versionCode": 84
+      "versionCode": 85
     },
     "platforms": ["ios", "android"]
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vega",
-  "version": "2.5.7",
+  "version": "2.5.8",
   "private": true,
   "scripts": {
     "android": "react-native run-android",

src/App.tsx

@@ -203,7 +203,6 @@ const App = () => {
           tabBarButton: props => {
             return (
               <TouchableOpacity
-                className="bg-red-500"
                 {...props}
                 onPress={e => {
                   if (props.onPress) {

src/lib/zustand/watchListStore.ts

@@ -0,0 +1,41 @@
+import {create} from 'zustand';
+import {MMKV} from '../Mmkv';
+
+export interface WatchList {
+  title: string;
+  poster: string;
+  link: string;
+  provider: string;
+}
+
+interface WatchListStore {
+  watchList: WatchList[];
+  removeItem: (link: string) => void;
+  addItem: (item: WatchList) => void;
+  //   clearWatchList: () => void;
+}
+
+const useWatchListStore = create<WatchListStore>()(set => ({
+  watchList: JSON.parse(MMKV.getString('watchlist') || '[]'),
+  removeItem: link => {
+    const watchList = JSON.parse(MMKV.getString('watchlist') || '[]');
+    const newWatchList = watchList.filter((i: WatchList) => i.link !== link);
+    MMKV.setString('watchlist', JSON.stringify(newWatchList));
+    set({watchList: newWatchList});
+  },
+  addItem: item => {
+    const watchList = JSON.parse(MMKV.getString('watchlist') || '[]');
+    const newWatchList = watchList.filter(
+      (i: WatchList) => i.link !== item.link,
+    );
+    newWatchList.push(item);
+    MMKV.setString('watchlist', JSON.stringify(newWatchList));
+    set({watchList: newWatchList});
+  },
+  //   clearWatchList: () => {
+  //     MMKV.setString('watchlist', '[]');
+  //     set({watchList: []});
+  //   },
+}));
+
+export default useWatchListStore;

src/screens/WatchList.tsx

@@ -1,19 +1,18 @@
 import {View, Text, ScrollView} from 'react-native';
-import React, {useState} from 'react';
-import {MMKV} from '../lib/Mmkv';
+import React from 'react';
 import {useNavigation} from '@react-navigation/native';
 import {WatchListStackParamList} from '../App';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {Image} from 'react-native';
 import {TouchableOpacity} from 'react-native';
 import useThemeStore from '../lib/zustand/themeStore';
+import useWatchListStore from '../lib/zustand/watchListStore';
 
 const Library = () => {
   const {primary} = useThemeStore(state => state);
   const navigation =
     useNavigation<NativeStackNavigationProp<WatchListStackParamList>>();
-  const [library] = useState(MMKV.getArray('watchlist') || []);
-
+  const {watchList} = useWatchListStore(state => state);
   return (
     <ScrollView
       className="h-full w-full bg-black p-2"
@@ -23,7 +22,7 @@ const Library = () => {
       </Text>
       <View className="w-[400px] flex-row justify-center">
         <View className="flex-row flex-wrap gap-3 mb-5 mt-3 w-[340px]">
-          {library.map((item: any, index: number) => {
+          {watchList.map((item: any, index: number) => {
             return (
               <View className="flex flex-col m-" key={item.link + index}>
                 <TouchableOpacity
@@ -50,7 +49,7 @@ const Library = () => {
           })}
         </View>
       </View>
-      {library.length === 0 && (
+      {watchList.length === 0 && (
         <Text className="text-white text-center mt-5">
           No items in Watch List
         </Text>

src/screens/home/Info.tsx

@@ -30,12 +30,14 @@ import {manifest} from '../../lib/Manifest';
 import {BlurView} from 'expo-blur';
 import useThemeStore from '../../lib/zustand/themeStore';
 import {useNavigation} from '@react-navigation/native';
+import useWatchListStore from '../../lib/zustand/watchListStore';
 
 type Props = NativeStackScreenProps<HomeStackParamList, 'Info'>;
 export default function Info({route, navigation}: Props): React.JSX.Element {
   const searchNavigation =
     useNavigation<NativeStackNavigationProp<TabStackParamList>>();
   const {primary} = useThemeStore(state => state);
+  const {addItem, removeItem} = useWatchListStore(state => state);
   const [info, setInfo] = useState<Info>();
   const [meta, setMeta] = useState<any>();
   const [infoLoading, setInfoLoading] = useState(true);
@@ -139,14 +141,12 @@ export default function Info({route, navigation}: Props): React.JSX.Element {
       enableVibrateFallback: true,
       ignoreAndroidSystemSettings: false,
     });
-    const library = MMKV.getArray('watchlist') || [];
-    library.push({
+    addItem({
       title: meta?.name || info?.title,
       poster: meta?.poster || route.params.poster || info?.image,
       link: route.params.link,
       provider: route.params.provider || provider.value,
     });
-    MMKV.setArray('watchlist', library);
     setInLibrary(true);
   };
 
@@ -156,11 +156,7 @@ export default function Info({route, navigation}: Props): React.JSX.Element {
       enableVibrateFallback: true,
       ignoreAndroidSystemSettings: false,
     });
-    const library = MMKV.getArray('watchlist') || [];
-    const newLibrary = library.filter(
-      (item: any) => item.link !== route.params.link,
-    );
-    MMKV.setArray('watchlist', newLibrary);
+    removeItem(route.params.link);
     setInLibrary(false);
   };
   const synopsis = meta?.description