diff --git a/client-solid/src/Login.tsx b/client-solid/src/Login.tsx new file mode 100644 index 0000000..1af585c --- /dev/null +++ b/client-solid/src/Login.tsx @@ -0,0 +1,92 @@ +import { createSignal, useContext } from "solid-js"; +import { LoginContext, ModalContext } from "./Root"; + +export function LoginForm() { + const modal_ctx = useContext(ModalContext); + const login_ctx = useContext(LoginContext); + const [username, setUsername] = createSignal(""); + const [password, setPassword] = createSignal(""); + const [waiting, setWaiting] = createSignal(false); + const [error, setError] = createSignal(false); + + async function loginFailed() { + setError(true); + setWaiting(false); + setTimeout(() => { + setError(false); + }, 1000); + } + + return ( +
+ + { + setUsername(e.target.value); + }} /> + + { + setPassword(e.target.value); + }} /> + +
+ ); +} + +// This function is responsible for sending the login request to the server +// and storing the token in localstorage +export async function submitLogin( + username: string, + password: string +): Promise { + const response = await fetch("/api/login", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ username, password }), + }); + + if (response.ok) { + const data = await response.json(); + if (data.token && data.username) { + localStorage.setItem("token", data.token); + localStorage.setItem("username", data.username); + return data.token; + } + } + return ""; +} + diff --git a/client-solid/src/Navbar.tsx b/client-solid/src/Navbar.tsx new file mode 100644 index 0000000..9902fda --- /dev/null +++ b/client-solid/src/Navbar.tsx @@ -0,0 +1,83 @@ +import { useContext } from "solid-js"; +import { A } from "@solidjs/router"; +import { LoginContext } from "./Root"; +import { ModalContext } from "./Root"; +import { LoginForm } from "./Login"; + +function Menu() { + let login_ctx = useContext(LoginContext); + return ( + + ); +} + +export function Navbar() { + let modal_ctx = useContext(ModalContext); + let login_ctx = useContext(LoginContext); + + return ( +
+ FrostByte + + { + b.preventDefault(); + if (login_ctx?.token() != "") { + localStorage.setItem("token", ""); + localStorage.setItem("username", ""); + login_ctx?.setToken(""); + login_ctx?.setUsername(""); + return; + } + modal_ctx?.setLoginModalOpen(true); + }} + > + {login_ctx?.token() != "" ? login_ctx?.username() : "Login"} + +
+ ); +} + +// This is a modal +export function Login() { + const modal_ctx = useContext(ModalContext); + return ( + +
+

Hello!

+

Login to your FrostByte account.

+ +
+
{ + // This is just needed to set the state to false + // The modal will close itself without this code, but without setting the state + e.preventDefault(); + modal_ctx?.setLoginModalOpen(false); + }} + > + +
+ + ); +} diff --git a/client-solid/src/Posts.tsx b/client-solid/src/Posts.tsx new file mode 100644 index 0000000..522ec69 --- /dev/null +++ b/client-solid/src/Posts.tsx @@ -0,0 +1,39 @@ +import { createSignal } from "solid-js"; +import { getPosts } from "./api"; +import { Post } from "./api"; + +export function Posts() { + const [posts, setPosts] = createSignal([] as Post[]); + const [loading, setLoading] = createSignal(true); + + getPosts().then((posts) => { + setPosts(posts as any); + setLoading(false); + }); + + return ( +
+ {loading() ? ( + + ) : ( + <> + )} + {posts().map((post) => { + if (post.content == "") return; // Filtering out empty posts, remove this later + return ; + })} +
+ ); +} + +// This is the card container for a post +export function PostSegment({ post }: { post: Post; }) { + return ( +
+
+

{post.content}

+
+
+ ); +} + diff --git a/client-solid/src/Primary.tsx b/client-solid/src/Primary.tsx new file mode 100644 index 0000000..87d4da4 --- /dev/null +++ b/client-solid/src/Primary.tsx @@ -0,0 +1,13 @@ +import { Route, Routes } from "@solidjs/router"; +import { Posts } from "./Posts"; +import { NewPostInputArea } from "./Root"; + +// Primary is the section of the page that holds the main content +export function Primary() { + return ( + + } /> + } /> + + ); +} diff --git a/client-solid/src/Root.tsx b/client-solid/src/Root.tsx index a07f185..22e70ba 100644 --- a/client-solid/src/Root.tsx +++ b/client-solid/src/Root.tsx @@ -1,10 +1,12 @@ import { Accessor, createSignal, useContext } from "solid-js"; import { createContext } from "solid-js"; -import { Route, Routes, A } from "@solidjs/router"; -import { createPost, getPosts } from "./api"; -import { Post, NewPost } from "./api"; +import { createPost } from "./api"; +import { NewPost } from "./api"; +import { Navbar } from "./Navbar"; +import { Primary } from "./Primary"; +import { Login } from "./Navbar"; // Representing the state of varoious modals. // So far we only have one modal, but we can add more later @@ -55,45 +57,7 @@ function Root() { ); } -function Navbar() { - let modal_ctx = useContext(ModalContext); - let login_ctx = useContext(LoginContext); - return ( -
- FrostByte - - { - b.preventDefault(); - modal_ctx?.setLoginModalOpen(true); - }} - > - {login_ctx?.token() != "" ? login_ctx?.username() : "Login"} - -
- ); -} - -function Menu() { - return ( - - ); -} - -function NewPostInputArea() { +export function NewPostInputArea() { const [content, setContent] = createSignal(""); const login_ctx = useContext(LoginContext); @@ -126,158 +90,4 @@ function NewPostInputArea() { ); } -function Posts() { - const [posts, setPosts] = createSignal([] as Post[]); - const [loading, setLoading] = createSignal(true); - - getPosts().then((posts) => { - setPosts(posts as any); - setLoading(false); - }); - - return ( -
- {loading() ? ( - - ) : ( - <> - )} - {posts().map((post) => { - if (post.content == "") return; // Filtering out empty posts, remove this later - return ; - })} -
- ); -} - -function PostSegment({ post }: { post: Post }) { - return ( -
-
-

{post.content}

-
-
- ); -} - -function Primary() { - return ( - - } /> - } /> - - ); -} - -// This is a modal -function Login() { - const modal_ctx = useContext(ModalContext); - return ( - -
-

Hello!

-

Login to your FrostByte account.

- -
-
{ - // This is just needed to set the state to false - // The modal will close itself without this code, but without setting the state - e.preventDefault(); - modal_ctx?.setLoginModalOpen(false); - }} - > - -
- - ); -} - -// This function is responsible for sending the login request to the server -// and storing the token in localstorage -async function submitLogin( - username: string, - password: string -): Promise { - const response = await fetch("/api/login", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ username, password }), - }); - - if (response.ok) { - const data = await response.json(); - if (data.token && data.username) { - localStorage.setItem("token", data.token); - localStorage.setItem("username", data.username); - return data.token; - } - } - return ""; -} - -function LoginForm() { - const modal_ctx = useContext(ModalContext); - const [username, setUsername] = createSignal(""); - const [password, setPassword] = createSignal(""); - const [waiting, setWaiting] = createSignal(false); - const [error, setError] = createSignal(false); - - async function loginFailed() { - setError(true); - setWaiting(false); - setTimeout(() => { - setError(false); - }, 1000); - } - - return ( -
- - { - setUsername(e.target.value); - }} - /> - - { - setPassword(e.target.value); - }} - /> - -
- ); -} - export default Root;