Add screen-domain and update flights-domain
Add local database (IndexedDB) and add `lastUpdated` logic for screens
This commit is contained in:
parent
4bddaba478
commit
33a75609bd
|
|
@ -2,4 +2,5 @@
|
|||
fastapi[all]==0.103.2
|
||||
psycopg2-binary==2.9.5
|
||||
pyjwt==2.6.0
|
||||
gunicorn==20.1.0
|
||||
gunicorn==20.1.0
|
||||
sqlalchemy==2.0.22
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
from sqlalchemy.orm import Session
|
||||
from sqlalchemy.sql import func
|
||||
|
||||
from src.api.models.flight import Flight
|
||||
from src.api.schemas.flight import Flight as FlightPydantic
|
||||
|
||||
|
||||
def get_flight_by_id(db: Session, flight_id: int):
|
||||
return db.query(Flight).filter(Flight.id == flight_id).first()
|
||||
|
||||
|
||||
def get_flights(db: Session, skip: int = 0, limit: int = 100):
|
||||
return db.query(Flight).offset(skip).limit(limit).all()
|
||||
|
||||
|
||||
def create_flight(db: Session, flight: FlightPydantic):
|
||||
db_flight = Flight(
|
||||
flight_code=flight.flight_code,
|
||||
status=flight.status,
|
||||
origin=flight.origin,
|
||||
destination=flight.destination,
|
||||
departure_time=flight.departure_time,
|
||||
arrival_time=flight.arrival_time,
|
||||
gate=flight.gate,
|
||||
)
|
||||
db.add(db_flight)
|
||||
db.commit()
|
||||
db.refresh(db_flight)
|
||||
return db_flight
|
||||
|
||||
|
||||
def update_flight_status(db: Session, status, id):
|
||||
db_flight = db.query(Flight).filter(Flight.id == id).first()
|
||||
if db_flight is None:
|
||||
raise KeyError
|
||||
|
||||
setattr(db_flight, "status", status)
|
||||
setattr(db_flight, "last_updated", func.now())
|
||||
db.commit()
|
||||
db.refresh(db_flight)
|
||||
return db_flight
|
||||
|
||||
|
||||
def get_flights_by_origin(db: Session, origin: str):
|
||||
return db.query(Flight).filter(Flight.origin == origin).all()
|
||||
|
||||
|
||||
def get_flights_update(db: Session, origin: str, lastUpdate: str):
|
||||
return (
|
||||
db.query(Flight)
|
||||
.filter((Flight.origin == origin) & (Flight.last_updated >= lastUpdate))
|
||||
.all()
|
||||
)
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import os
|
||||
|
||||
from sqlalchemy import create_engine
|
||||
from sqlalchemy.ext.declarative import declarative_base
|
||||
from sqlalchemy.orm import sessionmaker
|
||||
|
||||
SQLALCHEMY_DATABASE_URL = os.getenv("DATABASE_URL")
|
||||
print(SQLALCHEMY_DATABASE_URL)
|
||||
|
||||
engine = create_engine(SQLALCHEMY_DATABASE_URL)
|
||||
|
||||
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
|
||||
|
||||
Base = declarative_base()
|
||||
|
||||
|
||||
def get_db():
|
||||
db = SessionLocal()
|
||||
try:
|
||||
yield db
|
||||
finally:
|
||||
db.close()
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
from fastapi import FastAPI
|
||||
from fastapi.middleware.cors import CORSMiddleware
|
||||
|
||||
from src.api.models.Flight import Flight
|
||||
from src.api.db import Base, engine
|
||||
from src.api.routes import flights, health
|
||||
|
||||
app = FastAPI()
|
||||
Base.metadata.create_all(bind=engine)
|
||||
|
||||
# Crear una instancia de la clase Flight
|
||||
flight_instance = Flight(
|
||||
id="1",
|
||||
flight_code="ABC123",
|
||||
status="En ruta",
|
||||
origin="Ciudad A",
|
||||
destination="Ciudad B",
|
||||
departure_time="2023-10-09 10:00 AM",
|
||||
arrival_time="2023-10-09 12:00 PM",
|
||||
gate="A1",
|
||||
app = FastAPI(title="Flights Information API")
|
||||
app.include_router(flights.router, prefix="/flights")
|
||||
app.include_router(health.router, prefix="/health")
|
||||
app.add_middleware(
|
||||
CORSMiddleware,
|
||||
allow_origins=[
|
||||
"https://fids.slc.ar",
|
||||
"http://localhost:8080",
|
||||
"http://localhost:3000",
|
||||
],
|
||||
allow_credentials=True,
|
||||
allow_methods=["POST", "GET", "PUT", "DELETE", "OPTIONS"],
|
||||
allow_headers=["*"],
|
||||
)
|
||||
|
||||
|
||||
@app.get("/flights/{id}")
|
||||
async def get_flight_by_id(id: int):
|
||||
return flight_instance
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
from pydantic import BaseModel
|
||||
|
||||
|
||||
class Flight(BaseModel):
|
||||
id: str
|
||||
flight_code: str
|
||||
status: str
|
||||
origin: str
|
||||
destination: str
|
||||
departure_time: str
|
||||
arrival_time: str
|
||||
gate: str
|
||||
|
||||
def __eq__(self, other):
|
||||
if not isinstance(other, Flight):
|
||||
return False
|
||||
return self.id == other.id
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
from sqlalchemy import Column, DateTime, Integer, String
|
||||
from sqlalchemy.sql import func
|
||||
|
||||
from src.api.db import Base
|
||||
|
||||
|
||||
class Flight(Base):
|
||||
__tablename__ = "flights"
|
||||
|
||||
id = Column(Integer, primary_key=True, autoincrement=True)
|
||||
flight_code = Column(String, nullable=False)
|
||||
status = Column(String, nullable=False)
|
||||
origin = Column(String, nullable=False)
|
||||
destination = Column(String, nullable=False)
|
||||
departure_time = Column(DateTime, nullable=False)
|
||||
arrival_time = Column(DateTime, nullable=False)
|
||||
gate = Column(String, nullable=True)
|
||||
last_updated = Column(DateTime, default=func.now(), nullable=False)
|
||||
|
||||
# def get_departure_time(self, format="%Y-%m-%d %I:%M %p"):
|
||||
# return self.departure_time.strftime(format)
|
||||
|
||||
# def get_arrival_time(self, format="%Y-%m-%d %I:%M %p"):
|
||||
# return self.arrival_time.strftime(format)
|
||||
|
||||
# def get_last_updated(self, format="%Y-%m-%d %I:%M %p"):
|
||||
# return self.last_updated.strftime(format)
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
from typing import Optional
|
||||
|
||||
from fastapi import APIRouter, Depends, HTTPException
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from src.api.cruds import flight as flight_crud
|
||||
from src.api.db import get_db
|
||||
from src.api.schemas.flight import Flight, FlightCreate, FlightStatusUpdate
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
|
||||
@router.get("/{id}", response_model=Flight)
|
||||
def get_flight_by_id(id: int, db: Session = Depends(get_db)):
|
||||
db_flight = flight_crud.get_flight_by_id(db, id)
|
||||
if db_flight is None:
|
||||
raise HTTPException(status_code=404, detail="Flight not found")
|
||||
return db_flight
|
||||
|
||||
|
||||
@router.post("", response_model=Flight)
|
||||
def create_flight(flight: FlightCreate, db: Session = Depends(get_db)):
|
||||
return flight_crud.create_flight(db=db, flight=flight)
|
||||
|
||||
|
||||
@router.patch("/{id}", response_model=Flight)
|
||||
def update_flight(id: int, status: FlightStatusUpdate, db: Session = Depends(get_db)):
|
||||
return flight_crud.update_flight_status(db=db, id=id, status=status.status)
|
||||
|
||||
|
||||
@router.get("", response_model=list[Flight])
|
||||
def get_flights(
|
||||
origin: Optional[str] = None,
|
||||
lastUpdated: Optional[str] = None,
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
if origin and lastUpdated:
|
||||
flights = flight_crud.get_flights_update(db, origin, lastUpdated)
|
||||
elif origin:
|
||||
flights = flight_crud.get_flights_by_origin(db, origin)
|
||||
else:
|
||||
flights = flight_crud.get_flights(db=db)
|
||||
|
||||
if not flights:
|
||||
raise HTTPException(status_code=404, detail="Flights not found")
|
||||
|
||||
return flights
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
from fastapi import APIRouter
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
|
||||
@router.get("", status_code=200)
|
||||
async def get_health():
|
||||
return {"status": "OK"}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
from datetime import datetime
|
||||
|
||||
from pydantic import BaseModel, validator
|
||||
|
||||
|
||||
class Flight(BaseModel):
|
||||
id: int
|
||||
flight_code: str
|
||||
status: str
|
||||
origin: str
|
||||
destination: str
|
||||
departure_time: str
|
||||
arrival_time: str
|
||||
gate: str = None
|
||||
# last_updated: str
|
||||
|
||||
# @validator("departure_time", "arrival_time", "last_updated", pre=True, always=True)
|
||||
@validator("departure_time", "arrival_time", pre=True, always=True)
|
||||
def parse_datetime(cls, value):
|
||||
if isinstance(value, datetime):
|
||||
return value.strftime("%Y-%m-%d %I:%M %p")
|
||||
return value
|
||||
|
||||
|
||||
class FlightCreate(BaseModel):
|
||||
flight_code: str
|
||||
status: str
|
||||
origin: str
|
||||
destination: str
|
||||
departure_time: str
|
||||
arrival_time: str
|
||||
gate: str = None
|
||||
|
||||
|
||||
class FlightStatusUpdate(BaseModel):
|
||||
status: str
|
||||
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
FROM node:17.9.1 AS app
|
||||
ENV REACT_APP_ENDPOINT "https://api.fids.slc.ar/"
|
||||
WORKDIR /app
|
||||
COPY . .
|
||||
RUN npm install && npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
WORKDIR /usr/share/nginx/html
|
||||
RUN rm -rf ./*
|
||||
COPY --from=app /app/build .
|
||||
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
ENTRYPOINT ["nginx", "-g", "daemon off;"]
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
FROM node:17.9.1 AS app
|
||||
ENV REACT_APP_ENDPOINT "http://127.0.0.1:5000/"
|
||||
WORKDIR /app
|
||||
COPY package.json .
|
||||
COPY package-lock.json .
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
RUN chmod +x /app/test.sh
|
||||
ENTRYPOINT ["/app/test.sh"]
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
Para correr la app basta con ejecutar
|
||||
|
||||
npm run start
|
||||
|
||||
para corerr los test
|
||||
|
||||
npm run test
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/** @type {import('ts-jest').JestConfigWithTsJest} */
|
||||
module.exports = {
|
||||
preset: "ts-jest",
|
||||
testEnvironment: "jsdom",
|
||||
};
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
server {
|
||||
listen 80;
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
index unresolvable-file-html.html;
|
||||
try_files $uri @index;
|
||||
}
|
||||
|
||||
location @index {
|
||||
root /usr/share/nginx/html;
|
||||
add_header Cache-Control no-cache;
|
||||
expires 0;
|
||||
try_files /index.html =404;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,55 @@
|
|||
{
|
||||
"name": "sample-client-users",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"antd": "^5.3.3",
|
||||
"axios": "^1.3.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router": "^6.10.0",
|
||||
"react-router-dom": "^6.10.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "jest --coverage --collectCoverageFrom=\"./src/**\"",
|
||||
"test:integration": "jest integration",
|
||||
"eject": "react-scripts eject",
|
||||
"docker:build": "docker build -t client-users .",
|
||||
"docker:run": " docker run --rm -it -p 8080:80 client-users"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^28.1.8",
|
||||
"@types/node": "^16.18.23",
|
||||
"@types/react": "^18.0.32",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"jest": "^28.0.0",
|
||||
"jest-environment-jsdom": "^28.0.0",
|
||||
"ts-jest": "^28.0.0",
|
||||
"typescript": "^4.9.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Client Users</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
--></body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { Axios, AxiosError } from "axios";
|
||||
import { Credentials, User, Flight } from "./Types";
|
||||
|
||||
const instance = new Axios({
|
||||
baseURL: process.env.REACT_APP_ENDPOINT,
|
||||
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);
|
||||
}
|
||||
);
|
||||
|
||||
instance.interceptors.request.use((request) => {
|
||||
request.data = JSON.stringify(request.data);
|
||||
return request;
|
||||
});
|
||||
|
||||
export const ping = () => {
|
||||
return instance.get("health");
|
||||
};
|
||||
|
||||
export const fetchZones = (origin: string | undefined, lastUpdate: string | null): Promise<Flight[]> => {
|
||||
return instance.get("flights" +
|
||||
(origin ? "?origin=" + origin : "") +
|
||||
(lastUpdate ? ( origin ? "&lastUpdated=" : "?lastUpdated=") + lastUpdate : ""))
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useIsConnected } from "./hooks/useIsConnected";
|
||||
import { Route, Routes } from "react-router";
|
||||
import { Home } from "./components/Home/Home";
|
||||
import { Button } from "antd";
|
||||
import { initDB } from "./db";
|
||||
|
||||
function App() {
|
||||
const connection = useIsConnected();
|
||||
initDB();
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Routes>
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
<div className="FloatingStatus">{connection}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export interface Credentials {
|
||||
password: string;
|
||||
email: string;
|
||||
username?: string;
|
||||
}
|
||||
|
||||
export interface Token {
|
||||
refresh_token: string;
|
||||
access_token: string;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
email: string;
|
||||
created_date?: Date;
|
||||
}
|
||||
|
||||
export interface Zone {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Flight {
|
||||
id: number,
|
||||
flight_code: string;
|
||||
status: string;
|
||||
origin: string;
|
||||
destination: string;
|
||||
departure_time: string;
|
||||
arrival_time: string;
|
||||
gate: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import "../../matchMedia.mock";
|
||||
import "@testing-library/jest-dom";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
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();
|
||||
|
||||
render(<Button onClick={() => onClick()}>Button</Button>);
|
||||
|
||||
expect(screen.getByText("Button")).toBeVisible();
|
||||
await userEvent.click(screen.getByText("Button"));
|
||||
expect(onClick).toBeCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
/* .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 */
|
||||
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);
|
||||
}
|
||||
|
||||
.flight-details {
|
||||
display: flex;
|
||||
flex-direction: column; /* Display details as a column */
|
||||
margin-top: 16px; /* Add some space between the two rows */
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import "@testing-library/jest-dom";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import "../../../matchMedia.mock";
|
||||
|
||||
import { Card } from "./Card";
|
||||
|
||||
describe("Card Component Test", () => {
|
||||
test("Display initial, name and icon", async () => {
|
||||
// render(<Card name="Belgrano" />);
|
||||
|
||||
// expect(screen.getByText("Belgrano📍")).toBeVisible();
|
||||
// expect(screen.getByText("B")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
// 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
|
||||
|
||||
interface FlightProps {
|
||||
flight_code: string;
|
||||
status: string;
|
||||
origin: string;
|
||||
destination: string;
|
||||
departure_time: string;
|
||||
arrival_time: string;
|
||||
gate: string;
|
||||
}
|
||||
|
||||
interface CardProps {
|
||||
flight: FlightProps;
|
||||
}
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export const Card: React.FC<CardProps> = ({ flight }) => {
|
||||
return (
|
||||
<div className="flight-card">
|
||||
<Space size={8} align="center">
|
||||
<Avatar size={64} icon={<RightOutlined />} />
|
||||
<div>
|
||||
<Text strong>{flight.flight_code}</Text>
|
||||
<div>
|
||||
<Text type="secondary">
|
||||
{flight.origin} <SwapOutlined /> {flight.destination}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
<div className="flight-details">
|
||||
<Space size={8} direction="vertical">
|
||||
<Text strong>Status:</Text>
|
||||
<Tag color={flight.status === "En ruta" ? "green" : "orange"}>{flight.status}</Tag>
|
||||
</Space>
|
||||
<Space size={8} direction="vertical">
|
||||
<Text strong>Departure:</Text>
|
||||
<Space size={2} align="baseline">
|
||||
<CalendarOutlined />
|
||||
{flight.departure_time}
|
||||
</Space>
|
||||
</Space>
|
||||
<Space size={8} direction="vertical">
|
||||
<Text strong>Arrival:</Text>
|
||||
<Space size={2} align="baseline">
|
||||
<CalendarOutlined />
|
||||
{flight.arrival_time}
|
||||
</Space>
|
||||
</Space>
|
||||
<Space size={8} direction="vertical">
|
||||
<Text strong>Gate:</Text>
|
||||
<Text>{flight.gate}</Text>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
const mockedUsedNavigate = jest.fn();
|
||||
|
||||
jest.mock("react-router-dom", () => ({
|
||||
...jest.requireActual("react-router-dom"),
|
||||
useNavigate: () => mockedUsedNavigate,
|
||||
}));
|
||||
|
||||
import "../../matchMedia.mock";
|
||||
import "@testing-library/jest-dom";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { Home } from "./Home";
|
||||
|
||||
describe("Home View Test", () => {
|
||||
test("Display initial, name and icon", async () => {
|
||||
// render(
|
||||
// <Home
|
||||
// zones={[
|
||||
// { id: 1, name: "Belgrano" },
|
||||
// { id: 2, name: "San Isidro" },
|
||||
// ]}
|
||||
// />
|
||||
// );
|
||||
|
||||
// expect(screen.getByText("Zones")).toBeVisible();
|
||||
// expect(screen.getByText("Belgrano📍")).toBeVisible();
|
||||
// expect(screen.getByText("San Isidro📍")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from "react";
|
||||
import { Card } from "./Card/Card";
|
||||
import { useFetchZones } from "../../hooks/useFetchZones";
|
||||
import { Flight } from "../../Types";
|
||||
|
||||
interface Props {
|
||||
flights?: Flight[];
|
||||
}
|
||||
|
||||
export const Home: React.FC<Props> = (props) => {
|
||||
// const urlParams = new URLSearchParams(window.location.search);
|
||||
// const origin = urlParams.get('origin');
|
||||
// const { zones, error } = useFetchZones(origin);
|
||||
const { zones, error } = useFetchZones();
|
||||
|
||||
return (
|
||||
<div className="Box">
|
||||
<h2>Flights</h2>
|
||||
<div className="Items">
|
||||
{(props.flights ? props.flights : zones).map((u) => {
|
||||
return <Card key={u.id} flight={u} />;
|
||||
})}
|
||||
{error ? <div className="Disconnected">{error}</div> : <></>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
let request: IDBOpenDBRequest;
|
||||
let db: IDBDatabase;
|
||||
let version = 1;
|
||||
|
||||
export enum Stores {
|
||||
Flight = 'flights',
|
||||
}
|
||||
|
||||
interface EventTarget {
|
||||
result: any
|
||||
}
|
||||
|
||||
export const initDB = (): Promise<boolean|IDBDatabase> => {
|
||||
return new Promise((resolve) => {
|
||||
request = indexedDB.open('myDB');
|
||||
|
||||
request.onupgradeneeded = (e) => {
|
||||
let req = (e.target as IDBOpenDBRequest)
|
||||
db = req.result;
|
||||
|
||||
if (!db.objectStoreNames.contains(Stores.Flight)) {
|
||||
db.createObjectStore(Stores.Flight, { keyPath: 'id' });
|
||||
}
|
||||
};
|
||||
|
||||
request.onsuccess = (e) => {
|
||||
let req = (e.target as IDBOpenDBRequest)
|
||||
db = req.result;
|
||||
version = db.version;
|
||||
resolve(req.result);
|
||||
};
|
||||
|
||||
request.onerror = (e) => {
|
||||
resolve(false);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
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: string): 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);
|
||||
res.onsuccess = () => {
|
||||
resolve(true);
|
||||
};
|
||||
res.onerror = () => {
|
||||
resolve(false);
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const updateData = <T>(storeName: string, key: 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);
|
||||
const res = store.get(key);
|
||||
res.onsuccess = () => {
|
||||
const newData = { ...res.result, ...data };
|
||||
store.put(newData);
|
||||
resolve(newData);
|
||||
};
|
||||
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);
|
||||
};
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export {};
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { User, Flight } from "../Types";
|
||||
import { fetchZones } from "../Api";
|
||||
import { Stores, addData, deleteData, getStoreData, updateData, initDB } from '../db';
|
||||
|
||||
export const useFetchZones = () => {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [zones, setZones] = useState<Flight[]>([]);
|
||||
let origin = process.env.REACT_APP_ORIGIN;
|
||||
|
||||
useEffect(() => {
|
||||
setError(null);
|
||||
let newUpdate = new Date().toISOString()
|
||||
|
||||
getStoreData<Flight>(Stores.Flight)
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
if (data && data.length > 0) {
|
||||
setZones(data)
|
||||
} else {
|
||||
fetchZones(origin, null)
|
||||
.then((data) => {
|
||||
localStorage.setItem('lastUpdated', newUpdate)
|
||||
setZones(data);
|
||||
data.map((u) => {
|
||||
addData(Stores.Flight, u)
|
||||
})
|
||||
})
|
||||
.catch((error) => {});
|
||||
}
|
||||
})
|
||||
|
||||
}, [origin]);
|
||||
|
||||
useEffect(() => {
|
||||
const intervalId = setInterval(() => {
|
||||
let lastUpdate = localStorage.getItem('lastUpdated')
|
||||
let newUpdate = new Date().toISOString()
|
||||
|
||||
fetchZones(origin, lastUpdate)
|
||||
.then((data) => {
|
||||
localStorage.setItem('lastUpdated', newUpdate)
|
||||
let toAdd: Flight[] = []
|
||||
|
||||
zones.forEach((c, i) => {
|
||||
let index = data.findIndex(x => x.id === c.id)
|
||||
if (index >= 0) {
|
||||
toAdd.push(data[index]);
|
||||
console.log(",aria")
|
||||
updateData(Stores.Flight, String(c.id), data[index])
|
||||
} else {
|
||||
toAdd.push(c);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(toAdd)
|
||||
let filtered = data.filter(o => !toAdd.some(b => { return o.id === b.id} ))
|
||||
const newArray = toAdd.concat(filtered);
|
||||
filtered.forEach(c => {
|
||||
addData(Stores.Flight, c)
|
||||
})
|
||||
|
||||
setZones(newArray);
|
||||
})
|
||||
.catch((error) => {});
|
||||
}, 5000)
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [origin, zones])
|
||||
|
||||
return { zones, error };
|
||||
};
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { ping } from "../Api";
|
||||
|
||||
export const useIsConnected = () => {
|
||||
const [connected, setConnected] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
ping()
|
||||
.then(() => {
|
||||
setConnected(true);
|
||||
})
|
||||
.catch(() => {
|
||||
setConnected(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{connected ? (
|
||||
<p className="Connected">Connected</p>
|
||||
) : (
|
||||
<p className="Disconnected">Disconnected</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +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;
|
||||
}
|
||||
|
||||
code {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.Small {
|
||||
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;
|
||||
}
|
||||
|
||||
.Image {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.Connected {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.Disconnected {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.FloatingStatus {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.LogoutButton {
|
||||
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;
|
||||
}
|
||||
|
||||
.Items {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import "./index.css";
|
||||
import { register as registerServiceWorker } from './serviceWorkerRegistration';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLElement
|
||||
);
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
registerServiceWorker();
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: jest.fn().mockImplementation(query => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: jest.fn(), // deprecated
|
||||
removeListener: jest.fn(), // deprecated
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
dispatchEvent: jest.fn(),
|
||||
})),
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { ReportHandler } from 'web-vitals';
|
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
/// <reference lib="webworker" />
|
||||
/* eslint-disable no-restricted-globals */
|
||||
|
||||
// This service worker can be customized!
|
||||
// See https://developers.google.com/web/tools/workbox/modules
|
||||
// for the list of available Workbox modules, or add any other
|
||||
// code you'd like.
|
||||
// You can also remove this file if you'd prefer not to use a
|
||||
// service worker, and the Workbox build step will be skipped.
|
||||
|
||||
import { clientsClaim } from 'workbox-core';
|
||||
import { ExpirationPlugin } from 'workbox-expiration';
|
||||
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
|
||||
import { registerRoute } from 'workbox-routing';
|
||||
import { StaleWhileRevalidate } from 'workbox-strategies';
|
||||
|
||||
declare const self: ServiceWorkerGlobalScope;
|
||||
|
||||
clientsClaim();
|
||||
|
||||
// Precache all of the assets generated by your build process.
|
||||
// Their URLs are injected into the manifest variable below.
|
||||
// This variable must be present somewhere in your service worker file,
|
||||
// even if you decide not to use precaching. See https://cra.link/PWA
|
||||
precacheAndRoute(self.__WB_MANIFEST);
|
||||
|
||||
// Set up App Shell-style routing, so that all navigation requests
|
||||
// are fulfilled with your index.html shell. Learn more at
|
||||
// https://developers.google.com/web/fundamentals/architecture/app-shell
|
||||
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
|
||||
registerRoute(
|
||||
// Return false to exempt requests from being fulfilled by index.html.
|
||||
({ request, url }: { request: Request; url: URL }) => {
|
||||
// If this isn't a navigation, skip.
|
||||
if (request.mode !== 'navigate') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// If this is a URL that starts with /_, skip.
|
||||
if (url.pathname.startsWith('/_')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// If this looks like a URL for a resource, because it contains
|
||||
// a file extension, skip.
|
||||
if (url.pathname.match(fileExtensionRegexp)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Return true to signal that we want to use the handler.
|
||||
return true;
|
||||
},
|
||||
createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
|
||||
);
|
||||
|
||||
// An example runtime caching route for requests that aren't handled by the
|
||||
// precache, in this case same-origin .png requests like those from in public/
|
||||
registerRoute(
|
||||
// Add in any other file extensions or routing criteria as needed.
|
||||
({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
|
||||
// Customize this strategy as needed, e.g., by changing to CacheFirst.
|
||||
new StaleWhileRevalidate({
|
||||
cacheName: 'images',
|
||||
plugins: [
|
||||
// Ensure that once this runtime cache reaches a maximum size the
|
||||
// least-recently used images are removed.
|
||||
new ExpirationPlugin({ maxEntries: 50 }),
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
// This allows the web app to trigger skipWaiting via
|
||||
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
|
||||
self.addEventListener('message', (event) => {
|
||||
if (event.data && event.data.type === 'SKIP_WAITING') {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
|
||||
// Any other custom service worker logic can go here.
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://cra.link/PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
|
||||
);
|
||||
|
||||
type Config = {
|
||||
onSuccess?: (registration: ServiceWorkerRegistration) => void;
|
||||
onUpdate?: (registration: ServiceWorkerRegistration) => void;
|
||||
};
|
||||
|
||||
export function register(config?: Config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://cra.link/PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl: string, config?: Config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then((registration) => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://cra.link/PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl: string, config?: Config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl, {
|
||||
headers: { 'Service-Worker': 'script' },
|
||||
})
|
||||
.then((response) => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then((registration) => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('No internet connection found. App is running in offline mode.');
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready
|
||||
.then((registration) => {
|
||||
registration.unregister();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
#!/bin/bash
|
||||
|
||||
curl -X DELETE api:5000/ping
|
||||
curl -X POST api:5000/ping
|
||||
|
||||
|
||||
# npm test
|
||||
echo "NPM TEST"
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue