add react frontend

frontend/app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/app/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "forum",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
+    "bulma": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/app/src/App.js

@@ -0,0 +1,41 @@
+import 'bulma/css/bulma.css'
+import {useEffect, useState} from "react";
+import axios from "axios";
+import PostList from "./components/Post/PostList";
+
+function App() {
+    const [postList, setPostsList] = useState([]);
+
+    const fetchPosts = async () => {
+        await axios.get("http://localhost:8000/catalog")
+        .then((response) => { setPostsList(response.data)})
+    }
+
+    useEffect(() => {
+        fetchPosts();
+    }, []);
+
+    async function handleClickRefresh() {
+        await fetchPosts();
+    }
+
+    return (
+        <>
+            <div className="container">
+                <section className="hero is-info">
+                    <div className="hero-body">
+                        <p className="title">Singleboard Forum App</p>
+                    </div>
+                </section>
+                <div className="section">
+                    <div className="container" style={{marginBottom: "50px"}}>
+                        <button className="button" onClick={handleClickRefresh}>Refresh Posts</button>
+                    </div>
+                    <PostList posts={postList}/>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default App;

frontend/app/src/components/Post/PostList.js

@@ -0,0 +1,19 @@
+import PostShow from "./PostShow";
+
+function PostList({posts}) {
+    const renderedPosts = posts.map((post, key) => {
+        return <PostShow title={post.title} content={post.content} key={key}/>
+    })
+
+    return (
+        <>
+            <div className="container">
+                <div className="columns is-multiline">
+                    {renderedPosts}
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default PostList

frontend/app/src/components/Post/PostShow.js

@@ -0,0 +1,14 @@
+function PostShow({title, content, post_id}) {
+    return (
+        <>
+            <div className="column is-4">
+                <h1 className="is-size-5 has-text-weight-bold">{title}</h1>
+                <p>{content}</p>
+                <br />
+                <p className="is-italic">0 replies</p>
+            </div>
+        </>
+    );
+}
+
+export default PostShow;

frontend/app/src/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom/client"
+import App from "./App";
+
+const el = document.getElementById("root");
+const root = ReactDOM.createRoot(el)
+
+root.render(<App />)

frontend/src/assets/js/app.js

@@ -1,33 +0,0 @@
-const apiUrl = 'http://localhost:8001';
-
-function createTable(selector, items) {
-    const $table = $("<table></table>");
-    const $headerRow = $("<tr></tr>");
-
-    $.each(Object.keys(items[0]), function(i, key) {
-       const $th = $("<th></th>").text(key)
-        $headerRow.append($th);
-    });
-    $table.append($headerRow);
-
-    $.each(items, function (i, item) {
-       const $tr = $("<tr></tr>");
-       $.each(item, function(key, value) {
-          const $td = $("<td></td>").text(value);
-          $tr.append($td);
-       });
-       $table.append($tr);
-    });
-
-    console.log($table);
-
-    $(selector).append($table);
-}
-function getCatalog() {
-    $.getJSON(apiUrl + "/catalog", function (resp) {
-        createTable('.posts', resp);
-    });
-}
-$( document ).ready(function() {
-    getCatalog();
-});

frontend/src/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Single-board Forum</title>
-    <link rel="stylesheet" href="assets/css/main.css">
-    <meta charset="UTF-8">
-    <script src="assets/js/jquery-3.7.1.min.js"></script>
-    <script src="assets/js/app.js" defer></script>
-</head>
-<body>
-    <header>
-        <h1>Single-board Forum</h1>
-    </header>
-    <div class="posts">
-    </div>
-</body>
-</html>