Move database to database provider from watermelondb

chadmuro · Nov 3, 2023 · 6fff365 · 6fff365
1 parent 1a2f997
commit 6fff365
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 112 deletions.
diff --git a/app/(index)/_layout.tsx b/app/(index)/_layout.tsx
@@ -1,15 +1,15 @@
 import { useEffect } from "react";
 import { Q } from "@nozbe/watermelondb";
+import { useDatabase } from "@nozbe/watermelondb/react";
 import { SplashScreen, Stack, useRouter } from "expo-router";
 
-import { useDatabase } from "../../contexts/databaseContext";
 import { useStudy } from "../../contexts/studyContext";
 import Settings from "../../model/Settings";
 
 export default function Layout() {
   const { loading } = useStudy();
   const router = useRouter();
-  const { database } = useDatabase();
+  const database = useDatabase();
 
   useEffect(() => {
     async function initialLoad() {

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -1,8 +1,9 @@
 import React, { Suspense } from "react";
-// import { useColorScheme } from "react-native";
+import { useColorScheme } from "react-native";
+import { DatabaseProvider, useDatabase } from "@nozbe/watermelondb/react";
 import {
   DarkTheme,
-  // DefaultTheme,
+  DefaultTheme,
   ThemeProvider
 } from "@react-navigation/native";
 import { Edit3, List, Settings } from "@tamagui/lucide-icons";
@@ -11,15 +12,13 @@ import { SplashScreen, Tabs } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { TamaguiProvider, Text, Theme } from "tamagui";
 
-import { DatabaseProvider } from "../contexts/databaseContext";
 import { StudyProvider } from "../contexts/studyContext";
 import config from "../tamagui.config";
+import databaseProvider from "../utils/database";
 
 SplashScreen.preventAutoHideAsync();
 
 export default function Layout() {
-  // const colorScheme = useColorScheme();
-
   const [loaded] = useFonts({
     Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
     InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf")
@@ -30,51 +29,60 @@ export default function Layout() {
   return (
     <TamaguiProvider config={config}>
       <Suspense fallback={<Text>Loading...</Text>}>
-        <Theme name="dark">
-          <ThemeProvider value={DarkTheme}>
-            <DatabaseProvider>
-              <StudyProvider>
-                <Tabs
-                  screenOptions={{
-                    headerShown: false,
-                    tabBarActiveTintColor: "red"
-                  }}
-                >
-                  <Tabs.Screen
-                    name="(index)"
-                    options={{
-                      title: "Study",
-                      tabBarIcon: ({ focused }) => (
-                        <Edit3 color={focused ? "red" : "white"} />
-                      )
-                    }}
-                  />
-                  <Tabs.Screen
-                    name="vocabulary"
-                    options={{
-                      title: "Vocabulary",
-                      tabBarIcon: ({ focused }) => (
-                        <List color={focused ? "red" : "white"} />
-                      )
-                    }}
-                  />
-                  <Tabs.Screen
-                    name="settings"
-                    options={{
-                      href: null,
-                      title: "Settings",
-                      tabBarIcon: ({ focused }) => (
-                        <Settings color={focused ? "red" : "white"} />
-                      )
-                    }}
-                  />
-                </Tabs>
-                <StatusBar style="light" />
-              </StudyProvider>
-            </DatabaseProvider>
-          </ThemeProvider>
-        </Theme>
+        <DatabaseProvider database={databaseProvider}>
+          <StudyProvider>
+            <ThemeLayout />
+          </StudyProvider>
+        </DatabaseProvider>
       </Suspense>
     </TamaguiProvider>
   );
 }
+
+function ThemeLayout() {
+  const database = useDatabase();
+  const colorScheme = useColorScheme();
+
+  return (
+    <Theme name="dark">
+      <ThemeProvider value={DarkTheme}>
+        <Tabs
+          screenOptions={{
+            headerShown: false,
+            tabBarActiveTintColor: "red"
+          }}
+        >
+          <Tabs.Screen
+            name="(index)"
+            options={{
+              title: "Study",
+              tabBarIcon: ({ focused }) => (
+                <Edit3 color={focused ? "red" : "$red5"} />
+              )
+            }}
+          />
+          <Tabs.Screen
+            name="vocabulary"
+            options={{
+              title: "Vocabulary",
+              tabBarIcon: ({ focused }) => (
+                <List color={focused ? "red" : "$red5"} />
+              )
+            }}
+          />
+          <Tabs.Screen
+            name="settings"
+            options={{
+              // href: null,
+              title: "Settings",
+              tabBarIcon: ({ focused }) => (
+                <Settings color={focused ? "red" : "$red5"} />
+              )
+            }}
+          />
+        </Tabs>
+        <StatusBar style="light" />
+      </ThemeProvider>
+    </Theme>
+  );
+}
diff --git a/contexts/databaseContext.tsx b/contexts/databaseContext.tsx
diff --git a/contexts/studyContext.tsx b/contexts/studyContext.tsx
@@ -6,14 +6,13 @@ import {
   useState
 } from "react";
 import { Q } from "@nozbe/watermelondb";
+import { useDatabase } from "@nozbe/watermelondb/react";
 import dayjs from "dayjs";
 
 import Review from "../model/Review";
 import Study from "../model/Study";
 import { generateRandomNumbers } from "../utils/generateNumbers";
 
-import { useDatabase } from "./databaseContext";
-
 type StudyContextType = {
   study: Study;
   studyIds: number[];
@@ -42,7 +41,7 @@ export const StudyContext = createContext<StudyContextType | undefined>(
 );
 
 const StudyProvider = ({ children }: PropsWithChildren<unknown>) => {
-  const { database } = useDatabase();
+  const database = useDatabase();
   const [study, setStudy] = useState<Study | null>(null);
   const [reviewCards, setReviewCards] = useState<Review[]>([]);
   const [loading, setLoading] = useState(true);

diff --git a/utils/database.ts b/utils/database.ts
@@ -0,0 +1,31 @@
+import { Database } from "@nozbe/watermelondb";
+import SQLiteAdapter from "@nozbe/watermelondb/adapters/sqlite";
+
+import migrations from "../model/migrations";
+import Review from "../model/Review";
+import schema from "../model/schema";
+import Settings from "../model/Settings";
+import Study from "../model/Study";
+
+const adapter = new SQLiteAdapter({
+  schema,
+  // (You might want to comment it out for development purposes -- see Migrations documentation)
+  migrations,
+  // (optional database name or file system path)
+  // dbName: 'myapp',
+  // (recommended option, should work flawlessly out of the box on iOS. On Android,
+  // additional installation steps have to be taken - disable if you run into issues...)
+  jsi: true /* Platform.OS === 'ios' */,
+  // (optional, but you should implement this method)
+  onSetUpError: (error) => {
+    // Database failed to load -- offer the user to reload the app or log out
+  }
+});
+
+// Then, make a Watermelon database from it!
+const database = new Database({
+  adapter,
+  modelClasses: [Review, Study, Settings]
+});
+
+export default database;