feat: アカウントの複数サポートの準備 #138

src/Route.tsx

@@ -11,7 +11,7 @@ export const Router: FC = memo(() => {
   const storage = useLocalStorage()
     return (
         <Routes>
-            <Route path="/" element={storage.i && storage.host ? <Home />: <Welcome />} />
+            <Route path="/" element={storage.mainAccount && storage.mainAccount.i && storage.mainAccount.host ? <Home />: <Welcome />} />
             <Route path="/@:username" element={<UserProfile />} />
             <Route path="/cb" element={<CallBack />} />
         </Routes>

src/components/loginModal.tsx

@@ -13,10 +13,12 @@ import { kinds } from "../models/permission";
 import { useLocalStorage } from "../store/auth";
 import { apiClient } from "strictcat";
 import { useSnackbar } from "notistack";
+import { strToBoolean } from "../utils/common";
+import { Schema } from "../models/api";
 
 export const LoginModal = () => {
 	const [visible, setVisible] = useState(false);
-	const [instance, setInstance] = useState("");
+	const [instance, setInstance] = useState(import.meta.env.VITE_INSTANCE_DOMAIN);
 	const [isLoading, setLoading] = useState(false);
 	const storage = useLocalStorage();
 	const handler = () => setVisible(true);
@@ -34,7 +36,7 @@ export const LoginModal = () => {
 			"/api/app/create",
 			{},
 			{
-				callbackUrl: "http://localhost:5173/cb",
+				callbackUrl: `${import.meta.env.VITE_FRONT_DOMAIN}/cb`,
 				description: "test",
 				name: "Ayuskey Fluorite",
 				permission: kinds,
@@ -45,8 +47,8 @@ export const LoginModal = () => {
       setLoading(false)
 			throw createApp.type, createApp.data;
 		}
-    storage.setHost(instance)
-		console.log(createApp.data.secret);
+    console.log(instance)
+    storage.setMainAccountHost(instance)
 		storage.add("_auth_secret", createApp.data.secret);
 		const generateSession = await api.call(
 			"POST",
@@ -59,8 +61,7 @@ export const LoginModal = () => {
       setLoading(false)
       throw generateSession.type, generateSession.data
     }
-    console.log(generateSession)
-
+    window.location.href = generateSession.data.url
 	};
 
 	return (
@@ -80,13 +81,15 @@ export const LoginModal = () => {
 				<Modal.Body>
 					<Input
           aria-label="インスタンス名"
-						clearable={true}
+						clearable={strToBoolean(import.meta.env.VITE_PRODUCTION) ? false : true}
 						bordered={true}
 						fullWidth={true}
+            disabled={strToBoolean(import.meta.env.VITE_PRODUCTION)}
+            value={instance}
 						color="primary"
 						size="lg"
 						onChange={(e) => setInstance(e.target.value)}
-						placeholder="Instance"
+						placeholder="https://kr.akirin.xyz"
 						contentLeft={<FaGlobe />}
 					/>
 				</Modal.Body>

src/hooks/useAyuskeyClient.ts

@@ -9,10 +9,11 @@ type AyuskeyApiOption = {
 
 
 export const useAyuskeyClient = (options?: AyuskeyApiOption) => {
-  const {host, i} = useLocalStorage.getState()
+  const {mainAccount} = useLocalStorage.getState()
+  if (!mainAccount) throw 'error'
   const opts = {
-    credential: options?.credential ? options.credential : i,
-    origin: options?.origin ? options.origin : `${host}`
+    credential: options?.credential ? options.credential : mainAccount.i,
+    origin: options?.origin ? options.origin : `${mainAccount.host}`
   }
   const client = useMemo(() => new api.APIClient(opts), [opts.origin, opts.credential])
   return client

src/hooks/webSocket.ts

@@ -10,7 +10,7 @@ import { useCurrentTimeline, useStream } from "../store/stream";
 import { useAyuskeyClient } from "./useAyuskeyClient";
 
 const storage = useLocalStorage.getState()
-const stream = storage.host && storage.i ? new Stream(`${storage.host}`, {token: String(storage.i)}) : null
+const stream = storage.mainAccount && storage.mainAccount.host && storage.mainAccount.i ? new Stream(`${storage.mainAccount?.host}`, {token: String(storage.mainAccount.i)}) : null
 
 
 const getTimelineEndpoint = (timeline: Timelines) => {
@@ -32,7 +32,7 @@ export const useStreaming = () => {
     if (!stream) return
     const mainChannel = stream.useChannel('main')
     // setStream(stream)
-  }, [storage.i])
+  }, [storage.mainAccount])
 
   useEffect(() => {
     if (!stream) return
@@ -43,7 +43,7 @@ export const useStreaming = () => {
     })
   }, [stream]);
   useEffect(() => {
-    if (!storage.i) return
+    if (!storage.mainAccount?.i) return
     const currentE = getTimelineEndpoint(currentTimeline)
     if (currentE === null) return
     api.request(currentE).then((res) => {

src/@types/api.d.ts → src/models/api.ts

@@ -1,4 +1,6 @@
-type Schema = {
+import type  {UserDetailed} from "@ayuskey/misskey.js/built/entities";
+
+export type Schema = {
 	resource: {
     "/api/auth/session/userkey": {
       POST: {
@@ -9,12 +11,20 @@ type Schema = {
         response: {accessToken: string}
       }
     },
+    "/api/i": {
+      POST: {
+        body: {
+          i: string
+        },
+        response: UserDetailed
+      }
+    }
     "/api/auth/session/generate": {
       POST: {
         body: {
           appSecret: string
         },
-        responce: {
+        response: {
           token: string
           url: string
         }

src/store/auth.ts

@@ -1,16 +1,16 @@
 import create from "zustand"
 
 type TAuth = {
-  i: string | null
-  host: string
-  setHost: (newHost: string) => void
-  setI: (i: string) => void
+  setMainAccountHost: (newHost: string) => void
+  mainAccount: {host: string, i: string} | null
+  accounts: {host: string, i: string}[] | null
+  setMainAccountI: (i: string) => void
   add: (key:string, value: object | string) => void
 }
 
-export const getLocalStorage = <T> (key:string, defaultValue: T): string | T => {
+export const getLocalStorage = <T> (key:string, defaultValue: T, json: boolean = false): T => {
   const item  = window.localStorage.getItem(key)
-  return typeof item === 'string' ? item : defaultValue
+  return typeof item === 'string' ? (json ? JSON.parse(item) : item) : defaultValue
 }
 
 export const removeLocalStorage = (key:string): void => {
@@ -23,12 +23,12 @@ const setLocalStorage = (key:string, value: object | string): void => {
 }
 
 export const useLocalStorage = create<TAuth>((set)=> ({
-  i: getLocalStorage<null>("i", null),
-  host: getLocalStorage<string>("host", "kr.akirin.xyz"),
-  setHost(newHost: string) {
+  mainAccount: getLocalStorage<null | {host: string, i: string}>("_mainAccount", null, true),
+  accounts: getLocalStorage<null | {host: string, i: string}[]>("_accounts", null, true),
+  setMainAccountHost(newHost: string) {
       set((state) => {
-        setLocalStorage('host', newHost)
-        return {host: newHost}
+        setLocalStorage('_mainAccount', {host: newHost, i: state.mainAccount?.i || ''})
+        return {mainAccount: {host: newHost, i: state.mainAccount?.i || ''}}
       })
   },
   add(key, value) {
@@ -37,10 +37,11 @@ export const useLocalStorage = create<TAuth>((set)=> ({
         return {}
       })
   },
-  setI(i) {
-      set(() => {
-        setLocalStorage('i', i)
-        return {i: i}
+  setMainAccountI(i) {
+      set((state) => {
+        if (!state.mainAccount?.host) throw 'error'
+        setLocalStorage('_mainAccount', {host: state.mainAccount.host, i})
+        return {mainAccount: {host: state.mainAccount.host, i}}
       })
   },
 }))

src/utils/api.ts

@@ -1,4 +1,5 @@
 import {apiClient} from "strictcat"
+import { Schema } from "../models/api"
 import { getLocalStorage } from "../store/auth"
 
 export const api = apiClient<Schema>(getLocalStorage("host", ""))