feat: storage settings

src/screens/settings/components/storage-settings.tsx

@@ -0,0 +1,59 @@
+import { TrashIcon } from 'lucide-react-native';
+import React from 'react';
+import { ToastAndroid } from 'react-native';
+
+import { clearWatchedEpisodes } from '@/storage/episode';
+import { clearMappings } from '@/storage/media-id';
+import { Button, Text, View } from '@/ui';
+
+const StorageSettings = () => {
+  const handleClearRecentlyData = () => {
+    clearWatchedEpisodes();
+
+    ToastAndroid.show('Cleared cache successfully', ToastAndroid.SHORT);
+  };
+
+  const handleClearMappingData = () => {
+    clearMappings();
+
+    ToastAndroid.show('Cleared cache successfully', ToastAndroid.SHORT);
+  };
+
+  return (
+    <View>
+      <Text className="mb-2 text-xl" weight="medium">
+        Storage
+      </Text>
+
+      <View className="w-full space-y-4">
+        <View className="flex w-full flex-row items-center justify-between">
+          <View className="w-4/6">
+            <Text weight="normal">Clear watched/read cache</Text>
+            <Text weight="light" className="text-gray-200">
+              Storing your recently episodes or chapters.
+            </Text>
+          </View>
+
+          <Button onPress={handleClearRecentlyData}>
+            <TrashIcon size={24} color="white" />
+          </Button>
+        </View>
+
+        <View className="flex flex-row items-center justify-between">
+          <View className="w-4/6">
+            <Text weight="normal">Clear mapping cache</Text>
+            <Text weight="light" className="text-gray-200">
+              Storing mapping between module's media ID and AniList ID.
+            </Text>
+          </View>
+
+          <Button onPress={handleClearMappingData}>
+            <TrashIcon size={24} color="white" />
+          </Button>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default StorageSettings;

src/screens/settings/screen.tsx

@@ -5,6 +5,7 @@ import { ScrollView, Text, View } from '@/ui';
 import AccountSettings from './components/account-settings';
 import AppSettings from './components/app-settings';
 import PlayerSettings from './components/player-settings';
+import StorageSettings from './components/storage-settings';
 
 const SettingsScreen = () => {
   return (
@@ -22,9 +23,13 @@ const SettingsScreen = () => {
           <AccountSettings />
         </View>
 
-        <View>
+        <View className="mb-8">
           <PlayerSettings />
         </View>
+
+        <View>
+          <StorageSettings />
+        </View>
       </View>
     </ScrollView>
   );

src/storage/episode.ts

@@ -116,3 +116,7 @@ export function getWatchedEpisode(mediaId: number): WatchedEpisode | undefined {
     (watchedEpisode) => watchedEpisode.mediaId === mediaId
   );
 }
+
+export const clearWatchedEpisodes = () => {
+  storage.delete(episodeKey);
+};

src/storage/media-id.ts

@@ -88,3 +88,7 @@ export function getMappings(): Mapping[] {
     return [];
   }
 }
+
+export const clearMappings = () => {
+  storage.delete(MAPPING_NAMESPACE);
+};