feat: initial settings and current user

src/app/Boundary.tsx

@@ -5,11 +5,12 @@ import {
   Spinner,
 } from "@hope-ui/solid";
 import { I18nContext } from "@solid-primitives/i18n";
-import { ErrorBoundary, JSX, Suspense } from "solid-js";
+import { ErrorBoundary, JSXElement, Suspense } from "solid-js";
+import { FullScreenLoading } from "~/components/FullScreenLoading";
 import { i18n } from "./i18n";
 import { globalStyles, theme } from "./theme";
 
-const Boundary = (props: { children: JSX.Element }) => {
+const Boundary = (props: { children: JSXElement }) => {
   globalStyles();
   return (
     <ErrorBoundary
@@ -21,19 +22,7 @@ const Boundary = (props: { children: JSX.Element }) => {
       <I18nContext.Provider value={i18n}>
         <HopeProvider config={theme}>
           <NotificationsProvider duration={2000}>
-            <Suspense
-              fallback={
-                <Center h="100vh">
-                  <Spinner
-                    thickness="4px"
-                    speed="0.65s"
-                    emptyColor="$neutral4"
-                    color="$info10"
-                    size="xl"
-                  />
-                </Center>
-              }
-            >
+            <Suspense fallback={<FullScreenLoading />}>
               {props.children}
             </Suspense>
           </NotificationsProvider>

src/app/MustUser.tsx

@@ -0,0 +1,22 @@
+import { Center } from "@hope-ui/solid";
+import { Route, Routes } from "solid-app-router";
+import { createEffect, JSXElement, lazy, Match, Switch } from "solid-js";
+import { FullScreenLoading } from "~/components/FullScreenLoading";
+import { err, state, State } from "~/store/state";
+import { resetUser } from "~/store/user";
+
+const MustUser = (props: { children: JSXElement }) => {
+  resetUser();
+  return (
+    <Switch fallback={props.children}>
+      <Match when={state() === State.FetchingCurrentUser}>
+        <FullScreenLoading />
+      </Match>
+      <Match when={state() === State.FetchingCurrentUserError}>
+        <Center>{err()}</Center>
+      </Match>
+    </Switch>
+  );
+};
+
+export { MustUser };

src/app/index.tsx

@@ -1,11 +1,15 @@
-import { Progress, ProgressIndicator } from "@hope-ui/solid";
+import { Center, Progress, ProgressIndicator } from "@hope-ui/solid";
 import { Route, Routes, useIsRouting } from "solid-app-router";
-import { Component, lazy, onCleanup } from "solid-js";
+import { Component, lazy, Match, onCleanup, Switch } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Boundary } from "./Boundary";
 import { useRouter } from "~/hooks/useRouter";
 import { globalStyles } from "./theme";
 import { bus } from "~/utils/bus";
+import { err, State, state } from "~/store/state";
+import { FullScreenLoading } from "~/components/FullScreenLoading";
+import { initSettings } from "~/store/settings";
+import { MustUser } from "./MustUser";
 
 const Index = lazy(() => import("~/pages/index"));
 const Manage = lazy(() => import("~/pages/manage"));
@@ -23,6 +27,7 @@ const App: Component = () => {
   onCleanup(() => {
     bus.off("to", onTo);
   });
+  initSettings();
   return (
     <Boundary>
       <Portal>
@@ -39,12 +44,37 @@ const App: Component = () => {
           <ProgressIndicator />
         </Progress>
       </Portal>
-      <Routes>
-        <Route path="/@test" component={Test} />
-        <Route path="/@login" component={Login} />
-        <Route path="/@manage/*" component={Manage} />
-        <Route path="*" component={Index} />
-      </Routes>
+      <Switch
+        fallback={
+          <Routes>
+            <Route path="/@test" component={Test} />
+            <Route path="/@login" component={Login} />
+            <Route
+              path="/@manage/*"
+              element={
+                <MustUser>
+                  <Manage />
+                </MustUser>
+              }
+            />
+            <Route
+              path="*"
+              element={
+                <MustUser>
+                  <Index />
+                </MustUser>
+              }
+            />
+          </Routes>
+        }
+      >
+        <Match when={state() === State.FetchingSettings}>
+          <FullScreenLoading />
+        </Match>
+        <Match when={state() === State.FetchingSettingsError}>
+          <Center>{err}</Center>
+        </Match>
+      </Switch>
     </Boundary>
   );
 };

src/components/FullScreenLoading.tsx

@@ -0,0 +1,18 @@
+import {Center,Spinner} from '@hope-ui/solid'
+const FullScreenLoading = () => {
+  return (
+    <Center h="100vh">
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="$neutral4"
+        color="$info10"
+        size="xl"
+      />
+    </Center>
+  );
+};
+
+export {
+  FullScreenLoading,
+}

src/pages/manage/index.tsx

@@ -3,13 +3,20 @@ import { SwitchColorMode } from "~/components/SwitchColorMode";
 import { SwitchLnaguage } from "~/components/SwitchLanguage";
 import { useT } from "~/hooks/useT";
 import { useTitle } from "~/hooks/useTitle";
+import { user } from "~/store/user";
 import { Header } from "./Header";
 import { SideMenu } from "./SideMenu";
 import { side_menu_items } from "./sidemenu_items";
+import { UserMethods } from "~/types/user";
+import { useRouter } from "~/hooks/useRouter";
 
 const Manage = () => {
   const t = useT();
-  useTitle(()=>t("manage.title"));
+  useTitle(() => t("manage.title"));
+  const { to } = useRouter();
+  if (UserMethods.is_guest(user()!)) {
+    to("/@login");
+  }
   return (
     <Box>
       <Header />

src/store/settings.ts

@@ -1,5 +1,6 @@
 import { Resp } from "~/types/resp";
 import { r } from "~/utils/request";
+import { setErr, setState, State } from "./state";
 const settings: Record<string, string> = {};
 
 export const initSettings = async () => {
@@ -8,6 +9,9 @@ export const initSettings = async () => {
     Object.keys(resp.data).forEach((key) => {
       settings[key] = resp.data[key];
     });
+    setState(State.FetchingSettingsSuccess);
+  } else {
+    setErr(resp.message);
   }
 };
 

src/store/state.ts

@@ -3,13 +3,20 @@ import { createSignal } from "solid-js";
 export enum State {
   Initial, // Initial state
   FetchingSettings,
+  FetchingSettingsError,
+  FetchingSettingsSuccess,
+  FetchingCurrentUser,
+  FetchingCurrentUserError,
+  FetchingCurrentUserSuccess,
   FetchingObj,
   FetchingObjs,
   TokenExpired, // Token expired
   Folder, // Folder state
   File, // File state
 }
 
-const [state, setState] = createSignal<State>(State.Initial);
+const [state, setState] = createSignal<State>(State.FetchingSettings);
+const [err, setErr] = createSignal<string>("");
 
 export { state, setState };
+export { err, setErr };

src/store/user.ts

@@ -2,12 +2,17 @@ import { createSignal } from "solid-js";
 import { Resp } from "~/types/resp";
 import { User } from "~/types/user";
 import { r } from "~/utils/request";
+import { setState, State } from "./state";
 
 const [user, setUser] = createSignal<User>();
 const resetUser = async () => {
-  const resp: Resp<User> = (await r.get("/auth/current")).data;
+  setState(State.FetchingCurrentUser);
+  const resp: Resp<User> = await r.get("/auth/current");
   if (resp.code === 200) {
     setUser(resp.data);
+    setState(State.FetchingCurrentUserSuccess);
+  } else {
+    setState(State.FetchingCurrentUserError);
   }
 };