From 436870d47ab2d5d71ac17677f1a61a71c14e51e0 Mon Sep 17 00:00:00 2001
From: hayao <hayao@fascode.net>
Date: Thu, 9 Nov 2023 11:07:41 +0900
Subject: [PATCH] Update: Write websites

---
 src/class/StorageTool/index.ts |   4 +-
 src/components/SwitchItem.tsx  |   2 +-
 src/data/websites.ts           | 103 ++++++++++++++++++---------------
 src/options/pages/Top.tsx      |   4 +-
 src/popup/components/Main.tsx  |   6 +-
 5 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/src/class/StorageTool/index.ts b/src/class/StorageTool/index.ts
index 1e859d0..47abc30 100644
--- a/src/class/StorageTool/index.ts
+++ b/src/class/StorageTool/index.ts
@@ -4,7 +4,7 @@
 
 import Browser from "webextension-polyfill";
 
-import { WebSiteClasses, WebsiteIds } from "@/data/websites";
+import { WebsiteIds, Websites } from "@/data/websites";
 
 import IsTrue from "../../utils/isTrue";
 
@@ -30,7 +30,7 @@ export default class StorageTool {
 
     static getStorage(id: StorageIds) {
         if (id == "other") return new StorageTool(id);
-        return WebSiteClasses.get(id)?.storage;
+        return Websites.get(id)?.class.storage;
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/SwitchItem.tsx b/src/components/SwitchItem.tsx
index 7541426..cc70491 100644
--- a/src/components/SwitchItem.tsx
+++ b/src/components/SwitchItem.tsx
@@ -17,5 +17,5 @@ export function SwitchItem({
     color?: ComponentColor;
     readonly?: boolean;
 }) {
-    return <ToggleWithStorage dataId={config.id} dataKey={category} color={color} readonly={readonly} />;
+    return <ToggleWithStorage dataId={config.class.id} dataKey={category} color={color} readonly={readonly} />;
 }
diff --git a/src/data/websites.ts b/src/data/websites.ts
index 7b2fb04..c36c991 100644
--- a/src/data/websites.ts
+++ b/src/data/websites.ts
@@ -1,8 +1,8 @@
-import { UnivWebsite } from "@/class";
+import { Kyomu, Media, Moodle, MyLibrary, SSO, UnivWebsite } from "@/class";
 
 export interface WebsiteConfig {
     name: string;
-    id: WebsiteIds;
+    class: UnivWebsite<unknown>;
     configable: {
         rainbow: boolean;
         dark: boolean;
@@ -11,53 +11,62 @@ export interface WebsiteConfig {
 
 export type WebsiteIds = "kyomu" | "media" | "moodle" | "mylibrary" | "sso";
 
-export const WebSiteClasses: Map<WebsiteIds, UnivWebsite<unknown>> = new Map([
-    ["kyomu", new UnivWebsite<unknown>("kyomu")],
-    ["media", new UnivWebsite<unknown>("media")],
-    ["moodle", new UnivWebsite<unknown>("moodle")],
-    ["mylibrary", new UnivWebsite<unknown>("mylibrary")],
-    ["sso", new UnivWebsite<unknown>("sso")],
-]);
-
-export const Websites: WebsiteConfig[] = [
-    {
-        name: "Moodle",
-        id: "moodle",
-        configable: {
-            rainbow: true,
-            dark: true,
+export const Websites: Map<WebsiteIds, WebsiteConfig> = new Map([
+    [
+        "moodle",
+        {
+            name: "Moodle",
+            class: Moodle,
+            configable: {
+                rainbow: true,
+                dark: true,
+            },
         },
-    },
-    {
-        name: "教務システム",
-        id: "kyomu",
-        configable: {
-            rainbow: true,
-            dark: true,
+    ],
+    [
+        "media",
+        {
+            name: "メディアセンター",
+            class: Media,
+            configable: {
+                rainbow: true,
+                dark: false,
+            },
         },
-    },
-    {
-        name: "メディアセンター",
-        id: "media",
-        configable: {
-            rainbow: true,
-            dark: false,
+    ],
+    [
+        "kyomu",
+        {
+            name: "教務システム",
+            class: Kyomu,
+            configable: {
+                rainbow: true,
+                dark: true,
+            },
         },
-    },
-    {
-        name: "MyLibrary",
-        id: "mylibrary",
-        configable: {
-            rainbow: true,
-            dark: false,
+    ],
+    [
+        "mylibrary",
+        {
+            name: "MyLibrary",
+            class: MyLibrary,
+            configable: {
+                rainbow: true,
+                dark: false,
+            },
         },
-    },
-    {
-        name: "SSO",
-        id: "sso",
-        configable: {
-            rainbow: true,
-            dark: false,
+    ],
+    [
+        "sso",
+        {
+            name: "SSO",
+            class: SSO,
+            configable: {
+                rainbow: true,
+                dark: false,
+            },
         },
-    },
-];
+    ],
+]);
+
+export const WebsitesList = Array.from(Websites.values());
diff --git a/src/options/pages/Top.tsx b/src/options/pages/Top.tsx
index b4d6230..df2b4f2 100644
--- a/src/options/pages/Top.tsx
+++ b/src/options/pages/Top.tsx
@@ -17,9 +17,9 @@ export default function Top() {
         <>
             <ConfigSection name="Websites" desc="それぞれのウェブサイトで有効化する機能を設定できます">
                 <div className="flex flex-wrap items-center">
-                    {Websites.map((site) => {
+                    {Array.from(Websites.values()).map((site) => {
                         return (
-                            <div className="chiid:p-1 mx-4 my-2 flex w-60 justify-center child:grow" key={site.id}>
+                            <div className="chiid:p-1 mx-4 my-2 flex w-60 justify-center child:grow" key={site.class.id}>
                                 <p className="my-0 flex w-1/2 items-center justify-center rounded-l-lg bg-base-300 text-center">
                                     {site.name}
                                 </p>
diff --git a/src/popup/components/Main.tsx b/src/popup/components/Main.tsx
index d1ec3ab..5d08217 100644
--- a/src/popup/components/Main.tsx
+++ b/src/popup/components/Main.tsx
@@ -5,7 +5,7 @@ import { FaGamepad, FaMoon } from "react-icons/fa";
 import browser from "webextension-polyfill";
 
 import { SwitchItem } from "../../components/SwitchItem";
-import { WebsiteConfig, Websites } from "../../data/websites";
+import { WebsiteConfig, WebsitesList } from "../../data/websites";
 
 type MainProps = DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 
@@ -28,9 +28,9 @@ export default function Main(props: MainProps) {
 
     const switches = (
         <div className="flex flex-wrap">
-            {Websites.map((config) => {
+            {WebsitesList.map((config) => {
                 return (
-                    <div className="m-2 flex w-36 min-w-fit flex-col rounded-lg bg-base-300 p-2" key={config.id}>
+                    <div className="m-2 flex w-36 min-w-fit flex-col rounded-lg bg-base-300 p-2" key={config.class.id}>
                         <p className="flex items-center justify-center">{config.name}</p>
                         <Switches config={config} />
                     </div>