Merge pull request #218 from Cybermaxi7/feature/query-zustand

set react query and zustand for the mobile app

mobile-app/app/_layout.tsx

@@ -15,6 +15,8 @@ import { View, Text, StyleSheet } from "react-native";
 import { Colors } from "@/constants/Colors";
 import { LinearGradient } from "expo-linear-gradient";
 import { Fonts } from "@/constants/Fonts";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "@/queryClient";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -37,22 +39,24 @@ export default function RootLayout() {
 
   if (splashVisible && !loaded) {
     return (
-      <LinearGradient
-        colors={[Colors.light.gradient, Colors.light.primary]}
-        style={styles.container}
-      >
-        <View style={styles.titleContainer}>
-          <Text style={styles.splashTitle}>
-            Lyric
-            <Text style={styles.splashFlip}>Flip</Text>
-          </Text>
-        </View>
-        <View style={styles.bottomContainer}>
-          <Text style={styles.splashSubtitle}>
-            Have fun testing your lyrical knowledge 🎵
-          </Text>
-        </View>
-      </LinearGradient>
+      <QueryClientProvider client={queryClient}>
+        <LinearGradient
+          colors={[Colors.light.gradient, Colors.light.primary]}
+          style={styles.container}
+        >
+          <View style={styles.titleContainer}>
+            <Text style={styles.splashTitle}>
+              Lyric
+              <Text style={styles.splashFlip}>Flip</Text>
+            </Text>
+          </View>
+          <View style={styles.bottomContainer}>
+            <Text style={styles.splashSubtitle}>
+              Have fun testing your lyrical knowledge 🎵
+            </Text>
+          </View>
+        </LinearGradient>
+      </QueryClientProvider>
     );
   }
 

mobile-app/package.json

@@ -19,11 +19,13 @@
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/drawer": "^7.1.1",
     "@react-navigation/native": "^7.0.14",
+    "@tanstack/react-query": "^5.66.8",
     "expo": "~52.0.33",
     "expo-blur": "~14.0.3",
     "expo-constants": "~17.0.5",
     "expo-font": "~13.0.3",
     "expo-haptics": "~14.0.1",
+    "expo-linear-gradient": "~14.0.2",
     "expo-linking": "~7.0.5",
     "expo-router": "~4.0.17",
     "expo-splash-screen": "~0.29.22",
@@ -40,10 +42,11 @@
     "react-native-screens": "~4.4.0",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.5",
-    "expo-linear-gradient": "~14.0.2"
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@tsconfig/react-native": "^3.0.5",
     "@types/jest": "^29.5.12",
     "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^18.3.0",

mobile-app/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 1000, // 1 minute
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

mobile-app/store/useStore.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface StoreState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+}
+
+export const useStore = create<StoreState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}));

mobile-app/tsconfig.json

@@ -3,15 +3,16 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": [
-        "./*"
-      ]
-    }
+      "@/*": ["./*"]
+    },
+    "jsx": "react-native"
   },
   "include": [
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
-, "components/Game.jsx", "components/ApiServices.ts"  ]
+    "expo-env.d.ts",
+    "components/Game.jsx",
+    "components/ApiServices.ts"
+  ]
 }