From dc20c2ba8377a90a3170642c9b3df6cd5166ad72 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com> Date: Sun, 25 Aug 2024 23:12:48 +0200 Subject: Initial commit --- src/App.tsx | 34 ++++++++++++++++++++++++++ src/assets/react.svg | 1 + src/index.css | 32 ++++++++++++++++++++++++ src/main.tsx | 23 ++++++++++++++++++ src/pages/Home.tsx | 33 +++++++++++++++++++++++++ src/pages/Stop.tsx | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++ src/vite-env.d.ts | 1 + 7 files changed, 193 insertions(+) create mode 100644 src/App.tsx create mode 100644 src/assets/react.svg create mode 100644 src/index.css create mode 100644 src/main.tsx create mode 100644 src/pages/Home.tsx create mode 100644 src/pages/Stop.tsx create mode 100644 src/vite-env.d.ts (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..dde37c8 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,34 @@ +import { useState } from 'react' +import reactLogo from './assets/react.svg' +import viteLogo from '/vite.svg' + +function App() { + const [count, setCount] = useState(0) + + return ( + <> +
+ + Vite logo + + + React logo + +
+

Vite + React

+
+ +

+ Edit src/App.tsx and save to test HMR +

+
+

+ Click on the Vite and React logos to learn more +

+ + ) +} + +export default App diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..29b518f --- /dev/null +++ b/src/index.css @@ -0,0 +1,32 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + display: flex; + flex-direction: column; + place-items: center; + + margin: 0; + min-width: 320px; + min-height: 100vh; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} + +a:hover { + color: #535bf2; +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..590bb08 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,23 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import { createBrowserRouter, RouterProvider } from 'react-router-dom' +import { Home } from './pages/Home.tsx' +import { Stop } from './pages/Stop.tsx' + +const router = createBrowserRouter([ + { + path: '/', + element: , + }, + { + path: '/:stopId', + element: + } +]) + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..79f1ec2 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,33 @@ +import useSWR from "swr"; + +interface Stop { + stopId: number + name: string; + latitude?: number; + longitude?: number; + lines: string[]; +} + +export function Home() { + const { data, error, isLoading } = useSWR('home', async () => { + const response = await fetch('/api/ListStops') + return response.json() + }); + + if (isLoading) return

Loading...

+ if (error) return

Error

+ + return ( + <> +

Home

+ +
    + {data?.map((stop: Stop) => ( +
  • + {stop.name} - {stop.lines?.join(', ')} +
    • + ))} +
+ + ) +} diff --git a/src/pages/Stop.tsx b/src/pages/Stop.tsx new file mode 100644 index 0000000..2ee077c --- /dev/null +++ b/src/pages/Stop.tsx @@ -0,0 +1,69 @@ +import { useParams } from "react-router-dom"; +import useSWR from "swr"; + +interface StopDetails { + stop: { + id: number; + name: string; + latitude: number; + longitude: number; + } + estimates: [{ + line: string; + route: string; + minutes: number; + meters: number; + }] +} + +export function Stop(): JSX.Element { + const params = useParams(); + + const { data, error, isLoading } = useSWR('home', async () => { + let response; + + try { + response = await fetch(`/api/GetStopEstimates?id=${params.stopId}`) + return response.json() + } catch (error) { + console.error(error) + throw new Error(`Failed to fetch data, status ${response!.status}, body: ${await response!.text()}`) + } + }); + + if (isLoading) return

Loading...

+ if (error) return

Error: {JSON.stringify(error)}

+ if (data === undefined) return

No data

+ + return ( + <> +

{data?.stop.name} ({data?.stop.id})

+ + + + + + + + + + + + + + + {data.estimates + .sort((a, b) => a.minutes - b.minutes) + .map((estimate, idx) => ( + + + + + + + ))} + +
Estimaciones de llegadas
LíneaRutaMinutosMetros
{estimate.line}{estimate.route}{estimate.minutes}{estimate.meters}
+ + ) +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// -- cgit v1.3