feat: added copy production-urls to clipboard

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

@@ -17,6 +17,8 @@ import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { Spinner } from "../loader/loader.tsx";
 import { FlexContainer } from "../generic-components.ts";
 import { RemoveLineButton } from "../remove-line-button/remove-line-button.tsx";
+import { useFetchProduction } from "./use-fetch-production.ts";
+import { darkText, errorColour } from "../../css-helpers/defaults.ts";
 
 type FormValues = {
   productionName: string;
@@ -38,17 +40,36 @@ const ButtonWrapper = styled.div`
 const ProductionConfirmation = styled.div`
   background: #91fa8c;
   padding: 1rem;
+  margin-bottom: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #b2ffa1;
   color: #1a1a1a;
 `;
 
+const CopyToClipboardWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const CopyConfirmation = styled.p`
+  padding-left: 1rem;
+`;
+
+const FetchErrorMessage = styled.div`
+  background: ${errorColour};
+  color: ${darkText};
+  padding: 0.5rem;
+  margin: 1rem 0;
+`;
+
 export const CreateProduction = () => {
   const [, dispatch] = useGlobalState();
   const [createdProductionId, setCreatedProductionId] = useState<string | null>(
     null
   );
   const [loading, setLoading] = useState<boolean>(false);
+  const [copiedUrl, setCopiedUrl] = useState<boolean>(false);
   const {
     formState: { errors },
     control,
@@ -64,6 +85,10 @@ export const CreateProduction = () => {
     },
   });
 
+  const { error: productionFetchError, production } = useFetchProduction(
+    createdProductionId ? parseInt(createdProductionId, 10) : null
+  );
+
   const onSubmit: SubmitHandler<FormValues> = (value) => {
     setLoading(true);
     API.createProduction({
@@ -97,6 +122,34 @@ export const CreateProduction = () => {
     }
   }, [createdProductionId, dispatch, reset]);
 
+  useEffect(() => {
+    let timeout: number | null = null;
+    if (copiedUrl) {
+      timeout = window.setTimeout(() => {
+        setCopiedUrl(false);
+      }, 1500);
+    }
+    return () => {
+      if (timeout !== null) {
+        window.clearTimeout(timeout);
+      }
+    };
+  }, [copiedUrl]);
+
+  const handleCopyProdUrlsToClipboard = (input: string[]) => {
+    if (input !== null) {
+      navigator.clipboard
+        .writeText(input.join("\n"))
+        .then(() => {
+          setCopiedUrl(true);
+          console.log("Text copied to clipboard");
+        })
+        .catch((err) => {
+          console.error("Failed to copy text: ", err);
+        });
+    }
+  };
+
   return (
     <FormContainer>
       <DisplayContainerHeader>Create Production</DisplayContainerHeader>
@@ -179,9 +232,35 @@ export const CreateProduction = () => {
         </ButtonWrapper>
       </FlexContainer>
       {createdProductionId !== null && (
-        <ProductionConfirmation>
-          The production ID is: {createdProductionId.toString()}
-        </ProductionConfirmation>
+        <>
+          <ProductionConfirmation>
+            The production ID is: {createdProductionId.toString()}
+          </ProductionConfirmation>
+          {!productionFetchError && production && (
+            <CopyToClipboardWrapper>
+              <PrimaryButton
+                type="button"
+                onClick={() =>
+                  handleCopyProdUrlsToClipboard(
+                    production.lines.map((item) => {
+                      return ` ${item.name}: ${window.location.origin}/production/${production.productionId}/line/${item.id}`;
+                    })
+                  )
+                }
+                disabled={copiedUrl}
+              >
+                Copy Links
+              </PrimaryButton>
+              {copiedUrl && <CopyConfirmation>Copied</CopyConfirmation>}
+            </CopyToClipboardWrapper>
+          )}
+          {productionFetchError && (
+            <FetchErrorMessage>
+              The production information could not be fetched, not able to copy
+              to clipboard.
+            </FetchErrorMessage>
+          )}
+        </>
       )}
     </FormContainer>
   );