cleaner view for Blog

src/blog/Blog.tsx

@@ -21,136 +21,74 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
   const { currentUser } = useAuth();
 
-  const [selectedArticle, setSelectedArticle] = React.useState<number | null>(null);
-  const [showLogin, setShowLogin] = React.useState(false);
-  const [showRegister, setShowRegister] = React.useState(false);
-  const [showProfile, setShowProfile] = React.useState(false);
-  const [showEditor, setShowEditor] = React.useState(false);
+  const [ui, setUI] = React.useState({
+    selectedArticle: null as number | null,
+    view: "home" as View,
+  });
+  const show = (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 handleSelectArticle = (index: number) => {
-    setSelectedArticle(index);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleShowLogin = () => {
-    setShowLogin(true);
-    setShowRegister(false);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleShowRegister = () => {
-    setShowRegister(true);
-    setShowLogin(false);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleHideAuth = () => {
-    setShowLogin(false);
-    setShowRegister(false);
-  };
-  const handleShowProfile = () => {
-    setShowProfile(true);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleHideProfile = () => {
-    setShowProfile(false);
-  };
-  const handleShowEditor = () => {
-    setShowEditor(true);
-  };
-  const handleHideEditor = () => {
-    setShowEditor(false);
-  };
-  const handleArticleViewBack = () => setSelectedArticle(null);
-  const handleArticleEditorBack = () => {
-    handleHideEditor()
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+  const openArticle = (index: number) => {
+    setUI({ selectedArticle: index, view: "article" });
+    window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
-  // derive a single source of truth for view
-  const view: View = React.useMemo(() => {
-    if (selectedArticle !== null && !showEditor) return 'article';
-    if (showRegister) return 'register';
-    if (showLogin) return 'login';
-    if (showProfile) return 'profile';
-    if (showEditor) return 'editor';
-    return 'home';
-  }, [selectedArticle, showLogin, showRegister, showProfile, showEditor]);
+  const goHome = () => setUI({ selectedArticle: null, view: "home" });
 
-  // render function keeps JSX tidy
   const renderView = () => {
-    switch (view) {
-      case 'register':
-        return <Register onBack={handleHideAuth} />;
-      case 'login':
+    switch (ui.view) {
+      case "login":
+        return <Login onBack={goHome} onRegister={openRegister} />;
+
+      case "register":
+        return <Register onBack={goHome} />;
+
+      case "profile":
+        return <Profile onBack={goHome} />;
+
+      case "article":
         return (
-          <Login
-            onBack={handleHideAuth}
-            onRegister={() => {
-              handleShowRegister();
-            }}
+          <ArticleView
+            article={articles[ui.selectedArticle!]}
+            onBack={goHome}
+            onEdit={openEditor}
           />
         );
-      case 'profile':
+
+      case "editor":
         return (
-          <Profile
-            onBack={handleHideProfile}
+          <ArticleEditor
+            article={ui.selectedArticle !== null ? articles[ui.selectedArticle] : null}
+            onBack={goHome}
           />
         );
-      case 'article':
-        if (selectedArticle == null || !articles[selectedArticle]) return null;
-        return <ArticleView
-          article={articles[selectedArticle]}
-          onBack={handleArticleViewBack}
-          onEdit={handleShowEditor}
-        />;
-      case 'editor':
-        if (selectedArticle == null || !articles[selectedArticle])
-          return <ArticleEditor
-            onBack={handleArticleEditorBack}
-          />
-        return <ArticleEditor
-          article={articles[selectedArticle] || null}
-          onBack={handleArticleEditorBack}
-        />
-      case 'home':
+
       default:
         return (
           <>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2, gap: 1 }}>
+            <Box sx={{ display: "flex", justifyContent: "flex-end", mb: 2, gap: 1 }}>
               {!currentUser ? (
-                <>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleShowLogin}
-                  >
-                    Login
-                  </Button>
-                </>
+                <Button variant="outlined" onClick={openLogin}>Login</Button>
               ) : (
                 <>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleShowProfile}
-                  >
+                  <Button variant="outlined" onClick={openProfile}>
                     {currentUser.username}
                   </Button>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    onClick={handleShowEditor}
-                  >
+                  <Button variant="contained" onClick={openEditor}>
                     New Article
                   </Button>
                 </>
               )}
             </Box>
 
-            <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
-            <Latest
-              articles={articles}
-              onSelectArticle={handleSelectArticle}
-              onLoadMore={async () => {}}
-            />
+            <MainContent articles={articles} onSelectArticle={openArticle} />
+            <Latest articles={articles} onSelectArticle={openArticle} />
           </>
         );
     }
@@ -210,13 +148,13 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
             flexDirection: 'column',
             my: 4,
             gap: 4,
-            pb: view === 'home' ? 24 : 0,
+            pb: ui.view === 'home' ? 24 : 0,
           }}
         >
           {renderView()}
         </Container>
 
-        {view === 'home' && (
+        {ui.view === 'home' && (
           <Box
             component="footer"
             sx={{

src/blog/types/props.ts

@@ -13,7 +13,7 @@ export interface ArticleProps {
 }
 
 export interface ArticleEditorProps {
-  article?: ArticleModel;
+  article?: ArticleModel | null;
   onBack: () => void;
 }