Merge pull request #11 from expo-starter/chore/upgrade-drizzleorm

chore: upgrade drizzle ORM and add test live query

Author: younes200

.vscode/extension.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "biomejs.biome",
+    "expo.vscode-expo-tools",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

README.md

@@ -16,18 +16,17 @@ Say goodbye to time-consuming chores such implementing libraries, and developing
 - 💎 Integrate with [NativeWind v4](https://www.nativewind.dev), Tailwind CSS for React Native
 - 📁 Expo Router and Expo API
 - 📦 [zustand](docs.pmnd.rs/zustand) - State management solution.
-- 🎨 Common components : Icons, ThemeToggle, Avatar, Button, Card, Progress, Text, Tooltip
+- 🎨 Common components from the [rn-reusables](https://github.com/mrzachnugent/react-native-reusables) library: Icons, ThemeToggle, Avatar, Button, Card, Progress, Text, Tooltip.
 - 🌗 Dark and light mode - Android Navigation Bar matches mode and Persistant mode
 - 💡 Absolute Imports using `@` prefix
 - 📏 Linter and Code Formatter with [biome](https://biomejs.dev/)
 - 🗂 VSCode recommended extensions, settings, and snippets to enhance the developer experience.
 
 New :
 - 💽 Local-first based on [Expo SQLite for](https://docs.expo.dev/versions/latest/sdk/sqlite/) for native and [Sqlite.js](https://github.com/sql-js/sql.js) for Web
-- 💽 Full integrated with [DrizzleORM](https://drizzle.dev)
+- 💽 Full integrated with [DrizzleORM](https://drizzle.dev) including live query
 
 In-progress :
-- Live query with [DrizzleORM](https://drizzle.dev)
 - [Cloudflare D1](https://developers.cloudflare.com/d1/) for data persistance on Web as well as offline mode
 
 ### Requirements
@@ -70,5 +69,5 @@ See [LICENSE](LICENSE) for more information.
 
 ---
 
-Made with ♥ by [Launchtrack](https://launchtrack.dev) [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40younes200)](https://twitter.com/younes200)
+Made with ♥ by [Expo starter](expostarter.com) [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40younes200)](https://twitter.com/younes200)
 

app/_layout.tsx

@@ -79,7 +79,7 @@ export default function RootLayout() {
             <BottomSheetModalProvider>
               <Stack initialRouteName="index" >
                 <Stack.Screen name="index" />
-                <Stack.Screen name="create" options={{presentation: "modal"}} />
+                <Stack.Screen name="create" options={{presentation: "containedModal"}} />
 
                 <Stack.Screen
                   name="settings/index"

app/create.tsx

@@ -102,18 +102,16 @@ export default function FormScreen() {
   async function handleSubmit(values: z.infer<typeof formSchema>) {
 
     try {
-      const id = await db?.insert(habitTable).values({
+      await db?.insert(habitTable).values({
         ...values,
         category: values.category.value,
         duration: Number(values.duration),
       }).returning()
-      console.log("id", id)
+      router.replace("/")
     } catch (e) {
       console.error(e)
     }
 
-
-    router.dismiss()
   }
   return (
     <ScrollView

app/habits/[id].tsx

@@ -49,7 +49,6 @@ import {Text} from "@/components/ui/text";
 import {useDatabase} from "@/db/provider";
 import {habitTable} from "@/db/schema";
 import {cn} from "@/lib/utils";
-import {ChevronLeft} from "lucide-react-native";
 import type {Habit} from "@/lib/storage";
 
 const HabitCategories = [
@@ -189,7 +188,6 @@ export default function FormScreen() {
       <Stack.Screen
         options={{
           title: "Habit",
-          headerLeft: () => <Pressable onPress={() => router.replace("/")}><ChevronLeft width={30} height={30} /></Pressable>
         }}
       />
       <FormElement

app/index.tsx

@@ -3,27 +3,22 @@ import {FlashList} from "@shopify/flash-list";
 import {eq} from "drizzle-orm";
 import {Link, Stack, useFocusEffect, useRouter} from "expo-router";
 import * as React from "react";
-import {FlatList, Pressable, View} from "react-native";
+import {Pressable, View} from "react-native";
 import {ThemeToggle} from "@/components/ThemeToggle";
-import {Badge} from "@/components/ui/badge";
 import {Button} from "@/components/ui/button";
+import {useLiveQuery} from "drizzle-orm/expo-sqlite";
 
 import {Progress} from "@/components/ui/progress";
 import {Text} from "@/components/ui/text";
-import {type Habit, habitTable} from "@/db/schema";
+import {habitTable} from "@/db/schema";
 import {Plus, PlusCircle} from "@/components/Icons";
 import {useMigrationHelper} from "@/db/drizzle";
 import {useDatabase} from "@/db/provider";
-import Settings from "./settings";
 import {SettingsIcon} from "lucide-react-native";
 
-import {useForm} from "react-hook-form";
-import {zodResolver} from "@hookform/resolvers/zod";
-import * as z from "zod";
-import {useSafeAreaInsets} from "react-native-safe-area-context";
-import {HabitCard} from "@/components/habit";
-
 
+import {HabitCard} from "@/components/habit";
+import type {Habit} from "@/lib/storage";
 
 export default function Screen() {
   const {success, error} = useMigrationHelper();
@@ -45,67 +40,40 @@ export default function Screen() {
 
   return <ScreenContent />;
 }
-const HabitCategories = [
-  {value: "health", label: "Health And Wellness"},
-  {value: "personal-development", label: "Personal Development"},
-  {value: "social-and-relationshipts", label: "Social And Relationships"},
-  {value: "productivity", label: "Productivity"},
-  {value: "creativity", label: "Creativity"},
-  {value: "mindfulness", label: "Mindfulness"},
-  {value: "financial", label: "Financial"},
-  {value: "leisure", label: "Leisure"},
-]
+
 function ScreenContent() {
   const {db} = useDatabase();
+  const {data: habits, error} = useLiveQuery(db?.select().from(habitTable));
 
-  const [habits, setHabits] = React.useState<Habit[]>([]);
   const ref = React.useRef(null);
   useScrollToTop(ref);
 
   const router = useRouter();
 
-  useFocusEffect(
-    React.useCallback(() => {
-      fetchHabits();
-    }, []),
+  const renderItem = React.useCallback(
+    ({item}: {item: Habit}) => <HabitCard {...item} />,
+    [],
   );
-  const formSchema = z.object({
-    category: z.object(
-      {value: z.string(), label: z.string()},
-      {
-        invalid_type_error: 'Please select a category',
-      }
-    ),
-  });
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    values: {
-      category: {value: "health", label: "Health And Wellness"}
-    }
-  }
-  )
-  const fetchHabits = async () => {
-    const fetchedHabits = await db?.select().from(habitTable).execute();
-    setHabits(fetchedHabits ?? []);
-  };
-
-  const handleDeleteHabit = async (id: string) => {
-    await db?.delete(habitTable).where(eq(habitTable.id, id)).execute();
-    await fetchHabits();
-    return;
-  };
-
-  React.useEffect(() => {
-    fetchHabits();
-  }, []);
 
+  if (error) {
+    return (
+      <View className="flex-1 items-center justify-center bg-secondary/30">
+        <Text className="text-destructive pb-2 ">Error Loading data</Text>
+      </View>
+    );
+  }
   return (
     <View className="flex-1 gap-5 p-6 bg-secondary/30">
+
       <Stack.Screen
         options={{
           title: "Habits",
           headerRight: () => <ThemeToggle />,
-          headerLeft: () => <Button variant="link" onPress={() => router.navigate("settings")}><SettingsIcon /></Button>
+          headerLeft: () => (
+            <Button variant="link" onPress={() => router.navigate("settings")}>
+              <SettingsIcon />
+            </Button>
+          ),
         }}
       />
       <FlashList
@@ -129,10 +97,8 @@ function ScreenContent() {
         )}
         ItemSeparatorComponent={() => <View className="p-2" />}
         data={habits}
-        renderItem={({item}) => (
-          <HabitCard habit={item} onPress={() => router.replace(`/habits/${ item.id }`)} />
-        )}
-        keyExtractor={(item) => item.id}
+        renderItem={renderItem}
+        keyExtractor={(_, index) => `item-${ index }`}
         ListFooterComponent={<View className="py-4" />}
       />
       <View className="absolute bottom-10 right-8">
@@ -144,7 +110,6 @@ function ScreenContent() {
           </Pressable>
         </Link>
       </View>
-
     </View>
   );
 }

bun.lockb

@@ -13,37 +13,37 @@ import {
 } from "@/components/ui/card";
 import {Badge} from "../ui/badge";
 import {Progress} from "../ui/progress";
-type HabitProps = {
-  habit: Habit;
-  onPress: () => void;
-};
+import {Link} from "expo-router";
 
-export const HabitCard: React.FC<HabitProps> = ({habit, onPress}) => {
-  return (
-    <Pressable onPress={onPress}>
-      <Card className="rounded-2xl">
-        <CardHeader>
-          <View className="flex-row gap-4 items-center">
-            <CardTitle className="pb-2">
-              {habit.name}
-            </CardTitle>
-            <Badge variant="outline">
-              <Text >{habit.category}</Text>
-            </Badge>
-          </View>
+type HabitProps = Habit;
 
-          <View className="flex-col">
-            <CardDescription className="text-base font-semibold">
-              {habit.description}
-            </CardDescription>
-          </View>
-        </CardHeader>
-        <CardContent />
-        <CardFooter className="flex-col gap-3 flex-1">
-          <Progress value={10} className="h-2" indicatorClassName="bg-sky-600" />
-        </CardFooter>
-      </Card>
-    </Pressable >
+export const HabitCard: React.FC<HabitProps> = ({id, name, description, category}: HabitProps) => {
+  return (
+    <Link href={`/habits/${ id }`} asChild>
+      <Pressable>
+        <Card className="rounded-2xl">
+          <CardHeader>
+            <View className="flex-row gap-4 items-center">
+              <CardTitle className="pb-2">
+                {name}
+              </CardTitle>
+              <Badge variant="outline">
+                <Text >{category}</Text>
+              </Badge>
+            </View>
 
+            <View className="flex-col">
+              <CardDescription className="text-base font-semibold">
+                {description}
+              </CardDescription>
+            </View>
+          </CardHeader>
+          <CardContent />
+          <CardFooter className="flex-col gap-3 flex-1">
+            <Progress value={10} className="h-2" indicatorClassName="bg-sky-600" />
+          </CardFooter>
+        </Card>
+      </Pressable>
+    </Link>
   );
 };

components/habit/card.tsx

@@ -1,2 +1 @@
 export * from "./card";
-export * from "./form";

components/habit/form.tsx

@@ -4,7 +4,7 @@ import { useMigrations } from "drizzle-orm/expo-sqlite/migrator";
 
 import migrations from "./migrations/migrations";
 
-const expoDb = openDatabaseSync("database.db");
+const expoDb = openDatabaseSync("database.db", { enableChangeListener: true });
 const db = drizzle(expoDb);
 
 export const initialize = (): Promise<ExpoSQLiteDatabase> => {