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 />)