render list of articles from backend

frontend/src/components/ArticleCard.tsx

@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+import type { Article } from '../types/Article.ts';
+import { Card } from '@mui/material';
+
+interface Props {
+  article: Article;
+}
+
+export default function ArticleCard(props: Props) {
+  const navigate = useNavigate();
+
+  return (
+    <Card
+      className="p-1 cursor-pointer"
+      onClick={() => { navigate(`/article/${props.article.slug}`) }}
+    >
+      {props.article.name}
+    </Card>
+  );
+};

frontend/src/pages/ArticleList.tsx

@@ -1,7 +1,42 @@
+import { useState } from 'react';
+import { Button } from '@mui/material';
+import type { Article } from '../types/Article.ts';
+import { ArticleListSchema } from '../types/Article.ts';
+import ArticleCard from '../components/ArticleCard.tsx';
+
 export default function ArticleList() {
+  const [articles, setArticles] = useState<Article[]>([]);
+
+  async function getAllArticles() {
+    const result = await fetch(
+      "/api/articles/getAllArticles",
+      {
+        method: "GET",
+        headers: { "Accept": "application/json" }
+      }
+    );
+
+    const json = await result.json();
+    const data = ArticleListSchema.parse(json);
+    console.log(data);
+    setArticles(data);
+
+  };
+
   return (
-    <div>
-      List of articles to be populated and searchable
-    </div>
+    <div className="p-3 flex flex-col gap-5">
+      <p>
+        List of articles to be populated and searchable
+      </p>
+      <Button
+        style={{ border: "solid", borderWidth: "1px" }}
+        onClick={() => getAllArticles()}
+      >
+        Get All Articles
+      </Button>
+      <div>
+        {articles.map((article) => (<ArticleCard key={article.id} article={article} />))}
+      </div>
+    </div >
   );
 };

frontend/src/types/Article.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+
+export const ArticleSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  article_status: z.enum(["draft", "published", "archived"]),
+  author_id: z.string(),
+  slug: z.string(),
+  summary: z.string(),
+  date_created: z.string(),
+  last_edit: z.string(),
+  date_published: z.string().nullable(),
+});
+
+export const ArticleListSchema = z.array(ArticleSchema);
+export type Article = z.infer<typeof ArticleSchema>;