feat: made reload button into a component

src/components/landing-page/join-production.tsx

@@ -18,12 +18,10 @@ import { darkText, errorColour } from "../../css-helpers/defaults.ts";
 import { TJoinProductionOptions } from "../production-line/types.ts";
 import { uniqBy } from "../../helpers.ts";
 import { FormInputWithLoader } from "./form-input-with-loader.tsx";
-import { RefreshIcon } from "../../assets/icons/icon.tsx";
 import { useFetchDevices } from "../../use-fetch-devices.ts";
-import { Spinner } from "../loader/loader.tsx";
 import { useDevicePermissions } from "../../use-device-permission.ts";
 import { Modal } from "../modal/modal.tsx";
-import { isBrowserFirefox, isMobile } from "../../bowser.ts";
+import { ReloadDevicesButton } from "../reload-devices-button.tsx/reload-devices-button.tsx";
 
 type FormValues = TJoinProductionOptions;
 
@@ -39,19 +37,6 @@ const ButtonWrapper = styled.div`
   margin: 2rem 0 2rem 0;
 `;
 
-const StyledRefreshBtn = styled(PrimaryButton)`
-  padding: 0;
-  margin: 0;
-  width: 4rem;
-  height: 3.5rem;
-  margin-left: 1.5rem;
-
-  &.dummy {
-    background-color: #242424;
-    pointer-events: none;
-  }
-`;
-
 const FormWithBtn = styled.div`
   display: flex;
   justify-content: space-between;
@@ -67,7 +52,6 @@ type TProps = {
 export const JoinProduction = ({ preSelected }: TProps) => {
   const [joinProductionId, setJoinProductionId] = useState<null | number>(null);
   const [refresh, setRefresh] = useState<number>(0);
-  const [deviceRefresh, setDeviceRefresh] = useState(false);
   const [firefoxWarningModalOpen, setFirefoxWarningModalOpen] = useState(false);
   const {
     formState: { errors, isValid },
@@ -167,20 +151,6 @@ export const JoinProduction = ({ preSelected }: TProps) => {
     console.log(payload);
   };
 
-  useEffect(() => {
-    let timeout: number | null = null;
-
-    timeout = window.setTimeout(() => {
-      setDeviceRefresh(false);
-    }, 800);
-
-    return () => {
-      if (timeout !== null) {
-        window.clearTimeout(timeout);
-      }
-    };
-  }, [devices]);
-
   const outputDevices = devices
     ? uniqBy(
         devices.filter((d) => d.kind === "audiooutput"),
@@ -195,15 +165,6 @@ export const JoinProduction = ({ preSelected }: TProps) => {
       )
     : [];
 
-  const handleReloadDevices = () => {
-    if (isBrowserFirefox && !isMobile) {
-      setFirefoxWarningModalOpen(true);
-    } else {
-      setDeviceRefresh(true);
-      setRefresh((prev) => prev + 1);
-    }
-  };
-
   return (
     <FormContainer>
       <DisplayContainerHeader>Join Production</DisplayContainerHeader>
@@ -273,14 +234,11 @@ export const JoinProduction = ({ preSelected }: TProps) => {
                   <option value="no-device">No device available</option>
                 )}
               </FormSelect>
-              <StyledRefreshBtn
-                type="button"
-                className="dummy"
-                disabled
-                onClick={() => handleReloadDevices()}
-              >
-                <RefreshIcon />
-              </StyledRefreshBtn>
+              <ReloadDevicesButton
+                handleReloadDevices={() => setRefresh((prev) => prev + 1)}
+                devices={devices}
+                isDummy
+              />
             </FormWithBtn>
           </FormLabel>
           <FormLabel>
@@ -302,14 +260,13 @@ export const JoinProduction = ({ preSelected }: TProps) => {
                   Controlled by operating system
                 </StyledWarningMessage>
               )}
-              <StyledRefreshBtn
-                type="button"
-                title="Refresh devices"
-                onClick={() => handleReloadDevices()}
-              >
-                {!deviceRefresh && <RefreshIcon />}
-                {deviceRefresh && <Spinner className="refresh-devices" />}
-              </StyledRefreshBtn>
+              <ReloadDevicesButton
+                handleReloadDevices={() => setRefresh((prev) => prev + 1)}
+                setFirefoxWarningModalOpen={() =>
+                  setFirefoxWarningModalOpen(true)
+                }
+                devices={devices}
+              />
             </FormWithBtn>
             {firefoxWarningModalOpen && (
               <Modal onClose={() => setFirefoxWarningModalOpen(false)}>

src/components/reload-devices-button.tsx/reload-devices-button.tsx

@@ -0,0 +1,71 @@
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { RefreshIcon } from "../../assets/icons/icon";
+import { PrimaryButton } from "../landing-page/form-elements";
+import { Spinner } from "../loader/loader";
+import { isBrowserFirefox, isMobile } from "../../bowser";
+
+const StyledRefreshBtn = styled(PrimaryButton)`
+  padding: 0;
+  margin: 0;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-left: 1.5rem;
+  flex-shrink: 0; /* Prevent shrinking */
+  flex-basis: auto; /* Prevent shrinking */
+
+  &.dummy {
+    background-color: #242424;
+    pointer-events: none;
+  }
+`;
+
+export const ReloadDevicesButton = ({
+  handleReloadDevices,
+  setFirefoxWarningModalOpen,
+  devices,
+  isDummy,
+}: {
+  handleReloadDevices: () => void;
+  setFirefoxWarningModalOpen?: () => void;
+  devices: MediaDeviceInfo[];
+  isDummy?: boolean;
+}) => {
+  const [deviceRefresh, setDeviceRefresh] = useState(false);
+
+  useEffect(() => {
+    let timeout: number | null = null;
+
+    timeout = window.setTimeout(() => {
+      setDeviceRefresh(false);
+    }, 800);
+
+    return () => {
+      if (timeout !== null) {
+        window.clearTimeout(timeout);
+      }
+    };
+  }, [devices]);
+
+  const reloadDevices = () => {
+    if (isBrowserFirefox && !isMobile && setFirefoxWarningModalOpen) {
+      setFirefoxWarningModalOpen();
+    } else {
+      setDeviceRefresh(true);
+      handleReloadDevices();
+    }
+  };
+
+  return (
+    <StyledRefreshBtn
+      type="button"
+      title={isDummy ? "" : "Refresh devices"}
+      className={isDummy ? "dummy" : ""}
+      disabled={isDummy}
+      onClick={() => reloadDevices()}
+    >
+      {!deviceRefresh && <RefreshIcon />}
+      {deviceRefresh && <Spinner className="refresh-devices" />}
+    </StyledRefreshBtn>
+  );
+};