From 3a3f44c5b59d97ac46e23fc4c04e64fa517dd0dc Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Tue, 18 Nov 2025 16:28:41 +0530 Subject: [PATCH] moved views logic to types --- src/blog/Blog.tsx | 87 +++++++---------------------------------- src/blog/types/views.ts | 71 +++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 72 deletions(-) create mode 100644 src/blog/types/views.ts diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx index 98bf874..10230e7 100644 --- a/src/blog/Blog.tsx +++ b/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 = { - 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 ; + return goBack(ui.view)} onRegister={openRegister} />; case "register": - return ; + return goBack(ui.view)} />; case "profile": - return ; + return goBack(ui.view)} />; case "article": return ( goBack(ui.view)} onEdit={openEditor} /> ); @@ -116,7 +59,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) { return ( goBack(ui.view)} /> ); diff --git a/src/blog/types/views.ts b/src/blog/types/views.ts new file mode 100644 index 0000000..d805787 --- /dev/null +++ b/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 = { + 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) { + 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, + }; +}