cleanup code for view

src/blog/Blog.tsx

@@ -13,6 +13,8 @@ import Register from './components/Register';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
 
+type View = 'home' | 'login' | 'register' | 'article';
+
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
   const { currentUser } = useAuth();
@@ -30,10 +32,69 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
 
   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 handleHideLogin = () => setShowLogin(false);
+  // derive a single source of truth for view
+  const view: View = React.useMemo(() => {
+    if (selectedArticle !== null) return 'article';
+    if (showRegister) return 'register';
+    if (showLogin) return 'login';
+    return 'home';
+  }, [selectedArticle, showLogin, showRegister]);
+
+  // render function keeps JSX tidy
+  const renderView = () => {
+    switch (view) {
+      case 'register':
+        return <Register onBack={handleHideAuth} />;
+      case 'login':
+        return (
+          <Login
+            onBack={handleHideAuth}
+            onRegister={() => {
+              handleShowRegister();
+            }}
+          />
+        );
+      case 'article':
+        if (selectedArticle == null || !articles[selectedArticle]) return null;
+        return <Article article={articles[selectedArticle]} onBack={handleBack} />;
+      case 'home':
+      default:
+        return (
+          <>
+            {!currentUser && (
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  onClick={handleShowLogin}>
+                  Login
+                </Button>
+              </Box>
+            )}
+
+            <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
+            <Latest
+              articles={articles}
+              onSelectArticle={handleSelectArticle}
+              onLoadMore={async () => {}}
+            />
+          </>
+        );
+    }
+  };
 
   if (loading) {
     return (
@@ -89,51 +150,13 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
             flexDirection: 'column',
             my: 4,
             gap: 4,
-            pb: selectedArticle === null && !showLogin && !showRegister ? 24 : 0, // ✅ adjusted footer padding
+            pb: view === 'home' ? 24 : 0,
           }}
         >
-          {showRegister ? (
+          {renderView()}
-            <Register
-              onBack={() => {
-                setShowRegister(false);
-                setShowLogin(false);
-              }}
-            />
-          ) : showLogin ? (
-            <Login
-              onBack={() => setShowLogin(false)}
-              onRegister={() => {
-                setShowLogin(false);
-                setShowRegister(true);
-              }}
-            />
-          ) : selectedArticle !== null ? (
-            <Article article={articles[selectedArticle]} onBack={handleBack} />
-          ) : (
-            <>
-              {!currentUser && (
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={() => setShowLogin(true)}
-                  >
-                    Login
-                  </Button>
-                </Box>
-              )}
-
-              <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
-              <Latest
-                articles={articles}
-                onSelectArticle={handleSelectArticle}
-                onLoadMore={async () => {}}
-              />
-            </>
-          )}
         </Container>
 
-        {selectedArticle === null && !showLogin && (
+        {view === 'home' && (
           <Box
             component="footer"
             sx={{