feat(router): migrate to declarative view-based navigation system

- Introduce unified View hierarchy (VIEW_TREE) with parent/child relationships
- Add useViewRouter for navigate(), goBack(), openArticle(), and dynamic child navigation
- Replace legacy boolean-based view flags with single ui.view state
- Implement dynamic component rendering via VIEW_COMPONENTS map
- Add HomeView wrapper and integrate dynamic navigation props
- Update ArticleView to use open_editor and new ArticleViewProps
- Adjust ArticleEditor props type to accept null article
- Normalize navigation prop naming (open_* passed as onBack/onEdit via router)
- Enforce validation: prevent article updates without logged-in user
- Remove old conditional rendering/switch blocks and simplify Blog.tsx
- Version bump: 0.2.3 → 0.2.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "private": true,
   "scripts": {
     "dev": "vite",

src/blog/Blog.tsx

@@ -14,146 +14,124 @@ import Register from './components/Register';
 import Profile from './components/Profile';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
+import { View, useViewRouter } from "./types/views";
+import { ArticleModel } from "./types/models";
+import { ArticleViewProps, ArticleEditorProps } from "./types/props";
 
-type View = 'home' | 'login' | 'register' | 'article' | 'profile' | 'editor';
+function HomeView({ currentUser, open_login, open_profile, open_create, articles, openArticle }: any) {
+  return (
+    <>
+      <Box sx={{ display: "flex", justifyContent: "flex-end", mb: 2, gap: 1 }}>
+        {!currentUser ? (
+          <Button variant="outlined" onClick={open_login}>Login</Button>
+        ) : (
+          <>
+            <Button variant="outlined" onClick={open_profile}>
+              {currentUser.username}
+            </Button>
+            <Button variant="contained" onClick={open_create}>
+              New Article
+            </Button>
+          </>
+        )}
+      </Box>
+
+      <MainContent articles={articles} onSelectArticle={openArticle} />
+      <Latest articles={articles} onSelectArticle={openArticle} />
+    </>
+  );
+}
 
 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 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 {
+    goBack,
+    navigateToChildren,
+    openArticle,
+  } = useViewRouter(setUI);
+
+  type RouterContext = {
+    ui: any;
+    articles: ArticleModel[];
+    currentUser: any;
+    openArticle: (index: number) => void;
   };
 
-  // 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]);
+  type ViewComponentEntry<P> = {
+    component: React.ComponentType<P>;
+    extraProps?: (ctx: RouterContext) => Partial<P>;
+  };
+
+  const VIEW_COMPONENTS: Record<View, ViewComponentEntry<any>> = {
+    home: {
+      component: HomeView,
+    },
+
+    login: {
+      component: Login,
+    },
+
+    register: {
+      component: Register,
+    },
+
+    profile: {
+      component: Profile,
+    },
+
+    article: {
+      component: ArticleView,
+      extraProps: ({ ui, articles }) => ({
+        article: articles[ui.selectedArticle!],
+      }) satisfies Partial<ArticleViewProps>,
+    },
+
+    editor: {
+      component: ArticleEditor,
+      extraProps: ({ ui, articles }) => ({
+        article: ui.selectedArticle !== null ? articles[ui.selectedArticle] : null,
+      }) satisfies Partial<ArticleEditorProps>,
+    },
+
+    create: {
+      component: ArticleEditor,
+      extraProps: () => ({
+        article: null,
+      }) satisfies Partial<ArticleEditorProps>,
+    },
+  };
 
-  // render function keeps JSX tidy
   const renderView = () => {
-    switch (view) {
-      case 'register':
-        return <Register onBack={handleHideAuth} />;
-      case 'login':
-        return (
-          <Login
-            onBack={handleHideAuth}
-            onRegister={() => {
-              handleShowRegister();
-            }}
-          />
-        );
-      case 'profile':
-        return (
-          <Profile
-            onBack={handleHideProfile}
-          />
-        );
-      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 }}>
-              {!currentUser ? (
-                <>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleShowLogin}
-                  >
-                    Login
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleShowProfile}
-                  >
-                    {currentUser.username}
-                  </Button>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    onClick={handleShowEditor}
-                  >
-                    New Article
-                  </Button>
-                </>
-              )}
-            </Box>
+    const entry = VIEW_COMPONENTS[ui.view];
+    const ViewComponent = entry.component;
 
-            <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
-            <Latest
-              articles={articles}
-              onSelectArticle={handleSelectArticle}
-              onLoadMore={async () => {}}
-            />
-          </>
-        );
-    }
+    const childNav = navigateToChildren(ui.view);
+
+    const ctx: RouterContext = {
+      ui,
+      articles,
+      currentUser,
+
+      openArticle,
+    };
+
+    const extraProps = entry.extraProps ? entry.extraProps(ctx) : {};
+
+    return (
+      <ViewComponent
+        {...ctx}
+        {...childNav}
+        onBack={() => goBack(ui.view)}
+        {...extraProps}
+      />
+    );
   };
 
   if (loading) {
@@ -210,13 +188,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/components/Article/ArticleEditor.tsx

@@ -179,6 +179,7 @@ export default function ArticleView({
               title,
               tag,
               img,
+              description,
               content,
             })
           }

src/blog/components/Article/ArticleView.tsx

@@ -5,7 +5,8 @@ import { styled } from '@mui/material/styles';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import { ArticleMeta } from "../ArticleMeta";
-import { ArticleProps } from '../../types/props';
+import { ArticleViewProps } from '../../types/props';
+import {useAuth} from "../../providers/Author";
 
 const ArticleContainer = styled(Box)(({ theme }) => ({
   maxWidth: '800px',
@@ -27,25 +28,31 @@ const CoverImage = styled('img')({
 export default function ArticleView({
   article,
   onBack,
-  onEdit,
-}: ArticleProps) {
+  open_editor,
+}: ArticleViewProps) {
+
+  const { currentUser } = useAuth();
+  const onEdit = open_editor;
 
   return (
     <ArticleContainer>
-      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        mb: 2,
+      }}
+    >
+      <IconButton onClick={onBack}>
         <ArrowBackRoundedIcon />
       </IconButton>
 
-      <Chip
-        label={article.tag}
-        variant="outlined"
-        color="primary"
-        sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
-      />
-
-      <IconButton onClick={onEdit} sx={{ mb: 2 }}>
-        <EditRoundedIcon />
-      </IconButton>
+      {currentUser && (
+        <IconButton onClick={onEdit}>
+          <EditRoundedIcon />
+        </IconButton>
+      )}
+    </Box>
 
       <Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
         {article.title}
@@ -55,7 +62,21 @@ export default function ArticleView({
 
       <Divider sx={{ my: 3 }} />
 
-      <CoverImage src={article.img} alt={article.title} />
+      <Chip
+        label={article.tag}
+        variant="outlined"
+        color="primary"
+        sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
+      />
+
+      <CoverImage
+        src={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
+        alt={article.title}
+      />
 
       <Box
         sx={{

src/blog/components/ArticleCards/ArticleCardSize12.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { CardMedia, Typography } from '@mui/material';
+import { ArticleMeta } from "../ArticleMeta";
+import { ArticleCardProps } from "../../types/props";
+import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles";
+
+
+export default function ArticleCardSize12({
+  article,
+  index,
+  focusedCardIndex,
+  onSelectArticle,
+  onFocus,
+  onBlur,
+}: ArticleCardProps) {
+  return (
+    <StyledCard
+      variant="outlined"
+      onClick={() => onSelectArticle(index)}
+      onFocus={() => onFocus(index)}
+      onBlur={onBlur}
+      tabIndex={0}
+      className={focusedCardIndex === index ? 'Mui-focused' : ''}
+    >
+      <CardMedia
+        component="img"
+        alt={article.title}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
+        sx={{
+          aspectRatio: '16 / 9',
+        }}
+      />
+      <StyledCardContent>
+        <Typography gutterBottom variant="caption" component="div">
+          {article.tag}
+        </Typography>
+        <Typography gutterBottom variant="h6" component="div">
+          {article.title}
+        </Typography>
+        <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+          {article.description}
+        </StyledTypography>
+      </StyledCardContent>
+      <ArticleMeta article={article} />
+    </StyledCard>
+  );
+};

src/blog/components/ArticleCards/ArticleCardSize4.tsx

@@ -24,7 +24,7 @@ export default function ArticleCardSize4({
     >
       <CardMedia
         component="img"
-        alt="green iguana"
+        alt={article.title}
         image={(
           import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
           "/" +

src/blog/components/ArticleCards/ArticleCardsGrid.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Grid, Box } from '@mui/material';
+import ArticleCardSize12 from './ArticleCardSize12';
 import ArticleCardSize6 from './ArticleCardSize6';
 import ArticleCardSize4 from './ArticleCardSize4';
 import ArticleCardSize2 from './ArticleCardSize2';
@@ -10,6 +11,7 @@ export default function ArticleCardsGrid({
   articles,
   onSelectArticle,
   xs = 12,
+  md12 = 12,
   md6 = 6,
   md4 = 4,
   nested = 2,
@@ -30,8 +32,9 @@ export default function ArticleCardsGrid({
     setFocusedCardIndex(null);
   };
 
-  const renderCard = (article: ArticleModel, index: number, type: '6' | '4' | '2' = '6') => {
+  const renderCard = (article: ArticleModel, index: number, type: '12' | '6' | '4' | '2' = '12') => {
     const CardComponent =
+      type === '12' ? ArticleCardSize12 :
       type === '6' ? ArticleCardSize6 :
       type === '4' ? ArticleCardSize4 :
       ArticleCardSize2;
@@ -51,6 +54,17 @@ export default function ArticleCardsGrid({
 
   return (
     <Grid container spacing={2} columns={12}>
+      {/* ---- 1 article: 12 ---- */}
+      {count === 1 && (
+        <>
+          {visibleArticles.map((a, i) => (
+            <Grid key={i} size={{ xs, md: md12 }}>
+              {renderCard(a, i, '12')}
+            </Grid>
+          ))}
+        </>
+      )}
+
       {/* ---- 2 articles: 6 | 6 ---- */}
       {count === 2 && (
         <>

src/blog/providers/Article.tsx

@@ -10,15 +10,38 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
   const [articles, setArticles] = useState<ArticleModel[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const { token } = useAuth();
+  const { token, currentUser } = useAuth();
+
+  const upsertArticleInList = (updated: ArticleModel) => {
+    setArticles(prev => {
+      const exists = prev.some(a => a._id === updated._id);
+      if (exists) {
+        // UPDATE → replace item
+        return prev.map(a => (a._id === updated._id ? updated : a));
+      } else {
+        // CREATE → append to top
+        return [updated, ...prev];
+      }
+    });
+  };
 
   /** 🔹 Author IDs must be strings for API, so we normalize here */
-  const normalizeArticleForApi = (article: Partial<ArticleModel>) => ({
-    ...article,
-    authors: (article.authors ?? []).map(a =>
-      a._id
-    ),
-  });
+  const normalizeArticleForApi = (article: Partial<ArticleModel>) => {
+    // Extract existing authors as a list of IDs (string[])
+    const existingIds = (article.authors ?? []).map(a =>
+      typeof a === "string" ? a : a._id
+    );
+
+    // Inject currentUser if missing
+    const allAuthorIds = currentUser?._id
+      ? Array.from(new Set([...existingIds, currentUser._id])) // dedupe
+      : existingIds;
+
+    return {
+      ...article,
+      authors: allAuthorIds,
+    };
+  };
 
   /** 🔹 Fetch articles (JWT automatically attached by api.ts interceptor) */
   const fetchArticles = async () => {
@@ -43,6 +66,10 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
       console.error('updateArticle called without _id');
       return;
     }
+    if (!currentUser) {
+      console.error('updateArticle called without logged in user');
+      return;
+    }
 
     const normalizedArticleData = normalizeArticleForApi(articleData);
     try {
@@ -50,6 +77,7 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
       setError(null);
 
       const res = await api.put<ArticleModel>(`/articles/${articleData._id}`, normalizedArticleData);
+      upsertArticleInList(res.data);
       return res.data;
     } catch (err: any) {
       console.error('Article update failed:', err);
@@ -72,6 +100,7 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
       setError(null);
 
       const res = await api.post<ArticleModel>(`/articles`, normalizedArticleData);
+      upsertArticleInList(res.data);
       return res.data;
     } catch (err: any) {
       console.error('Article create failed:', err);

src/blog/types/props.ts

@@ -6,14 +6,15 @@ export interface LatestProps {
   onLoadMore?: (offset: number, limit: number) => Promise<void>; // optional async callback
 }
 
-export interface ArticleProps {
+export interface ArticleViewProps {
   article: ArticleModel;
   onBack: () => void;
-  onEdit: () => void;
+  open_editor: () => void;
 }
 
+
 export interface ArticleEditorProps {
-  article?: ArticleModel;
+  article?: ArticleModel | null;
   onBack: () => void;
 }
 
@@ -34,6 +35,7 @@ export interface ArticleGridProps {
   articles: ArticleModel[];
   onSelectArticle: (index: number) => void;
   xs?: number;  // default 12 for mobile full-width
+  md12?: number, // default 12 (full-width)
   md6?: number; // default 6 (half-width)
   md4?: number; // default 4 (third-width)
   nested?: 1 | 2; // number of stacked cards in a nested column

src/blog/types/views.ts

@@ -0,0 +1,72 @@
+export type View =
+  | "home"
+  | "login"
+  | "register"
+  | "article"
+  | "editor"
+  | "profile"
+  | "create";
+
+export type ViewNode = {
+  parent: View | null;
+  children?: View[];
+};
+
+export 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 function useViewRouter(setUI: any) {
+  const navigate = (view: View) => {
+    setUI((prev: any) => ({ ...prev, view }));
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  // auto back logic from parent
+  const goBack = (view: View) => {
+    const parent = VIEW_TREE[view].parent;
+    if (parent) navigate(parent);
+  };
+
+  const openArticle = (i: number) => {
+    setUI({ selectedArticle: i, view: "article" });
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  // auto child navigators from children[]
+  const navigateToChildren = (view: View) => {
+    const node = VIEW_TREE[view];
+    const funcs: Record<string, () => void> = {};
+
+    node.children?.forEach((child) => {
+      funcs[`open_${child}`] = () => navigate(child);
+    });
+
+    return funcs;
+  };
+
+  return { navigate, goBack, openArticle, navigateToChildren };
+}