From 479ffb736ccb1ef47c4ac3e02ea229f0bde42b1c Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Tue, 18 Nov 2025 16:14:47 +0530 Subject: [PATCH] hierarchy wise view --- src/blog/Blog.tsx | 83 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 67 insertions(+), 16 deletions(-) diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx index 5e5554d..98bf874 100644 --- a/src/blog/Blog.tsx +++ b/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 = { + 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 ; + return ; case "register": - return ; + return ; case "profile": - return ; + return ; case "article": return ( ); @@ -65,7 +116,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) { return ( ); @@ -80,7 +131,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) { -