package pnpm-lock fetch mock Config Root APIConfig Backend BackendLis…

…t AppConfigSideEffect custom utils
haishanh · Oct 4, 2023 · b42988d · b42988d
1 parent 4803ee9
commit b42988d
Show file tree

Hide file tree

Showing 14 changed files with 223 additions and 103 deletions.
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "react-tiny-fab": "4.0.4",
     "react-window": "^1.8.9",
     "reselect": "4.1.8",
+    "sonner": "^1.0.3",
     "tslib": "2.6.2",
     "use-asset": "1.0.4",
     "workbox-core": "7.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/api/fetch.ts b/src/api/fetch.ts
@@ -0,0 +1,6 @@
+export function req(url: string, init: RequestInit) {
+  if (import.meta.env.DEV) {
+    return import('./mock').then((mod) => mod.mock(url, init));
+  }
+  return fetch(url, init);
+}
diff --git a/src/api/mock.ts b/src/api/mock.ts
@@ -0,0 +1,70 @@
+const MOCK_HANDLERS = [
+  {
+    key: 'GET/',
+    enabled: false,
+    handler: (_u: string, _i: RequestInit) => {
+      // throw new Error();
+      return deserializeError();
+      // return json({ hello: 'clash' });
+    },
+  },
+  {
+    key: 'GET/configs',
+    enabled: false,
+    handler: (_u: string, _i: RequestInit) =>
+      json({
+        port: 0,
+        'socks-port': 7891,
+        'redir-port': 0,
+        'tproxy-port': 0,
+        'mixed-port': 7890,
+        'allow-lan': true,
+        'bind-address': '*',
+        mode: 'rule',
+        'log-level': 'info',
+        authentication: [],
+        ipv6: false,
+      }),
+  },
+];
+
+export async function mock(url: string, init: RequestInit) {
+  const method = init.method || 'GET';
+  const pathname = new URL(url).pathname;
+  const key = `${method}${pathname}`;
+  const item = MOCK_HANDLERS.find((h) => {
+    if (h.enabled && h.key === key) return h;
+  });
+  if (item) {
+    console.warn('Using mocked API', key);
+    return (await item?.handler(url, init)) as Response;
+  }
+  return fetch(url, init);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function json<T = any>(data: T) {
+  await sleep(1);
+  return {
+    ok: true,
+    json: async () => {
+      await sleep(16);
+      return data;
+    },
+  };
+}
+
+async function deserializeError() {
+  await sleep(1);
+  return {
+    ok: true,
+    json: async () => {
+      await sleep(16);
+      throw new Error();
+    },
+  };
+}
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/src/components/Config.tsx b/src/components/Config.tsx
@@ -248,7 +248,7 @@ function Config({ configs }: ConfigImplProps) {
             OptionComponent={TrafficChartSample}
             optionPropsList={propsList}
             selectedIndex={selectedChartStyleIndex}
-            onChange={setSelectedChartStyleIndex}
+            onChange={(v: string) => setSelectedChartStyleIndex(parseInt(v, 10))}
           />
         </div>
         <div>

diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -6,6 +6,7 @@ import { useAtom } from 'jotai';
 import * as React from 'react';
 import { RouteObject } from 'react-router';
 import { HashRouter as Router, useRoutes } from 'react-router-dom';
+import { Toaster } from 'sonner';
 import { About } from 'src/components/about/About';
 import Loading from 'src/components/Loading';
 import { Head } from 'src/components/shared/Head';
@@ -78,7 +79,12 @@ function App() {
 function AppShell({ children }: { children: React.ReactNode }) {
   const [pureBlackDark] = useAtom(darkModePureBlackToggleAtom);
   const clazz = cx(s0.app, { pureBlackDark });
-  return <div className={clazz}>{children}</div>;
+  return (
+    <>
+      <Toaster richColors />
+      <div className={clazz}>{children}</div>
+    </>
+  );
 }
 
 const Root = () => (

diff --git a/src/components/APIConfig.module.scss → src/components/backend/APIConfig.module.scss b/src/components/APIConfig.module.scss → src/components/backend/APIConfig.module.scss
diff --git a/src/components/APIConfig.tsx → src/components/backend/APIConfig.tsx b/src/components/APIConfig.tsx → src/components/backend/APIConfig.tsx
@@ -1,20 +1,21 @@
 import { useAtom } from 'jotai';
 import * as React from 'react';
 import { fetchConfigs } from 'src/api/configs';
-import { BackendList } from 'src/components/BackendList';
 import { clashAPIConfigsAtom, findClashAPIConfigIndex } from 'src/store/app';
 import { ClashAPIConfig } from 'src/types';
 
+import Field from '$src/components//Field';
+import { BackendList } from '$src/components/backend/BackendList';
+import Button from '$src/components/Button';
+import SvgYacd from '$src/components/SvgYacd';
+
 import s0 from './APIConfig.module.scss';
-import Button from './Button';
-import Field from './Field';
-import SvgYacd from './SvgYacd';
 
 const { useState, useRef, useCallback, useEffect } = React;
 const Ok = 0;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => { };
+const noop = () => {};
 
 export default function APIConfig() {
   const [baseURL, setBaseURL] = useState('');
@@ -23,7 +24,6 @@ export default function APIConfig() {
   const [errMsg, setErrMsg] = useState('');
 
   const userTouchedFlagRef = useRef(false);
-  const contentEl = useRef(null);
 
   const handleInputOnChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((e) => {
     userTouchedFlagRef.current = true;
@@ -62,20 +62,10 @@ export default function APIConfig() {
     });
   }, [baseURL, secret, metaLabel, apiConfigs, setApiConfigs]);
 
-  const handleContentOnKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (
-        e.target instanceof Element &&
-        (!e.target.tagName || e.target.tagName.toUpperCase() !== 'INPUT')
-      ) {
-        return;
-      }
-      if (e.key !== 'Enter') return;
-
-      onConfirm();
-    },
-    [onConfirm],
-  );
+  const onSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    onConfirm();
+  }, [onConfirm])
 
   const detectApiServer = async () => {
     // if there is already a clash API server at `/`, just use it as default value
@@ -91,8 +81,7 @@ export default function APIConfig() {
   }, []);
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div className={s0.root} ref={contentEl} onKeyDown={handleContentOnKeyDown}>
+    <div className={s0.root}>
       <div className={s0.header}>
         <div className={s0.icon}>
           <SvgYacd
@@ -106,42 +95,44 @@ export default function APIConfig() {
           />
         </div>
       </div>
-      <div className={s0.body}>
-        <div className={s0.hostnamePort}>
-          <Field
-            id="baseURL"
-            name="baseURL"
-            label="API Base URL"
-            type="text"
-            placeholder="http://127.0.0.1:9090"
-            value={baseURL}
-            onChange={handleInputOnChange}
-          />
-          <Field
-            id="secret"
-            name="secret"
-            label="Secret(optional)"
-            value={secret}
-            type="text"
-            onChange={handleInputOnChange}
-          />
+      <form onSubmit={onSubmit}>
+        <div className={s0.body}>
+          <div className={s0.hostnamePort}>
+            <Field
+              id="baseURL"
+              name="baseURL"
+              label="API Base URL"
+              type="text"
+              placeholder="http://127.0.0.1:9090"
+              value={baseURL}
+              onChange={handleInputOnChange}
+            />
+            <Field
+              id="secret"
+              name="secret"
+              label="Secret(optional)"
+              value={secret}
+              type="text"
+              onChange={handleInputOnChange}
+            />
+          </div>
+          {errMsg ? <div className={s0.error}>{errMsg}</div> : null}
+          <div className={s0.label}>
+            <Field
+              id="metaLabel"
+              name="metaLabel"
+              label="Label(optional)"
+              type="text"
+              placeholder=""
+              value={metaLabel}
+              onChange={handleInputOnChange}
+            />
+          </div>
         </div>
-        {errMsg ? <div className={s0.error}>{errMsg}</div> : null}
-        <div className={s0.label}>
-          <Field
-            id="metaLabel"
-            name="metaLabel"
-            label="Label(optional)"
-            type="text"
-            placeholder=""
-            value={metaLabel}
-            onChange={handleInputOnChange}
-          />
+        <div className={s0.footer}>
+          <Button label="Add" onClick={onConfirm} />
         </div>
-      </div>
-      <div className={s0.footer}>
-        <Button label="Add" onClick={onConfirm} />
-      </div>
+      </form>
       <div style={{ height: 20 }} />
       <BackendList />
     </div>

diff --git a/src/components/backend/Backend.tsx b/src/components/backend/Backend.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import APIConfig from '../APIConfig';
 import { ThemeSwitcher } from '../shared/ThemeSwitcher';
+import APIConfig from './APIConfig';
 
 export function Backend() {
   return (
@@ -11,7 +11,7 @@ export function Backend() {
         style={{
           position: 'fixed',
           padding: 16,
-          right: 0,
+          left: 0,
           bottom: 0,
         }}
       >

diff --git a/src/components/BackendList.module.scss → ...omponents/backend/BackendList.module.scss b/src/components/BackendList.module.scss → ...omponents/backend/BackendList.module.scss
@@ -19,6 +19,10 @@
   column-gap: 10px;
   border: 1px solid var(--bg-near-transparent);
 
+  &.isSelected {
+    border-color: #387cec;
+  }
+
   .right {
     display: grid;
     column-gap: 10px;