frontend/app/.gitignore

@@ -1,23 +0,0 @@
-# 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

@@ -1,40 +0,0 @@
-{
-  "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

@@ -1,41 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,17 @@
+<!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>