From 773ab138ca7cb421a93a04ca11bd5f52ee374b77 Mon Sep 17 00:00:00 2001
From: Ou <orongxing@gmail.com>
Date: Sun, 3 Nov 2024 20:13:49 +0800
Subject: [PATCH] feat: refactor login

---
 server/api/enable-login.ts     |  8 ++++++++
 src/components/column/card.tsx |  4 ++--
 src/components/column/dnd.tsx  |  5 +++--
 src/components/header/menu.tsx |  8 ++++----
 src/hooks/useLogin.ts          | 25 +++++++++++++++++++++++--
 src/hooks/useRefetch.ts        | 24 ++++++++++++++++++------
 src/hooks/useSync.ts           |  4 ++--
 src/main.tsx                   |  2 --
 src/routes/__root.tsx          |  8 --------
 src/utils/index.ts             |  1 +
 src/vite-env.d.ts              |  1 -
 vite.config.ts                 |  8 --------
 12 files changed, 61 insertions(+), 37 deletions(-)
 create mode 100644 server/api/enable-login.ts

diff --git a/server/api/enable-login.ts b/server/api/enable-login.ts
new file mode 100644
index 0000000..a018f6e
--- /dev/null
+++ b/server/api/enable-login.ts
@@ -0,0 +1,8 @@
+import process from "node:process"
+
+export default defineEventHandler(async () => {
+  return {
+    enable: true,
+    url: `https://github.com/login/oauth/authorize?client_id=${process.env.G_CLIENT_ID}`,
+  }
+})
diff --git a/src/components/column/card.tsx b/src/components/column/card.tsx
index 8948142..46b881b 100644
--- a/src/components/column/card.tsx
+++ b/src/components/column/card.tsx
@@ -53,10 +53,10 @@ function NewsCard({ id, handleListeners }: NewsCardProps) {
     queryKey: [id, getRefreshId(id)],
     queryFn: async ({ queryKey }) => {
       const [_id, _refetchTime] = queryKey as [SourceID, number]
-      let url = `/api/s?id=${_id}`
+      let url = `/s?id=${_id}`
       const headers: Record<string, any> = {}
       if (Date.now() - _refetchTime < 1000) {
-        url = `/api/s?id=${_id}&latest`
+        url = `/s?id=${_id}&latest`
         const jwt = safeParseString(localStorage.getItem("jwt"))
         if (jwt) headers.Authorization = `Bearer ${jwt}`
       } else if (cache.has(_id)) {
diff --git a/src/components/column/dnd.tsx b/src/components/column/dnd.tsx
index 1f2bb2a..5d11213 100644
--- a/src/components/column/dnd.tsx
+++ b/src/components/column/dnd.tsx
@@ -25,10 +25,11 @@ import { currentSourcesAtom } from "~/atoms"
 export function Dnd() {
   const [items, setItems] = useAtom(currentSourcesAtom)
   useQuery({
-    queryKey: ["entries", items.sort()],
+    // sort in place
+    queryKey: ["entries", [...items].sort()],
     queryFn: async ({ queryKey }) => {
       const sources = queryKey[1]
-      const res: EntriesSourceResponse = await myFetch("/api/s/entries", {
+      const res: EntriesSourceResponse = await myFetch("/s/entries", {
         method: "POST",
         body: {
           sources,
diff --git a/src/components/header/menu.tsx b/src/components/header/menu.tsx
index b969338..dc150b7 100644
--- a/src/components/header/menu.tsx
+++ b/src/components/header/menu.tsx
@@ -14,7 +14,7 @@ function ThemeToggle() {
 }
 
 export function Menu() {
-  const { loggedIn, login, logout, userInfo } = useLogin()
+  const { loggedIn, login, logout, userInfo, enableLogin } = useLogin()
   const [shown, show] = useState(false)
   const ref = useRef<HTMLElement>(null)
   const isHover = useHoverDirty(ref)
@@ -25,7 +25,7 @@ export function Menu() {
     <span ref={ref} className="relative">
       <span className="flex items-center scale-90">
         {
-          loggedIn && userInfo.avatar
+          enableLogin && loggedIn && userInfo.avatar
             ? (
                 <button
                   type="button"
@@ -57,7 +57,7 @@ export function Menu() {
             }}
           >
             <ol className="bg-base bg-op-70! backdrop-blur-md p-2 rounded-lg color-base text-base">
-              {loggedIn
+              {enableLogin && (loggedIn
                 ? (
                     <li onClick={logout}>
                       <span className="i-ph:sign-out-duotone inline-block" />
@@ -69,7 +69,7 @@ export function Menu() {
                       <span className="i-ph:sign-in-duotone inline-block" />
                       <span>Github 账号登录</span>
                     </li>
-                  )}
+                  ))}
               <ThemeToggle />
               <li onClick={() => window.open(Homepage)}>
                 <span className="i-ph:github-logo-duotone inline-block" />
diff --git a/src/hooks/useLogin.ts b/src/hooks/useLogin.ts
index f2917bc..717f4fd 100644
--- a/src/hooks/useLogin.ts
+++ b/src/hooks/useLogin.ts
@@ -5,12 +5,32 @@ const userAtom = atomWithStorage<{
 
 const jwtAtom = atomWithStorage("jwt", "")
 
+const enableLoginAtom = atomWithStorage<{
+  enable: boolean
+  url?: string
+}>("login", {
+  enable: true,
+})
+
+enableLoginAtom.onMount = (set) => {
+  myFetch("/enable-login").then((r) => {
+    set(r)
+  }).catch((e) => {
+    if (e.statusCode === 506) {
+      set({ enable: false })
+      console.log("clear")
+    }
+  })
+}
+
 export function useLogin() {
   const userInfo = useAtomValue(userAtom)
   const jwt = useAtomValue(jwtAtom)
+  const enableLogin = useAtomValue(enableLoginAtom)
+
   const login = useCallback(() => {
-    window.location.href = __LOGIN_URL__
-  }, [])
+    window.location.href = enableLogin.url || "/api/login"
+  }, [enableLogin])
 
   const logout = useCallback(() => {
     window.localStorage.clear()
@@ -20,6 +40,7 @@ export function useLogin() {
   return {
     loggedIn: !!jwt,
     userInfo,
+    enableLogin: !!enableLogin.enable,
     logout,
     login,
   }
diff --git a/src/hooks/useRefetch.ts b/src/hooks/useRefetch.ts
index 0f1e27c..0647e5b 100644
--- a/src/hooks/useRefetch.ts
+++ b/src/hooks/useRefetch.ts
@@ -16,14 +16,26 @@ function initRefetchSources() {
 const refetchSourcesAtom = atom(initRefetchSources())
 export function useRefetch() {
   const [refetchSource, setRefetchSource] = useAtom(refetchSourcesAtom)
+  const { enableLogin, loggedIn, login } = useLogin()
+  const toaster = useToast()
 
   const refresh = useCallback((...sources: SourceID[]) => {
-    const obj = Object.fromEntries(sources.map(id => [id, Date.now()]))
-    setRefetchSource(prev => ({
-      ...prev,
-      ...obj,
-    }))
-  }, [setRefetchSource])
+    if (loggedIn) {
+      const obj = Object.fromEntries(sources.map(id => [id, Date.now()]))
+      setRefetchSource(prev => ({
+        ...prev,
+        ...obj,
+      }))
+    } else if (enableLogin) {
+      toaster("登录后可以强制拉取最新数据", {
+        type: "warning",
+        action: {
+          label: "登录",
+          onClick: login,
+        },
+      })
+    }
+  }, [setRefetchSource, loggedIn, toaster, login, enableLogin])
 
   const getRefreshId = useCallback((id: SourceID) => refetchSource[id], [refetchSource])
 
diff --git a/src/hooks/useSync.ts b/src/hooks/useSync.ts
index 2f619e2..eed936d 100644
--- a/src/hooks/useSync.ts
+++ b/src/hooks/useSync.ts
@@ -7,7 +7,7 @@ import { safeParseString } from "~/utils"
 async function uploadMetadata(metadata: PrimitiveMetadata) {
   const jwt = safeParseString(localStorage.getItem("jwt"))
   if (!jwt) return
-  await myFetch("/api/me/sync", {
+  await myFetch("/me/sync", {
     method: "POST",
     headers: {
       Authorization: `Bearer ${jwt}`,
@@ -22,7 +22,7 @@ async function uploadMetadata(metadata: PrimitiveMetadata) {
 async function downloadMetadata(): Promise<PrimitiveMetadata | undefined> {
   const jwt = safeParseString(localStorage.getItem("jwt"))
   if (!jwt) return
-  const { data, updatedTime } = await myFetch("/api/me/sync", {
+  const { data, updatedTime } = await myFetch("/me/sync", {
     headers: {
       Authorization: `Bearer ${jwt}`,
     },
diff --git a/src/main.tsx b/src/main.tsx
index c2edb19..8ce3557 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -10,8 +10,6 @@ const router = createRouter({
   context: {
     queryClient,
   },
-  defaultPreload: "intent",
-  defaultPreloadStaleTime: 0,
 })
 
 const rootElement = document.getElementById("app")!
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 6239d23..f228857 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -15,14 +15,6 @@ export const Route = createRootRouteWithContext<{
 }>()({
   component: RootComponent,
   notFoundComponent: NotFoundComponent,
-  beforeLoad: () => {
-    const query = new URLSearchParams(window.location.search)
-    if (query.has("login") && query.has("user") && query.has("jwt")) {
-      localStorage.setItem("user", query.get("user")!)
-      localStorage.setItem("jwt", JSON.stringify(query.get("jwt")!))
-      window.history.replaceState({}, document.title, window.location.pathname)
-    }
-  },
 })
 
 function NotFoundComponent() {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index fb7cbab..3f25d15 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -40,4 +40,5 @@ export class Timer {
 export const myFetch = $fetch.create({
   timeout: 15000,
   retry: 0,
+  baseURL: "/api",
 })
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 8b27661..3e977eb 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -2,4 +2,3 @@
 /// <reference types="vite-plugin-pwa/react" />
 /// <reference types="vite-plugin-pwa/info" />
 /// <reference lib="webworker" />
-declare const __LOGIN_URL__: string
diff --git a/vite.config.ts b/vite.config.ts
index 5379d58..752bc2e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,3 @@
-import process from "node:process"
 import { join } from "node:path"
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react-swc"
@@ -15,13 +14,6 @@ dotenv.config({
 })
 
 export default defineConfig({
-  define: {
-    __LOGIN_URL__: process.env.G_CLIENT_ID ? `"https://github.com/login/oauth/authorize?client_id=${process.env.G_CLIENT_ID}"` : `"/api/login"`,
-  },
-  build: {
-    sourcemap: true,
-    minify: false,
-  },
   resolve: {
     alias: {
       "~": join(projectDir, "src"),