everywhere: Improved code style

src/panels/Fahrplan/FahrplanPanel.tsx

@@ -42,7 +42,8 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => {
       // Determine stop data from the departures
       for(let departure of departures) {
         // First throw away all data that belongs to a filtered category
-        if((props.definition.filter.types ?? []).includes(departure.type)) {
+        const filterTypes = props.definition.filter.types ?? [];
+        if(filterTypes.includes(departure.type)) {
           continue;
         }
 
@@ -83,7 +84,8 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => {
             countdown: parseInt(departure.countdown)
           })
 
-          newRoutes[existing_ind].stops = newRoutes[existing_ind].stops.sort((a, b) => a.countdown - b.countdown)
+          newRoutes[existing_ind].stops = newRoutes[existing_ind].stops
+            .sort((a, b) => a.countdown - b.countdown)
         }
       }
 

src/panels/Fahrplan/components/PlanElement.tsx

@@ -81,6 +81,7 @@ const PlanElement = (props: {
         {
           props.stops.map((stop, index) => (
             <ProgressIndicator
+              key={stop.name}
               first={index === 0}
               id={stop.name}
               name={deDortmund(stop.name)}

src/panels/Fahrplan/components/ProgressIndicator.tsx

-// import TimeAgo from 'javascript-time-ago'
-// import de from 'javascript-time-ago/locale/de'
-// import {useEffect, useState} from "react";
-
 import classNames from "../../../util/classNames";
 
-export default function ProgressIndicator(props: {first?: boolean, id: string, name: string, arrival: Date, delay?: number}) {
-  // const [timeUntil, setTimeUntil] = useState<string>("");
-  //
-  // useEffect(() => {
-  //   // Setup TimeAgo
-  //   TimeAgo.addDefaultLocale(de);
-  //   const timeAgo = new TimeAgo('de-DE')
-  //
-  //   const update = () => {
-  //     setTimeUntil(timeAgo.format(new Date(), {future: true}));
-  //   }
-  //
-  //   setInterval(update, 1000);
-  //   update();
-  // }, []);
+type ProgressIndicatorProps = {
+  first?: boolean,
+  id: string,
+  name: string,
+  arrival: Date,
+  delay?: number
+}
 
+export default function ProgressIndicator(props: Readonly<ProgressIndicatorProps>) {
   return (
       <li className={`relative ${!(props.first ?? false) ? "-mt-3.5" : "-mt-2"} text-sm text-zinc-300`} key={props.id}>
         <div className={"flex flex-row gap-4"}>

src/panels/Mensaplan/MensaplanPanel.tsx

@@ -53,7 +53,7 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
         // Request the API
         const request = await fetch(`/canteen-menu/v3/canteens/${props.definition.canteenId}/${fetchFor}`);
 
-        if (!(request.status === 200)) {
+        if (request.status !== 200) {
           menus.current = [];
           specials.current = [];
           return;
@@ -157,11 +157,11 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
       <PanelContent>
         <div className={"flex flex-col gap-4"}>
           {dishes.map(dish => (
-            <div className={"flex flex-row items-center gap-4"}>
+            <div key={dish.name} className={"flex flex-row items-center gap-4"}>
                 {/* Fixme: This shifts the name out of line if there is more than one */}
                 <div className={"flex flex-row gap-2 mr-2"}>
-                  {dish.typeIcons.map(Icon => (
-                    <Icon size={32} className={"text-zinc-400"}/>
+                  {dish.typeIcons.map((Icon, index) => (
+                    <Icon key={Icon.name + index} size={32} className={"text-zinc-400"}/>
                   ))}
                 </div>