hierarchy wise view

src/blog/Blog.tsx

@@ -15,7 +15,53 @@ import Profile from './components/Profile';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
 
-type View = 'home' | 'login' | 'register' | 'article' | 'profile' | 'editor';
+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",
+  },
+};
+
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
@@ -25,38 +71,43 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
     selectedArticle: null as number | null,
     view: "home" as View,
   });
-  const show = (view: 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 = () => show("login");
-  const openRegister = () => show("register");
-  const openProfile = () => show("profile");
-  const openEditor = () => show("editor");
+  const openLogin = () => navigate("login");
+  const openRegister = () => navigate("register");
+  const openProfile = () => navigate("profile");
+  const openCreate = () => navigate("create");
+  const openEditor = () => navigate("editor");
 
-  const openArticle = (index: number) => {
-    setUI({ selectedArticle: index, view: "article" });
+  const openArticle = (i: number) => {
+    setUI({ selectedArticle: i, view: "article" });
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
-  const goHome = () => setUI({ selectedArticle: null, view: "home" });
-
   const renderView = () => {
     switch (ui.view) {
       case "login":
-        return <Login onBack={goHome} onRegister={openRegister} />;
+        return <Login onBack={goBack} onRegister={openRegister} />;
 
       case "register":
-        return <Register onBack={goHome} />;
+        return <Register onBack={goBack} />;
 
       case "profile":
-        return <Profile onBack={goHome} />;
+        return <Profile onBack={goBack} />;
 
       case "article":
         return (
           <ArticleView
             article={articles[ui.selectedArticle!]}
-            onBack={goHome}
+            onBack={goBack}
             onEdit={openEditor}
           />
         );
@@ -65,7 +116,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         return (
           <ArticleEditor
             article={ui.selectedArticle !== null ? articles[ui.selectedArticle] : null}
-            onBack={goHome}
+            onBack={goBack}
           />
         );
 
@@ -80,7 +131,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
                   <Button variant="outlined" onClick={openProfile}>
                     {currentUser.username}
                   </Button>
-                  <Button variant="contained" onClick={openEditor}>
+                  <Button variant="contained" onClick={openCreate}>
                     New Article
                   </Button>
                 </>