diff --git a/browser-domain/src/Api.ts b/browser-domain/src/Api.ts index 9e6424d..6e48789 100644 --- a/browser-domain/src/Api.ts +++ b/browser-domain/src/Api.ts @@ -2,55 +2,55 @@ import { Axios, AxiosError } from "axios"; import { Credentials, Token, User, Flight, FlightCreate } from "./Types"; const instance = new Axios({ - baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/", - headers: { - accept: "application/json", - "Content-Type": "application/json", - }, + baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/", + headers: { + accept: "application/json", + "Content-Type": "application/json", + }, validateStatus: (x) => { return !(x < 200 || x > 204) } }); instance.interceptors.request.use((request) => { - request.data = JSON.stringify(request.data); - return request; + request.data = JSON.stringify(request.data); + return request; }); instance.interceptors.response.use( - (response) => { - return JSON.parse(response.data); - }, - (error) => { - const err = error as AxiosError; - return Promise.reject(err); - } + (response) => { + return JSON.parse(response.data); + }, + (error) => { + const err = error as AxiosError; + return Promise.reject(err); + } ); export const createUser = ( - credentials: Credentials + credentials: Credentials ): Promise<{ id?: string; message: string }> => { - return instance.post("users", credentials); + return instance.post("users", credentials); }; export const fetchUsers = (): Promise => { - return instance.get("users"); + return instance.get("users"); }; export const fetchUserById = (id: number): Promise => { - return instance.get("users/" + id); + return instance.get("users/" + id); }; export const logIn = ( - credentials: Credentials + credentials: Credentials ): Promise> => { - return instance.post("auth/login", credentials); + return instance.post("auth/login", credentials); }; export const tokenStatus = ( - token: string + token: string ): Promise => { - return instance.get("auth/status", { - headers: { Authorization: `Bearer ${token}` }, - }); + return instance.get("auth/status", { + headers: { Authorization: `Bearer ${token}` }, + }); }; export const fetchZones = (origin: string | null): Promise => { @@ -58,10 +58,10 @@ export const fetchZones = (origin: string | null): Promise => { }; export const createFlight = ( - flight_data: FlightCreate, + flight_data: FlightCreate, token: string ): Promise => { - return instance.post("flights", flight_data, { - headers: { Authorization: `Bearer ${token}` }, - }); + return instance.post("flights", flight_data, { + headers: { Authorization: `Bearer ${token}` }, + }); }; \ No newline at end of file diff --git a/browser-domain/src/App.tsx b/browser-domain/src/App.tsx index 69bf6db..84d009e 100644 --- a/browser-domain/src/App.tsx +++ b/browser-domain/src/App.tsx @@ -5,18 +5,18 @@ import { Home } from "./components/Home/Home"; import { CreateFlight } from "./components/CreateFlight/CreateFlight"; import { Button } from "antd"; import useAuth, { AuthProvider } from "./useAuth"; - - function Router() { + +function Router() { const { user, logout, isAirline } = useAuth(); return ( -
+
} /> } /> - :} /> - :} /> - :} /> + : } /> + : } /> + : } />
{ @@ -28,16 +28,16 @@ import useAuth, { AuthProvider } from "./useAuth"; }
-
+
); - } +} function App() { - return ( + return ( - + - ); + ); } export default App; diff --git a/browser-domain/src/Types.d.ts b/browser-domain/src/Types.d.ts index b27e199..6b19936 100644 --- a/browser-domain/src/Types.d.ts +++ b/browser-domain/src/Types.d.ts @@ -1,29 +1,29 @@ export interface Credentials { - password: string; - email: string; - username?: string; + password: string; + email: string; + username?: string; } export interface Token { - refresh_token: string; - access_token: string; + refresh_token: string; + access_token: string; } export interface TokenData { - sub: string; - airline: boolean; + sub: string; + airline: boolean; } export interface User { - id: number; - username: string; - email: string; - created_date?: Date; + id: number; + username: string; + email: string; + created_date?: Date; } export interface Zone { - id: number; - name: string; + id: number; + name: string; } export interface Flight { @@ -35,9 +35,9 @@ export interface Flight { departure_time: string; arrival_time: string; gate: string; - } +} - export interface FlightCreate { +export interface FlightCreate { flight_code: string; status: string; origin: string; @@ -45,4 +45,4 @@ export interface Flight { departure_time: string; arrival_time: string; gate: string; - } \ No newline at end of file +} \ No newline at end of file diff --git a/browser-domain/src/components/Button/Button.test.tsx b/browser-domain/src/components/Button/Button.test.tsx index c705055..8456a87 100644 --- a/browser-domain/src/components/Button/Button.test.tsx +++ b/browser-domain/src/components/Button/Button.test.tsx @@ -5,13 +5,13 @@ import { render, screen } from "@testing-library/react"; import { Button } from "antd"; describe("Button Component Test", () => { - test("Display button label and clicked", async () => { - const onClick = jest.fn(); + test("Display button label and clicked", async () => { + const onClick = jest.fn(); - render(); + render(); - expect(screen.getByText("Button")).toBeVisible(); - await userEvent.click(screen.getByText("Button")); - expect(onClick).toBeCalled(); - }); + expect(screen.getByText("Button")).toBeVisible(); + await userEvent.click(screen.getByText("Button")); + expect(onClick).toBeCalled(); + }); }); diff --git a/browser-domain/src/components/CreateFlight/CreateFlight.tsx b/browser-domain/src/components/CreateFlight/CreateFlight.tsx index 54b4c6d..3186794 100644 --- a/browser-domain/src/components/CreateFlight/CreateFlight.tsx +++ b/browser-domain/src/components/CreateFlight/CreateFlight.tsx @@ -5,11 +5,9 @@ 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(null); - const [flight, setFlight] = useState(); + const [error, setError] = useState(null); + const [flight, setFlight] = useState(); const [flightData, setFlightData] = useState({ flight_code: "ABC123", @@ -19,9 +17,9 @@ export const CreateFlight = () => { departure_time: "2023-10-09 10:00 AM", arrival_time: "2023-10-09 12:00 PM", gate: "A1", - }); - - const handleSubmit = async (event: React.FormEvent) => { + }); + + const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); setError(null); @@ -40,79 +38,79 @@ export const CreateFlight = () => { .catch((error) => { setError(error as string); }); - }; + }; - return ( + return (
- - - - - - - - -
- ); + + + + + + + + + + ); }; diff --git a/browser-domain/src/components/CreateFlight/FlightForm.css b/browser-domain/src/components/CreateFlight/FlightForm.css index 5fb7614..4038ba3 100644 --- a/browser-domain/src/components/CreateFlight/FlightForm.css +++ b/browser-domain/src/components/CreateFlight/FlightForm.css @@ -5,26 +5,26 @@ border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - } - - label { +} + +label { display: block; margin-bottom: 10px; - } - - input { +} + +input { width: 100%; padding: 8px; margin-top: 4px; margin-bottom: 10px; box-sizing: border-box; - } - - button { +} + +button { background-color: #4caf50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; - } \ No newline at end of file +} \ No newline at end of file diff --git a/browser-domain/src/components/Home/Card/Card.test.tsx b/browser-domain/src/components/Home/Card/Card.test.tsx index c527342..1805d88 100644 --- a/browser-domain/src/components/Home/Card/Card.test.tsx +++ b/browser-domain/src/components/Home/Card/Card.test.tsx @@ -5,10 +5,10 @@ import "../../../matchMedia.mock"; import { Card } from "./Card"; describe("Card Component Test", () => { - test("Display initial, name and icon", async () => { - // render(); + test("Display initial, name and icon", async () => { + // render(); - // expect(screen.getByText("Belgrano📍")).toBeVisible(); - // expect(screen.getByText("B")).toBeVisible(); - }); + // expect(screen.getByText("Belgrano📍")).toBeVisible(); + // expect(screen.getByText("B")).toBeVisible(); + }); }); diff --git a/browser-domain/src/components/Home/Card/Card.tsx b/browser-domain/src/components/Home/Card/Card.tsx index 49db412..6832893 100644 --- a/browser-domain/src/components/Home/Card/Card.tsx +++ b/browser-domain/src/components/Home/Card/Card.tsx @@ -5,59 +5,59 @@ import { RightOutlined, ClockCircleOutlined, SwapOutlined, EnvironmentOutlined, import "./Card.css"; interface FlightProps { - flight_code: string; - status: string; - origin: string; - destination: string; - departure_time: string; - arrival_time: string; - gate: string; + flight_code: string; + status: string; + origin: string; + destination: string; + departure_time: string; + arrival_time: string; + gate: string; } interface CardProps { - flight: FlightProps; + flight: FlightProps; } const { Text } = Typography; export const Card: React.FC = ({ flight }) => { - return ( -
- - } /> -
- {flight.flight_code} -
- - {flight.origin} {flight.destination} - -
+ return ( +
+ + } /> +
+ {flight.flight_code} +
+ + {flight.origin} {flight.destination} + +
+
+ +
+ + Status: + {flight.status} + + + Departure: + + + {flight.departure_time} + + + + Arrival: + + + {flight.arrival_time} + + + + Gate: + {flight.gate} + +
- -
- - Status: - {flight.status} - - - Departure: - - - {flight.departure_time} - - - - Arrival: - - - {flight.arrival_time} - - - - Gate: - {flight.gate} - -
-
- ); + ); }; diff --git a/browser-domain/src/components/Home/Home.test.tsx b/browser-domain/src/components/Home/Home.test.tsx index b0940c0..cef05e9 100644 --- a/browser-domain/src/components/Home/Home.test.tsx +++ b/browser-domain/src/components/Home/Home.test.tsx @@ -1,8 +1,8 @@ const mockedUsedNavigate = jest.fn(); jest.mock("react-router-dom", () => ({ - ...jest.requireActual("react-router-dom"), - useNavigate: () => mockedUsedNavigate, + ...jest.requireActual("react-router-dom"), + useNavigate: () => mockedUsedNavigate, })); import "../../matchMedia.mock"; @@ -11,18 +11,18 @@ import { render, screen } from "@testing-library/react"; import { Home } from "./Home"; describe("Home View Test", () => { - test("Display initial, name and icon", async () => { - // render( - // - // ); + test("Display initial, name and icon", async () => { + // render( + // + // ); - // expect(screen.getByText("Zones")).toBeVisible(); - // expect(screen.getByText("Belgrano📍")).toBeVisible(); - // expect(screen.getByText("San Isidro📍")).toBeVisible(); - }); + // expect(screen.getByText("Zones")).toBeVisible(); + // expect(screen.getByText("Belgrano📍")).toBeVisible(); + // expect(screen.getByText("San Isidro📍")).toBeVisible(); + }); }); diff --git a/browser-domain/src/components/Home/Home.tsx b/browser-domain/src/components/Home/Home.tsx index ba29b5f..67566b6 100644 --- a/browser-domain/src/components/Home/Home.tsx +++ b/browser-domain/src/components/Home/Home.tsx @@ -6,13 +6,13 @@ import { useNavigate } from "react-router"; import useAuth from "../../useAuth"; interface Props { - flights?: Flight[]; + flights?: Flight[]; } export const Home: React.FC = (props) => { const urlParams = new URLSearchParams(window.location.search); const origin = urlParams.get('origin'); - const { zones, error } = useFetchZones(origin); + const { zones, error } = useFetchZones(origin); const navigate = useNavigate() const { loading, isAirline } = useAuth(); @@ -21,16 +21,16 @@ export const Home: React.FC = (props) => { return
Loading...
; } - return ( -
+ return ( +
{isAirline ? : <>} -

Flights

-
- {(props.flights ? props.flights : zones).map((u) => { - return ; - })} - {error ?
{error}
: <>} -
-
- ); +

Flights

+
+ {(props.flights ? props.flights : zones).map((u) => { + return ; + })} + {error ?
{error}
: <>} +
+
+ ); }; diff --git a/browser-domain/src/components/LogIn/LogIn.tsx b/browser-domain/src/components/LogIn/LogIn.tsx index de64502..f42b772 100644 --- a/browser-domain/src/components/LogIn/LogIn.tsx +++ b/browser-domain/src/components/LogIn/LogIn.tsx @@ -4,42 +4,37 @@ import useAuth from "../../useAuth"; export const LogIn = () => { const { login, loading, error } = useAuth(); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); - return ( -
-
- logo -
- setEmail(ev.target.value)} - /> - setPassword(ev.target.value)} - /> - - {error ? ( -
{error}
- ) : ( - <> - )} -
-
-
- ); + return ( +
+
+
+ setEmail(ev.target.value)} + /> + setPassword(ev.target.value)} + /> + + {error ? ( +
{error}
+ ) : ( + <> + )} +
+
+
+ ); }; diff --git a/browser-domain/src/components/SignUp/SignUp.tsx b/browser-domain/src/components/SignUp/SignUp.tsx index 9d309a8..0cd1323 100644 --- a/browser-domain/src/components/SignUp/SignUp.tsx +++ b/browser-domain/src/components/SignUp/SignUp.tsx @@ -3,61 +3,56 @@ import { Button, Input } from "antd"; import { useCreateUser } from "../../hooks/useCreateUser"; export const SignUp = () => { - const [username, setUsername] = useState(""); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [repeatPassword, setRepeatPassword] = useState(""); + const [username, setUsername] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [repeatPassword, setRepeatPassword] = useState(""); - const { createUser, isLoading, error } = useCreateUser(); + const { createUser, isLoading, error } = useCreateUser(); - return ( -
-
- logo -
- setEmail(ev.target.value)} - /> - setUsername(ev.target.value)} - /> - setPassword(ev.target.value)} - /> - setRepeatPassword(ev.target.value)} - /> - - {error ? ( -
{error}
- ) : ( - <> - )} -
-
-
- ); + return ( +
+
+
+ setEmail(ev.target.value)} + /> + setUsername(ev.target.value)} + /> + setPassword(ev.target.value)} + /> + setRepeatPassword(ev.target.value)} + /> + + {error ? ( +
{error}
+ ) : ( + <> + )} +
+
+
+ ); }; diff --git a/browser-domain/src/hooks/useCreateFlight.tsx b/browser-domain/src/hooks/useCreateFlight.tsx index 49e1169..06d690f 100644 --- a/browser-domain/src/hooks/useCreateFlight.tsx +++ b/browser-domain/src/hooks/useCreateFlight.tsx @@ -4,11 +4,11 @@ import { User, Flight, FlightCreate } from "../Types"; import { createFlight } from "../Api"; export const useCreateFlight = (flight_data: FlightCreate) => { - const [error, setError] = useState(null); - const [flight, setFlight] = useState(); + const [error, setError] = useState(null); + const [flight, setFlight] = useState(); - useEffect(() => { - setError(null); + useEffect(() => { + setError(null); const token = localStorage.getItem("token"); if (!token) { @@ -16,14 +16,14 @@ export const useCreateFlight = (flight_data: FlightCreate) => { return; } - createFlight(flight_data, token) - .then((data) => { - setFlight(data); - }) - .catch((error) => { - setError(error as string); - }); - }, []); + createFlight(flight_data, token) + .then((data) => { + setFlight(data); + }) + .catch((error) => { + setError(error as string); + }); + }, []); - return { flight, error }; + return { flight, error }; }; diff --git a/browser-domain/src/hooks/useCreateUser.tsx b/browser-domain/src/hooks/useCreateUser.tsx index 4b1a7be..463cfb6 100644 --- a/browser-domain/src/hooks/useCreateUser.tsx +++ b/browser-domain/src/hooks/useCreateUser.tsx @@ -4,28 +4,28 @@ import { createUser as createUserAPI } from "../Api"; import useAuth from "../useAuth"; export const useCreateUser = () => { - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); const { login } = useAuth(); - const createUser = async (credentials: Credentials): Promise => { - try { - setIsLoading(true); - setError(null); + const createUser = async (credentials: Credentials): Promise => { + try { + setIsLoading(true); + setError(null); - const createResponse = await createUserAPI(credentials); + const createResponse = await createUserAPI(credentials); - if (createResponse.id) { - login(credentials); - } else { - setError(createResponse.message); - } - } catch (error) { - setError(error as string); - } finally { - setIsLoading(false); - } - }; + if (createResponse.id) { + login(credentials); + } else { + setError(createResponse.message); + } + } catch (error) { + setError(error as string); + } finally { + setIsLoading(false); + } + }; - return { createUser, isLoading, error }; + return { createUser, isLoading, error }; }; diff --git a/browser-domain/src/hooks/useFetchZones.tsx b/browser-domain/src/hooks/useFetchZones.tsx index 5e9e29a..5e3df8b 100644 --- a/browser-domain/src/hooks/useFetchZones.tsx +++ b/browser-domain/src/hooks/useFetchZones.tsx @@ -4,18 +4,18 @@ import { User, Flight } from "../Types"; import { fetchZones } from "../Api"; export const useFetchZones = (origin: string | null) => { - const [error, setError] = useState(null); - const [zones, setZones] = useState([]); + const [error, setError] = useState(null); + const [zones, setZones] = useState([]); - useEffect(() => { - setError(null); + useEffect(() => { + setError(null); - fetchZones(origin) - .then((data) => { - setZones(data); - }) - .catch((error) => {}); - }, []); + fetchZones(origin) + .then((data) => { + setZones(data); + }) + .catch((error) => { }); + }, []); - return { zones, error }; + return { zones, error }; }; diff --git a/browser-domain/src/index.css b/browser-domain/src/index.css index bd54b3b..a94edcd 100644 --- a/browser-domain/src/index.css +++ b/browser-domain/src/index.css @@ -1,106 +1,106 @@ body { - margin: 0; - font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; } .App { - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background-color: #eff2f7; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #eff2f7; } .Box { - border-radius: 20px; - box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2); - padding: 50px; - gap: 30px; - background-color: white; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + border-radius: 20px; + box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2); + padding: 50px; + gap: 30px; + background-color: white; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .Small { - width: 250px; - height: 400px; + width: 250px; + height: 400px; } .Section { - flex: 1; - width: 100%; - padding: 30px 50px; - gap: 30px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + flex: 1; + width: 100%; + padding: 30px 50px; + gap: 30px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .Image { - width: 150px; + width: 150px; } .Connected { - color: green; + color: green; } .Disconnected { - color: red; + color: red; } .FloatingStatus { - position: absolute; - top: 10px; - right: 50px; + position: absolute; + top: 10px; + right: 50px; } .LogoutButton { - position: absolute; - bottom: 10px; - right: 50px; + position: absolute; + bottom: 10px; + right: 50px; } .Card { - border-radius: 8px; - box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); - gap: 10px; - padding: 10px; - width: 100%; - background-color: white; - display: flex; - align-items: center; + border-radius: 8px; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); + gap: 10px; + padding: 10px; + width: 100%; + background-color: white; + display: flex; + align-items: center; } .Items { - height: 100%; - width: 100%; - display: flex; + height: 100%; + width: 100%; + display: flex; flex-wrap: wrap; - justify-content: space-between; - align-items: center; + justify-content: space-between; + align-items: center; gap: 20px; } .List { - width: 100%; - height: 500px; - gap: 30px; - padding: 20px; - overflow-y: auto; - display: flex; - align-items: center; - flex-direction: column; -} + width: 100%; + height: 500px; + gap: 30px; + padding: 20px; + overflow-y: auto; + display: flex; + align-items: center; + flex-direction: column; +} \ No newline at end of file diff --git a/browser-domain/src/useAuth.tsx b/browser-domain/src/useAuth.tsx index 9417c86..85d7a4b 100644 --- a/browser-domain/src/useAuth.tsx +++ b/browser-domain/src/useAuth.tsx @@ -1,10 +1,10 @@ -import React, {createContext, ReactNode, useContext, useEffect, useMemo, useState} from "react"; +import React, { createContext, ReactNode, useContext, useEffect, useMemo, useState } from "react"; import { useNavigate } from "react-router"; import { Credentials, TokenData, User } from "./Types"; import { fetchUserById, logIn, tokenStatus } from "./Api"; import jwt_decode from "jwt-decode"; - - interface AuthContextType { + +interface AuthContextType { user?: User; loading: boolean; isAirline: boolean; @@ -12,28 +12,28 @@ import jwt_decode from "jwt-decode"; login: (credentials: Credentials) => void; signUp: (email: string, name: string, password: string) => void; logout: () => void; - } - - const AuthContext = createContext( +} + +const AuthContext = createContext( {} as AuthContextType - ); - - export function AuthProvider({ +); + +export function AuthProvider({ children, - }: { +}: { children: ReactNode; - }): JSX.Element { +}): JSX.Element { const [user, setUser] = useState(); const [error, setError] = useState(); const [loading, setLoading] = useState(false); const [loadingInitial, setLoadingInitial] = useState(true); - const [isAirline, setIsAirline] = useState(false); + const [isAirline, setIsAirline] = useState(false); const navigate = useNavigate(); - + useEffect(() => { - if (error) setError(undefined); + if (error) setError(undefined); }, [window.location.pathname]); - + useEffect(() => { const existingToken = localStorage.getItem("token"); if (existingToken) { @@ -48,68 +48,68 @@ import jwt_decode from "jwt-decode"; } tokenStatus(existingToken) - .then((res) => fetchUserById(res.id) - .then((res) => setUser(res)) - .catch((_error) => {}) - .finally(() => setLoadingInitial(false)) - ) - .catch((_error) => { - setLoadingInitial(false) - logout() - }) + .then((res) => fetchUserById(res.id) + .then((res) => setUser(res)) + .catch((_error) => { }) + .finally(() => setLoadingInitial(false)) + ) + .catch((_error) => { + setLoadingInitial(false) + logout() + }) // .finally(() => setLoadingInitial(false)); } else { setLoadingInitial(false) } }, []); - + function login(credentials: Credentials) { setLoading(true); const tokens = logIn(credentials) - .then((x) => { - localStorage.setItem("token", x.access_token); - const airline = (jwt_decode(x.access_token) as TokenData).airline; - setIsAirline(airline) - const user = fetchUserById(x.user_id as number) - .then(y => { - setUser(y); - navigate("/home") + .then((x) => { + localStorage.setItem("token", x.access_token); + const airline = (jwt_decode(x.access_token) as TokenData).airline; + setIsAirline(airline) + const user = fetchUserById(x.user_id as number) + .then(y => { + setUser(y); + navigate("/home") + }) + .catch((error) => setError(error)) + .finally(() => setLoading(false)); }) .catch((error) => setError(error)) - .finally(() => setLoading(false)); - }) - .catch((error) => setError(error)) // .finally(() => setLoading(false)); } - - function signUp(email: string, name: string, password: string) {} - + + function signUp(email: string, name: string, password: string) { } + function logout() { localStorage.removeItem("token"); - setUser(undefined); + setUser(undefined); navigate("/login") } const memoedValue = useMemo( - () => ({ - user, - loading, - isAirline, - error, - login, - signUp, - logout, - }), - [user, isAirline, loading, error] + () => ({ + user, + loading, + isAirline, + error, + login, + signUp, + logout, + }), + [user, isAirline, loading, error] ); - + return ( - - {!loadingInitial && children} - + + {!loadingInitial && children} + ); - } - - export default function useAuth() { +} + +export default function useAuth() { return useContext(AuthContext); - } \ No newline at end of file +} \ No newline at end of file diff --git a/browser-domain/test.sh b/browser-domain/test.sh index c20a79c..24ce9ab 100644 --- a/browser-domain/test.sh +++ b/browser-domain/test.sh @@ -1,8 +1,3 @@ #!/bin/bash -curl -X DELETE api:5000/ping -curl -X POST api:5000/ping - - -# npm test -echo "NPM TEST" +npm run test diff --git a/screen-domain/src/Api.ts b/screen-domain/src/Api.ts index c8dde03..aecca59 100644 --- a/screen-domain/src/Api.ts +++ b/screen-domain/src/Api.ts @@ -1,37 +1,37 @@ 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/", - headers: { - accept: "application/json", - "Content-Type": "application/json", - }, + baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/", + headers: { + accept: "application/json", + "Content-Type": "application/json", + }, validateStatus: (x) => { return !(x < 200 || x > 204) } }); instance.interceptors.response.use( - (response) => { - return JSON.parse(response.data); - }, - (error) => { - const err = error as AxiosError; - return Promise.reject(err); - } + (response) => { + return JSON.parse(response.data); + }, + (error) => { + const err = error as AxiosError; + return Promise.reject(err); + } ); instance.interceptors.request.use((request) => { - request.data = JSON.stringify(request.data); - return request; + request.data = JSON.stringify(request.data); + return request; }); export const ping = () => { - return instance.get("health"); + return instance.get("health"); }; export const fetchZones = (origin: string | undefined, destination: string | undefined, lastUpdate: string | null): Promise => { - return instance.get("flights" + - (origin ? "?origin=" + origin : "") + - (destination ? "?destination=" + destination : "") + - (lastUpdate ? ( origin ? "&lastUpdated=" : "?lastUpdated=") + lastUpdate : "")) + return instance.get("flights" + + (origin ? "?origin=" + origin : "") + + (destination ? "?destination=" + destination : "") + + (lastUpdate ? (origin ? "&lastUpdated=" : "?lastUpdated=") + lastUpdate : "")) }; diff --git a/screen-domain/src/App.tsx b/screen-domain/src/App.tsx index fc655f8..540c41c 100644 --- a/screen-domain/src/App.tsx +++ b/screen-domain/src/App.tsx @@ -1,26 +1,22 @@ -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(); + const connection = useIsConnected(); - return ( -
- - } /> - } /> - } /> - -
{connection}
-
- ); + return ( +
+ + } /> + } /> + } /> + +
{connection}
+
+ ); } export default App; diff --git a/screen-domain/src/Types.d.ts b/screen-domain/src/Types.d.ts index 8504219..730e041 100644 --- a/screen-domain/src/Types.d.ts +++ b/screen-domain/src/Types.d.ts @@ -1,24 +1,24 @@ export interface Credentials { - password: string; - email: string; - username?: string; + password: string; + email: string; + username?: string; } export interface Token { - refresh_token: string; - access_token: string; + refresh_token: string; + access_token: string; } export interface User { - id: number; - username: string; - email: string; - created_date?: Date; + id: number; + username: string; + email: string; + created_date?: Date; } export interface Zone { - id: number; - name: string; + id: number; + name: string; } export interface Flight { @@ -30,4 +30,4 @@ export interface Flight { departure_time: string; arrival_time: string; gate: string; - } \ No newline at end of file +} \ No newline at end of file diff --git a/screen-domain/src/components/Button/Button.test.tsx b/screen-domain/src/components/Button/Button.test.tsx index c705055..8456a87 100644 --- a/screen-domain/src/components/Button/Button.test.tsx +++ b/screen-domain/src/components/Button/Button.test.tsx @@ -5,13 +5,13 @@ import { render, screen } from "@testing-library/react"; import { Button } from "antd"; describe("Button Component Test", () => { - test("Display button label and clicked", async () => { - const onClick = jest.fn(); + test("Display button label and clicked", async () => { + const onClick = jest.fn(); - render(); + render(); - expect(screen.getByText("Button")).toBeVisible(); - await userEvent.click(screen.getByText("Button")); - expect(onClick).toBeCalled(); - }); + expect(screen.getByText("Button")).toBeVisible(); + await userEvent.click(screen.getByText("Button")); + expect(onClick).toBeCalled(); + }); }); diff --git a/screen-domain/src/components/Home/Arrival.tsx b/screen-domain/src/components/Home/Arrival.tsx index ff7ee43..b8cd8ce 100644 --- a/screen-domain/src/components/Home/Arrival.tsx +++ b/screen-domain/src/components/Home/Arrival.tsx @@ -7,14 +7,13 @@ import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'; import { useFetchDestination } from "../../hooks/useFetchDestination"; interface Props { - flights?: Flight[]; + flights?: Flight[]; } export const Arrival: React.FC = (props) => { - // let origin = process.env.REACT_APP_ORIGIN; let destination = process.env.REACT_APP_ORIGIN; - const { zones, error } = useFetchDestination(destination); + const { zones, error } = useFetchDestination(destination); const [startIndex, setStartIndex] = useState(0); useEffect(() => { @@ -22,77 +21,45 @@ export const Arrival: React.FC = (props) => { if (zones.length <= 10) { return; } - // setStartIndex((prevIndex) => (prevIndex + 10) % zones.length); - setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10)); + setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10)); }, 5000); - + return () => clearInterval(interval); - }, [zones]); + }, [zones]); - return ( -
-

Arrival

-
- {/* {(props.flights ? props.flights : zones).map((u) => { - return ; - })} */} - {/* - - - - - - - - - - - - */} -
Flight codeDepartureDeparture timeDestinationArrival timeGateStatus
- - - - {/* */} - {/* */} - {/* */} - - - - - - - - {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 ( */} - - {/* */} - - - {/* */} - {/* */} - - - - - // ); - ))} - {/* })} */} - - )} - -
CodeDepartureTimeDestinationOriginTimeGateStatus
{flight.id}{flight.id}-{flight.flight_code}{flight.origin}{flight.departure_time}{flight.destination}{flight.arrival_time}{flight.gate}{flight.status}
- {/* - */} - {error ?
{error}
: <>} -
-
- ); + return ( +
+

Arrival

+
+ + + + + + + + + + + + {zones.length > 0 && ( + <> + {zones.slice(startIndex, startIndex + 10).map((flight) => ( + + + + + + + + ))} + + )} + +
CodeOriginTimeGateStatus
{flight.flight_code}{flight.origin}{flight.arrival_time}{flight.gate}{flight.status}
+ {error ?
{error}
: <>} +
+
+ ); }; diff --git a/screen-domain/src/components/Home/Card/Card.css b/screen-domain/src/components/Home/Card/Card.css index 8e01b69..0f52e3c 100644 --- a/screen-domain/src/components/Home/Card/Card.css +++ b/screen-domain/src/components/Home/Card/Card.css @@ -1,7 +1,8 @@ -/* .flight-card { +.flight-card { display: flex; + flex-direction: column; justify-content: space-between; - align-items: center; + align-items: flex-start; padding: 16px; border: 1px solid #ddd; border-radius: 8px; @@ -9,37 +10,14 @@ 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 */ - justify-content: space-between; - align-items: flex-start; /* Align items to the start of the column */ - 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); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } - + .flight-details { - display: flex; - flex-direction: column; /* Display details as a column */ - margin-top: 16px; /* Add some space between the two rows */ + display: flex; + flex-direction: column; + margin-top: 16px; } - } \ No newline at end of file +} \ No newline at end of file diff --git a/screen-domain/src/components/Home/Card/Card.test.tsx b/screen-domain/src/components/Home/Card/Card.test.tsx index c527342..1805d88 100644 --- a/screen-domain/src/components/Home/Card/Card.test.tsx +++ b/screen-domain/src/components/Home/Card/Card.test.tsx @@ -5,10 +5,10 @@ import "../../../matchMedia.mock"; import { Card } from "./Card"; describe("Card Component Test", () => { - test("Display initial, name and icon", async () => { - // render(); + test("Display initial, name and icon", async () => { + // render(); - // expect(screen.getByText("Belgrano📍")).toBeVisible(); - // expect(screen.getByText("B")).toBeVisible(); - }); + // expect(screen.getByText("Belgrano📍")).toBeVisible(); + // expect(screen.getByText("B")).toBeVisible(); + }); }); diff --git a/screen-domain/src/components/Home/Card/Card.tsx b/screen-domain/src/components/Home/Card/Card.tsx index f191a42..6832893 100644 --- a/screen-domain/src/components/Home/Card/Card.tsx +++ b/screen-domain/src/components/Home/Card/Card.tsx @@ -1,101 +1,63 @@ -// 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 = ({ -// flight: { flight_code, status, origin, destination, departure_time, arrival_time, gate }, -// }) => { -// console.log(flight_code) -// return ( -//
-// {flight_code.slice(0, 1).toUpperCase()} -//
-//
Name: {flight_code}
-//
Status: {status}
-//
Origin: {origin}
-//
Destination: {destination}
-//
Departure Time: {departure_time}
-//
Arrival Time: {arrival_time}
-//
Gate: {gate}
-//
-// 📍 -//
-// ); -// }; - 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; - status: string; - origin: string; - destination: string; - departure_time: string; - arrival_time: string; - gate: string; + flight_code: string; + status: string; + origin: string; + destination: string; + departure_time: string; + arrival_time: string; + gate: string; } interface CardProps { - flight: FlightProps; + flight: FlightProps; } const { Text } = Typography; export const Card: React.FC = ({ flight }) => { - return ( -
- - } /> -
- {flight.flight_code} -
- - {flight.origin} {flight.destination} - -
+ return ( +
+ + } /> +
+ {flight.flight_code} +
+ + {flight.origin} {flight.destination} + +
+
+ +
+ + Status: + {flight.status} + + + Departure: + + + {flight.departure_time} + + + + Arrival: + + + {flight.arrival_time} + + + + Gate: + {flight.gate} + +
- -
- - Status: - {flight.status} - - - Departure: - - - {flight.departure_time} - - - - Arrival: - - - {flight.arrival_time} - - - - Gate: - {flight.gate} - -
-
- ); + ); }; diff --git a/screen-domain/src/components/Home/Departure.tsx b/screen-domain/src/components/Home/Departure.tsx index 2758fbc..4ad264d 100644 --- a/screen-domain/src/components/Home/Departure.tsx +++ b/screen-domain/src/components/Home/Departure.tsx @@ -7,14 +7,13 @@ import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'; import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'; interface Props { - flights?: Flight[]; + flights?: Flight[]; } export const Departure: React.FC = (props) => { let origin = process.env.REACT_APP_ORIGIN; - // let destination = process.env.REACT_APP_ORIGIN; - const { zones, error } = useFetchOrigin(origin); + const { zones, error } = useFetchOrigin(origin); const [startIndex, setStartIndex] = useState(0); useEffect(() => { @@ -22,92 +21,62 @@ export const Departure: React.FC = (props) => { if (zones.length <= 10) { return; } - // setStartIndex((prevIndex) => (prevIndex + 10) % zones.length); - setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10)); + setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10)); }, 5000); - + return () => clearInterval(interval); - }, [zones]); + }, [zones]); - return ( -
-

Departure

-
- {/* {(props.flights ? props.flights : zones).map((u) => { - return ; - })} */} - {/* - - - - - - - - - - - - */} -
Flight codeDepartureDeparture timeDestinationArrival timeGateStatus
- - - - {/* */} - - - {/* */} - - - - - - {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 ( */} - - {/* */} - - {/* */} - - - {/* */} - - - - // ); - ))} - {startIndex + 10 >= zones.length && ( - <> - {Array.from({ length: startIndex + 10 - zones.length }).map((_, index) => { - return ( - - - - - - - - ) - }) } - - ) - } - {/* })} */} - - )} - -
CodeDepartureTimeDestinationArrival timeGateStatus
{flight.id}{flight.id}-{flight.flight_code}{flight.origin}{flight.departure_time}{flight.destination}{flight.arrival_time}{flight.gate}{flight.status}
- {/* - */} - {error ?
{error}
: <>} -
-
- ); + return ( +
+

Departure

+
+ + + + + + + + + + + + {zones.length > 0 && ( + <> + {zones.slice(startIndex, startIndex + 10).map((flight) => ( + + + + + + + + // ); + ))} + {startIndex + 10 >= zones.length && ( + <> + {Array.from({ length: startIndex + 10 - zones.length }).map((_, index) => { + return ( + + + + + + + + ) + })} + + ) + } + + )} + +
CodeTimeDestinationGateStatus
{flight.flight_code}{flight.departure_time}{flight.destination}{flight.gate}{flight.status}
+ {error ?
{error}
: <>} +
+
+ ); }; diff --git a/screen-domain/src/components/Home/Home.css b/screen-domain/src/components/Home/Home.css index 4a1f5ac..fdacfa4 100644 --- a/screen-domain/src/components/Home/Home.css +++ b/screen-domain/src/components/Home/Home.css @@ -1,42 +1,43 @@ body { -font-family: 'Arial', sans-serif; -background-color: #f0f0f0; + font-family: 'Arial', sans-serif; + background-color: #f0f0f0; } .App { -text-align: center; -margin-top: 20px; + text-align: center; + margin-top: 20px; } table { -width: 80%; -margin: 20px auto; -border-collapse: collapse; -box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -background-color: #fff; + width: 80%; + margin: 20px auto; + border-collapse: collapse; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: #fff; } -th, td { -border: 1px solid #ddd; -padding: 10px; -text-align: left; +th, +td { + border: 1px solid #ddd; + padding: 10px; + text-align: left; } th { -background-color: #4CAF50; -color: #fff; + background-color: #4CAF50; + color: #fff; } tbody tr:hover { -background-color: #f5f5f5; + background-color: #f5f5f5; } tfoot { -background-color: #4CAF50; -color: #fff; + background-color: #4CAF50; + color: #fff; } .delayed-flight { -background-color: #ffcccc; /* Light red for delayed flights */ -color: #ff0000; /* Red text for delayed flights */ + background-color: #ffcccc; + color: #ff0000; } \ No newline at end of file diff --git a/screen-domain/src/components/Home/Home.test.tsx b/screen-domain/src/components/Home/Home.test.tsx index 773ca5b..881ea1d 100644 --- a/screen-domain/src/components/Home/Home.test.tsx +++ b/screen-domain/src/components/Home/Home.test.tsx @@ -1,8 +1,8 @@ const mockedUsedNavigate = jest.fn(); jest.mock("react-router-dom", () => ({ - ...jest.requireActual("react-router-dom"), - useNavigate: () => mockedUsedNavigate, + ...jest.requireActual("react-router-dom"), + useNavigate: () => mockedUsedNavigate, })); import "../../matchMedia.mock"; @@ -11,18 +11,18 @@ import { render, screen } from "@testing-library/react"; // import { Home } from "./Departure"; describe("Home View Test", () => { - test("Display initial, name and icon", async () => { - // render( - // - // ); + test("Display initial, name and icon", async () => { + // render( + // + // ); - // expect(screen.getByText("Zones")).toBeVisible(); - // expect(screen.getByText("Belgrano📍")).toBeVisible(); - // expect(screen.getByText("San Isidro📍")).toBeVisible(); - }); + // expect(screen.getByText("Zones")).toBeVisible(); + // expect(screen.getByText("Belgrano📍")).toBeVisible(); + // expect(screen.getByText("San Isidro📍")).toBeVisible(); + }); }); diff --git a/screen-domain/src/components/Home/Home.tsx b/screen-domain/src/components/Home/Home.tsx index 6aa5de2..5555a54 100644 --- a/screen-domain/src/components/Home/Home.tsx +++ b/screen-domain/src/components/Home/Home.tsx @@ -5,7 +5,7 @@ import { useNavigate } from "react-router"; import './Page.css' interface Props { - flights?: Flight[]; + flights?: Flight[]; } export const Home: React.FC = (props) => { @@ -15,10 +15,10 @@ export const Home: React.FC = (props) => { navigate(path); }; - return ( -
+ return ( +
-
- ); +
+ ); }; diff --git a/screen-domain/src/components/Home/Page.css b/screen-domain/src/components/Home/Page.css index e80cde8..9f745c1 100644 --- a/screen-domain/src/components/Home/Page.css +++ b/screen-domain/src/components/Home/Page.css @@ -7,14 +7,14 @@ body { justify-content: center; align-items: center; height: 100vh; - } - - div { +} + +div { text-align: center; - } - - button { - background-color: #4CAF50; /* Green */ +} + +button { + background-color: #4CAF50; border: none; color: white; padding: 15px 32px; @@ -26,8 +26,8 @@ body { cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease; - } - - button:hover { - background-color: #45a049; /* Darker green on hover */ - } \ No newline at end of file +} + +button:hover { + background-color: #45a049; +} \ No newline at end of file diff --git a/screen-domain/src/db.ts b/screen-domain/src/db.ts index ee32080..aaa63bd 100644 --- a/screen-domain/src/db.ts +++ b/screen-domain/src/db.ts @@ -3,130 +3,90 @@ let db: IDBDatabase; let version = 1; export enum Stores { - Departure = 'departure', - Arrival = 'arrival' + Departure = 'departure', + Arrival = 'arrival' } -interface EventTarget { - result: any -} +export const initDB = (): Promise => { + return new Promise((resolve) => { + request = indexedDB.open('myDB'); -export const initDB = (): Promise => { - return new Promise((resolve) => { - request = indexedDB.open('myDB'); + request.onupgradeneeded = (e) => { + let req = (e.target as IDBOpenDBRequest) + db = req.result; - request.onupgradeneeded = (e) => { - let req = (e.target as IDBOpenDBRequest) - db = req.result; + if (!db.objectStoreNames.contains(Stores.Arrival)) { + db.createObjectStore(Stores.Arrival, { keyPath: 'id' }); + } + if (!db.objectStoreNames.contains(Stores.Departure)) { + db.createObjectStore(Stores.Departure, { keyPath: 'id' }); + } + }; - if (!db.objectStoreNames.contains(Stores.Arrival)) { - db.createObjectStore(Stores.Arrival, { keyPath: 'id' }); - } - if (!db.objectStoreNames.contains(Stores.Departure)) { - db.createObjectStore(Stores.Departure, { keyPath: 'id' }); - } - }; + request.onsuccess = (e) => { + let req = (e.target as IDBOpenDBRequest) + db = req.result; + version = db.version; + resolve(req.result); + }; - request.onsuccess = (e) => { - let req = (e.target as IDBOpenDBRequest) - db = req.result; - version = db.version; - resolve(req.result); - }; - - request.onerror = (e) => { - resolve(false); - }; - }); + request.onerror = (e) => { + resolve(false); + }; + }); }; -export const addData = (storeName: string, data: T): Promise => { - 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 addData = (storeName: string, data: T): Promise => { + return new Promise((resolve) => { + const tx = db.transaction(storeName, 'readwrite'); + const store = tx.objectStore(storeName); + store.add(data); + resolve(data); + }); }; export const deleteData = (storeName: string, key: number): Promise => { - 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); - console.log("removing" + key) - res.onsuccess = () => { - console.log("success") - resolve(true); - }; - res.onerror = () => { - console.log("error") - resolve(false); - } - // }; - }); + return new Promise((resolve) => { + const tx = db.transaction(storeName, 'readwrite'); + const store = tx.objectStore(storeName); + const res = store.delete(key); + console.log("removing" + key) + res.onsuccess = () => { + console.log("success") + resolve(true); + }; + res.onerror = () => { + console.log("error") + resolve(false); + } + }); }; -export const updateData = (storeName: string, key: number, data: T): Promise => { - 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); - res.onsuccess = () => { - const newData = { ...res.result, ...data }; - store.put(newData); - resolve(newData); - }; - res.onerror = () => { - resolve(null); - } - // }; - }); +export const updateData = (storeName: string, key: number, data: T): Promise => { + return new Promise((resolve) => { + const tx = db.transaction(storeName, 'readwrite'); + const store = tx.objectStore(storeName); + const res = store.get(key); + res.onsuccess = () => { + const newData = { ...res.result, ...data }; + store.put(newData); + resolve(newData); + }; + res.onerror = () => { + resolve(null); + } + }); }; -export const getStoreData = (storeName: Stores): Promise => { - 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); - }; - // }; - }); +export const getStoreData = (storeName: Stores): Promise => { + return new Promise((resolve) => { + const tx = db.transaction(storeName, 'readonly'); + const store = tx.objectStore(storeName); + const res = store.getAll(); + res.onsuccess = () => { + resolve(res.result); + }; + }); }; -export {}; +export { }; diff --git a/screen-domain/src/hooks/useFetchDestination.tsx b/screen-domain/src/hooks/useFetchDestination.tsx index e352a7f..bf37367 100644 --- a/screen-domain/src/hooks/useFetchDestination.tsx +++ b/screen-domain/src/hooks/useFetchDestination.tsx @@ -1,142 +1,135 @@ -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(null); - const [zones, setZones] = useState([]); - // const [today, setToday] = useState(new Date()); + const [error, setError] = useState(null); + const [zones, setZones] = useState([]); const isToday = (someDate: Date) => { let today = new Date(); return someDate.getDate() == today.getDate() && - someDate.getMonth() == today.getMonth() && - someDate.getFullYear() == today.getFullYear() + someDate.getMonth() == today.getMonth() && + someDate.getFullYear() == today.getFullYear() } useEffect(() => { const intervalId = setInterval(() => { - // {isToday(new Date(flight.departure_time)) ? 's' : 'n'} let today = localStorage.getItem('date') if (today && !isToday(new Date(today))) { getStoreData(Stores.Arrival) - .then((data) => { - if (data) { - data.map((u) => { - deleteData(Stores.Arrival, u.id) - }) - } - }) + .then((data) => { + if (data) { + data.map((u) => { + deleteData(Stores.Arrival, u.id) + }) + } + }) localStorage.setItem('date', new Date().toString()) } }, 36000) - + return () => clearInterval(intervalId); - }, []) + }, []) - useEffect(() => { - setError(null); + useEffect(() => { + setError(null); let newUpdate = new Date().toISOString() localStorage.setItem('date', new Date().toString()) initDB().then((x) => { - console.log(x) - getStoreData(Stores.Arrival) - .then((data) => { - console.log(data) - if (data && data.length > 0) { - data.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime()) - setZones(data) - } else { - fetchZones(undefined, destination, null) - .then((data) => { - localStorage.setItem('lastUpdated', newUpdate) - let toAdd: Flight[] = [] - data.map((u) => { - if (u.status != 'Deleted') { - addData(Stores.Arrival, u) - toAdd.push(u) - } + console.log(x) + getStoreData(Stores.Arrival) + .then((data) => { + console.log(data) + if (data && data.length > 0) { + data.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime()) + setZones(data) + } else { + fetchZones(undefined, destination, null) + .then((data) => { + localStorage.setItem('lastUpdated', newUpdate) + let toAdd: Flight[] = [] + data.map((u) => { + if (u.status != 'Deleted') { + addData(Stores.Arrival, u) + toAdd.push(u) + } + }) + toAdd.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime()) + setZones(toAdd); }) - // 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); - }) - .catch((error) => {}); - } - }) + .catch((error) => { }); + } + }) } ) - }, [origin]); + }, [origin]); useEffect(() => { const intervalId = setInterval(() => { let lastUpdate = localStorage.getItem('lastUpdated') let newUpdate = new Date().toISOString() - // let newUpdate = new Date().toTimeString() fetchZones(undefined, destination, lastUpdate) - .then((data) => { - localStorage.setItem('lastUpdated', newUpdate) - let toAdd: Flight[] = [] - let toRemove: Flight[] = [] + .then((data) => { + localStorage.setItem('lastUpdated', newUpdate) + let toAdd: Flight[] = [] + let toRemove: Flight[] = [] - zones.forEach((c, i) => { - let index = data.findIndex(x => x.id === c.id) - if (index >= 0) { - console.log(data[index].departure_time + 'nuevo') - if (data[index].status == 'Deleted' || new Date(data[index].departure_time) < new Date()) { - console.log("sacamos") - toRemove.push(data[index]) - deleteData(Stores.Arrival, c.id) - } else { - toAdd.push(data[index]); - updateData(Stores.Arrival, c.id, data[index]) - } - } else { - console.log(new Date(c.departure_time)) - if (c.status == 'Deleted' || new Date(c.departure_time) < new Date()) { - console.log("sacamos?") - toRemove.push(c); - deleteData(Stores.Arrival, c.id) - } else { - toAdd.push(c); - } - } - }); - - // 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()) - ) - const newArray = toAdd.concat(filtered); - console.log(filtered) - console.log(newArray) - filtered.forEach(c => { - 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); - }) - .catch((error) => { - if (!!error.isAxiosError && !error.response) { - // + zones.forEach((c, i) => { + let index = data.findIndex(x => x.id === c.id) + if (index >= 0) { + console.log(data[index].departure_time + 'nuevo') + if (data[index].status == 'Deleted' || new Date(data[index].departure_time) < new Date()) { + console.log("sacamos") + toRemove.push(data[index]) + deleteData(Stores.Arrival, c.id) + } else { + toAdd.push(data[index]); + updateData(Stores.Arrival, c.id, data[index]) } - }); - }, 5000) - - return () => clearInterval(intervalId); - }, [origin, zones]) + } else { + console.log(new Date(c.departure_time)) + if (c.status == 'Deleted' || new Date(c.departure_time) < new Date()) { + console.log("sacamos?") + toRemove.push(c); + deleteData(Stores.Arrival, c.id) + } else { + toAdd.push(c); + } + } + }); - return { zones, error }; + 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()) + ) + const newArray = toAdd.concat(filtered); + console.log(filtered) + console.log(newArray) + filtered.forEach(c => { + addData(Stores.Arrival, c) + }) + + newArray.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime()) + setZones(newArray); + }) + .catch((error) => { + if (!!error.isAxiosError && !error.response) { + // + } + }); + }, 5000) + + return () => clearInterval(intervalId); + }, [origin, zones]) + + return { zones, error }; }; diff --git a/screen-domain/src/hooks/useFetchOrigin.tsx b/screen-domain/src/hooks/useFetchOrigin.tsx index 86e3248..3c8a3a4 100644 --- a/screen-domain/src/hooks/useFetchOrigin.tsx +++ b/screen-domain/src/hooks/useFetchOrigin.tsx @@ -1,142 +1,135 @@ -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(null); - const [zones, setZones] = useState([]); - // const [today, setToday] = useState(new Date()); + const [error, setError] = useState(null); + const [zones, setZones] = useState([]); const isToday = (someDate: Date) => { let today = new Date(); return someDate.getDate() == today.getDate() && - someDate.getMonth() == today.getMonth() && - someDate.getFullYear() == today.getFullYear() + someDate.getMonth() == today.getMonth() && + someDate.getFullYear() == today.getFullYear() } useEffect(() => { const intervalId = setInterval(() => { - // {isToday(new Date(flight.departure_time)) ? 's' : 'n'} let today = localStorage.getItem('date') if (today && !isToday(new Date(today))) { getStoreData(Stores.Departure) - .then((data) => { - if (data) { - data.map((u) => { - deleteData(Stores.Departure, u.id) - }) - } - }) + .then((data) => { + if (data) { + data.map((u) => { + deleteData(Stores.Departure, u.id) + }) + } + }) localStorage.setItem('date', new Date().toString()) } }, 36000) - + return () => clearInterval(intervalId); - }, []) + }, []) - useEffect(() => { - setError(null); + useEffect(() => { + setError(null); let newUpdate = new Date().toISOString() localStorage.setItem('date', new Date().toString()) initDB().then((x) => { - console.log(x) - getStoreData(Stores.Departure) - .then((data) => { - console.log(data) - if (data && data.length > 0) { - data.sort((a,b) => new Date(a.origin).getTime() - new Date(b.origin).getTime()) - setZones(data) - } else { - fetchZones(origin, undefined, null) - .then((data) => { - localStorage.setItem('lastUpdated', newUpdate) - let toAdd: Flight[] = [] - data.map((u) => { - if (u.status != 'Deleted') { - addData(Stores.Departure, u) - toAdd.push(u) - } + console.log(x) + getStoreData(Stores.Departure) + .then((data) => { + console.log(data) + if (data && data.length > 0) { + data.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime()) + setZones(data) + } else { + fetchZones(origin, undefined, null) + .then((data) => { + localStorage.setItem('lastUpdated', newUpdate) + let toAdd: Flight[] = [] + data.map((u) => { + if (u.status != 'Deleted') { + addData(Stores.Departure, u) + toAdd.push(u) + } + }) + toAdd.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime()) + setZones(toAdd); }) - // 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); - }) - .catch((error) => {}); - } - }) + .catch((error) => { }); + } + }) } ) - }, [origin]); + }, [origin]); useEffect(() => { const intervalId = setInterval(() => { let lastUpdate = localStorage.getItem('lastUpdated') let newUpdate = new Date().toISOString() - // let newUpdate = new Date().toTimeString() fetchZones(origin, undefined, lastUpdate) - .then((data) => { - localStorage.setItem('lastUpdated', newUpdate) - let toAdd: Flight[] = [] - let toRemove: Flight[] = [] + .then((data) => { + localStorage.setItem('lastUpdated', newUpdate) + let toAdd: Flight[] = [] + let toRemove: Flight[] = [] - zones.forEach((c, i) => { - let index = data.findIndex(x => x.id === c.id) - if (index >= 0) { - console.log(data[index].departure_time + 'nuevo') - if (data[index].status == 'Deleted' || new Date(data[index].departure_time) < new Date()) { - console.log("sacamos") - toRemove.push(data[index]) - deleteData(Stores.Departure, c.id) - } else { - toAdd.push(data[index]); - updateData(Stores.Departure, c.id, data[index]) - } - } else { - console.log(new Date(c.departure_time)) - if (c.status == 'Deleted' || new Date(c.departure_time) < new Date()) { - console.log("sacamos?") - toRemove.push(c); - deleteData(Stores.Departure, c.id) - } else { - toAdd.push(c); - } - } - }); - - // 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()) - ) - const newArray = toAdd.concat(filtered); - console.log(filtered) - console.log(newArray) - filtered.forEach(c => { - 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); - }) - .catch((error) => { - if (!!error.isAxiosError && !error.response) { - // + zones.forEach((c, i) => { + let index = data.findIndex(x => x.id === c.id) + if (index >= 0) { + console.log(data[index].departure_time + 'nuevo') + if (data[index].status == 'Deleted' || new Date(data[index].departure_time) < new Date()) { + console.log("sacamos") + toRemove.push(data[index]) + deleteData(Stores.Departure, c.id) + } else { + toAdd.push(data[index]); + updateData(Stores.Departure, c.id, data[index]) } - }); - }, 5000) - - return () => clearInterval(intervalId); - }, [origin, zones]) + } else { + console.log(new Date(c.departure_time)) + if (c.status == 'Deleted' || new Date(c.departure_time) < new Date()) { + console.log("sacamos?") + toRemove.push(c); + deleteData(Stores.Departure, c.id) + } else { + toAdd.push(c); + } + } + }); - return { zones, error }; + 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()) + ) + const newArray = toAdd.concat(filtered); + console.log(filtered) + console.log(newArray) + filtered.forEach(c => { + addData(Stores.Departure, c) + }) + + newArray.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime()) + setZones(newArray); + }) + .catch((error) => { + if (!!error.isAxiosError && !error.response) { + // + } + }); + }, 5000) + + return () => clearInterval(intervalId); + }, [origin, zones]) + + return { zones, error }; }; diff --git a/screen-domain/src/hooks/useIsConnected.tsx b/screen-domain/src/hooks/useIsConnected.tsx index d08d64a..429e5b1 100644 --- a/screen-domain/src/hooks/useIsConnected.tsx +++ b/screen-domain/src/hooks/useIsConnected.tsx @@ -3,29 +3,29 @@ import { useState } from "react"; import { ping } from "../Api"; export const useIsConnected = () => { - const [connected, setConnected] = useState(true); + const [connected, setConnected] = useState(true); useEffect(() => { const interval = setInterval(() => { ping() - .then(() => { - setConnected(true); - }) - .catch(() => { - setConnected(false); - }); + .then(() => { + setConnected(true); + }) + .catch(() => { + setConnected(false); + }); }, 5000); - - return () => clearInterval(interval); - }, []); - return ( -
- {connected ? ( -

Connected

- ) : ( -

Disconnected

- )} -
- ); + return () => clearInterval(interval); + }, []); + + return ( +
+ {connected ? ( +

Connected

+ ) : ( +

Disconnected

+ )} +
+ ); }; diff --git a/screen-domain/src/index.css b/screen-domain/src/index.css index bd54b3b..a94edcd 100644 --- a/screen-domain/src/index.css +++ b/screen-domain/src/index.css @@ -1,106 +1,106 @@ body { - margin: 0; - font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; } .App { - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background-color: #eff2f7; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #eff2f7; } .Box { - border-radius: 20px; - box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2); - padding: 50px; - gap: 30px; - background-color: white; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + border-radius: 20px; + box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2); + padding: 50px; + gap: 30px; + background-color: white; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .Small { - width: 250px; - height: 400px; + width: 250px; + height: 400px; } .Section { - flex: 1; - width: 100%; - padding: 30px 50px; - gap: 30px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + flex: 1; + width: 100%; + padding: 30px 50px; + gap: 30px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .Image { - width: 150px; + width: 150px; } .Connected { - color: green; + color: green; } .Disconnected { - color: red; + color: red; } .FloatingStatus { - position: absolute; - top: 10px; - right: 50px; + position: absolute; + top: 10px; + right: 50px; } .LogoutButton { - position: absolute; - bottom: 10px; - right: 50px; + position: absolute; + bottom: 10px; + right: 50px; } .Card { - border-radius: 8px; - box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); - gap: 10px; - padding: 10px; - width: 100%; - background-color: white; - display: flex; - align-items: center; + border-radius: 8px; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); + gap: 10px; + padding: 10px; + width: 100%; + background-color: white; + display: flex; + align-items: center; } .Items { - height: 100%; - width: 100%; - display: flex; + height: 100%; + width: 100%; + display: flex; flex-wrap: wrap; - justify-content: space-between; - align-items: center; + justify-content: space-between; + align-items: center; gap: 20px; } .List { - width: 100%; - height: 500px; - gap: 30px; - padding: 20px; - overflow-y: auto; - display: flex; - align-items: center; - flex-direction: column; -} + width: 100%; + height: 500px; + gap: 30px; + padding: 20px; + overflow-y: auto; + display: flex; + align-items: center; + flex-direction: column; +} \ No newline at end of file