fix: correctly find peripherals in Media component

AstroPlant · Feb 15, 2024 · d8c6849 · d8c6849
1 parent 6c57c0b
commit d8c6849
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/src/scenes/kit/kit-data/Media.tsx b/src/scenes/kit/kit-data/Media.tsx
@@ -115,8 +115,10 @@ export default function Media({ kit, configuration }: Props) {
                     </Table.Cell>
                     <Table.Cell>
                       {
-                        configuration.peripherals[displayMedia.peripheralId]!
-                          .name
+                        configuration.peripherals.find(
+                          (peripheral) =>
+                            peripheral.id === displayMedia.peripheralId,
+                        )?.name
                       }
                     </Table.Cell>
                     <Table.Cell>{displayMedia.name}</Table.Cell>
@@ -142,7 +144,9 @@ export default function Media({ kit, configuration }: Props) {
           </Table.Header>
           <Table.Body>
             {mediaList.map((media) => {
-              const peripheral = configuration.peripherals[media.peripheralId]!;
+              const peripheral = configuration.peripherals.find(
+                (peripheral) => peripheral.id === media.peripheralId,
+              );
               const displayable =
                 media.type === "image/png" ||
                 media.type === "image/jpeg" ||
@@ -152,6 +156,9 @@ export default function Media({ kit, configuration }: Props) {
                 displayMedia !== null &&
                 displayMedia.id === media.id &&
                 displayUrl === null;
+              if (peripheral === undefined) {
+                return;
+              }
               return (
                 <Table.Row key={media.id}>
                   <Table.Cell>