feat(core): migrate articles to ArticlesModel, add URL-synced view routing, and unify component props

Summary

Introduced ArticlesModel abstraction with list + map store for fast lookup and clean CRUD operations.

Replaced all array-based article access with model methods (readById, create, update, refresh).

Added utils/articles.ts with pure functions for list/map operations.

Updated ArticleProvider to use the new model API and avoid mutation issues.

Added URL-synced navigation (pushState) + VIEW_URL mapping for deep-linkable routes.

Implemented route parsing on load (/articles/:id) to auto-open article view.

Standardized openArticle to pass full ArticleModel instead of index.

Updated all ArticleCard components to use article object instead of index.

Added navigationMap to view router for custom child navigation names.

Extracted shared styles to types/styles.ts and replaced old inline styled components.

Updated props definitions for Login, Register, Profile, ArticleView, MainContent, ArticleGrid.

Removed React.StrictMode wrapper to avoid double-effects during development.

Release: 0.2.5
Type: Feature + Refactor + Routing upgrade

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.2.0",
+  "version": "0.2.5",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,9 @@
     "@mui/icons-material": "latest",
     "react": "latest",
     "react-dom": "latest",
+    "react-markdown": "latest",
     "markdown-to-jsx": "latest",
+    "remark-gfm": "latest",
     "marked": "latest",
     "axios": "latest"
   },

src/blog/Blog.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import AppTheme from '../shared-theme/AppTheme';
 import MainContent from './components/MainContent';
-import Article from './components/Article';
+import ArticleView from './components/Article/ArticleView';
+import ArticleEditor from './components/Article/ArticleEditor';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
 import Login from './components/Login';
@@ -13,116 +15,161 @@ 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, ArticlesModel } from "./types/models";
+import { ArticleViewProps, ArticleEditorProps } from "./types/props";
 
-type View = 'home' | 'login' | 'register' | 'article' | 'profile';
+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 [ui, setUI] = React.useState({
-  const [showLogin, setShowLogin] = React.useState(false);
+    selectedArticle: null as ArticleModel | null,
-  const [showRegister, setShowRegister] = React.useState(false);
+    view: "home" as View,
-  const [showProfile, setShowProfile] = React.useState(false);
+  });
 
-  const handleSelectArticle = (index: number) => {
+  useEffect(() => {
-    setSelectedArticle(index);
+    if (loading) return;
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
 
-  const handleBack = () => setSelectedArticle(null);
+    const path = window.location.pathname;
+    const parts = path.split('/').filter(Boolean);
 
-  const handleShowLogin = () => {
+    if (parts[0] === 'articles' && parts[1]) {
-    setShowLogin(true);
+      const id = parts[1];
-    setShowRegister(false);
+      const article = articles.readById(id);
-    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);
-  };
 
-  // derive a single source of truth for view
+      if (article) {
-  const view: View = React.useMemo(() => {
+        setUI({
-    if (selectedArticle !== null) return 'article';
+          selectedArticle: article,
-    if (showRegister) return 'register';
+          view: 'article',
-    if (showLogin) return 'login';
+        });
-    if (showProfile) return 'profile';
+      }
-    return 'home';
-  }, [selectedArticle, showLogin, showRegister, showProfile]);
-
-  // 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 <Article article={articles[selectedArticle]} onBack={handleBack} />;
-      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={() => setShowProfile(true)}
-                  >
-                    {currentUser.username}
-                  </Button>
-                </>
-              )}
-            </Box>
-
-            <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
-            <Latest
-              articles={articles}
-              onSelectArticle={handleSelectArticle}
-              onLoadMore={async () => {}}
-            />
-          </>
-        );
     }
+  }, [loading]);
+
+  const {
+    goBack,
+    navigateToChildren,
+    openArticle,
+  } = useViewRouter(setUI);
+
+  type RouterContext = {
+    ui: any;
+    articles: ArticlesModel;
+    currentUser: any;
+    openArticle: (article: ArticleModel) => void;
+  };
+
+  type ViewComponentEntry<P> = {
+    component: React.ComponentType<P>;
+    extraProps?: (ctx: RouterContext) => Partial<P>;
+    navigationMap?: Record<string, string>;
+  };
+
+  const VIEW_COMPONENTS: Record<View, ViewComponentEntry<any>> = {
+    home: {
+      component: HomeView,
+    },
+
+    login: {
+      component: Login,
+      navigationMap: {
+        open_register: 'onRegister',
+      },
+    },
+
+    register: {
+      component: Register,
+    },
+
+    profile: {
+      component: Profile,
+    },
+
+    article: {
+      component: ArticleView,
+      navigationMap: {
+        open_editor: 'onEdit',
+      },
+      extraProps: ({ ui, articles }) => ({
+        article: articles.readById(ui.selectedArticle._id),
+      }) satisfies Partial<ArticleViewProps>,
+    },
+
+    editor: {
+      component: ArticleEditor,
+      extraProps: ({ ui, articles }) => ({
+        article: ui.selectedArticle !== null ? articles.readById(ui.selectedArticle._id) : null,
+      }) satisfies Partial<ArticleEditorProps>,
+    },
+
+    create: {
+      component: ArticleEditor,
+      extraProps: () => ({
+        article: null,
+      }) satisfies Partial<ArticleEditorProps>,
+    },
+  };
+
+  const renderView = () => {
+    const entry = VIEW_COMPONENTS[ui.view];
+    const navigationMap= entry['navigationMap'] || {}
+    const ViewComponent = entry.component;
+
+    const childNav = navigateToChildren(
+      ui.view,
+      navigationMap
+    );
+
+    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) {
@@ -179,13 +226,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

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { Box, Typography, Divider, IconButton, TextField, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import { ArticleEditorProps } from '../../types/props';
+import { ArticleModel } from "../../types/models";
+import { useUpload } from "../../providers/Upload";
+import { useArticles } from "../../providers/Article";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import ImageUploadField from "../ImageUploadField";
+
+const ArticleContainer = styled(Box)(({ theme }) => ({
+  maxWidth: '800px',
+  margin: '0 auto',
+  padding: theme.spacing(4),
+  [theme.breakpoints.down('sm')]: {
+    padding: theme.spacing(2),
+  },
+}));
+
+const CoverImage = styled('img')({
+  width: '100%',
+  height: 'auto',
+  borderRadius: '12px',
+  marginTop: '16px',
+  marginBottom: '24px',
+});
+
+export default function ArticleView({
+  article,
+  onBack,
+}: ArticleEditorProps) {
+
+  const { uploadFile } = useUpload();
+  const { updateArticle, createArticle } = useArticles();
+
+  const [title, setTitle] = React.useState(article?.title ?? "");
+  const [description, setDescription] = React.useState(article?.description ?? "");
+  const [tag, setTag] = React.useState(article?.tag ?? "");
+  const [img, setImg] = React.useState(article?.img ?? "");
+  const [uploadingCoverImage, setUploadingCoverImage] = React.useState(false);
+  const [content, setContent] = React.useState(article?.content ?? "");
+
+  const handleCoverImageUpload = async (file: File) => {
+    setUploadingCoverImage(true);
+
+    try {
+      const img = await uploadFile(file);
+      if (img) {
+        setImg(img);
+      }
+    } catch (err) {
+      console.error("Avatar upload failed:", err);
+    } finally {
+      setUploadingCoverImage(false);
+    }
+  };
+
+  const handleSaveArticle = async (articleData: Partial<ArticleModel>) => {
+    // If _id exists → UPDATE
+    if (articleData._id) {
+      console.log("Updating article with ID:", articleData._id);
+      return await updateArticle(articleData as ArticleModel);
+    }
+
+    // No _id → CREATE
+    console.log("Creating new article:", articleData);
+    return await createArticle(articleData as ArticleModel);
+  };
+
+  return (
+    <ArticleContainer>
+      {/* BACK BUTTON */}
+      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+        <ArrowBackRoundedIcon />
+      </IconButton>
+
+      {/* TAG */}
+      <TextField
+        label="Tag"
+        fullWidth
+        value={tag}
+        onChange={(e) => setTag(e.target.value)}
+        sx={{ mb: 2 }}
+      />
+
+      {/* TITLE */}
+      <TextField
+        label="Title"
+        fullWidth
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        sx={{ mb: 3 }}
+      />
+
+      {/* DESCRIPTION */}
+      <TextField
+        label="Description"
+        fullWidth
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        sx={{ mb: 3 }}
+      />
+
+      <Divider sx={{ mb: 3 }} />
+
+      <ImageUploadField
+        label="Cover Image"
+        value={img}
+        uploading={uploadingCoverImage}
+        onUpload={handleCoverImageUpload}
+        size={128}
+      />
+
+      <Divider sx={{ mb: 3 }} />
+
+      {/* MARKDOWN EDITOR */}
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'stretch'
+      }}>
+        <Typography variant="h6">Content</Typography>
+
+        <Box
+          component="textarea"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          style={{
+            width: '100%',
+            minHeight: '300px',
+            padding: '16px',
+            borderRadius: '8px',
+            border: '1px solid rgba(255,255,255,0.2)',
+            background: 'transparent',
+            color: 'inherit',
+            fontFamily: 'monospace',
+            fontSize: '16px',
+            lineHeight: 1.6,
+            resize: 'vertical',
+            boxSizing: 'border-box',
+          }}
+        />
+
+        {/* LIVE PREVIEW */}
+        <Typography variant="h6" sx={{ mt: 4 }}>
+          Preview
+        </Typography>
+
+        <Box
+          sx={{
+            p: 2,
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 2,
+            '& h3': { fontWeight: 600, mt: 4 },
+            '& p': { color: 'text.primary', lineHeight: 1.8, mt: 2 },
+            '& em': { fontStyle: 'italic' },
+            '& ul': { pl: 3 },
+          }}
+        >
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        </Box>
+      </Box>
+
+      {/* ACTIONS */}
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 4 }}>
+        <Button variant="outlined" color="secondary" onClick={onBack}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() =>
+            handleSaveArticle({
+              ...article,
+              title,
+              tag,
+              img,
+              description,
+              content,
+            })
+          }
+        >
+          Save Changes
+        </Button>
+      </Box>
+    </ArticleContainer>
+  );
+}

src/blog/components/Article/ArticleView.tsx

@@ -3,8 +3,10 @@ import { marked } from 'marked';
 import { Box, Typography, Divider, IconButton, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { ArticleMeta } from "./ArticleMeta";
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
-import { ArticleProps } from '../types/props';
+import { ArticleMeta } from "../ArticleMeta";
+import { ArticleViewProps } from '../../types/props';
+import {useAuth} from "../../providers/Author";
 
 const ArticleContainer = styled(Box)(({ theme }) => ({
   maxWidth: '800px',
@@ -23,23 +25,33 @@ const CoverImage = styled('img')({
   marginBottom: '24px',
 });
 
-export default function Article({
+export default function ArticleView({
   article,
-  onBack
+  onBack,
-}: ArticleProps) {
+  onEdit,
+}: ArticleViewProps) {
+
+  const { currentUser } = useAuth();
 
   return (
     <ArticleContainer>
-      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        mb: 2,
+      }}
+    >
+      <IconButton onClick={onBack}>
         <ArrowBackRoundedIcon />
       </IconButton>
 
-      <Chip
+      {currentUser && (
-        label={article.tag}
+        <IconButton onClick={onEdit}>
-        variant="outlined"
+          <EditRoundedIcon />
-        color="primary"
+        </IconButton>
-        sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
+      )}
-      />
+    </Box>
 
       <Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
         {article.title}
@@ -49,7 +61,21 @@ export default function Article({
 
       <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(article)}
+      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/ArticleCardSize2.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize2({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}

src/blog/components/ArticleCards/ArticleCardSize4.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize4({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
@@ -24,8 +24,12 @@ export default function ArticleCardSize4({
     >
       <CardMedia
         component="img"
-        alt="green iguana"
+        alt={article.title}
-        image={article.img}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
         sx={{
           height: { sm: 'auto', md: '50%' },
           aspectRatio: { sm: '16 / 9', md: '' },

src/blog/components/ArticleCards/ArticleCardSize6.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize6({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
@@ -25,7 +25,11 @@ export default function ArticleCardSize6({
       <CardMedia
         component="img"
         alt={article.title}
-        image={article.img}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
         sx={{
           aspectRatio: '16 / 9',
           borderBottom: '1px solid',

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/components/ArticleMeta.tsx

@@ -30,7 +30,11 @@ export function ArticleMeta({
             <Avatar
               key={index}
               alt={author.name}
-              src={author.avatar}
+              src={(
+                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+                "/" +
+                (author.avatar?.replace(/^\/+/, "") || "")
+              )}
               sx={{ width: 24, height: 24 }}
             />
           ))}

src/blog/components/ImageUploadField.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Box, Button, Avatar, CircularProgress } from "@mui/material";
+import { ImageUploadFieldProps } from "../types/props";
+
+export default function ImageUploadField({
+  label = "Upload Image",
+  value,
+  uploading = false,
+  onUpload,
+  size = 64,
+}: ImageUploadFieldProps) {
+
+  const imgSrc = value
+    ? import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+      "/" +
+      value.replace(/^\/+/, "")
+    : "";
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 3 }}>
+      <Avatar
+        src={imgSrc}
+        sx={{ width: size, height: size, borderRadius: 2 }}
+      />
+
+      <Button
+        variant="outlined"
+        component="label"
+        disabled={uploading}
+        startIcon={uploading && <CircularProgress size={16} />}
+      >
+        {uploading ? "Uploading..." : label}
+        <input
+          type="file"
+          accept="image/*"
+          hidden
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) onUpload(file);
+          }}
+        />
+      </Button>
+    </Box>
+  );
+}

src/blog/components/Latest.tsx

@@ -1,95 +1,19 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 import CircularProgress from '@mui/material/CircularProgress';
 import { LatestProps } from "../types/props";
+import { StyledTypography, TitleTypography } from "../types/styles";
+import { ArticleMeta } from "./ArticleMeta";
 import Fade from '@mui/material/Fade';
 
-
+export default function Latest({
-const StyledTypography = styled(Typography)({
+  articles,
-  display: '-webkit-box',
+  onSelectArticle,
-  WebkitBoxOrient: 'vertical',
+  onLoadMore
-  WebkitLineClamp: 2,
+}: LatestProps) {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-const TitleTypography = styled(Typography)(({ theme }) => ({
-  position: 'relative',
-  textDecoration: 'none',
-  '&:hover': { cursor: 'pointer' },
-  '& .arrow': {
-    visibility: 'hidden',
-    position: 'absolute',
-    right: 0,
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  '&:hover .arrow': {
-    visibility: 'visible',
-    opacity: 0.7,
-  },
-  '&:focus-visible': {
-    outline: '3px solid',
-    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
-    outlineOffset: '3px',
-    borderRadius: '8px',
-  },
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    width: 0,
-    height: '1px',
-    bottom: 0,
-    left: 0,
-    backgroundColor: (theme.vars || theme).palette.text.primary,
-    opacity: 0.3,
-    transition: 'width 0.3s ease, opacity 0.3s ease',
-  },
-  '&:hover::before': {
-    width: '100%',
-  },
-}));
-
-function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 2,
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      <Box
-        sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}
-      >
-        <AvatarGroup max={3}>
-          {authors.map((author, index) => (
-            <Avatar
-              key={index}
-              alt={author.name}
-              src={author.avatar}
-              sx={{ width: 24, height: 24 }}
-            />
-          ))}
-        </AvatarGroup>
-        <Typography variant="caption">
-          {authors.map((a) => a.name).join(', ')}
-        </Typography>
-      </Box>
-      <Typography variant="caption">Recently Updated</Typography>
-    </Box>
-  );
-}
-
-export default function Latest({ articles, onSelectArticle, onLoadMore }: LatestProps) {
   const [visibleCount, setVisibleCount] = React.useState(2);
   const [loadingMore, setLoadingMore] = React.useState(false);
   const [animating, setAnimating] = React.useState(false);
@@ -178,7 +102,7 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
                   {article.description}
                 </StyledTypography>
 
-                <Author authors={article.authors} />
+                <ArticleMeta article={article} />
               </Box>
             </Fade>
           </Grid>

src/blog/components/Login.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Link } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { LoginProps } from '../types/props';
 
-interface LoginProps {
+export default function Login({
-  onBack: () => void;
+  onBack,
-  onRegister: () => void;
+  onRegister
-}
+}: LoginProps) {
-
-export default function Login({ onBack, onRegister }: LoginProps) {
   const { login, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');

src/blog/components/MainContent.tsx

@@ -9,7 +9,8 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';
 
-import { ArticleModel } from "../types/models";
+import {ArticlesModel, createArticlesModelObject} from "../types/models";
+import { MainContentProps } from "../types/props";
 import ArticleCardsGrid from "./ArticleCards/ArticleCardsGrid";
 
 export function Search() {
@@ -36,12 +37,9 @@ export function Search() {
 export default function MainContent({
   articles,
   onSelectArticle,
-}: {
+}: MainContentProps) {
-  articles: ArticleModel[];
-  onSelectArticle: (index: number) => void;
-}) {
 
-  const [visibleArticles, setVisibleArticles] = React.useState<ArticleModel[]>(articles);
+  const [visibleArticles, setVisibleArticles] = React.useState<ArticlesModel>(articles);
   const [activeTag, setActiveTag] = React.useState<string>('all');
 
   const filterArticlesByTag = (tag: string) => {
@@ -60,11 +58,11 @@ export default function MainContent({
     }
 
     // 🔵 Filter by selected tag
-    const filtered = articles.filter((article) => article.tag === tag);
+    const filtered = articles.articlesList.filter((article) => article.tag === tag);
     console.log('👀 All Articles:', articles);
     console.log(`👀 Filtered (${tag}):`, filtered);
 
-    setVisibleArticles(filtered);
+    setVisibleArticles(createArticlesModelObject(filtered));
     setActiveTag(tag);
   };
 

src/blog/components/Profile.tsx

@@ -6,29 +6,33 @@ import {
   Typography,
   IconButton,
   CircularProgress,
-  Avatar,
   Alert,
 } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { useUpload } from "../providers/Upload";
+import ImageUploadField from './ImageUploadField';
+import { ProfileProps } from '../types/props';
 
-interface ProfileProps {
+export default function Profile({
-  onBack: () => void;
+  onBack
-}
+}: ProfileProps) {
-
-export default function Profile({ onBack }: ProfileProps) {
   const { currentUser, loading, error, logout, updateProfile } = useAuth();
+  const { uploadFile } = useUpload();
   const [formData, setFormData] = React.useState({
     username: currentUser?.username || '',
     name: currentUser?.name || '',
     email: currentUser?.email || '',
     avatar: currentUser?.avatar || '',
   });
+
+  const [uploadingAvatar, setUploadingAvatar] = React.useState(false);
   const [success, setSuccess] = React.useState<string | null>(null);
   const [saving, setSaving] = React.useState(false);
 
   React.useEffect(() => {
-    if (currentUser)  setFormData(currentUser);
+    if (currentUser) setFormData(currentUser);
+    console.log("Current User:", currentUser);
   }, [currentUser]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -36,6 +40,21 @@ export default function Profile({ onBack }: ProfileProps) {
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
+  const handleAvatarUpload = async (file: File) => {
+    setUploadingAvatar(true);
+
+    try {
+      const avatar = await uploadFile(file);
+      if (avatar) {
+        setFormData((prev) => ({ ...prev, avatar: avatar }));
+      }
+    } catch (err) {
+      console.error("Avatar upload failed:", err);
+    } finally {
+      setUploadingAvatar(false);
+    }
+  };
+
   const handleSave = async () => {
     if (!currentUser) return;
 
@@ -44,8 +63,6 @@ export default function Profile({ onBack }: ProfileProps) {
       setSuccess(null);
 
       const updatedUser = { ...currentUser, ...formData };
-      console.log('updatedUser');
-      console.log(updatedUser);
       const updated = await updateProfile(updatedUser);
 
       if (updated) setSuccess('Profile updated successfully');
@@ -57,8 +74,8 @@ export default function Profile({ onBack }: ProfileProps) {
   };
 
   const handleLogout = async () => {
-    logout()
+    logout();
-  }
+  };
 
   if (!currentUser) {
     return (
@@ -103,20 +120,13 @@ export default function Profile({ onBack }: ProfileProps) {
         Profile
       </Typography>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
+      <ImageUploadField
-        <Avatar
+        label="Upload Avatar"
-          src={formData.avatar}
+        value={formData.avatar}
-          alt={formData.name || formData.username}
+        uploading={uploadingAvatar}
-          sx={{ width: 64, height: 64 }}
+        onUpload={handleAvatarUpload}
-        />
+        size={64}
-        <TextField
+      />
-          label="Avatar URL"
-          name="avatar"
-          fullWidth
-          value={formData.avatar}
-          onChange={handleChange}
-        />
-      </Box>
 
       <TextField
         fullWidth

src/blog/components/Register.tsx

@@ -2,19 +2,18 @@ import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Alert, } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { RegisterProps } from '../types/props';
 
-interface RegisterProps {
+export default function Register({
-  onBack: () => void;
+  onBack
-}
+}: RegisterProps) {
-
-export default function Register({ onBack }: RegisterProps) {
   const { register, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password1, setPassword1] = React.useState('');
   const [password2, setPassword2] = React.useState('');
   const [localError, setLocalError] = React.useState<string | null>(null);
 
-   const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLocalError(null);
 

src/blog/providers/Article.tsx

@@ -1,16 +1,38 @@
 import React, { createContext, useState, useContext, useEffect } from 'react';
 import { api } from '../utils/api';
-import { ArticleModel } from '../types/models';
+import {
+  ArticleModel,
+  ArticlesModel,
+  createArticlesModelObject,
+} from '../types/models';
 import { ArticleContextModel } from '../types/contexts';
 import { useAuth } from './Author';
 
 const ArticleContext = createContext<ArticleContextModel | undefined>(undefined);
 
 export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [articles, setArticles] = useState<ArticleModel[]>([]);
+  const [articles, setArticles] = useState<ArticlesModel>(createArticlesModelObject());
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const { token } = useAuth();
+  const { token, currentUser } = useAuth();
+
+  /** 🔹 Author IDs must be strings for API, so we normalize here */
+  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 () => {
@@ -20,7 +42,7 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
 
       const res = await api.get<ArticleModel[]>('/articles', { params: { skip: 0, limit: 100 } });
       const formatted = res.data.map((a) => ({ ...a, id: a._id || undefined }));
-      setArticles(formatted);
+      setArticles(prev => prev.refresh(formatted));
     } catch (err: any) {
       console.error('Failed to fetch articles:', err);
       setError(err.response?.data?.detail || 'Failed to fetch articles');
@@ -29,6 +51,62 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
     }
   };
 
+  /** 🔹 Update article */
+  const updateArticle = async (articleData: ArticleModel) => {
+    if (!articleData._id) {
+      console.error('updateArticle called without _id');
+      return;
+    }
+    if (!currentUser) {
+      console.error('updateArticle called without logged in user');
+      return;
+    }
+
+    const normalizedArticleData = normalizeArticleForApi(articleData);
+    try {
+      setLoading(true);
+      setError(null);
+
+      const res = await api.put<ArticleModel>(`/articles/${articleData._id}`, normalizedArticleData);
+      setArticles(prev => {
+        prev.update(res.data);
+        return { ...prev };
+      });
+      return res.data;
+    } catch (err: any) {
+      console.error('Article update failed:', err);
+      setError(err.response?.data?.detail || 'Failed to update article');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /** 🔹 Create article */
+  const createArticle = async (articleData: ArticleModel) => {
+    if (articleData._id) {
+      console.error('createArticle called with _id');
+      return;
+    }
+
+    const normalizedArticleData = normalizeArticleForApi(articleData);
+    try {
+      setLoading(true);
+      setError(null);
+
+      const res = await api.post<ArticleModel>(`/articles`, normalizedArticleData);
+      setArticles(prev => {
+        prev.create(res.data);
+        return { ...prev };
+      });
+      return res.data;
+    } catch (err: any) {
+      console.error('Article create failed:', err);
+      setError(err.response?.data?.detail || 'Failed to create article');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   /** 🔹 Auto-fetch articles whenever user logs in/out */
   useEffect(() => {
     // Always load once on mount
@@ -41,7 +119,14 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
   }, [token]);
 
   return (
-    <ArticleContext.Provider value={{ articles, loading, error, refreshArticles: fetchArticles }}>
+    <ArticleContext.Provider value={{
+      articles,
+      loading,
+      error,
+      refreshArticles: fetchArticles,
+      updateArticle,
+      createArticle,
+    }}>
       {children}
     </ArticleContext.Provider>
   );

src/blog/providers/Author.tsx

@@ -19,7 +19,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       setError(null);
 
       const res = await api.post('/auth/register', { username, password });
-      return res.data; // returns PublicUser from the backend
+      return res.data;
     } catch (err: any) {
       console.error('Registration failed:', err);
       setError(err.response?.data?.detail || 'Registration failed');
@@ -95,7 +95,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
-
   /** 🔹 Auto-load current user if token exists */
   const fetchCurrentUser = async () => {
     if (!token) return;

src/blog/providers/Upload.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useContext, useState } from "react";
+import { api } from "../utils/api";
+import { UploadContextModel } from "../types/contexts";
+
+const UploadContext = createContext<UploadContextModel | undefined>(undefined);
+
+export const UploadProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * 🔹 Upload any file → return public URL
+   */
+  const uploadFile = async (file: File): Promise<string | null> => {
+    setUploading(true);
+    setError(null);
+
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const binary = new Uint8Array(arrayBuffer);
+
+      const res = await api.post("/uploads", binary, {
+        headers: {
+          "Content-Type": file.type,
+          "Content-Disposition": `attachment; filename="${file.name}"`,
+        },
+      });
+
+      return res.data.url as string;
+    } catch (err: any) {
+      console.error("File upload failed:", err);
+      setError(err.response?.data?.detail || "Failed to upload file");
+      return null;
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <UploadContext.Provider
+      value={{
+        uploadFile,
+        uploading,
+        error,
+      }}
+    >
+      {children}
+    </UploadContext.Provider>
+  );
+};
+
+export const useUpload = (): UploadContextModel => {
+  const ctx = useContext(UploadContext);
+  if (!ctx) throw new Error("useUpload must be used within UploadProvider");
+  return ctx;
+};

src/blog/types/contexts.ts

@@ -1,10 +1,16 @@
-import { ArticleModel, AuthorModel } from "./models";
+import {
+  ArticleModel,
+  ArticlesModel,
+  AuthorModel
+} from "./models";
 
 export interface ArticleContextModel {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
   loading: boolean;
   error: string | null;
   refreshArticles: () => Promise<void>;
+  updateArticle: (article: ArticleModel) => Promise<ArticleModel | void>;
+  createArticle: (article: ArticleModel) => Promise<ArticleModel | void>;
 }
 
 export interface AuthContextModel {
@@ -19,3 +25,9 @@ export interface AuthContextModel {
   refreshAuthors: () => Promise<void>;
   updateProfile: (user: AuthorModel) => Promise<AuthorModel | void>;
 }
+
+export interface UploadContextModel {
+  uploadFile: (file: File) => Promise<string | null>;
+  uploading: boolean;
+  error: string | null;
+}

src/blog/types/models.ts

@@ -1,3 +1,9 @@
+import {
+  createInList, readInList, updateInList, deleteInList,
+  createById, readById, updateById, deleteById
+} from "../utils/articles";
+
+
 export interface AuthorModel {
   // meta fields
   _id?: string | null;
@@ -28,3 +34,82 @@ export interface ArticleModel {
   // ref fields
   authors: AuthorModel[];
 }
+
+export interface ArticlesModel {
+  articlesList: ArticleModel[];
+  articlesById: Record<string, ArticleModel>;
+  // articlesByTag: Record<string, ArticleModel[]>;
+  // articlesByAuthor: Record<string, ArticleModel[]>;
+
+  length: number;
+  slice(start: number, end?: number): ArticleModel[];
+
+  refresh(list: ArticleModel[]): ArticlesModel;
+  create(a: ArticleModel): ArticlesModel;
+  readByIndex(index: number): ArticleModel | undefined;
+  readById(id: string): ArticleModel | undefined;
+  update(a: ArticleModel): ArticlesModel;
+  delete(id: string): ArticlesModel;
+}
+
+// ---------- FACTORY ----------
+export function createArticlesModelObject(
+  articles: ArticleModel[] = []
+): ArticlesModel {
+  const initialMap: Record<string, ArticleModel> = {};
+  for (const a of articles) {
+    if (a._id) initialMap[a._id] = a;
+  }
+
+  return {
+    articlesList: articles,
+    articlesById: initialMap,
+
+    // --- computed property ---
+    get length() {
+      return this.articlesList.length;
+    },
+
+    // --- array-like slice ---
+    slice(start: number, end?: number) {
+      return this.articlesList.slice(start, end);
+    },
+
+    refresh(list) {
+      this.articlesList = list;
+
+      const map: Record<string, ArticleModel> = {};
+      for (const a of list) {
+        if (a._id) map[a._id] = a;
+      }
+      this.articlesById = map;
+      return this;
+    },
+
+    create(a) {
+      this.articlesList = createInList(this.articlesList, a);
+      this.articlesById = createById(this.articlesById, a);
+      return this;
+    },
+
+    readByIndex(index) {
+      return readInList(this.articlesList, index);
+    },
+
+    readById(id) {
+      return readById(this.articlesById, id);
+    },
+
+    update(a) {
+      this.articlesList = updateInList(this.articlesList, a);
+      this.articlesById = updateById(this.articlesById, a);
+      return this;
+    },
+
+    delete(id) {
+      this.articlesList = deleteInList(this.articlesList, id);
+      this.articlesById = deleteById(this.articlesById, id);
+      return this;
+    }
+  };
+}

src/blog/types/props.ts

@@ -1,16 +1,41 @@
-import { ArticleModel } from "./models";
+import {
-import {styled} from "@mui/material/styles";
+  ArticleModel,
-import Card from "@mui/material/Card";
+  ArticlesModel,
+} from "./models";
 
 export interface LatestProps {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
   onSelectArticle?: (index: number) => void;
   onLoadMore?: (offset: number, limit: number) => Promise<void>; // optional async callback
 }
 
-export interface ArticleProps {
+export interface LoginProps {
+  onBack: () => void;
+  onRegister: () => void;
+}
+
+export interface MainContentProps {
+  articles: ArticlesModel;
+  onSelectArticle: (index: ArticleModel) => void;
+}
+
+export interface ProfileProps {
+  onBack: () => void;
+}
+
+export interface RegisterProps {
+  onBack: () => void;
+}
+
+export interface ArticleViewProps {
   article: ArticleModel;
   onBack: () => void;
+  onEdit: () => void;
+}
+
+export interface ArticleEditorProps {
+  article?: ArticleModel | null;
+  onBack: () => void;
 }
 
 export interface ArticleMetaProps {
@@ -21,16 +46,25 @@ export interface ArticleCardProps {
   article: ArticleModel;
   index: number;
   focusedCardIndex: number | null;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
   onFocus: (index: number) => void;
   onBlur: () => void;
 }
 
 export interface ArticleGridProps {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => 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
 }
+
+export interface ImageUploadFieldProps {
+  label?: string;
+  value?: string;
+  uploading?: boolean;
+  onUpload: (file: File) => void;
+  size?: number;
+}

src/blog/types/styles.ts

@@ -38,3 +38,40 @@ export const StyledTypography = styled(Typography)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
+
+export const TitleTypography = styled(Typography)(({ theme }) => ({
+  position: 'relative',
+  textDecoration: 'none',
+  '&:hover': { cursor: 'pointer' },
+  '& .arrow': {
+    visibility: 'hidden',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  '&:hover .arrow': {
+    visibility: 'visible',
+    opacity: 0.7,
+  },
+  '&:focus-visible': {
+    outline: '3px solid',
+    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
+    outlineOffset: '3px',
+    borderRadius: '8px',
+  },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    width: 0,
+    height: '1px',
+    bottom: 0,
+    left: 0,
+    backgroundColor: (theme.vars || theme).palette.text.primary,
+    opacity: 0.3,
+    transition: 'width 0.3s ease, opacity 0.3s ease',
+  },
+  '&:hover::before': {
+    width: '100%',
+  },
+}));

src/blog/types/views.ts

@@ -0,0 +1,113 @@
+import {ArticleModel} from "./models";
+
+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 const VIEW_URL: Record<View, (ui?: any) => string> = {
+  home: () => "/",
+  login: () => "/login",
+  register: () => "/register",
+  profile: () => "/profile",
+  create: () => "/create",
+  article: (ui) => `/articles/${ui.selectedArticle._id ?? ""}`,
+  editor: (ui) => `/articles/${ui.selectedArticle._id ?? ""}/edit`,
+};
+
+export function useViewRouter(setUI: any) {
+  const navigate = (
+    view: View,
+    nextState?: any
+  ) => {
+    setUI((prev: any) => {
+      const newState = { ...prev, ...nextState, view };
+
+      // update URL
+      const url = VIEW_URL[view](newState);
+      window.history.pushState(newState, "", url);
+
+      return newState;
+    });
+
+    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 = (article: ArticleModel) => {
+    setUI((prev: any) => {
+      const newState = {
+        ...prev,
+        selectedArticle: article,
+        view: "article",
+      };
+
+      const url = `/articles/${article._id}`;
+      window.history.pushState(newState, "", url);
+
+      return newState;
+    });
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  // auto child navigators from children[]
+  const navigateToChildren = (
+    view: View,
+    navigationMap?: Record<string, string>,
+  ) => {
+    const node = VIEW_TREE[view];
+    const funcs: Record<string, () => void> = {};
+
+    node.children?.forEach((child) => {
+      const funcName = `open_${child}`;
+      const customFuncName = navigationMap?.[funcName];
+      funcs[funcName] = () => navigate(child);
+      if (customFuncName) funcs[customFuncName] = () => navigate(child);
+    });
+
+    return funcs;
+  };
+
+  return { navigate, goBack, openArticle, navigateToChildren };
+}

src/blog/utils/articles.ts

@@ -0,0 +1,74 @@
+import {
+  ArticleModel,
+} from "../types/models";
+
+export function createInList(list: ArticleModel[], a: ArticleModel) {
+  return [...list, a];
+}
+
+export function readInList(list: ArticleModel[], index: number) {
+  if (index < 0 || index >= list.length) {
+    // Soft fallback
+    return undefined;
+  }
+  return list[index];
+}
+
+export function updateInList(list: ArticleModel[], a: ArticleModel) {
+  return list.map(x => (x._id === a._id ? a : x));
+}
+
+export function deleteInList(list: ArticleModel[], id: string) {
+  return list.filter(x => x._id !== id);
+}
+
+// Map helpers
+export function createById(
+  map: Record<string, ArticleModel>,
+  a: ArticleModel
+) {
+  if (!a._id) {
+    // Soft mode: ignore create, return unchanged
+    return map;
+  }
+
+  if (map[a._id]) {
+    // Soft mode: do not replace existing
+    return map;
+  }
+
+  return { ...map, [a._id]: a };
+}
+
+export function readById(
+  map: Record<string, ArticleModel>,
+  id: string
+) {
+  if (!id) return undefined;
+  return map[id];
+}
+
+export function updateById(
+  map: Record<string, ArticleModel>,
+  a: ArticleModel
+) {
+  if (!a._id) {
+    // Cannot update without ID
+    return map;
+  }
+
+  if (!map[a._id]) {
+    // ID does not exist → soft mode: do nothing
+    return map;
+  }
+
+  return { ...map, [a._id]: a };
+}
+
+export function deleteById(
+  map: Record<string, ArticleModel>,
+  id: string
+) {
+  const { [id]: _, ...rest } = map;
+  return rest;
+}

src/main.jsx

@@ -3,16 +3,17 @@ import { createRoot } from 'react-dom/client';
 import Blog from './blog/Blog';
 import { ArticleProvider } from './blog/providers/Article';
 import { AuthProvider } from './blog/providers/Author';
+import { UploadProvider } from "./blog/providers/Upload";
 
 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
 
 root.render(
-  <React.StrictMode>
+  <UploadProvider>
     <AuthProvider>
       <ArticleProvider>
         <Blog />
       </ArticleProvider>
     </AuthProvider>
-  </React.StrictMode>,
+  </UploadProvider>,
 );