Merge pull request #88 from COS301-SE-2024/fix/mobile/linting-errors

Linting errors solved

frontend/occupi-mobile4/app/_layout.tsx

@@ -48,7 +48,6 @@ export default function RootLayout() {
         <Stack.Screen name="welcome" options={{ headerShown: false }} />
         <Stack.Screen name="settings" options={{ headerShown: false }} />
         <Stack.Screen name="office-details" options={{ headerShown: false }} />
-        <Stack.Screen name="booking-receipt" options={{ headerShown: false }} />
         <Stack.Screen name="booking-details" options={{ headerShown: false }} />
         <Stack.Screen name="viewbookingdetails" options={{ headerShown: false }} />
         <Stack.Screen name="faqpage" options={{ headerShown: false }} />

frontend/occupi-mobile4/components/NavBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import { Text, Button, Icon, SearchIcon, CalendarDaysIcon, BellIcon } from '@gluestack-ui/themed';
+import { Text, Button, Icon, CalendarDaysIcon, BellIcon } from '@gluestack-ui/themed';
 import { Feather } from '@expo/vector-icons';
 import { FontAwesome6, Ionicons } from '@expo/vector-icons';
 import { router } from 'expo-router';

frontend/occupi-mobile4/package.json

@@ -8,7 +8,7 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "test": "jest --watchAll",
+    "test": "jest",
     "lint": "expo lint"
   },
   "jest": {
@@ -26,6 +26,7 @@
     "@react-native-picker/picker": "^2.7.7",
     "@react-native-segmented-control/segmented-control": "^2.5.2",
     "@react-navigation/native": "^6.1.17",
+    "@testing-library/react-native": "^12.5.1",
     "@ui-kitten/components": "^5.3.1",
     "date-fns": "^3.6.0",
     "expo": "~51.0.14",

frontend/occupi-mobile4/screens/Booking/BookRoom.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, useColorScheme, TouchableOpacity, Text, Image } from 'react-native';
 import { Ionicons, Octicons } from '@expo/vector-icons';
-import { useRouter, useLocalSearchParams } from 'expo-router';
+import { useRouter } from 'expo-router';
 import {
   Toast,
   ToastTitle,
@@ -89,7 +89,7 @@ const BookRoom = () => {
       }
     };
     fetchAllRooms();
-  }, []);
+  }, [toast]);
 
   useEffect(() => {
     setIsDarkMode(colorScheme === 'dark');

frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx

@@ -19,63 +19,11 @@ import {
 } from '@expo/vector-icons';
 import { useColorScheme, StyleSheet, TouchableOpacity } from 'react-native';
 import {
-    widthPercentageToDP as wp,
-    heightPercentageToDP as hp,
+    widthPercentageToDP as wp
 } from 'react-native-responsive-screen';
 import PagerView from 'react-native-pager-view';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 
-const getTimeForSlot = (slot) => {
-    let startTime, endTime;
-    switch (slot) {
-        case 1:
-            startTime = '07:00';
-            endTime = '08:00';
-            break;
-        case 2:
-            startTime = '08:00';
-            endTime = '09:00';
-            break;
-        case 3:
-            startTime = '09:00';
-            endTime = '10:00';
-            break;
-        case 4:
-            startTime = '10:00';
-            endTime = '11:00';
-            break;
-        case 5:
-            startTime = '11:00';
-            endTime = '12:00';
-            break;
-        case 6:
-            startTime = '12:00';
-            endTime = '13:00';
-            break;
-        case 7:
-            startTime = '13:00';
-            endTime = '14:00';
-            break;
-        case 8:
-            startTime = '14:00';
-            endTime = '15:00';
-            break;
-        case 9:
-            startTime = '15:00';
-            endTime = '16:00';
-            break;
-        case 10:
-            startTime = '16:00';
-            endTime = '17:00';
-            break;
-        default:
-            startTime = 'Invalid slot';
-            endTime = 'Invalid slot';
-    }
-    return { startTime, endTime };
-};
-
-
 
 const ViewBookingDetails = (bookingId, roomName) => {
     const colorScheme = useColorScheme();
@@ -108,7 +56,7 @@ const ViewBookingDetails = (bookingId, roomName) => {
             });
             const data = await response.json();
             console.log(data);
-            const cookies = response.headers.get('Accept');
+            // const cookies = response.headers.get('Accept');
             //   console.log(cookies);
             if (response.ok) {
                 setCheckedIn(true);
@@ -158,7 +106,7 @@ const ViewBookingDetails = (bookingId, roomName) => {
             });
             const data = await response.json();
             console.log(data);
-            const cookies = response.headers.get('Accept');
+            // const cookies = response.headers.get('Accept');
             //   console.log(cookies);
             if (response.ok) {
                 toast.show({

frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx

@@ -93,9 +93,8 @@ const ViewBookings = () => {
     const [layout, setLayout] = useState("row");
     const toast = useToast();
     const [roomData, setRoomData] = useState<Room[]>([]);
-    const [selectedSort, setSelectedSort] = useState("newest");
-    const [email, setEmail] = useState('kamogelomoeketse@gmail.com');
-    const slot = 3; // Example slot value
+    // const [selectedSort, setSelectedSort] = useState("newest");
+    // const [email, setEmail] = useState('kamogelomoeketse@gmail.com');
     const router = useRouter();
 
     const toggleLayout = () => {
@@ -107,22 +106,22 @@ const ViewBookings = () => {
     const backgroundColor = isDarkMode ? 'black' : 'white';
     const textColor = isDarkMode ? 'white' : 'black';
     const cardBackgroundColor = isDarkMode ? '#2C2C2E' : '#F3F3F3';
-    const data = [
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-        { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
-    ];
+    // const data = [
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    //     { title: 'HDMI Room', description: 'Boasting sunset views, long desks, and comfy chairs', Date: '17/06/2024', Time: '07:30-09:30', available: true },
+    // ];
 
     useEffect(() => {
         const fetchAllRooms = async () => {
@@ -176,7 +175,7 @@ const ViewBookings = () => {
             }
         };
         fetchAllRooms();
-    }, []);
+    }, [toast]);
 
     const roomPairs = groupDataInPairs(roomData);
 

frontend/occupi-mobile4/screens/Dashboard/Dashboard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StatusBar, useColorScheme, Dimensions } from 'react-native';
+import { StatusBar, useColorScheme } from 'react-native';
 import Navbar from '../../components/NavBar';
 import {
   Text,
@@ -13,17 +13,12 @@ import {
   ButtonText,
 } from '@gluestack-ui/themed';
 import {
-  LineChart,
-  BarChart,
-  PieChart,
-  ProgressChart,
-  ContributionGraph,
-  StackedBarChart
+  LineChart
 } from "react-native-chart-kit";
 import { FontAwesome6 } from '@expo/vector-icons';
 // import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-import { number } from 'zod';
+// import { number } from 'zod';
 
 const getRandomNumber = () => {
   return Math.floor(Math.random() * 20)+300; 
@@ -48,7 +43,7 @@ const Dashboard = () => {
     // console.log(numbers);
     setIsDarkMode(colorScheme === 'dark');
     return () => clearInterval(intervalId);
-  }, []);
+  }, [colorScheme]);
 
   const checkIn = () => {
     if (checkedIn === false) {

frontend/occupi-mobile4/screens/Login/OtpVerification.tsx

@@ -1,27 +1,27 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { View, StyleSheet, TextInput } from 'react-native';
 import { VStack, Box, HStack, Image, Heading, Toast, useToast, ToastTitle, Text, } from '@gluestack-ui/themed';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
+// import { useForm } from 'react-hook-form';
+// import { z } from 'zod';
+// import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter, useLocalSearchParams  } from 'expo-router';
 import Logo from './assets/images/Occupi/file.png';
 import StyledExpoRouterLink from '@/components/StyledExpoRouterLink';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import { LinearGradient } from 'expo-linear-gradient';
 
-const OTPSchema = z.object({
-  OTP: z.string().min(6, 'OTP must be at least 6 characters in length'),
-});
+// const OTPSchema = z.object({
+//   OTP: z.string().min(6, 'OTP must be at least 6 characters in length'),
+// });
 
-type OTPSchemaType = z.infer<typeof OTPSchema>;
+// type OTPSchemaType = z.infer<typeof OTPSchema>;
 
 const OTPVerification = () => {
   const emailParams = useLocalSearchParams();
   const email = emailParams.email ? String(emailParams.email) : '';
   // const email = 'kamo@gmail.com';
   const [remainingTime, setRemainingTime] = useState(60); // 1 minute
-  const [otpSent, setOtpSent] = useState(false);
+  const otpSent = useState(false);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const [loading, setLoading] = useState(false);
   const router = useRouter();
@@ -44,14 +44,14 @@ const OTPVerification = () => {
     };
   }, [remainingTime, otpSent]);
 
-  const {
-    control,
-    formState: { errors },
-    handleSubmit,
-    reset,
-  } = useForm<OTPSchemaType>({
-    resolver: zodResolver(OTPSchema),
-  });
+  // const {
+  //   control,
+  //   formState: { errors },
+  //   handleSubmit,
+  //   reset,
+  // } = useForm<OTPSchemaType>({
+  //   resolver: zodResolver(OTPSchema),
+  // });
 
 
 

frontend/occupi-mobile4/screens/Login/SignIn.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Keyboard } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import * as LocalAuthentication from 'expo-local-authentication';
-import CookieManager from '@react-native-cookies/cookies';
+// import CookieManager from '@react-native-cookies/cookies';
 import { Ionicons } from '@expo/vector-icons';
 import { TouchableOpacity, View, KeyboardAvoidingView, Platform } from 'react-native';
 import {
@@ -64,11 +64,10 @@ const SignInForm = () => {
     control,
     formState: { errors },
     handleSubmit,
-    reset,
   } = useForm<SignInSchemaType>({
     resolver: zodResolver(signInSchema),
   });
-  const [isEmailFocused, setIsEmailFocused] = useState(false);
+  const isEmailFocused = useState(false);
   const [loading, setLoading] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [biometricAvailable, setBiometricAvailable] = useState(false);
@@ -90,6 +89,7 @@ const SignInForm = () => {
       await AsyncStorage.setItem('email', value);
     } catch (e) {
       // saving error
+      console.log(e);
     }
   };