Refactoring-Layout

.github/workflows/lint.yml

@@ -5,22 +5,22 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout commit
-      uses: actions/checkout@v3
+      - name: Checkout commit
+        uses: actions/checkout@v3
 
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: 18
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
 
-    - name: Install Dependencies
-      run: yarn install
+      - name: Install Dependencies
+        run: yarn install
 
-    - name: Lint
-      run: yarn lint
+      - name: Lint
+        run: yarn lint
 
-    - name: Formatting Check
-      run: npm run format-check
+      - name: Formatting Check
+        run: npm run format-check
 
-    - name: Type check
-      run: npm run type-check
+      - name: Type check
+        run: npm run type-check

.github/workflows/preview.yml

@@ -30,5 +30,4 @@ jobs:
         with:
           # `github.event.pull_request.head.ref` is only available on `pull_request` triggers.
           # Use your own, or keep the automatically infered branch name from `--auto`, when using different triggers.
-          command: eas update --auto --branch ${{ github.event.pull_request.head.ref }}          
-
+          command: eas update --auto --branch ${{ github.event.pull_request.head.ref }}

.github/workflows/update.yml

@@ -1,6 +1,6 @@
 name: update
 on:
-  push: 
+  push:
     branches:
       - release
 

.vscode/settings.json

@@ -2,8 +2,5 @@
   "editor.formatOnSaveMode": "modifications",
   "editor.formatOnSave": true,
   "editor.formatOnPaste": true,
-  "cSpell.words": [
-    "chatbubble",
-    "Ionicons"
-  ]
+  "cSpell.words": ["chatbubble", "Ionicons"]
 }

README.md

@@ -1,4 +1,4 @@
-# Ella
+# vvsales
 
 # TODOs
 
@@ -25,5 +25,5 @@ yarn run ios --clear
 # Troubleshooting
 
 ```txt
-watchman watch-del 'project location/Ella' ; watchman watch-project 'project location/Ella'
+watchman watch-del 'project location/vvsales' ; watchman watch-project 'project location/vvsales'
 ```

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "ella",
-    "slug": "DrElla",
+    "name": "vvsales",
+    "slug": "vvsales",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
@@ -15,35 +15,27 @@
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.technoculture.ella"
+      "bundleIdentifier": "com.technoculture.vvsales"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.technoculture.ella"
+      "package": "com.technoculture.vvsales",
+      "permissions": [
+        "android.permission.CAMERA",
+        "android.permission.RECORD_AUDIO",
+        "android.permission.CALL_PHONE"
+      ]
     },
     "web": {
       "bundler": "metro",
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router",
-      [
-        "expo-camera",
-        {
-          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera.",
-          "microphonePermission": "Allow $(PRODUCT_NAME) to access your mic."
-        }
-      ],
-      [
-        "expo-document-picker",
-        {
-          "iCloudContainerEnvironment": "Production"
-        }
-      ]
+      "expo-router"
     ],
     "experiments": {
       "typedRoutes": true
@@ -53,7 +45,7 @@
         "origin": false
       },
       "eas": {
-        "projectId" :"dfde4001-b00b-4a77-a028-7d966b8f9e3d"
+        "projectId": "a463d91b-3ec0-4653-837a-93a87a5b687d"
       }
     },
     "owner": "technoculture"

app/(tabs)/_layout.tsx

@@ -0,0 +1,59 @@
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { Link, Tabs } from "expo-router";
+import React from "react";
+import { Pressable, useColorScheme } from "react-native";
+
+import Colors from "../../constants/Colors";
+
+/**
+ * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+ */
+function TabBarIcon(props: {
+  name: React.ComponentProps<typeof FontAwesome>["name"];
+  color: string;
+}) {
+  return <FontAwesome size={28} className="mb-[-3]" {...props} />;
+}
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Tasks",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Link href="/inbox" asChild>
+              <Pressable>
+                {({ pressed }) => (
+                  <FontAwesome
+                    name="info-circle"
+                    size={25}
+                    color={Colors[colorScheme ?? "light"].text}
+                    className={`mr-15 ${
+                      pressed ? "opacity-50" : "opacity-100"
+                    }`}
+                  />
+                )}
+              </Pressable>
+            </Link>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="logs"
+        options={{
+          title: "Logs",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

app/(tabs)/index.tsx

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Image } from "expo-image";
+import React, { useState, useEffect, useCallback } from "react";
+import { FlatList, TouchableOpacity, RefreshControl } from "react-native";
+import RNImmediatePhoneCall from "react-native-immediate-phone-call";
+import call from "react-native-phone-call";
+
+import { Text, View } from "../../components/Themed";
+import { getTasks, updateTask, getContactNumbers } from "../../lib/db_helpers";
+import { Task } from "../../lib/types";
+
+export default function TabOneScreen() {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const fetchTasks = async () => {
+    try {
+      const tasks = await getTasks();
+      setTasks(tasks);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  };
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await fetchTasks();
+    await getContactNumbers();
+    setRefreshing(false);
+  }, []);
+  useEffect(() => {
+    fetchTasks();
+    getContactNumbers();
+    const intervalId = setInterval(() => {
+      fetchTasks();
+    }, 30 * 1000);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const handleCallPress = async (contactNumber: string, taskId: number) => {
+    try {
+      await updateTask(taskId);
+      await fetchTasks();
+      RNImmediatePhoneCall.immediatePhoneCall(contactNumber);
+    } catch (error) {
+      console.error("Error handling call press:", error);
+    }
+  };
+
+  // Uncomment the following code to use react-native-phone-call instead of react-native-immediate-phone-call
+  // const handleCallPress = (contactNumber: string, taskId: string) => {
+  // const args = {
+  //   number: contactNumber,
+  //   prompt: false,
+  // };
+  // updateTrials(taskId);
+  // call(args).catch(console.error);
+  // };
+
+  return (
+    <View className="flex-1 items-center justify-center">
+      {tasks ? (
+        tasks.length === 0 ? (
+          <Text>No tasks available.</Text>
+        ) : (
+          <FlatList
+            className="w-full p-4"
+            data={tasks.rows}
+            keyExtractor={(item) => item[0].toString()}
+            renderItem={({ item }: { item: Task[] }) => {
+              const task = item;
+              try {
+                return (
+                  <View className="flex-row items-center w-full p-4 border-b border-black">
+                    <View className="flex-1">
+                      <Text className="text-xl font-bold mb-2">{`Name: ${task[1]}`}</Text>
+                      <Text>{`Trials: ${task[5]}`}</Text>
+                      <View className="flex-row">
+                        <Text>{`City: ${task[3]}`}</Text>
+                        <Text className="mx-2">|</Text>
+                        <Text>{`State: ${task[4]}`}</Text>
+                      </View>
+                      <Text className="mt-2 font-bold">{`Contact Number: ${task[2]}`}</Text>
+                      {/* <Text>{`ID: ${task[0]}`}</Text> */}
+                    </View>
+                    <TouchableOpacity
+                      className="p-2 ml-auto"
+                      onPress={() => handleCallPress(task[2], task[0])}
+                    >
+                      {/* <Text className="text-blue-500">Call</Text> */}
+                      <Image
+                        className="w-10 h-10"
+                        source={require("../../assets/images/call-icon.png")}
+                        contentFit="cover"
+                        transition={1000}
+                      />
+                    </TouchableOpacity>
+                  </View>
+                );
+              } catch (error) {
+                console.error("Error rendering item:", error);
+                return null;
+              }
+            }}
+            refreshControl={
+              <RefreshControl
+                refreshing={refreshing}
+                onRefresh={handleRefresh}
+              />
+            }
+          />
+        )
+      ) : (
+        <Text>Loading...</Text>
+      )}
+    </View>
+  );
+}