Implemented error handling

package.json

@@ -7,9 +7,11 @@
   "dependencies": {
     "axios": "^0.26.1",
     "csv-parse": "^5.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^5.0.0",
+    "sweetalert2": "^11.4.8",
+    "sweetalert2-react-content": "^4.2.0"
   },
   "main": "./public/electron.js",
   "homepage": "./",
@@ -37,7 +39,7 @@
     ]
   },
   "devDependencies": {
-    "concurrently": "^7.0.0",
+    "concurrently": "^7.1.0",
     "cross-env": "^7.0.3",
     "electron": "^17.1.2",
     "electron-builder": "^22.14.13",

public/checker/ioCallback.js

@@ -3,33 +3,44 @@ const processFile = require("../io")
 const includes = require("./includes")
 const { dialog } = require("electron")
 const fs = require("fs")
+const { returnError } = require("../ipc").returnError
 
 async function ioCallback(event, args) {
   const csvFilePath = args[0]
   const uid = args[1]
   const apiKey = args[2]
 
-  try {
-    const playniteLibraries = await processFile(csvFilePath)
-    const wholeSteamLibrary = await requestAllGames()
-    const userLibrary = await requestUserLibrary(uid, apiKey)
+  const playniteLibrariesPromise = processFile(csvFilePath, event)
+  const wholeSteamLibraryPromise = requestAllGames(event)
+  const userLibraryPromise = requestUserLibrary(uid, apiKey, event)
 
-    let res = playniteLibraries.filter(el => {
+  const [playniteLibraries, wholeSteamLibrary, userLibrary] = await Promise.all(
+    [playniteLibrariesPromise, wholeSteamLibraryPromise, userLibraryPromise]
+  )
+
+  if (playniteLibraries && wholeSteamLibrary && userLibrary) {
+    console.log(typeof playniteLibraries)
+    const res = playniteLibraries.filter(el => {
       return includes(wholeSteamLibrary, el) && !includes(userLibrary, el)
     })
 
-    const { filePath, canceled } = await dialog.showSaveDialog({
-      defaultPath: "output.txt",
-    })
-    if (filePath && !canceled) {
-      const stream = fs.createWriteStream(filePath)
-      res.forEach(function (v) {
-        stream.write(v + "\n")
+    try {
+      const { filePath, canceled } = await dialog.showSaveDialog({
+        defaultPath: "output.txt",
       })
-      stream.end()
+      if (filePath && !canceled) {
+        const stream = fs.createWriteStream(filePath)
+        res.forEach(function (v) {
+          stream.write(v + "\n")
+        })
+        stream.end()
+      }
+    } catch (error) {
+      console.error(error)
+      returnError(error)
     }
-  } catch (error) {
-    console.error(error)
+  } else {
+    console.error("at least one of the promises failed")
   }
 }
 

public/io/processFile.js

@@ -1,8 +1,9 @@
 const fs = require("fs")
 const { parse } = require("csv-parse")
 const { finished } = require("stream/promises")
+const returnError = require("../ipc").returnError
 
-async function processFile(path) {
+async function processFile(path, event) {
   const records = []
   const parser = fs.createReadStream(path).pipe(
     parse({
@@ -24,6 +25,7 @@ async function processFile(path) {
     await finished(parser)
   } catch (error) {
     console.error(error)
+    returnError(event, "Failed to process CSV file")
   }
 
   return records

public/ipc/index.js

@@ -1,7 +1,7 @@
 const retrieveInput = require("./retrieveInput")
-const sendResults = require("./sendResults")
+const returnError = require("./returnError")
 
 module.exports = {
   retrieveInput: retrieveInput,
-  sendResults: sendResults,
+  returnError: returnError,
 }

public/ipc/returnError.js

@@ -0,0 +1,5 @@
+function returnError(event, args) {
+  event.sender.send("error", args)
+}
+
+module.exports = returnError

public/preload.js

@@ -4,8 +4,8 @@ const api = {
   sendInput: args => {
     ipcRenderer.send("input", args)
   },
-  listenForOutput: callback => {
-    ipcRenderer.addListener("output", callback)
+  listenForError: callback => {
+    ipcRenderer.addListener("error", callback)
   },
 }
 

public/steamapi/requestAllGames.js

@@ -1,6 +1,7 @@
 const axios = require("axios").default
+const returnError = require("../ipc").returnError
 
-async function requestAllGames() {
+async function requestAllGames(event) {
   try {
     const res = await axios.get(
       "https://api.steampowered.com/ISteamApps/GetAppList/v2/"
@@ -9,7 +10,11 @@ async function requestAllGames() {
     apps.sort((first, second) => first.name.localeCompare(second.name))
     return apps
   } catch (error) {
-    console.log(error)
+    console.error(error)
+    returnError(
+      event,
+      `Failed to request the entire Steam library: \n${error.toString()}`
+    )
   }
 }
 

public/steamapi/requestUserLibrary.js

@@ -1,6 +1,7 @@
 const axios = require("axios").default
+const returnError = require("../ipc").returnError
 
-async function requestUserLibrary(uid, apiKey) {
+async function requestUserLibrary(uid, apiKey, event) {
   try {
     const res = await axios.get(
       "https://api.steampowered.com/IPlayerService/GetOwnedGames/v1/",
@@ -17,7 +18,10 @@ async function requestUserLibrary(uid, apiKey) {
     games.sort((first, second) => first.name.localeCompare(second.name))
     return games
   } catch (error) {
-    console.log(error)
+    console.error(error)
+    if (error.response.status === 401)
+      returnError(event, "The provided API key is invalid")
+    else returnError(event, "The provided Steam user ID is invalid")
   }
 }
 

src/app/app.jsx

@@ -1,18 +1,18 @@
 import { Playnite } from "./components/playnite"
 import { Steam } from "./components/steam"
 import { Go } from "./components/go"
-// import { Attribution } from "./components/attribution"
+import { Alert } from "./components/alert"
 import "./app.css"
 
 export function App() {
+  window.api.listenForError((_, message) => {
+    Alert({ title: "Error", text: message })
+  })
   return (
-    <>
-      <main>
-        <Playnite />
-        <Steam />
-        <Go />
-      </main>
-      {/* <Attribution /> */}
-    </>
+    <main>
+      <Playnite />
+      <Steam />
+      <Go />
+    </main>
   )
 }

src/app/components/alert/alert.jsx

@@ -0,0 +1,17 @@
+import Swal from "sweetalert2"
+import withReactContent from "sweetalert2-react-content"
+
+import "./alert.css"
+
+const mySwal = withReactContent(Swal)
+
+export function Alert(props) {
+  mySwal.fire({
+    title: "Error",
+    titleText: props.title,
+    text: props.text,
+    backdrop: true,
+    target: "body",
+    confirmButtonColor: "orangered",
+  })
+}

src/app/components/alert/index.js

@@ -0,0 +1 @@
+export { Alert } from "./alert"

src/app/components/go/go.css

@@ -4,7 +4,14 @@
   margin-top: 30px;
 }
 
-#submit-button {
-  width: 100px;
+.submit-button {
+  width: 150px;
   height: 50px;
+  border-radius: 12px;
+  background-color: orangered;
+  color: white;
+  text-transform: uppercase;
+  font-family: Arial;
+  border: none;
+  cursor: pointer;
 }

src/app/components/go/go.jsx

@@ -1,18 +1,39 @@
+import { Alert } from "../alert"
+
 import "./go.css"
 
 export function Go() {
   return (
     <div id="submit">
       <button className="submit-button" onClick={sendToMain}>
-        Go
+        crosscheck
       </button>
     </div>
   )
 }
 
+function validateInput(dialogOutput, uid, apiKey) {
+  if (dialogOutput && dialogOutput.type === "text/csv") {
+    if (uid.length === 0) {
+      Alert({ text: "Please insert your Steam user ID" })
+      return false
+    } else if (apiKey.length === 0) {
+      Alert({ text: "Please insert your Steam API key" })
+      return false
+    }
+  } else {
+    Alert({ text: "Please select a CSV file" })
+    return false
+  }
+  return true
+}
+
 function sendToMain() {
-  const csvFilePath = document.querySelector("#csv-file").files[0].path
+  const dialogOutput = document.querySelector("#csv-file").files[0]
   const uid = document.querySelector("#steam-userid").value
   const apiKey = document.querySelector("#steam-api-key").value
-  window.api.sendInput([csvFilePath, uid, apiKey])
+  if (validateInput(dialogOutput, uid, apiKey)) {
+    const csvFilePath = dialogOutput.path
+    window.api.sendInput([csvFilePath, uid, apiKey])
+  }
 }

src/app/components/steam/steam.css

@@ -5,10 +5,6 @@
   gap: 25px;
 }
 
-#steam-logo {
-  padding-bottom: 15px;
-}
-
 #random-logo {
   width: 250px;
   filter: brightness(0) saturate(100%) invert(33%) sepia(44%) saturate(6998%)

src/app/components/steam/steam.jsx

@@ -1,4 +1,3 @@
-// import steamVector from "./img/steam.svg"
 import Logo18 from "./img/Logo18.svg"
 import "./steam.css"
 
@@ -15,9 +14,7 @@ export function Steam() {
           <input type="text" id="steam-api-key" />
         </li>
       </ul>
-      {/* Temporary logo until I hear back from Valve */}
-      <img src={Logo18} alt="random logo" id="random-logo" />{" "}
-      {/* <img src={steamVector} alt="steam logo" id="steam-logo" /> */}
+      <img src={Logo18} alt="random logo" id="random-logo" />
     </section>
   )
 }

src/index.js

@@ -1,10 +1,6 @@
-import React from "react"
-import ReactDOM from "react-dom"
+import * as ReactDOMClient from "react-dom/client"
 import { App } from "./app"
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.querySelector("#root")
-)
+const container = document.querySelector("#root")
+const root = ReactDOMClient.createRoot(container)
+root.render(<App />)