Refactor and reformat frontend

browser-domain/src/components/CreateFlight/CreateFlight.tsx

@@ -5,8 +5,6 @@ import "./FlightForm.css";
 import { createFlight } from "../../Api";
 
 export const CreateFlight = () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const origin = urlParams.get('origin');
     const navigate = useNavigate();
     const [error, setError] = useState<string | null>(null);
     const [flight, setFlight] = useState<Flight>();

browser-domain/src/components/LogIn/LogIn.tsx

@@ -10,11 +10,6 @@ export const LogIn = () => {
     return (
         <div className="Box Small">
             <div className="Section">
-				<img
-					alt="logo"
-					className="Image"
-					src="https://www.seekpng.com/png/full/353-3537757_logo-itba.png"
-				/>
                 <div className="Section">
                     <Input
                         placeholder="User"

browser-domain/src/components/SignUp/SignUp.tsx

@@ -13,11 +13,6 @@ export const SignUp = () => {
     return (
         <div className="Box Small">
             <div className="Section">
-				<img
-					alt="logo"
-					className="Image"
-					src="https://www.seekpng.com/png/full/353-3537757_logo-itba.png"
-				/>
                 <div className="Section">
                     <Input
                         type="email"

browser-domain/test.sh

@@ -1,8 +1,3 @@
 #!/bin/bash
 
-curl -X DELETE api:5000/ping
+npm run test
-curl -X POST api:5000/ping
-
-
-# npm test
-echo "NPM TEST"

screen-domain/src/Api.ts

@@ -1,5 +1,5 @@
 import { Axios, AxiosError } from "axios";
-import { Credentials, User, Flight } from "./Types";
+import { Flight } from "./Types";
 
 const instance = new Axios({
     baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/",

screen-domain/src/App.tsx

@@ -1,15 +1,11 @@
-import React, { useEffect } from "react";
 import { useIsConnected } from "./hooks/useIsConnected";
 import { Route, Routes } from "react-router";
 import { Departure } from "./components/Home/Departure";
 import { Arrival } from "./components/Home/Arrival";
 import { Home } from "./components/Home/Home";
-import { Button } from "antd";
-import { initDB } from "./db";
 
 function App() {
     const connection = useIsConnected();
-    // initDB();
 
     return (
         <div className="App">

screen-domain/src/components/Home/Arrival.tsx

@@ -11,7 +11,6 @@ interface Props {
 }
 
 export const Arrival: React.FC<Props> = (props) => {
-    // let origin = process.env.REACT_APP_ORIGIN;
     let destination = process.env.REACT_APP_ORIGIN;
 
     const { zones, error } = useFetchDestination(destination);
@@ -22,7 +21,6 @@ export const Arrival: React.FC<Props> = (props) => {
             if (zones.length <= 10) {
                 return;
             }
-        //   setStartIndex((prevIndex) => (prevIndex + 10) % zones.length);
             setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
         }, 5000);
 
@@ -34,29 +32,10 @@ export const Arrival: React.FC<Props> = (props) => {
         <div >
             <h2>Arrival</h2>
             <div className="Items">
-					{/* {(props.flights ? props.flights : zones).map((u) => {
-						return <Card key={u.id} flight={u} />;
-					})} */}
-                {/* <table>
-        <thead>
-          <tr>
-            <th>Flight code</th>
-            <th>Departure</th>
-            <th>Departure time</th>
-            <th>Destination</th>
-            <th>Arrival time</th>
-            <th>Gate</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody> */}
                 <Table>
                     <Thead>
                         <Tr>
                             <Th>Code</Th>
-            {/* <Th>Departure</Th> */}
-            {/* <Th>Time</Th> */}
-            {/* <Th>Destination</Th> */}
                             <Th>Origin</Th>
                             <Th>Time</Th>
                             <Th>Gate</Th>
@@ -67,30 +46,18 @@ export const Arrival: React.FC<Props> = (props) => {
                         {zones.length > 0 && (
                             <>
                                 {zones.slice(startIndex, startIndex + 10).map((flight) => (
-                //   {/* {Array.from({ length: zones.length < 10 ? zones.length : 10 }).map((_, index) => {
-                //         const flightIndex = (startIndex + index) % zones.length;
-                //         const flight = zones[flightIndex];
-
-                //         return ( */}
                                     <Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
-          {/* <td>{flight.id}</td> */}
+                                        <Td>{flight.flight_code}</Td>
-          <Td>{flight.id}-{flight.flight_code}</Td>
                                         <Td>{flight.origin}</Td>
-          {/* <Td>{flight.departure_time}</Td> */}
-          {/* <Td>{flight.destination}</Td> */}
                                         <Td>{flight.arrival_time}</Td>
                                         <Td>{flight.gate}</Td>
                                         <Td>{flight.status}</Td>
                                     </Tr>
-                        // );
                                 ))}
-                  {/* })} */}
                             </>
                         )}
                     </Tbody>
                 </Table>
-        {/* </tbody>
-      </table> */}
                 {error ? <div className="Disconnected">{error}</div> : <></>}
             </div>
         </div>

screen-domain/src/components/Home/Card/Card.css

@@ -1,30 +1,8 @@
-/* .flight-card {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    margin-bottom: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
-    transition: box-shadow 0.3s ease;
-  
-    &:hover {
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-    }
-  
-    .flight-details {
-      display: flex;
-      align-items: center;
-    }
-  } */
-
 .flight-card {
     display: flex;
-    flex-direction: column; /* Display as a column instead of a row */
+    flex-direction: column;
     justify-content: space-between;
-    align-items: flex-start; /* Align items to the start of the column */
+    align-items: flex-start;
     padding: 16px;
     border: 1px solid #ddd;
     border-radius: 8px;
@@ -39,7 +17,7 @@
 
     .flight-details {
         display: flex;
-      flex-direction: column; /* Display details as a column */
+        flex-direction: column;
-      margin-top: 16px; /* Add some space between the two rows */
+        margin-top: 16px;
     }
 }

screen-domain/src/components/Home/Card/Card.tsx

@@ -1,46 +1,8 @@
-// import React from "react";
-// import { Avatar, Button } from "antd";
-
-// interface FlightProps {
-//     flight_code: string;
-//     status: string;
-//     origin: string;
-//     destination: string;
-//     departure_time: string;
-//     arrival_time: string;
-//     gate: string;
-//   }
-  
-//   interface CardProps {
-//     flight: FlightProps;
-//   }
-  
-//   export const Card: React.FC<CardProps> = ({
-//     flight: { flight_code, status, origin, destination, departure_time, arrival_time, gate },
-//   }) => {
-//     console.log(flight_code)
-//     return (
-//       <div className="Card">
-//         <Avatar size="large">{flight_code.slice(0, 1).toUpperCase()}</Avatar>
-//         <div>
-//           <div>Name: {flight_code}</div>
-//           <div>Status: {status}</div>
-//           <div>Origin: {origin}</div>
-//           <div>Destination: {destination}</div>
-//           <div>Departure Time: {departure_time}</div>
-//           <div>Arrival Time: {arrival_time}</div>
-//           <div>Gate: {gate}</div>
-//         </div>
-//         📍
-//       </div>
-//     );
-//   };
-
 import React from "react";
 import { Avatar, Space, Typography, Tag } from "antd";
 import { RightOutlined, ClockCircleOutlined, SwapOutlined, EnvironmentOutlined, CalendarOutlined } from "@ant-design/icons";
 
-import "./Card.css"; // Import a CSS file for styling, you can create this file with your styles
+import "./Card.css";
 
 interface FlightProps {
     flight_code: string;

screen-domain/src/components/Home/Departure.tsx

@@ -12,7 +12,6 @@ interface Props {
 
 export const Departure: React.FC<Props> = (props) => {
     let origin = process.env.REACT_APP_ORIGIN;
-    // let destination = process.env.REACT_APP_ORIGIN;
 
     const { zones, error } = useFetchOrigin(origin);
     const [startIndex, setStartIndex] = useState(0);
@@ -22,7 +21,6 @@ export const Departure: React.FC<Props> = (props) => {
             if (zones.length <= 10) {
                 return;
             }
-        //   setStartIndex((prevIndex) => (prevIndex + 10) % zones.length);
             setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
         }, 5000);
 
@@ -34,30 +32,12 @@ export const Departure: React.FC<Props> = (props) => {
         <div >
             <h2>Departure</h2>
             <div className="Items">
-					{/* {(props.flights ? props.flights : zones).map((u) => {
-						return <Card key={u.id} flight={u} />;
-					})} */}
-                {/* <table>
-        <thead>
-          <tr>
-            <th>Flight code</th>
-            <th>Departure</th>
-            <th>Departure time</th>
-            <th>Destination</th>
-            <th>Arrival time</th>
-            <th>Gate</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody> */}
                 <Table>
                     <Thead>
                         <Tr>
                             <Th>Code</Th>
-            {/* <Th>Departure</Th> */}
                             <Th>Time</Th>
                             <Th>Destination</Th>
-            {/* <Th>Arrival time</Th> */}
                             <Th>Gate</Th>
                             <Th>Status</Th>
                         </Tr>
@@ -66,18 +46,10 @@ export const Departure: React.FC<Props> = (props) => {
                         {zones.length > 0 && (
                             <>
                                 {zones.slice(startIndex, startIndex + 10).map((flight) => (
-                //   {/* {Array.from({ length: zones.length < 10 ? zones.length : 10 }).map((_, index) => {
-                //         const flightIndex = (startIndex + index) % zones.length;
-                //         const flight = zones[flightIndex];
-
-                //         return ( */}
                                     <Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
-          {/* <td>{flight.id}</td> */}
+                                        <Td>{flight.flight_code}</Td>
-          <Td>{flight.id}-{flight.flight_code}</Td>
-          {/* <Td>{flight.origin}</Td> */}
                                         <Td>{flight.departure_time}</Td>
                                         <Td>{flight.destination}</Td>
-          {/* <Td>{flight.arrival_time}</Td> */}
                                         <Td>{flight.gate}</Td>
                                         <Td>{flight.status}</Td>
                                     </Tr>
@@ -99,13 +71,10 @@ export const Departure: React.FC<Props> = (props) => {
                                     </>
                                 )
                                 }
-                  {/* })} */}
                             </>
                         )}
                     </Tbody>
                 </Table>
-        {/* </tbody>
-      </table> */}
                 {error ? <div className="Disconnected">{error}</div> : <></>}
             </div>
         </div>

screen-domain/src/components/Home/Home.css

@@ -16,7 +16,8 @@ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     background-color: #fff;
 }
 
-th, td {
+th,
+td {
     border: 1px solid #ddd;
     padding: 10px;
     text-align: left;
@@ -37,6 +38,6 @@ color: #fff;
 }
 
 .delayed-flight {
-background-color: #ffcccc; /* Light red for delayed flights */
+    background-color: #ffcccc;
-color: #ff0000; /* Red text for delayed flights */
+    color: #ff0000;
 }

screen-domain/src/components/Home/Page.css

@@ -14,7 +14,7 @@ body {
 }
 
 button {
-    background-color: #4CAF50; /* Green */
+    background-color: #4CAF50;
     border: none;
     color: white;
     padding: 15px 32px;
@@ -29,5 +29,5 @@ body {
 }
 
 button:hover {
-    background-color: #45a049; /* Darker green on hover */
+    background-color: #45a049;
 }

screen-domain/src/db.ts

@@ -7,10 +7,6 @@ export enum Stores {
     Arrival = 'arrival'
 }
 
-interface EventTarget {
-    result: any
-}
-
 export const initDB = (): Promise<boolean | IDBDatabase> => {
     return new Promise((resolve) => {
         request = indexedDB.open('myDB');
@@ -42,35 +38,15 @@ export const initDB = (): Promise<boolean|IDBDatabase> => {
 
 export const addData = <T>(storeName: string, data: T): Promise<T | string | null> => {
     return new Promise((resolve) => {
-    // request = indexedDB.open('myDB', version);
-
-    // request.onsuccess = (e) => {
-    //   let req = (e.target as IDBOpenDBRequest)
-    //   db = req.result;
         const tx = db.transaction(storeName, 'readwrite');
         const store = tx.objectStore(storeName);
         store.add(data);
         resolve(data);
-    // };
-
-    // request.onerror = () => {
-    //   const error = request.error?.message
-    //   if (error) {
-    //     resolve(error);
-    //   } else {
-    //     resolve('Unknown error');
-    //   }
-    // };
     });
 };
 
 export const deleteData = (storeName: string, key: number): Promise<boolean> => {
     return new Promise((resolve) => {
-    // request = indexedDB.open('myDB', version);
-
-    // request.onsuccess = (e) => {
-    //   let req = (e.target as IDBOpenDBRequest)
-    //   db = req.result;
         const tx = db.transaction(storeName, 'readwrite');
         const store = tx.objectStore(storeName);
         const res = store.delete(key);
@@ -83,17 +59,11 @@ export const deleteData = (storeName: string, key: number): Promise<boolean> =>
             console.log("error")
             resolve(false);
         }
-    // };
     });
 };
 
 export const updateData = <T>(storeName: string, key: number, data: T): Promise<T | string | null> => {
     return new Promise((resolve) => {
-    // request = indexedDB.open('myDB', version);
-
-    // request.onsuccess = (e) => {
-    //   let req = (e.target as IDBOpenDBRequest)
-    //   db = req.result;
         const tx = db.transaction(storeName, 'readwrite');
         const store = tx.objectStore(storeName);
         const res = store.get(key);
@@ -105,27 +75,17 @@ export const updateData = <T>(storeName: string, key: number, data: T): Promise<
         res.onerror = () => {
             resolve(null);
         }
-    // };
     });
 };
 
 export const getStoreData = <T>(storeName: Stores): Promise<T[] | null> => {
     return new Promise((resolve) => {
-    // request = indexedDB.open('myDB');
-
-    // request.onsuccess = (e) => {
-    //   let req = (e.target as IDBOpenDBRequest)
-    //   if (!req.result) {
-    //     resolve(null);
-    //   }
-    //   db = req.result;
         const tx = db.transaction(storeName, 'readonly');
         const store = tx.objectStore(storeName);
         const res = store.getAll();
         res.onsuccess = () => {
             resolve(res.result);
         };
-    // };
     });
 };
 

screen-domain/src/hooks/useFetchDestination.tsx

@@ -1,13 +1,12 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useState } from "react";
-import { User, Flight } from "../Types";
+import { Flight } from "../Types";
 import { fetchZones } from "../Api";
 import { Stores, addData, deleteData, getStoreData, updateData, initDB } from '../db';
 
 export const useFetchDestination = (destination: string | undefined) => {
     const [error, setError] = useState<string | null>(null);
     const [zones, setZones] = useState<Flight[]>([]);
-	// const [today, setToday] = useState<Date>(new Date());
 
     const isToday = (someDate: Date) => {
         let today = new Date();
@@ -18,7 +17,6 @@ export const useFetchDestination = (destination: string | undefined) => {
 
     useEffect(() => {
         const intervalId = setInterval(() => {
-            // {isToday(new Date(flight.departure_time)) ? 's' : 'n'}
             let today = localStorage.getItem('date')
 
             if (today && !isToday(new Date(today))) {
@@ -64,7 +62,6 @@ export const useFetchDestination = (destination: string | undefined) => {
                                         toAdd.push(u)
                                     }
                                 })
-                            // toAdd.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
                                 toAdd.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
                                 setZones(toAdd);
                             })
@@ -80,7 +77,6 @@ export const useFetchDestination = (destination: string | undefined) => {
         const intervalId = setInterval(() => {
             let lastUpdate = localStorage.getItem('lastUpdated')
             let newUpdate = new Date().toISOString()
-            // let newUpdate = new Date().toTimeString()
 
             fetchZones(undefined, destination, lastUpdate)
                 .then((data) => {
@@ -112,8 +108,6 @@ export const useFetchDestination = (destination: string | undefined) => {
                         }
                     });
 
-                            // console.log(toAdd)
-                            // console.log(toRemove)
                     let filtered = data.filter(o =>
                         !toAdd.some(b => { return o.id === b.id }) && !toRemove.some(b => { return o.id === b.id }) && !(new Date(o.departure_time) < new Date())
                     )
@@ -124,7 +118,6 @@ export const useFetchDestination = (destination: string | undefined) => {
                         addData(Stores.Arrival, c)
                     })
 
-                            // newArray.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
                     newArray.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
                     setZones(newArray);
                 })

screen-domain/src/hooks/useFetchOrigin.tsx

@@ -1,13 +1,12 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useState } from "react";
-import { User, Flight } from "../Types";
+import { Flight } from "../Types";
 import { fetchZones } from "../Api";
 import { Stores, addData, deleteData, getStoreData, updateData, initDB } from '../db';
 
 export const useFetchOrigin = (origin: string | undefined) => {
     const [error, setError] = useState<string | null>(null);
     const [zones, setZones] = useState<Flight[]>([]);
-	// const [today, setToday] = useState<Date>(new Date());
 
     const isToday = (someDate: Date) => {
         let today = new Date();
@@ -18,7 +17,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
 
     useEffect(() => {
         const intervalId = setInterval(() => {
-            // {isToday(new Date(flight.departure_time)) ? 's' : 'n'}
             let today = localStorage.getItem('date')
 
             if (today && !isToday(new Date(today))) {
@@ -64,7 +62,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
                                         toAdd.push(u)
                                     }
                                 })
-                            // toAdd.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
                                 toAdd.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime())
                                 setZones(toAdd);
                             })
@@ -80,7 +77,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
         const intervalId = setInterval(() => {
             let lastUpdate = localStorage.getItem('lastUpdated')
             let newUpdate = new Date().toISOString()
-            // let newUpdate = new Date().toTimeString()
 
             fetchZones(origin, undefined, lastUpdate)
                 .then((data) => {
@@ -112,8 +108,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
                         }
                     });
 
-                            // console.log(toAdd)
-                            // console.log(toRemove)
                     let filtered = data.filter(o =>
                         !toAdd.some(b => { return o.id === b.id }) && !toRemove.some(b => { return o.id === b.id }) && !(new Date(o.departure_time) < new Date())
                     )
@@ -124,7 +118,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
                         addData(Stores.Departure, c)
                     })
 
-                            // newArray.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
                     newArray.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime())
                     setZones(newArray);
                 })