full article instead of index for article and using article._id open select article using readByIndex

src/blog/Blog.tsx

@@ -96,14 +96,14 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         open_editor: 'onEdit',
       },
       extraProps: ({ ui, articles }) => ({
-        article: articles.readByIndex(ui.selectedArticle),
+        article: articles.readById(ui.selectedArticle._id),
       }) satisfies Partial<ArticleViewProps>,
     },
 
     editor: {
       component: ArticleEditor,
       extraProps: ({ ui, articles }) => ({
-        article: ui.selectedArticle !== null ? articles.readByIndex(ui.selectedArticle) : null,
+        article: ui.selectedArticle !== null ? articles.readById(ui.selectedArticle._id) : null,
       }) satisfies Partial<ArticleEditorProps>,
     },
 

src/blog/components/ArticleCards/ArticleCardSize12.tsx

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

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}

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}

src/blog/types/props.ts

@@ -16,7 +16,7 @@ export interface LoginProps {
 
 export interface MainContentProps {
   articles: ArticlesModel;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
 }
 
 export interface ProfileProps {
@@ -46,14 +46,14 @@ 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: 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)