Skip to content

Commit

Permalink
fix: Fallback on empty objects in general
Browse files Browse the repository at this point in the history
  • Loading branch information
@rexmagnusdavid
rexmagnusdavid committed May 17, 2024
1 parent 2f79865 commit d25c81e
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 83 deletions.
4 changes: 4 additions & 0 deletions app/components/Bullet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { Route } from "@/types/Route";

export function Bullet(props: { route: Route; size: number }) {
if (!props.route) {
return;
}

const TEMP_TEXT_COLOR_OVERRIDE = [
"1",
"2",
Expand Down
42 changes: 21 additions & 21 deletions app/components/Bulletin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,27 @@ import React from "react";
import { Bullet } from "./Bullet";

export function Bulletin(props: { routes: Record<string, Route>; stop: Stop; walk_time: number }) {
if (!props.stop)
return (
<React.Fragment>
<div className="flex min-h-14 flex-row items-center rounded-lg bg-emerald-700"></div>
<div className="flex min-h-29 flex-row items-center rounded-lg bg-slate-100"></div>
</React.Fragment>
);

const times: Array<Vehicle> = props.stop.trips.filter((vehicle) => {
return vehicle.minutes_until_arrival > props.walk_time / 2;
});

return (
<React.Fragment>
<div className="flex h-14 flex-row items-center rounded-lg bg-emerald-700">
<div className="flex min-h-14 flex-row items-center rounded-lg bg-emerald-700">
<h1 className="mx-2 font-black text-white 2xl:text-3xl">{props.stop.name}</h1>
</div>
{props.stop.trips.length > 0 ? (
{times.length > 0 ? (
Object.values(props.stop.destinations).map((destinations) => {
return Object.values(destinations).map((vehicles) => {
let times: Array<Vehicle> = vehicles.filter((vehicle) => {
const times: Array<Vehicle> = vehicles.filter((vehicle) => {
return vehicle.minutes_until_arrival > props.walk_time / 2;
});

Expand All @@ -22,30 +34,18 @@ export function Bulletin(props: { routes: Record<string, Route>; stop: Stop; wal
className="flex min-h-29 flex-row items-center rounded-lg bg-slate-200 text-black"
key={Math.random()}
>
<div className="flex h-full w-5/6 flex-row items-center rounded-lg bg-slate-100 shadow-2xl">
<div className="flex h-full w-4/5 flex-row items-center justify-start gap-2 px-2">
<Bullet
route={
props.routes[times[0].route_id]
? props.routes[times[0].route_id]
: {
route_name: "",
route_id: "",
route_color: "",
route_text_color: "",
}
}
size={72}
/>
<div className="flex min-h-full w-5/6 flex-row items-center rounded-lg bg-slate-100 shadow-2xl">
<div className="flex min-h-full w-4/5 flex-row items-center justify-start gap-2 px-2">
<Bullet route={props.routes[times[0].route_id]} size={72} />
<h1 className="line-clamp-2 text-wrap font-bold 2xl:text-4xl">{times[0].destination_name}</h1>
</div>
<div className="flex h-full w-1/5 flex-col items-center justify-center">
<div className="flex min-h-full w-1/5 flex-col items-center justify-center">
<h1 className="font-black 2xl:text-6xl">{times[0].minutes_until_arrival}</h1>
<h1 className="font-semibold 2xl:text-2xl">min</h1>
</div>
</div>

<div className="flex h-full w-1/6 flex-col items-center justify-center">
<div className="flex min-h-full w-1/6 flex-col items-center justify-center">
{times[1] ? (
<React.Fragment>
<h1 className="font-black 2xl:text-6xl">{times[1].minutes_until_arrival}</h1>
Expand All @@ -58,7 +58,7 @@ export function Bulletin(props: { routes: Record<string, Route>; stop: Stop; wal
});
})
) : (
<div className="flex grow basis-0 flex-row items-center rounded-lg bg-slate-100">
<div className="flex min-h-29 flex-row items-center rounded-lg bg-slate-100">
<h1 className="flex-1 text-center font-bold text-black 2xl:text-5xl">No scheduled vehicles</h1>
</div>
)}
Expand Down
64 changes: 18 additions & 46 deletions app/components/Countdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@ import React from "react";
import { Bullet } from "./Bullet";

export function Countdown(props: { routes: Record<string, Route>; stop: Stop; walk_time: number }) {
let times: Array<Vehicle> = props.stop.trips.filter((vehicle) => {
if (!props.stop)
return (
<React.Fragment>
<div className="flex min-h-14 flex-row items-center rounded-lg bg-emerald-700"></div>
<div className="flex min-h-64 flex-row items-center rounded-lg bg-slate-100"></div>
</React.Fragment>
);

const times: Array<Vehicle> = props.stop.trips.filter((vehicle) => {
return vehicle.minutes_until_arrival > props.walk_time / 2;
});

Expand All @@ -16,28 +24,16 @@ export function Countdown(props: { routes: Record<string, Route>; stop: Stop; wa
</div>
{times.length > 0 ? (
<div className="flex min-h-64 flex-row rounded-lg bg-slate-300">
<div className="flex h-full w-3/4 flex-row rounded-lg bg-slate-200 shadow-2xl">
<div className="flex h-full w-2/3 rounded-lg bg-slate-100 shadow-2xl">
<div className="flex h-full flex-col px-6 py-2">
<div className="flex min-h-full w-3/4 flex-row rounded-lg bg-slate-200 shadow-2xl">
<div className="flex min-h-full w-2/3 rounded-lg bg-slate-100 shadow-2xl">
<div className="flex min-h-full flex-col px-6 py-2">
<div className="flex basis-2/5 flex-row items-center">
<h1 className="line-clamp-1 font-bold text-black 2xl:text-6xl 2xl:leading-normal">
{times[0].destination_name}
</h1>
</div>
<div className="flex basis-3/5 flex-row items-center gap-4">
<Bullet
route={
props.routes[times[0].route_id]
? props.routes[times[0].route_id]
: {
route_name: "",
route_id: "",
route_color: "",
route_text_color: "",
}
}
size={96}
/>
<Bullet route={props.routes[times[0].route_id]} size={96} />
<div className="flex items-baseline">
<h1 className="font-bold text-black 2xl:text-9xl">{times[0].minutes_until_arrival}</h1>
<h1 className="font-semibold text-black 2xl:text-4xl">min</h1>
Expand All @@ -46,21 +42,9 @@ export function Countdown(props: { routes: Record<string, Route>; stop: Stop; wa
</div>
</div>
{times[1] ? (
<div className="flex h-full w-1/3 flex-col px-6 py-2">
<div className="flex min-h-full w-1/3 flex-col px-6 py-2">
<div className="flex basis-2/5 flex-row items-center">
<Bullet
route={
props.routes[times[1].route_id]
? props.routes[times[1].route_id]
: {
route_name: "",
route_id: "",
route_color: "",
route_text_color: "",
}
}
size={72}
/>
<Bullet route={props.routes[times[1].route_id]} size={72} />
</div>
<div className="flex basis-3/5 flex-row items-center gap-4">
<div className="flex items-baseline">
Expand All @@ -72,21 +56,9 @@ export function Countdown(props: { routes: Record<string, Route>; stop: Stop; wa
) : undefined}
</div>
{times[2] ? (
<div className="flex h-full w-1/4 flex-col px-6 py-2">
<div className="flex min-h-full w-1/4 flex-col px-6 py-2">
<div className="flex basis-2/5 flex-row items-center">
<Bullet
route={
props.routes[times[2].route_id]
? props.routes[times[2].route_id]
: {
route_name: "",
route_id: "",
route_color: "",
route_text_color: "",
}
}
size={72}
/>
<Bullet route={props.routes[times[2].route_id]} size={72} />
</div>
<div className="flex basis-3/5 flex-row items-center gap-4">
<div className="flex items-baseline">
Expand All @@ -98,7 +70,7 @@ export function Countdown(props: { routes: Record<string, Route>; stop: Stop; wa
) : undefined}
</div>
) : (
<div className="flex min-h-64 basis-0 flex-row items-center rounded-lg bg-slate-100">
<div className="flex min-h-64 flex-row items-center rounded-lg bg-slate-100">
<h1 className="flex-1 text-center font-bold text-black 2xl:text-5xl">No scheduled vehicles</h1>
</div>
)}
Expand Down
16 changes: 2 additions & 14 deletions app/components/Message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,14 @@ export function Message(props: { routes: Record<string, Route>; name: string; he
if (text.substring(0, 1) != "[" || text.substring(text.length - 1) != "]") return text;
return (
<div className="mx-1 inline-flex -translate-y-1.5" key={Math.random()}>
<Bullet
route={
props.routes[text.substring(1, text.length - 1)]
? props.routes[text.substring(1, text.length - 1)]
: {
route_name: "",
route_id: "",
route_color: "",
route_text_color: "",
}
}
size={42}
/>
<Bullet route={props.routes[text.substring(1, text.length - 1)]} size={42} />
</div>
);
})}
</h1>
</div>
) : (
<div className="flex grow flex-row items-center rounded-lg bg-slate-100">
<div className="flex min-h-62 flex-row items-center rounded-lg bg-slate-100">
<h1 className="flex-1 text-center font-bold text-black 2xl:text-5xl">No active alerts</h1>
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export default function Home() {
return (
<Countdown
key={Math.random()}
stop={stops[value.stop_ids[0]] ? stops[value.stop_ids[0]] : { name: "", trips: [], destinations: {} }}
stop={stops[value.stop_ids[0]]}
walk_time={value.walk_time}
routes={routes}
></Countdown>
Expand All @@ -130,7 +130,7 @@ export default function Home() {
return (
<Bulletin
key={Math.random()}
stop={stops[value.stop_ids[0]] ? stops[value.stop_ids[0]] : { name: "", trips: [], destinations: {} }}
stop={stops[value.stop_ids[0]]}
routes={routes}
walk_time={value.walk_time}
></Bulletin>
Expand Down

0 comments on commit d25c81e

Please sign in to comment.