From c4db76b49b3b9da8304b72ef5011cbaa152af8be Mon Sep 17 00:00:00 2001
From: Lucas Maupin <lucas.maupin@gmail.com>
Date: Tue, 22 Oct 2024 15:40:25 +0200
Subject: [PATCH] Fix/bugs (#49)

* fix: image-refetch

* fix: teardown
---
 next.config.js                                |  3 +++
 src/api/ateliereLive/pipelines/pipelines.ts   |  3 ++-
 src/api/manager/teardown.ts                   | 13 +++++++++---
 src/components/image/ImageComponent.tsx       | 10 ++++++----
 .../sideNav/SideNavRefreshThumbnails.tsx      |  4 ++--
 src/contexts/GlobalContext.tsx                | 20 ++++++++++---------
 6 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/next.config.js b/next.config.js
index cdf8c9c..ddffaea 100644
--- a/next.config.js
+++ b/next.config.js
@@ -9,5 +9,8 @@ module.exports = {
     locales: ['en', 'sv'],
     defaultLocale: 'en',
     localeDetection: false
+  },
+  images: {
+    minimumCacheTTL: 0
   }
 };
diff --git a/src/api/ateliereLive/pipelines/pipelines.ts b/src/api/ateliereLive/pipelines/pipelines.ts
index 637d868..eb2a808 100644
--- a/src/api/ateliereLive/pipelines/pipelines.ts
+++ b/src/api/ateliereLive/pipelines/pipelines.ts
@@ -94,7 +94,8 @@ export async function getPipelines(): Promise<
         uuid: pipeline.uuid,
         outputs: pipeline.outputs,
         streams: pipeline.streams,
-        feedback_streams: pipeline.feedback_streams
+        feedback_streams: pipeline.feedback_streams,
+        control_receiver: pipeline.control_receiver
       };
     });
   }
diff --git a/src/api/manager/teardown.ts b/src/api/manager/teardown.ts
index 866cc9d..8c3831e 100644
--- a/src/api/manager/teardown.ts
+++ b/src/api/manager/teardown.ts
@@ -145,6 +145,7 @@ export async function teardown(
   // STEP 5
   // DELETE PIPELINE CONNECTIONS
   try {
+    const disconnectedReceiverIDs: string[] = [];
     for (const pipeline of pipelines) {
       const connections: ResourcesConnectionUUIDResponse[] = [
         ...(pipeline.control_receiver?.incoming_connections || []),
@@ -152,9 +153,15 @@ export async function teardown(
       ];
 
       for (const connection of connections) {
-        await disconnectReceiver(connection.connection_uuid).catch(() => {
-          throw `Failed to disconnect connection ${connection.connection_uuid} in pipeline ${pipeline.name}`;
-        });
+        if (!disconnectedReceiverIDs.includes(connection.connection_uuid)) {
+          await disconnectReceiver(connection.connection_uuid)
+            .then(() =>
+              disconnectedReceiverIDs.push(connection.connection_uuid)
+            )
+            .catch(() => {
+              throw `Failed to disconnect connection ${connection.connection_uuid} in pipeline ${pipeline.name}`;
+            });
+        }
       }
     }
     addStep('pipeline_control_connections', true);
diff --git a/src/components/image/ImageComponent.tsx b/src/components/image/ImageComponent.tsx
index df6acf8..bfabdbd 100644
--- a/src/components/image/ImageComponent.tsx
+++ b/src/components/image/ImageComponent.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   PropsWithChildren,
   SyntheticEvent,
@@ -20,7 +22,7 @@ interface ImageComponentProps extends PropsWithChildren {
 
 const ImageComponent: React.FC<ImageComponentProps> = (props) => {
   const { src, alt = 'Image', children, type } = props;
-  const { imageRefetchIndex } = useContext(GlobalContext);
+  const { imageRefetchKey } = useContext(GlobalContext);
   const [imgSrc, setImgSrc] = useState<string>();
   const [loaded, setLoaded] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
@@ -28,7 +30,7 @@ const ImageComponent: React.FC<ImageComponentProps> = (props) => {
   const timeout = useRef<ReturnType<typeof setTimeout>>();
 
   const refetchImage = () => {
-    setImgSrc(`${src}?refetch=${imageRefetchIndex}}`);
+    setImgSrc(`${src}?${imageRefetchKey}`);
     setError(undefined);
     setLoading(true);
     clearTimeout(timeout.current);
@@ -37,11 +39,11 @@ const ImageComponent: React.FC<ImageComponentProps> = (props) => {
 
   useEffect(() => {
     refetchImage();
-  }, [imageRefetchIndex]);
+  }, [imageRefetchKey]);
 
   useEffect(() => {
     setError(undefined);
-    setImgSrc(`${src}?refetch=${imageRefetchIndex}}`);
+    setImgSrc(`${src}?${imageRefetchKey}`);
   }, [src]);
 
   useEffect(() => {
diff --git a/src/components/sideNav/SideNavRefreshThumbnails.tsx b/src/components/sideNav/SideNavRefreshThumbnails.tsx
index 4bce954..49299cd 100644
--- a/src/components/sideNav/SideNavRefreshThumbnails.tsx
+++ b/src/components/sideNav/SideNavRefreshThumbnails.tsx
@@ -11,14 +11,14 @@ const SideNavRefreshThumbnails = (props: SideNavItemBaseProps) => {
   const { open } = props;
   const t = useTranslate();
 
-  const { incrementImageRefetchIndex } = useContext(GlobalContext);
+  const { refetchImages } = useContext(GlobalContext);
 
   // TODO This button might be changed to a toggle for automatic image refetching.
   return (
     <div className="relative group">
       <div
         className="flex items-center pl-4 py-4 overflow-hidden rounded-xl hover:bg-light hover:cursor-pointer"
-        onClick={incrementImageRefetchIndex}
+        onClick={refetchImages}
       >
         <Icons name="IconRefresh" className="min-w-8 min-h-8 mr-4" />
         <div className="whitespace-nowrap">{t('refresh_images')}</div>
diff --git a/src/contexts/GlobalContext.tsx b/src/contexts/GlobalContext.tsx
index 310c1d1..1f25664 100644
--- a/src/contexts/GlobalContext.tsx
+++ b/src/contexts/GlobalContext.tsx
@@ -5,15 +5,15 @@ import { createContext, useState, PropsWithChildren } from 'react';
 
 interface IGlobalContext {
   locked: boolean;
-  imageRefetchIndex: number;
-  incrementImageRefetchIndex: () => void;
+  imageRefetchKey: number;
+  refetchImages: () => void;
   toggleLocked: () => void;
 }
 
 export const GlobalContext = createContext<IGlobalContext>({
   locked: false,
-  imageRefetchIndex: 0,
-  incrementImageRefetchIndex: () => {
+  imageRefetchKey: 0,
+  refetchImages: () => {
     // outsmarting lint
   },
   toggleLocked: () => {
@@ -24,10 +24,12 @@ export const GlobalContext = createContext<IGlobalContext>({
 export const GlobalContextProvider = (props: PropsWithChildren) => {
   const { children } = props;
   const [locked, setLocked] = useState<boolean>(true);
-  const [imageRefetchIndex, setImageRefetchIndex] = useState<number>(0);
+  const [imageRefetchKey, setImageRefetchKey] = useState<number>(
+    new Date().getTime()
+  );
 
-  const incrementImageRefetchIndex = () => {
-    setImageRefetchIndex(imageRefetchIndex + 1);
+  const refetchImages = () => {
+    setImageRefetchKey(new Date().getTime());
   };
 
   const toggleLocked = () => {
@@ -39,8 +41,8 @@ export const GlobalContextProvider = (props: PropsWithChildren) => {
       <GlobalContext.Provider
         value={{
           locked,
-          imageRefetchIndex,
-          incrementImageRefetchIndex,
+          imageRefetchKey,
+          refetchImages,
           toggleLocked
         }}
       >