task(#44) task clean up (#45)

* task(#44): Clean up

- adding navigation from the login to the sign up
- adding navigation from the sign up to the login

* task(#44): Clean up

- removing errors from screen and moving to alerts
- adding validators in utils
- removing navigation header from map
- adding default value to phone input
- navigation from sucess sign up to map

* task(#44): Clean up

- moving ride request logic from the map to it's own component
- removing redundant comments
- adding mqtt status to redux so later we can show if we are connected or not
- checking permissions preemtly

* task(#44): Clean up

- move mapview to it's own component

* task(#44): Clean up

- make login and signup shared code into a reusable scrollable form container
- fixes to bugs in map routes

* task(#44): Clean up

- moving checkbox props to another file
- formatting

* task(#44): Clean up

- creating generic card
- using generic card in all ride request cards
- moving props and styles to independent files

* task(#44): Clean up

- moving config to .env
- moving models to api models
- remove api index as we no longer using separate api from redux
- touchable opacity must be from react-native

* task(#44): Clean up

- removing api file

apps/api/src/controllers/driver-controller.ts

@@ -3,7 +3,7 @@ import { Context } from 'koa';
 import { Op } from 'sequelize';
 import Driver from '../models/driver';
 import RideRequest from '../models/ride-request';
-import Rider from '../models/rider'; // Import the Rider model
+import Rider from '../models/rider';
 import logger from '../utils/logger';
 import {
   generateAccessToken,
@@ -39,14 +39,11 @@ export const registerDriver = async (ctx: Context) => {
       return;
     }
 
-    // Create the new driver
     const newDriver = await Driver.create({ name, email, phone, password });
 
-    // Generate tokens
     const accessToken = generateAccessToken(newDriver.dataValues.id, 'driver');
     const refreshToken = generateRefreshToken();
 
-    // Store the refresh token in the database
     await newDriver.update({ refreshToken });
 
     ctx.status = 201;
@@ -84,11 +81,9 @@ export const loginDriver = async (ctx: Context) => {
       return;
     }
 
-    // Generate tokens
     const accessToken = generateAccessToken(driver.dataValues.id, 'driver');
     const refreshToken = generateRefreshToken();
 
-    // Store the new refresh token in the database
     await driver.update({ refreshToken });
 
     ctx.status = 200;
@@ -117,12 +112,10 @@ export const acceptRideRequest = async (ctx: Context) => {
   }
 
   try {
-    // Fetch the ride request
     const rideRequest = await RideRequest.findOne({
       where: { id: rideRequestId }
     });
 
-    // Validate the ride request status
     if (!rideRequest) {
       ctx.status = 404;
       ctx.body = { error: 'Ride request not found.' };
@@ -134,15 +127,13 @@ export const acceptRideRequest = async (ctx: Context) => {
       return;
     }
 
-    // Fetch the associated rider information
     const rider = await Rider.findOne({ where: { id: rideRequest.riderId } });
     if (!rider) {
       ctx.status = 404;
       ctx.body = { error: 'Rider not found for this ride request.' };
       return;
     }
 
-    // Update the ride request to accepted
     rideRequest.status = 'accepted';
     rideRequest.driverId = driverId;
     await rideRequest.save();
@@ -153,8 +144,8 @@ export const acceptRideRequest = async (ctx: Context) => {
     ctx.body = {
       message: 'Ride request accepted successfully.',
       rideRequestId: rideRequest.id,
-      riderName: rider.dataValues.name, // Retrieved from Rider model
-      riderPhone: rider.dataValues.phone, // Retrieved from Rider model
+      riderName: rider.dataValues.name,
+      riderPhone: rider.dataValues.phone,
       pickupLocation: rideRequest.pickupLocation,
       dropOffLocation: rideRequest.dropOffLocation
     };
@@ -177,12 +168,10 @@ export const startRideRequest = async (ctx: Context) => {
   }
 
   try {
-    // Fetch the ride request
     const rideRequest = await RideRequest.findOne({
-      where: { id: rideRequestId, driverId: driverId } // Ensure the driver is assigned to this ride
+      where: { id: rideRequestId, driverId: driverId }
     });
 
-    // Validate the ride request status
     if (!rideRequest) {
       ctx.status = 404;
       ctx.body = { error: 'Ride request not found.' };
@@ -196,7 +185,6 @@ export const startRideRequest = async (ctx: Context) => {
       return;
     }
 
-    // Update the ride request to started
     rideRequest.status = 'started';
     await rideRequest.save();
 
@@ -230,12 +218,10 @@ export const pickUpRideRequest = async (ctx: Context) => {
   }
 
   try {
-    // Fetch the ride request
     const rideRequest = await RideRequest.findOne({
-      where: { id: rideRequestId, driverId: driverId } // Ensure the driver is assigned to this ride
+      where: { id: rideRequestId, driverId: driverId }
     });
 
-    // Validate the ride request status
     if (!rideRequest) {
       ctx.status = 404;
       ctx.body = { error: 'Ride request not found.' };
@@ -250,7 +236,6 @@ export const pickUpRideRequest = async (ctx: Context) => {
       return;
     }
 
-    // Update the ride request to picked-up
     rideRequest.status = 'picked-up';
     await rideRequest.save();
 
@@ -284,28 +269,30 @@ export const completeRideRequest = async (ctx: Context) => {
   }
 
   try {
-    // Fetch the ride request
     const rideRequest = await RideRequest.findOne({
-      where: { id: rideRequestId, driverId: driverId } // Ensure the driver is assigned to this ride
+      where: { id: rideRequestId, driverId: driverId }
     });
 
-    // Validate the ride request status
     if (!rideRequest) {
       ctx.status = 404;
       ctx.body = { error: 'Ride request not found.' };
       return;
     }
     if (rideRequest.status !== 'picked-up') {
       ctx.status = 400;
-      ctx.body = { error: 'The ride request must be in picked-up status to complete the ride.' };
+      ctx.body = {
+        error:
+          'The ride request must be in picked-up status to complete the ride.'
+      };
       return;
     }
 
-    // Update the ride request to dropped-off
     rideRequest.status = 'dropped-off';
     await rideRequest.save();
 
-    logger.info(`Ride request ${rideRequestId} completed by driver ${driverId}`);
+    logger.info(
+      `Ride request ${rideRequestId} completed by driver ${driverId}`
+    );
 
     ctx.status = 200;
     ctx.body = {

apps/api/src/controllers/rider-controller.ts

@@ -38,14 +38,11 @@ export const registerRider = async (ctx: Context) => {
       return;
     }
 
-    // Create the new rider
     const newRider = await Rider.create({ name, email, phone, password });
 
-    // Generate tokens
     const accessToken = generateAccessToken(newRider.id, 'rider');
     const refreshToken = generateRefreshToken();
 
-    // Store the refresh token in the database
     await newRider.update({ refreshToken });
 
     ctx.status = 201;
@@ -88,7 +85,6 @@ export const createRideRequest = async (ctx: Context) => {
   }
 
   try {
-    // Create the ride request with the new GEOGRAPHY data types
     const newRideRequest = await RideRequest.create({
       riderId,
       pickupLocation: {
@@ -106,7 +102,6 @@ export const createRideRequest = async (ctx: Context) => {
 
     logger.info(`Ride request created: ${newRideRequest.pickupAddress}`);
 
-    // Add the ride request to the queue
     await queueService.addRideRequestToQueue(newRideRequest);
 
     ctx.status = 201;

apps/api/src/middleware/auth.ts

@@ -16,9 +16,11 @@ export const authenticateToken = async (ctx: Context, next: Next) => {
   }
 
   try {
-    const decoded = jwt.verify(token, ACCESS_TOKEN_SECRET) as { userId: string; userType: 'driver' | 'rider' };
+    const decoded = jwt.verify(token, ACCESS_TOKEN_SECRET) as {
+      userId: string;
+      userType: 'driver' | 'rider';
+    };
 
-    // Check if the user is a driver or a rider based on userType
     let user = null;
     console.info(decoded.userType);
     if (decoded.userType === 'driver') {
@@ -29,14 +31,12 @@ export const authenticateToken = async (ctx: Context, next: Next) => {
 
     console.info(user);
 
-    // If user not found, return an error
     if (!user) {
       ctx.status = 403;
       ctx.body = { error: 'Invalid access token.' };
       return;
     }
 
-    // Attach the authenticated user to ctx.state
     ctx.state.user = user;
     ctx.state.userType = decoded.userType;
     await next();

apps/driver-app/.env

@@ -1 +1,6 @@
 EXPO_PUBLIC_MORRO_API_BASE_URL=http://192.168.68.106:3000
+EXPO_PUBLIC_MAPBOX_ACCESS_TOKEN=sk.eyJ1IjoiY2dvbWV6bWVuZGV6IiwiYSI6ImNtMndhbDAwZjAzMXQyanNkMHF2NjR3bmUifQ.f6E28fydW9bkhLBP7L_lCQ
+EXPO_PUBLIC_MQTT_BROKER_URL=192.168.68.106
+EXPO_PUBLIC_MQTT_PORT=8883
+EXPO_PUBLIC_MQTT_TOPIC_RIDE_REQUESTS_BASE=/drivers/:driver_id/ride-request
+EXPO_PUBLIC_MQTT_TOPIC_DRIVER_LOCATION_BASE=/drivers/:driver_id/location

apps/driver-app/app/+not-found.tsx

@@ -7,7 +7,7 @@ export default function NotFoundScreen() {
       <Stack.Screen options={{ title: 'Oops!' }} />
       <View style={styles.container}>
         <Text>This screen doesn't exist.</Text>
-        <Link href="/map" style={styles.link}>
+        <Link href="/main" style={styles.link}>
           <Text>Go to Map!</Text>
         </Link>
 

apps/driver-app/app/_layout.tsx

@@ -1,4 +1,5 @@
 import Setup from '@/src/components/setup';
+import config from '@/src/config';
 import store, { persistor } from '@/src/store';
 import {
   Inter_400Regular,
@@ -14,18 +15,19 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 
-
 const queryClient = new QueryClient();
 
-Mapbox.setAccessToken(
-  'sk.eyJ1IjoiY2dvbWV6bWVuZGV6IiwiYSI6ImNtMndhbDAwZjAzMXQyanNkMHF2NjR3bmUifQ.f6E28fydW9bkhLBP7L_lCQ'
-);
+const MAPBOX_ACCESS_TOKEN = config.MAPBOX_ACCESS_TOKEN;
+console.log('Mapbox Access Token:', MAPBOX_ACCESS_TOKEN);
+
+Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN || '');
+
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
     shouldShowAlert: true,
     shouldPlaySound: false,
-    shouldSetBadge: false,
-  }),
+    shouldSetBadge: false
+  })
 });
 
 const App = () => {

apps/driver-app/app/login.tsx

@@ -1,34 +1,10 @@
-import KeyboardDismiss from "@/src/components/keyboard-dismiss";
-import LoginForm from "@/src/components/login-form";
-import { KeyboardAvoidingView, Platform, StyleSheet, View } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import { SafeAreaView } from "react-native-safe-area-context";
+import LoginForm from '@/src/components/login-form';
+import ScrollableFormContainer from '@/src/components/scrollable-form-container';
 
 export default function Login() {
   return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
-      >
-        <ScrollView
-          contentContainerStyle={{
-            flexGrow: 1,
-          }}
-        >
-          <KeyboardDismiss>
-            <View style={styles.container}>
-              <LoginForm />
-            </View>
-          </KeyboardDismiss>
-        </ScrollView>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
+    <ScrollableFormContainer>
+      <LoginForm />
+    </ScrollableFormContainer>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
+}

apps/driver-app/app/main.tsx

@@ -0,0 +1,24 @@
+import MapView from '@/src/components/map-view';
+import RideRequestDashboard from '@/src/components/ride-request-dashboard';
+import useForegroundLocation from '@/src/hooks/use-foreground-location';
+import useNotificationPermissions from '@/src/hooks/use-notifications-permissions';
+import { useEffect } from 'react';
+import { View } from 'react-native';
+
+export default function Map() {
+  // useBackgroundLocation(); // TODO: Implement useBackgroundLocation hook
+  useForegroundLocation();
+
+  const notification = useNotificationPermissions();
+
+  useEffect(() => {
+    notification.requestPermissions();
+  }, []);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MapView />
+      <RideRequestDashboard />
+    </View>
+  );
+}

apps/driver-app/app/signup.tsx

@@ -1,35 +1,10 @@
-import KeyboardDismiss from "@/src/components/keyboard-dismiss";
-import SignUpForm from "@/src/components/sign-up-form";
-import React from "react";
-import { KeyboardAvoidingView, Platform, StyleSheet, View } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScrollableFormContainer from '@/src/components/scrollable-form-container';
+import SignUpForm from '@/src/components/sign-up-form';
 
 export default function SignUp() {
   return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
-      >
-        <ScrollView
-          contentContainerStyle={{
-            flexGrow: 1,
-          }}
-        >
-          <KeyboardDismiss>
-            <View style={styles.container}>
-              <SignUpForm />
-            </View>
-          </KeyboardDismiss>
-        </ScrollView>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
+    <ScrollableFormContainer>
+      <SignUpForm />
+    </ScrollableFormContainer>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
+}