feat: connect to database & fetch suar

app/_layout.tsx

@@ -1,8 +1,9 @@
-import { useCallback, type ReactNode } from "react";
+import { useCallback, type ReactNode, useLayoutEffect } from "react";
 import { Slot, SplashScreen } from "expo-router";
 import { SafeAreaView, StatusBar, StyleSheet, I18nManager } from "react-native";
 import { useFonts } from "expo-font";
-
+import { openDatabase } from "@/db/utils";
+import mydb from "@/assets/quran.db";
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout(): ReactNode {
@@ -24,6 +25,8 @@ export default function RootLayout(): ReactNode {
     return null;
   }
 
+  openDatabase(mydb);
+
   return (
     <SafeAreaView onLayout={onLayoutRootView} style={styles.container}>
       <Slot />

db/hooks/useSuar.ts

@@ -0,0 +1,33 @@
+import { Surah } from "@/types/Suar";
+import { ColumnMapping, columnTypes, Repository } from "expo-sqlite-orm";
+import { useEffect, useMemo, useState } from "react";
+const useSuar = () => {
+  const [suar, setSuar] = useState<Surah[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const columMapping: ColumnMapping<Surah> = {
+    id: { type: columnTypes.INTEGER },
+    number: { type: columnTypes.INTEGER },
+    name_ar: { type: columnTypes.TEXT },
+    name_en: { type: columnTypes.TEXT },
+    name_en_translation: { type: columnTypes.TEXT },
+    created_at: { type: columnTypes.INTEGER, default: () => Date.now() },
+    updated_at: { type: columnTypes.INTEGER, default: () => Date.now() },
+    type: { type: columnTypes.TEXT },
+  };
+
+  const SurahsRepo = useMemo(() => {
+    return new Repository("quran.db", "surahs", columMapping);
+  }, []);
+
+  useEffect(() => {
+    SurahsRepo.query({ order: { number: "ASC" } }).then((value) => {
+      setSuar(value);
+      setLoading(false);
+    });
+  }, []);
+
+  return { loading, data: suar };
+};
+
+export default useSuar;

db/utils.ts

@@ -0,0 +1,23 @@
+import * as FileSystem from "expo-file-system";
+import * as SQLite from "expo-sqlite";
+import { Asset } from "expo-asset";
+
+async function openDatabase(
+  pathToDatabaseFile: string
+): Promise<SQLite.SQLiteDatabase> {
+  if (
+    !(await FileSystem.getInfoAsync(FileSystem.documentDirectory + "SQLite"))
+      .exists
+  ) {
+    await FileSystem.makeDirectoryAsync(
+      FileSystem.documentDirectory + "SQLite"
+    );
+  }
+  await FileSystem.downloadAsync(
+    Asset.fromModule(pathToDatabaseFile).uri,
+    FileSystem.documentDirectory + "SQLite/quran.db"
+  );
+  return SQLite.openDatabase("quran.db");
+}
+
+export { openDatabase };

declarations.d.ts

@@ -4,3 +4,8 @@ declare module "*.svg" {
   const content: React.FC<SvgProps>;
   export default content;
 }
+
+declare module "*.db" {
+  const content: any;
+  export default content;
+}

metro.config.js

@@ -3,6 +3,8 @@ const { getDefaultConfig } = require("expo/metro-config");
 module.exports = (() => {
   const config = getDefaultConfig(__dirname);
 
+  config.resolver.assetExts.push("db");
+
   const { transformer, resolver } = config;
 
   config.transformer = {

package.json

@@ -20,6 +20,7 @@
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.3",
     "expo-splash-screen": "~0.26.3",
+    "expo-sqlite-orm": "^2.1.0",
     "expo-status-bar": "~1.11.1",
     "expo-system-ui": "~2.9.3",
     "expo-web-browser": "~12.8.1",
@@ -29,7 +30,9 @@
     "react-native": "0.73.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
-    "react-native-web": "~0.19.6"
+    "react-native-web": "~0.19.6",
+    "expo-file-system": "~16.0.4",
+    "expo-asset": "~9.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

screens/home/components/SurahCard.tsx

@@ -1,21 +1,23 @@
+import { Surah } from "@/types/Suar";
+import { memo } from "react";
 import { Text, View, Pressable } from "react-native";
 
-export const SurahCard = ({
+const SurahCard = ({
   sura,
   onPress,
 }: {
-  sura: { number: number; name_ar: string; type: string };
+  sura: Surah;
   onPress?: () => void;
 }) => {
   return (
     <Pressable
       onPress={onPress}
       className=" bg-lotion basis-2  my-2 p-3 w-full rounded-[17px] px-6 flex-1 flex-row  items-start"
     >
-      <Text className="text-darkGray/20 text-2xl">{sura.number}</Text>
-      <View className="ml-3">
+      <Text className="text-darkGray/20 text-base">{sura.number}</Text>
+      <View className="ml-1">
         <Text className="text-primary font-HelveticaRoman text-xl">
-          {sura.name_ar}
+          {sura.name_ar.split("سورة")[1]}
         </Text>
         <Text className="text-secondary/30 text-center">
           {{ Meccan: "مكية", Medinan: "مدنية" }[sura.type]}
@@ -24,3 +26,5 @@ export const SurahCard = ({
     </Pressable>
   );
 };
+
+export default memo(SurahCard);