refactor: use toasts for errors on ISO selection step

project-slippi · Jan 17, 2022 · 0944463 · 0944463
1 parent d84ec5c
commit 0944463
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/src/renderer/containers/QuickStart/IsoSelectionStep.tsx b/src/renderer/containers/QuickStart/IsoSelectionStep.tsx
@@ -51,16 +51,9 @@ const Container = styled.div`
   }
 `;
 
-const ErrorMessage = styled.div`
-  margin-top: 10px;
-  color: ${({ theme }) => theme.palette.error.main};
-  font-size: 16px;
-`;
-
 export const IsoSelectionStep: React.FC = () => {
+  const { addToast } = useToasts();
   const [tempIsoPath, setTempIsoPath] = React.useState("");
-  const [errMsg, setErrMsg] = React.useState("");
-  const [forceErr, setForceErr] = React.useState(false);
   const verification = ipc_checkValidIso.renderer!.useValue(
     { path: tempIsoPath },
     { path: tempIsoPath, valid: IsoValidity.INVALID },
@@ -77,12 +70,12 @@ export const IsoSelectionStep: React.FC = () => {
 
     const filePath = acceptedFiles[0].path;
     if (filePath.endsWith(".7z")) {
-      setErrMsg("7z files must be uncompressed with 7-zip to be used in Dolphin.");
-      setForceErr(true);
+      addToast("7z files must be uncompressed to be used in Dolphin.", {
+        id: "7z",
+        appearance: "error",
+      });
       return;
     }
-    setErrMsg("Provided ISO will not work with Slippi Online. Please provide an NTSC 1.02 ISO.");
-    setForceErr(false);
 
     setTempIsoPath(filePath);
   };
@@ -99,11 +92,19 @@ export const IsoSelectionStep: React.FC = () => {
   const invalidIso = Boolean(tempIsoPath) && !loading && validIsoPath === IsoValidity.INVALID;
   const unknownIso = Boolean(tempIsoPath) && !loading && validIsoPath === IsoValidity.UNKNOWN;
   const handleClose = () => setTempIsoPath("");
-  const { addToast } = useToasts();
   const onConfirm = useCallback(() => {
     setIsoPath(tempIsoPath).catch((err) => addToast(err.message, { appearance: "error" }));
   }, [addToast, setIsoPath, tempIsoPath]);
 
+  React.useEffect(() => {
+    if (invalidIso) {
+      addToast("Provided ISO will not work with Slippi Online. Please provide an NTSC 1.02 ISO.", {
+        id: "invalidISO",
+        appearance: "error",
+      });
+    }
+  }, [addToast, invalidIso]);
+
   React.useEffect(() => {
     // Auto-confirm ISO if it's valid
     if (verification.value.valid === IsoValidity.VALID) {
@@ -129,7 +130,6 @@ export const IsoSelectionStep: React.FC = () => {
           </Button>
         )}
         <p>{loading ? "Verifying ISO..." : "or drag and drop here"}</p>
-        {(invalidIso || forceErr) && <ErrorMessage>{errMsg}</ErrorMessage>}
       </Container>
 
       <ConfirmationModal