Added a solid frontend

client-solid/src/Root.tsx

@@ -0,0 +1,95 @@
+import { createSignal } from "solid-js";
+import { createContext } from "solid-js";
+
+import { createPost, getPosts, getPost } from "./api";
+import { Post, NewPost } from "./api";
+
+export const TestContext = createContext("Test123");
+
+function Root() {
+  return (
+    <>
+      <TestContext.Provider value="Test123">
+        <Primary />
+      </TestContext.Provider>
+    </>
+  );
+}
+
+function Menu() {
+  return (
+    <ul class="menu menu-horizontal bg-base-200 rounded-box space-x-1">
+      <li>
+        <a>Home</a>
+      </li>
+      <li>
+        <a>Boards</a>
+      </li>
+      <li>
+        <a>New</a>
+      </li>
+    </ul>
+  );
+}
+
+function NewPostInputArea() {
+  const [content, setContent] = createSignal("");
+  return (
+    <div class="flex flex-col my-4">
+      <textarea
+        class="textarea textarea-bordered"
+        placeholder="Bio"
+        oninput={(input) => {
+          setContent(input.target.value);
+        }}
+      ></textarea>
+      <button class="btn btn-primary self-end btn-sm mt-4" onclick={() => {
+        createPost({ content: content(), token: "" } as NewPost);
+      }}>Submit</button>
+    </div>
+  );
+}
+
+function Posts() {
+  const [posts, setPosts] = createSignal([]);
+
+  getPosts().then((posts) => {
+    setPosts(posts as any);
+  });
+
+  return (
+    <div class="flex flex-col my-4 space-y-2">
+      {posts().map((post) => {
+        return (
+          <PostSegment post={post}></PostSegment>
+        );
+      })}
+    </div>
+  );
+}
+
+function PostSegment({ post }: { post: Post}) {
+  return (
+    <div class="card bg-base-200 shadow-lg compact text-base-content">
+      <div class="card-body">
+        <h2 class="card-title">{post.content}</h2>
+        <p class="text-base-content">{post.uuid}</p>
+        <p>{post.votes.up}</p>
+        <p>{post.votes.down}</p>
+      </div>
+    </div>
+  );
+}
+
+
+function Primary() {
+  return (
+    <div class="flex flex-col items-center my-6">
+      <Menu></Menu>
+      <NewPostInputArea></NewPostInputArea>
+      <Posts></Posts>
+    </div>
+  );
+}
+
+export default Root;

client-solid/src/api.ts

@@ -0,0 +1,43 @@
+const PORT = 3000;
+const API_URL = `http://localhost:${PORT}/api/`;
+const API_URL2 = new URL(API_URL);
+
+export interface NewPost {
+    content: string;
+    token: string;
+}
+
+interface Votes {
+    up: number;
+    down: number;
+}
+
+export interface Post extends NewPost {
+    uuid: string;
+    createdAt: string;
+    votes: Votes;
+}
+
+export async function getPosts(): Promise<Post[]> {
+//   const res = await fetch(`${API_URL}/posts`);
+  const res = await fetch(API_URL2.href);
+  const data = await res.json();
+  return data;
+}
+
+export async function getPost(id: string): Promise<Post> {
+  const res = await fetch(`${API_URL}/posts/${id}`);
+  const data = await res.json();
+  return data;
+}
+
+export async function createPost(post: NewPost): Promise<void> {
+//   await fetch(`${API_URL}`, {
+  await fetch(API_URL2.href, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(post),
+  });
+}

client-solid/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client-solid/src/index.tsx

@@ -0,0 +1,18 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+
+import "./index.css";
+import Root from "./Root";
+
+import { Router } from "@solidjs/router";
+
+const root = document.getElementById("root");
+
+render(
+  () => (
+    <Router>
+      <Root />
+    </Router>
+  ),
+  root!
+);

client-solid/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />