Update README.md

App.tsx

@@ -15,7 +15,16 @@ import TitleBar from './components/TitleBar';
 import db from './lib/client';
 
 const findTheme = async () => {
-  const theme = await AsyncStorage.getItem('theme');
+  const res = await db.from("settings").select().eq({id: 'theme'})
+  let theme = 'auto'
+  if (!res.error){
+    if (res.data.length > 0){
+      theme = res.data[0].value
+    }else{
+      const res = await db.from('settings').insert({id: 'theme', value: 'auto'})
+      console.log(res)
+    }
+  }
   if(theme === 'dark') {
     return dark;
   } else if(theme === 'light') {
@@ -35,7 +44,13 @@ const findTheme = async () => {
 }
 
 const findThemeMode = async () => {
-  const theme = await AsyncStorage.getItem('theme');
+  const res = await db.from("settings").select().eq({id:'theme'})
+  let theme = 'auto'
+  if (!res.error){
+    if (res.data.length > 0){
+      theme = res.data[0].value
+    }
+  }
   if (theme){
     return theme;
   } else {
@@ -55,7 +70,6 @@ export default function App() {
   const [others, setOthers] = useState([]);
 
 
-
   useEffect(() => {
     const fetchData = async () => {
       const theme = await findTheme();
@@ -97,22 +111,22 @@ export default function App() {
       case 'dark':
         setThemeMode('dark');
         setTheme(dark);
-        await AsyncStorage.setItem('theme', 'dark');
+        await db.from("settings").update({value: 'dark'}).eq({id: 'theme'})
         break;
       case 'light':
         setThemeMode('light');
         setTheme(light);
-        await AsyncStorage.setItem('theme', 'light');
+        await db.from('settings').update({value: 'light'}).eq({id: 'theme'})
         break;
       case 'solorizedDark':
         setThemeMode('solorizedDark');
         setTheme(solorizedDark);
-        await AsyncStorage.setItem('theme', 'solorizedDark');
+        await db.from('settings').update({value: 'solorizedDark'}).eq({id: 'theme'})
         break;
       case 'oled':
         setThemeMode('oled');
         setTheme(oled);
-        await AsyncStorage.setItem('theme', 'oled');
+        await db.from('settings').update({value: 'oled'}).eq({id: 'theme'})
         break;
       default:
         setThemeMode('auto');
@@ -122,7 +136,7 @@ export default function App() {
         } else {
           setTheme(light);
         }
-        await AsyncStorage.setItem('theme', "auto");
+        await db.from('settings').update({id: 'theme', value: 'auto'}).eq({id: 'theme'})
         break;
     }
   }

README.md

@@ -1,3 +1,5 @@
 # Tali
 
 React Native app to keep track of movies, tv shows and other interesting stuff you want to watch or do. Gone are the days of using an unorganized note app to keep track of what you want to or already have watched.
+
+![tali-grid-preview](https://github.com/MoistOverflow/Tali/assets/96554264/91330631-26fb-47f3-84e6-958064a0470d)

app.json

@@ -9,7 +9,7 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#000000"
     },
     "assetBundlePatterns": [
       "**/*"

lib/client.ts

@@ -1,5 +1,5 @@
 import nasa from './nasa';
-import { MovieSchema, ShowSchema, TestTableShema, OtherSchema, CategorySchema} from './schemas';
+import { MovieSchema, ShowSchema, TestTableShema, OtherSchema, CategorySchema, SettingSchema} from './schemas';
 
 
 const tableSchemas = {
@@ -7,7 +7,7 @@ const tableSchemas = {
     shows: ShowSchema,
     others: OtherSchema,
     categories: CategorySchema,
-    test: TestTableShema,
+    settings: SettingSchema ,
 }
 
 

lib/nasa.ts

@@ -55,6 +55,15 @@ export default class nasa{
         let table:any = await AsyncStorage.getItem(this.#tableName);
         if(table){
             table = JSON.parse(table);
+            console.log(newData)
+            if ('id' in newData){
+                table.forEach((s:any)=>{
+                    if(s.id === newData.id){
+                        this.error = 'Id already exists';
+                        return this
+                    }
+                });
+            }else{
                 let maxId = 0;
                 table.forEach((s:any)=>{
                     if(s.id > maxId){
@@ -62,6 +71,7 @@ export default class nasa{
                     }
                 });
                 newData.id = maxId + 1;
+            }
             const {data, error} = await this.#tableSchemas[this.#tableName].safeParse(newData);
             if(error){
                 this.error = error.message;
@@ -72,7 +82,9 @@ export default class nasa{
             this.data = data
             return this;
         }else{
+            if (!('id' in newData)){
                 newData.id = 1;
+            }
             const {data, error} = await this.#tableSchemas[this.#tableName].safeParse(newData);
             if(error){
                 this.error = error.message;

lib/schemas.ts

@@ -89,3 +89,9 @@ export const TestTableShema = z.object({
     test: z.string(),
 }).strict();
 export type TestTable = z.infer<typeof TestTableShema>;
+
+export const SettingSchema = z.object({
+    id: z.string(),
+    value: z.string().or(z.boolean().or(z.number()))
+})
+export type SettingsTable = z.infer<typeof SettingSchema>

routes/Movies.tsx

@@ -244,6 +244,12 @@ const style = (theme:any) => {
             alignItems: 'center',
             justifyContent: 'center',
         },
+        delete: {
+            color: 'red',
+            textAlign: 'center',
+            marginTop: 10,
+        },
+        
     });
 }
 
@@ -457,8 +463,8 @@ function EditMovieModal({editMovie, setEdditMovie, update, theme, remove}:any){
                                 value={editMovie.notes}
                             />
                         </View>
-                        <View style={{...st.row, width: '90%', marginLeft: 20, justifyContent: "flex-start"}}>
+                        <View style={{...st.row, width: '90%', marginLeft: 20, justifyContent: "center"}}>
-                            <Button title="delete" onPress={()=>remove(editMovie.id)} theme={theme} style={{backgroundColor: theme.danger, paddingHorizontal: 25, margin: 0}}/>
+                            <Text style={st.delete} onLongPress={()=>remove(editMovie.id)}>long press to delete</Text>
                         </View>
                     </View>
                 </View>

routes/Other.tsx

@@ -266,6 +266,11 @@ const style = (theme:any) => {
             paddingHorizontal: 10,
             padding: 5,
         },
+        delete: {
+            color: 'red',
+            textAlign: 'center',
+            marginTop: 10,
+        },
     });
 }
 
@@ -520,8 +525,8 @@ function EditshowModal({editOther, setEditOther, update, theme, remove, selCat}:
                                 value={editOther.notes}
                             />
                         </View>
-                        <View style={{...st.row, width: '90%', marginLeft: 20, justifyContent: "flex-start"}}>
+                        <View style={{...st.row, width: '90%', marginLeft: 20, justifyContent: "center"}}>
-                            <Button title="delete" onPress={()=>remove(editOther.id)} theme={theme} style={{backgroundColor: theme.danger, paddingHorizontal: 25, margin: 0,}}/>
+                            <Text style={st.delete} onLongPress={()=>remove(editor.id)}>long press to delete</Text>
                         </View>
                     </View>
                 </View>

routes/OtherCat.tsx

@@ -58,10 +58,11 @@ export default function OtherCat({theme, otherCategories, setOtherCategories, se
     }
 
     const handleDelete = async () => {
-        const res = await db.from('categories').delete().eq({id: newCat.id});
+        let res = await db.from('categories').delete().eq({id: newCat.id});
         if (res.data) {
             setOtherCategories([...otherCategories.filter((c:any) => c.id !== newCat.id)])
         }
+        res = await db.from('others').delete().eq({category: newCat.id})
         setModalVisible(false);
         setNewCat({title: '', showEpisodes: false});
         setEditPop(false);

routes/Settings.tsx

@@ -27,13 +27,10 @@ export default function Settings({theme, changeTheme, themeMode, clearAll, resyn
     const handleExport = async () => {
         const dataToExport = await db.fileExport()
         const data = JSON.stringify(dataToExport);
-        // export dataToExport in json format to a file using react-native-fs
         if (Platform.OS === 'android') {
             const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
             if (permissions.granted) {
-                // Gets SAF URI from response
                 const uri = permissions.directoryUri;
-                // Writes file to SAF URI
                 await StorageAccessFramework.createFileAsync(uri, 'tali', 'application/json').then(async (fileUri) => {
                     await  StorageAccessFramework.writeAsStringAsync(fileUri, data, { encoding: FileSystem.EncodingType.UTF8 }).catch((err) => console.log(err))
                 })
@@ -104,8 +101,8 @@ export default function Settings({theme, changeTheme, themeMode, clearAll, resyn
                 />
             </View>
             <View style={{...st.row, zIndex:0}}>
-                <Button theme={theme} title="Export Data" onPress={handleExport} style={{padding:30, flex:1}}/>
+                <Button theme={theme} title="Export" onPress={handleExport} style={{padding:30, flex:1}}/>
-                <Button theme={theme} title="Import Data" onPress={handleImport} style={{padding:30, flex:1}}/>
+                <Button theme={theme} title="Import" onPress={handleImport} style={{padding:30, flex:1}}/>
             </View>
             <View style={{...st.row, zIndex:0}}>
                 <Button theme={theme} title="Delete All Data" onPress={() => setDeleteAllModal(true)} style={{width:'100%'}}/>

routes/Shows.tsx

@@ -265,6 +265,11 @@ const style = (theme:any) => {
             paddingHorizontal: 10,
             padding: 5,
         },
+        delete: {
+            color: 'red',
+            textAlign: 'center',
+            marginTop: 10,
+        },
     });
 }
 
@@ -517,8 +522,8 @@ function EditshowModal({editShow, setEditShow, update, theme, remove}:any){
                                 value={editShow.notes}
                             />
                         </View>
-                        <View style={{...st.row, width: '90%', marginLeft: 20, justifyContent: "flex-start"}}>
+                        <View style={{...st.row, width: '90%', marginLeft: 20, justifyContent: "center"}}>
-                            <Button title="delete" onPress={()=>remove(editShow.id)} theme={theme} style={{backgroundColor: theme.danger, paddingHorizontal: 25, margin: 0,}}/>
+                            <Text style={st.delete} onLongPress={()=>remove(editShow.id)}>long press to delete</Text>
                         </View>
                     </View>
                 </View>