From 182d197eea3252772085594591adbbacdfd0528b Mon Sep 17 00:00:00 2001
From: malmen237 <linda.malm@eyevinn.se>
Date: Wed, 16 Oct 2024 16:20:09 +0200
Subject: [PATCH] fix: lint-errors, ts-errors and made delete not possible on
 running prod

---
 .../MultiviewLayoutSettings.tsx               | 39 ++++++++++---------
 .../startProduction/StartProductionButton.tsx |  2 +-
 src/hooks/multiviewLayout.ts                  |  6 ++-
 src/i18n/locales/sv.ts                        |  3 +-
 4 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx b/src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx
index 8db8ea8..51006cc 100644
--- a/src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx
+++ b/src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx
@@ -34,8 +34,7 @@ export default function MultiviewLayoutSettings({
 }) {
   const [selectedMultiviewPreset, setSelectedMultiviewPreset] =
     useState<MultiviewPreset | null>(null);
-  const [refresh, setRefresh] =
-    useState(true);
+  const [refresh, setRefresh] = useState(true);
   const [changedLayout, setChangedLayout] = useState<ChangeLayout | null>(null);
   const [newPresetName, setNewPresetName] = useState<string | null>(null);
   const [layoutToChange, setLayoutToChange] = useState<string>('');
@@ -71,8 +70,8 @@ export default function MultiviewLayoutSettings({
       (layout) => layout.productionId === production?._id
     ) || [];
   const globalMultiviewLayouts = multiviewLayouts?.filter(
-      (layout) => !layout.productionId
-    );
+    (layout) => !layout.productionId
+  );
   const deleteDisabled = productionLayouts.length < 1;
 
   // This useEffect is used to set the drawn layout of the multiviewer on start,
@@ -191,21 +190,23 @@ export default function MultiviewLayoutSettings({
                 }
                 update={(value) => handleLayoutUpdate(value, 'layout')}
               />
-              <button
-                type="button"
-                title={t('preset.remove_layout')}
-                className="absolute top-0 right-[-10%] min-w-fit"
-                onClick={() => removeMultiviewLayout()}
-                disabled={deleteDisabled}
-              >
-                <IconTrash
-                  className={`ml-4 ${
-                    deleteDisabled
-                      ? 'pointer-events-none text-zinc-400'
-                      : 'text-button-delete hover:text-red-400'
-                  }`}
-                />
-              </button>
+              {!production?.isActive && (
+                <button
+                  type="button"
+                  title={t('preset.remove_layout')}
+                  className="absolute top-0 right-[-10%] min-w-fit"
+                  onClick={() => removeMultiviewLayout()}
+                  disabled={deleteDisabled}
+                >
+                  <IconTrash
+                    className={`ml-4 ${
+                      deleteDisabled
+                        ? 'pointer-events-none text-zinc-400'
+                        : 'text-button-delete hover:text-red-400'
+                    }`}
+                  />
+                </button>
+              )}
             </div>
             <Options
               label={t('preset.select_multiview_preset')}
diff --git a/src/components/startProduction/StartProductionButton.tsx b/src/components/startProduction/StartProductionButton.tsx
index 61b4384..90ad869 100644
--- a/src/components/startProduction/StartProductionButton.tsx
+++ b/src/components/startProduction/StartProductionButton.tsx
@@ -41,7 +41,7 @@ export function StartProductionButton({
   const [deleteMonitoring] = useDeleteMonitoring();
   const [modalOpen, setModalOpen] = useState(false);
   const [stopModalOpen, setStopModalOpen] = useState(false);
-  const [multiviewLayouts] = useMultiviewLayouts();
+  const [multiviewLayouts] = useMultiviewLayouts(true);
 
   const onClick = () => {
     if (!production) return;
diff --git a/src/hooks/multiviewLayout.ts b/src/hooks/multiviewLayout.ts
index f1197f4..b971e3a 100644
--- a/src/hooks/multiviewLayout.ts
+++ b/src/hooks/multiviewLayout.ts
@@ -30,7 +30,9 @@ export function useGetMultiviewLayout() {
   };
 }
 
-export function useMultiviewLayouts(refresh: boolean): DataHook<TMultiviewLayout[]> {
+export function useMultiviewLayouts(
+  refresh: boolean
+): DataHook<TMultiviewLayout[]> {
   const [loading, setLoading] = useState(true);
   const [multiviewLayouts, setmultiviewLayouts] = useState<TMultiviewLayout[]>(
     []
@@ -39,7 +41,7 @@ export function useMultiviewLayouts(refresh: boolean): DataHook<TMultiviewLayout
   useEffect(() => {
     setmultiviewLayouts([]);
 
-    if(!refresh) {
+    if (!refresh) {
       return;
     }
 
diff --git a/src/i18n/locales/sv.ts b/src/i18n/locales/sv.ts
index 016d947..2206d44 100644
--- a/src/i18n/locales/sv.ts
+++ b/src/i18n/locales/sv.ts
@@ -679,7 +679,8 @@ export const sv = {
     remove_layout: 'Ta bort komposition',
     add_another_multiview: 'Lägg till ny multiview',
     layout_deleted: 'Kompositionen har tagits bort',
-    not_possible_delete_global_layout: 'Det går inte att ta bort globala kompositioner',
+    not_possible_delete_global_layout:
+      'Det går inte att ta bort globala kompositioner',
     could_not_delete_layout: 'Kunde inte ta bort kompositionen'
   },
   error: {