performance enhancement

package.json

@@ -35,7 +35,8 @@
     "react-native-webview": "13.2.2",
     "react-navigation": "^5.0.0",
     "react-test-renderer": "^18.2.0",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "react-native-gesture-handler": "~2.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/newTaskPopup.tsx

@@ -173,7 +173,6 @@ export default function NewTaskPopup({
               ]}
               onPress={() => {
                 if (taskData.title.trim() !== '' && taskData.cents !== 0) {
-                  console.log('taskData', taskData);
                   mutation.mutate(taskData);
                   setModalVisible(!modalVisible);
                   resetTaskData();

src/screens/HomeScreen.tsx

@@ -1,6 +1,6 @@
 import {useQuery} from '@tanstack/react-query';
 import moment from 'moment';
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {
   Image,
   ImageSourcePropType,
@@ -70,38 +70,48 @@ export default function HomeScreen({navigation}: Props): JSX.Element {
       : themeProvider.colorsLight.plusButtonPressed,
   };
 
-  const sortedTasks = tasks?.sort((a, b) => {
-    const taskA = a;
-    const taskB = b;
+  const sortedTasks = useMemo(() => {
+    console.log('sorting tasks');
+    return tasks?.sort((a, b) => {
+      const taskA = a;
+      const taskB = b;
 
-    if ('due' in taskA && 'due' in taskB) {
-      const diffDaysA = checkDate(String(taskA.due));
-      const diffDaysB = checkDate(String(taskB.due));
+      if ('due' in taskA && 'due' in taskB) {
+        const diffDaysA = checkDate(String(taskA.due));
+        const diffDaysB = checkDate(String(taskB.due));
 
-      // If the deadline is past, return a large number to sort the task to the bottom
-      const timeLeftA = diffDaysA < 0 ? Number.MAX_SAFE_INTEGER : diffDaysA;
-      const timeLeftB = diffDaysB < 0 ? Number.MAX_SAFE_INTEGER : diffDaysB;
+        // If the deadline is past, return a large number to sort the task to the bottom
+        const timeLeftA = diffDaysA < 0 ? Number.MAX_SAFE_INTEGER : diffDaysA;
+        const timeLeftB = diffDaysB < 0 ? Number.MAX_SAFE_INTEGER : diffDaysB;
 
-      return timeLeftA - timeLeftB;
-    } else {
-      return 0;
-    }
-  });
+        return timeLeftA - timeLeftB;
+      } else {
+        return 0;
+      }
+    });
+  }, [tasks]);
+
+  const nextTasks = useMemo(() => {
+    console.log('filtering next tasks');
+    return sortedTasks?.filter(task => {
+      const dueDate = moment(task.due, 'M/D/YYYY, hh:mm A').toDate();
+      const isDueInLessThan24Hours =
+        dueDate && dueDate.getTime() > Date.now() - 24 * 60 * 60 * 1000;
+      return isDueInLessThan24Hours;
+    });
+  }, [sortedTasks]);
+
+  const archiveTasks = useMemo(() => {
+    console.log('filtering archive tasks');
+    return sortedTasks?.filter(task => {
+      const dueDate = moment(task.due, 'M/D/YYYY, hh:mm A').toDate();
+      const isDueInMoreThan24Hours =
+        dueDate && dueDate.getTime() <= Date.now() - 24 * 60 * 60 * 1000;
+      return isDueInMoreThan24Hours;
+    });
+  }, [sortedTasks]);
 
-  const processedTasks =
-    selectedOption === 'Next'
-      ? sortedTasks?.filter(task => {
-          const dueDate = moment(task.due, 'M/D/YYYY, hh:mm A').toDate();
-          const isDueInLessThan24Hours =
-            dueDate && dueDate.getTime() > Date.now() - 24 * 60 * 60 * 1000;
-          return isDueInLessThan24Hours;
-        })
-      : sortedTasks?.filter(task => {
-          const dueDate = moment(task.due, 'M/D/YYYY, hh:mm A').toDate();
-          const isDueInMoreThan24Hours =
-            dueDate && dueDate.getTime() <= Date.now() - 24 * 60 * 60 * 1000;
-          return isDueInMoreThan24Hours;
-        });
+  const processedTasks = selectedOption === 'Next' ? nextTasks : archiveTasks;
 
   const textColorStyle = {
     color: isDarkMode ? 'white' : 'black',

src/services/taskratchet/addTask.ts

@@ -8,8 +8,6 @@ type Input = {
 
 // Requires that user be authenticated.
 export async function addTask(input: Input): Promise<Response> {
-  console.log('input', input);
-
   const response = await fetch1('me/tasks', true, 'POST', {
     ...input,
     due: formatDate(input.due),
@@ -22,8 +20,6 @@ export async function addTask(input: Input): Promise<Response> {
   // }
 
   if (response) {
-    console.log('Task added successfully');
-    console.log('response', response);
     return response;
   }
 }
@@ -48,6 +44,5 @@ function formatDate(date: Date): string {
   // Make sure minutes have leading zeros if required
   const mm = minutes < 10 ? `0${minutes}` : minutes.toString();
   const result = `${month}/${day}/${year}, ${hour}:${mm} ${period}`;
-  console.log('date', result);
   return result;
 }

src/styles/taskPopupStyle.tsx

@@ -18,7 +18,6 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     right: 0,
     fontSize: 30,
-    fontFamily: 'Trebuchet MS',
   },
   title: {
     flexShrink: 1,