move from ArticleModel[] to ArticlesModel

src/blog/Blog.tsx

@@ -15,7 +15,7 @@ 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 { ArticlesModel } from "./types/models";
 import { ArticleViewProps, ArticleEditorProps } from "./types/props";
 
 function HomeView({ currentUser, open_login, open_profile, open_create, articles, openArticle }: any) {
@@ -59,7 +59,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
 
   type RouterContext = {
     ui: any;
-    articles: ArticleModel[];
+    articles: ArticlesModel;
     currentUser: any;
     openArticle: (index: number) => void;
   };
@@ -96,14 +96,14 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         open_editor: 'onEdit',
       },
       extraProps: ({ ui, articles }) => ({
-        article: articles[ui.selectedArticle!],
+        article: articles.readByIndex(ui.selectedArticle),
       }) satisfies Partial<ArticleViewProps>,
     },
 
     editor: {
       component: ArticleEditor,
       extraProps: ({ ui, articles }) => ({
-        article: ui.selectedArticle !== null ? articles[ui.selectedArticle] : null,
+        article: ui.selectedArticle !== null ? articles.readByIndex(ui.selectedArticle) : null,
       }) satisfies Partial<ArticleEditorProps>,
     },
 

src/blog/components/MainContent.tsx

@@ -9,7 +9,7 @@ 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";
 
@@ -39,7 +39,7 @@ export default function MainContent({
   onSelectArticle,
 }: MainContentProps) {
 
-  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) => {
@@ -58,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);
   };