add driver arrival and driver name

Author: davixcky

services/frontend/react_app/package.json

@@ -13,12 +13,14 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@faker-js/faker": "^9.3.0",
     "framer-motion": "^11.0.8",
     "geojson-path-finder": "^2.0.2",
     "leaflet": "^1.9.4",
     "leaflet-routing-machine": "^3.2.12",
     "pigeon-maps": "^0.21.4",
     "react": "^18.2.0",
+    "react-countdown": "^2.3.6",
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1"
   },

services/frontend/react_app/src/hooks/useGetRequestArrival.tsx

@@ -0,0 +1,49 @@
+import {Log, LogEntry} from "./useLogs.tsx";
+import {useEffect, useState} from "react";
+import { faker } from "@faker-js/faker";
+
+export const useGetRequestArrival = (logs: Log[]) => {
+    const [driverArrival, setDriverArrival] = useState<number | undefined>();
+    const [driverName, setDriverName] = useState("");
+
+    const parseDriverLogService = (entry: LogEntry) => {
+        if (entry.service !== 'driver') return;
+
+        const timeRegex = /(\d+)m(\d+)s/;
+        const match = entry.status.match(timeRegex);
+
+        if (!match) return;
+
+        const minutes = parseInt(match[1], 10);
+        const seconds = parseInt(match[2], 10);
+
+        return minutes * 60 + seconds;
+    };
+
+    useEffect(() => {
+        if (logs.length === 0) return;
+
+        const lastRequestDrive = logs[0];
+
+        setDriverArrival(undefined);
+
+        if (!lastRequestDrive) {
+            setDriverArrival(undefined);
+            return;
+        }
+
+        const driverEntries = lastRequestDrive.entries.filter((e) => e.service === 'driver');
+        const parsedTime = driverEntries
+            .map((e) => parseDriverLogService(e))
+            .find((e) => e !== undefined);
+
+        setDriverName(faker.person.fullName());
+        setDriverArrival(parsedTime);
+    }, [logs]);
+
+
+    return {
+        driverArrival,
+        driverName,
+    };
+};

services/frontend/react_app/src/hooks/useLogs.tsx

@@ -20,7 +20,6 @@ export type LogEntry = {
 export const useLogs = () => {
     const [logs, setLogs] = useState<Log[]>([]);
 
-
     const addNewLog = (pickupLocation: Location, dropoffLocation: Location, requestID: number, log: LogEntry) => {
         setLogs(prev => [{ pickupLocation, dropoffLocation, requestID, entries: [log]}, ...prev])
     }

services/frontend/react_app/src/pages/home.module.css

@@ -0,0 +1,44 @@
+.drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 700px;
+    height: 100%;
+    background: white;
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    z-index: 999999;
+    display: flex;
+    flex-direction: column; /* Ensures vertical stacking */
+
+    gap: 1rem;
+}
+
+.drawer.open {
+    transform: translateX(0);
+}
+
+.drawer-header {
+    padding: 1rem;
+    border-bottom: 1px solid #ddd;
+    text-align: left;
+}
+
+.drawer-body {
+    flex: 1; /* Fills available space */
+    padding: 1rem;
+    overflow-y: auto; /* Allows scrolling when content overflows */
+}
+
+.drawer-footer {
+    padding: 1rem;
+    border-top: 1px solid #ddd;
+    background: white;
+}
+
+
+
+.leaflet-control { z-index: 0 !important}
+.leaflet-pane { z-index: 0 !important}
+.leaflet-top, .leaflet-bottom {z-index: 0 !important}

services/frontend/react_app/src/pages/home.tsx

@@ -5,18 +5,15 @@ import {
     Card,
     CardBody,
     CardHeader,
-    Drawer,
-    DrawerBody,
-    DrawerContent,
-    DrawerFooter,
-    DrawerHeader,
     Heading,
     HStack,
     Stack,
     StackDivider,
+    Text,
     useDisclosure,
     useToast,
 } from "@chakra-ui/react";
+import styles from "./home.module.css";
 
 import {Logs} from "../components/features/logs/logs.tsx";
 import {Map} from "../components/features/map/map.tsx";
@@ -27,6 +24,16 @@ import {Locations} from "../types/location.ts";
 import {LocationSelect} from "../components/common/locationSelect/locationSelect.tsx";
 import {useLogs} from "../hooks/useLogs.tsx";
 import {NotificationResponse} from "../types/notifications.ts";
+import {useGetRequestArrival} from "../hooks/useGetRequestArrival.tsx";
+import Countdown, {CountdownRenderProps} from "react-countdown";
+
+const countdownRenderer = ({minutes, seconds, completed, driverName}: CountdownRenderProps & { driverName: string }) => {
+    if (completed) {
+        return <Text>{driverName} arrived</Text>;
+    } else {
+        return <Text as="b">The driver {driverName} will arrive in {minutes.toString().padStart(2, "0")}:{seconds.toString().padStart(2, "0")}</Text>;
+    }
+};
 
 export const HomePage = () => {
     const session = useSession();
@@ -35,6 +42,7 @@ export const HomePage = () => {
 
     const [selectedLocations, setSelectedLocations] = useState({pickupId: -1, dropoffId: -1});
     const {logs, addNewLog, addErrorEntry, addInformationEntry} = useLogs();
+    const lastRequestedDrive = useGetRequestArrival(logs);
 
     const logsModal = useDisclosure();
     const toast = useToast();
@@ -179,39 +187,41 @@ export const HomePage = () => {
                                     >
                                         Request Ride
                                     </Button>
-                                    {/*<Text color='gray' mt={4}>The distance between the two points is 40 miles</Text>*/}
                                 </Box>
                             </Stack>
                         </CardBody>
                     </Card>
+
+                    {lastRequestedDrive.driverArrival &&
+                        <HStack divider={<StackDivider/>} spacing='4' justifyContent="center" alignItems="center"
+                                bg="teal.200" p="1rem" maxW={600} borderRadius={4}>
+                            <Countdown
+                                date={new Date(Date.now()).setSeconds(lastRequestedDrive.driverArrival)}
+                                renderer={(props) => countdownRenderer({
+                                    ...props,
+                                    driverName: lastRequestedDrive.driverName
+                                })}
+                            />
+                        </HStack>}
                 </Stack>
                 <Stack flexGrow={1} justifyContent='space-between' w='50%' h='100%' maxH={'900px'}>
-                    <Drawer
-                        isOpen={logsModal.isOpen}
-                        placement='right'
-                        onClose={() => {
-                        }}
-                        size="lg"
-                        trapFocus={false}
-                        blockScrollOnMount={false}
-                        variant="aside"
-                    >
-                        <DrawerContent>
-                            <DrawerHeader>Notifications logs</DrawerHeader>
-
-                            <DrawerBody>
-                                <Logs logs={logs}/>
-                            </DrawerBody>
-
-                            <DrawerFooter>
-                                <Button variant='outline' mr={3} onClick={logsModal.onClose}>
-                                    Close
-                                </Button>
-                            </DrawerFooter>
-                        </DrawerContent>
-                    </Drawer>
+                    <div className={`${styles.drawer} ${logsModal.isOpen ? styles.open : ''}`}>
+                        <div className={styles.drawerHeader}>
+                            <Heading size="md">Notifications Logs</Heading>
+                        </div>
+                        <div className={styles.drawerBody}>
+                            <Logs logs={logs}/>
+                        </div>
+                        <div className={styles.drawerFooter}>
+                            <Button variant="outline" onClick={logsModal.onClose}>
+                                Close
+                            </Button>
+                        </div>
+                    </div>
+
                     <Stack flexGrow={1} flexShrink={1}>
-                        <Map dropoffLocationID={selectedLocations.dropoffId} pickupLocationID={selectedLocations.pickupId}/>
+                        <Map dropoffLocationID={selectedLocations.dropoffId}
+                             pickupLocationID={selectedLocations.pickupId}/>
                     </Stack>
                     <Button variant='outline' size="sm" onClick={logsModal.onToggle}>Show Logs</Button>
                 </Stack>