refactor/sidebar-socials: refactor & adjust code

src/main/events/index.ts

@@ -18,7 +18,7 @@ import "./library/open-game";
 import "./library/open-game-installer";
 import "./library/remove-game";
 import "./misc/get-or-cache-image";
-import "./misc/open-external-url";
+import "./misc/open-external";
 import "./misc/show-open-dialog";
 import "./torrenting/cancel-game-download";
 import "./torrenting/pause-game-download";

src/main/events/misc/open-external-url.ts

@@ -1,19 +0,0 @@
-import { BrowserWindow, app, shell } from "electron";
-import { registerEvent } from "../register-event";
-
-let mainWindow: BrowserWindow | null = null;
-
-app.on("ready", () => {
-  mainWindow = new BrowserWindow({});
-
-  mainWindow.loadURL("file://" + __dirname + "/index.html");
-});
-
-const openExternalUrl = async (
-  _event: Electron.IpcMainInvokeEvent,
-  url: string
-) => shell.openExternal(url);
-
-registerEvent(openExternalUrl, {
-  name: "openExternalUrl",
-});

src/main/events/misc/open-external.ts

@@ -0,0 +1,9 @@
+import { shell } from "electron";
+import { registerEvent } from "../register-event";
+
+const openExternal = async (_event: Electron.IpcMainInvokeEvent, src: string) =>
+  shell.openExternal(src);
+
+registerEvent(openExternal, {
+  name: "openExternal",
+});

src/preload.ts

@@ -86,7 +86,7 @@ contextBridge.exposeInMainWorld("electron", {
   ping: () => ipcRenderer.invoke("ping"),
   getVersion: () => ipcRenderer.invoke("getVersion"),
   getDefaultDownloadsPath: () => ipcRenderer.invoke("getDefaultDownloadsPath"),
-  openExternalUrl: (url: string) => ipcRenderer.invoke("openExternalUrl", url),
+  openExternal: (src: string) => ipcRenderer.invoke("openExternal", src),
   showOpenDialog: (options: Electron.OpenDialogOptions) =>
     ipcRenderer.invoke("showOpenDialog", options),
   platform: process.platform,

src/renderer/components/sidebar/sidebar.tsx

@@ -8,12 +8,28 @@ import { AsyncImage, TextField } from "@renderer/components";
 import { useDownload, useLibrary } from "@renderer/hooks";
 import { SPACING_UNIT } from "@renderer/theme.css";
 
-import { MarkGithubIcon } from "@primer/octicons-react";
-import DiscordLogo from "../../assets/discord-icon.svg";
-import XLogo from "../../assets/x-icon.svg";
 import { routes } from "./routes";
+
+import { MarkGithubIcon } from "@primer/octicons-react";
+import DiscordLogo from "@renderer/assets/discord-icon.svg";
+import XLogo from "@renderer/assets/x-icon.svg";
 import * as styles from "./sidebar.css";
 
+const socials = [
+  {
+    url: "https://discord.gg/hydralauncher",
+    icon: <DiscordLogo />,
+  },
+  {
+    url: "https://twitter.com/hydralauncher",
+    icon: <XLogo />,
+  },
+  {
+    url: "https://github.com/hydralauncher/hydra",
+    icon: <MarkGithubIcon size={16} />,
+  },
+];
+
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;
 const SIDEBAR_MAX_WIDTH = 450;
@@ -220,38 +236,17 @@ export function Sidebar() {
         <div className={styles.footerText}>{t("follow_us")}</div>
 
         <span className={styles.footerSocialsContainer}>
+          {socials.map((item, i) => {
+            return (
               <button
+                key={i}
                 className={styles.footerSocialsItem}
-            onClick={() =>
-              window.electron.openExternalUrl(
-                "https://discord.gg/hydralauncher"
-              )
-            }
+                onClick={() => window.electron.openExternal(item.url)}
               >
-            <DiscordLogo />
-          </button>
-
-          <button
-            className={styles.footerSocialsItem}
-            onClick={() =>
-              window.electron.openExternalUrl(
-                "https://twitter.com/hydralauncher"
-              )
-            }
-          >
-            <XLogo />
-          </button>
-
-          <button
-            className={styles.footerSocialsItem}
-            onClick={() =>
-              window.electron.openExternalUrl(
-                "https://github.com/hydralauncher/hydra"
-              )
-            }
-          >
-            <MarkGithubIcon size={16} />
+                {item.icon}
               </button>
+            );
+          })}
         </span>
       </footer>
     </aside>

src/renderer/declaration.d.ts

@@ -78,7 +78,7 @@ declare global {
 
     /* Misc */
     getOrCacheImage: (url: string) => Promise<string>;
-    openExternalUrl: (url: string) => void;
+    openExternal: (src: string) => Promise<void>;
     getVersion: () => Promise<string>;
     ping: () => string;
     getDefaultDownloadsPath: () => Promise<string>;