moved views logic to types

src/blog/Blog.tsx

@@ -14,54 +14,7 @@ import Register from './components/Register';
 import Profile from './components/Profile';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
-
-type View =
-  | "home"
-  | "login"
-  | "register"
-  | "article"
-  | "editor"
-  | "profile"
-  | "create";
-
-type ViewNode = {
-  parent: View | null;
-  children?: View[];
-};
-
-const VIEW_TREE: Record<View, ViewNode> = {
-  home: {
-    parent: null,
-    children: ["login", "article", "profile", "create"],
-  },
-
-  login: {
-    parent: "home",
-    children: ["register"],
-  },
-
-  register: {
-    parent: "login",
-  },
-
-  article: {
-    parent: "home",
-    children: ["editor"],
-  },
-
-  editor: {
-    parent: "article",
-  },
-
-  profile: {
-    parent: "home",
-  },
-
-  create: {
-    parent: "home",
-  },
-};
-
+import { View, useViewRouter } from "./types/views";
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
@@ -72,42 +25,32 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
     view: "home" as View,
   });
 
-  const goBack = () => {
-    const parent = VIEW_TREE[ui.view].parent;
-    if (parent) setUI(prev => ({ ...prev, view: parent }));
-  };
-
-  const navigate = (view: View) => {
-    setUI(prev => ({ ...prev, view }));
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  };
-  const openLogin = () => navigate("login");
-  const openRegister = () => navigate("register");
-  const openProfile = () => navigate("profile");
-  const openCreate = () => navigate("create");
-  const openEditor = () => navigate("editor");
-
-  const openArticle = (i: number) => {
-    setUI({ selectedArticle: i, view: "article" });
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  };
+  const {
+    goBack,
+    openLogin,
+    openRegister,
+    openProfile,
+    openCreate,
+    openEditor,
+    openArticle,
+  } = useViewRouter(setUI);
 
   const renderView = () => {
     switch (ui.view) {
       case "login":
-        return <Login onBack={goBack} onRegister={openRegister} />;
+        return <Login onBack={() => goBack(ui.view)} onRegister={openRegister} />;
 
       case "register":
-        return <Register onBack={goBack} />;
+        return <Register onBack={() => goBack(ui.view)} />;
 
       case "profile":
-        return <Profile onBack={goBack} />;
+        return <Profile onBack={() => goBack(ui.view)} />;
 
       case "article":
         return (
           <ArticleView
             article={articles[ui.selectedArticle!]}
-            onBack={goBack}
+            onBack={() => goBack(ui.view)}
             onEdit={openEditor}
           />
         );
@@ -116,7 +59,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         return (
           <ArticleEditor
             article={ui.selectedArticle !== null ? articles[ui.selectedArticle] : null}
-            onBack={goBack}
+            onBack={() => goBack(ui.view)}
           />
         );
 

src/blog/types/views.ts

@@ -0,0 +1,71 @@
+// types.ts
+export type View =
+  | "home"
+  | "login"
+  | "register"
+  | "article"
+  | "editor"
+  | "profile"
+  | "create";
+
+export type ViewNode = {
+  parent: View | null;
+  children?: View[];
+};
+
+export const VIEW_TREE: Record<View, ViewNode> = {
+  home: {
+    parent: null,
+    children: ["login", "article", "profile", "create"],
+  },
+  login: {
+    parent: "home",
+    children: ["register"],
+  },
+  register: {
+    parent: "login",
+  },
+  article: {
+    parent: "home",
+    children: ["editor"],
+  },
+  editor: {
+    parent: "article",
+  },
+  profile: {
+    parent: "home",
+  },
+  create: {
+    parent: "home",
+  },
+};
+
+export function useViewRouter(setUI: React.Dispatch<any>) {
+  const navigate = (view: View) => {
+    setUI((prev: any) => ({ ...prev, view }));
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  const goBack = (currentView: View) => {
+    const parent = VIEW_TREE[currentView].parent;
+    if (parent) {
+      setUI((prev: any) => ({ ...prev, view: parent }));
+    }
+  };
+
+  const openArticle = (i: number) => {
+    setUI({ selectedArticle: i, view: "article" });
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return {
+    navigate,
+    goBack,
+    openLogin: () => navigate("login"),
+    openRegister: () => navigate("register"),
+    openProfile: () => navigate("profile"),
+    openCreate: () => navigate("create"),
+    openEditor: () => navigate("editor"),
+    openArticle,
+  };
+}