From 018db9109070993c486e168a48c8865f2bb8d00c Mon Sep 17 00:00:00 2001 From: phga Date: Fri, 25 Nov 2022 14:32:42 +0100 Subject: [PATCH] refactor: Some small visual improvements & register --- rust_solid_cassandra/frontend/src/App.tsx | 32 +++++--- .../frontend/src/pages/Home.tsx | 28 ++++--- .../frontend/src/pages/Login.tsx | 79 +++++++++++++------ .../frontend/src/ui/Navbar.tsx | 5 +- .../frontend/src/ui/Table.tsx | 6 +- 5 files changed, 96 insertions(+), 54 deletions(-) diff --git a/rust_solid_cassandra/frontend/src/App.tsx b/rust_solid_cassandra/frontend/src/App.tsx index df3a003..75a1b6f 100644 --- a/rust_solid_cassandra/frontend/src/App.tsx +++ b/rust_solid_cassandra/frontend/src/App.tsx @@ -1,9 +1,7 @@ import { Route, Routes } from '@solidjs/router'; -import { Component, createEffect, createSignal, lazy } from 'solid-js'; -import { loggedInUser } from './pages/Login'; -import { createStore, Store, SetStoreFunction } from 'solid-js/store'; +import { Component, createEffect, lazy } from 'solid-js'; +import { createStore, SetStoreFunction, Store } from 'solid-js/store'; import Navbar from './ui/Navbar'; -import { Todo } from './pages/Home'; // Only load the components if we are navigating to them const Home = lazy(() => import('./pages/Home')); const Login = lazy(() => import('./pages/Login')); @@ -15,30 +13,40 @@ export type User = { }; // Helper funciton to get a global state -// https://stackoverflow.com/a/72339551 +// I tried a couple other things but couldn't figure it all out in one day... +// Probably should be possible with Context.Provider etc. +// The Problem with all of them was that I could not set the User globally inside +// Login Component. At one point I gave up and took this shortcut (for now). +// Fairly modified version of: https://stackoverflow.com/a/72339551 export const createGlobalStore = ( + storeName: string, init: T ): [Store, SetStoreFunction] => { const [state, setState] = createStore(init); - if (localStorage.globalStore) { + if (localStorage[storeName]) { try { - setState(JSON.parse(localStorage.globalStore)); + setState(JSON.parse(localStorage[storeName])); } catch (err) { setState(() => init); } } - createEffect(() => { - localStorage.globalStore = JSON.stringify(state); - }); + // Used to listen to changes in state + // This produced a warning bc. it could create a mem leak + // bc. we try to create a reactive component outside of render/etc. + // I leave this here for future reference + /* createEffect(() => { + * localStorage.globalStore = JSON.stringify(state); + * }); */ return [state, setState]; }; -const [store, setStore] = createGlobalStore({ +const storeName = 'globalStore'; +const [store, setStore] = createGlobalStore(storeName, { user: { id: '', login: '' } as User, - todos: [] as Todo[], }); const App: Component = () => { + createEffect(() => (localStorage[storeName] = JSON.stringify(store))); return ( <> diff --git a/rust_solid_cassandra/frontend/src/pages/Home.tsx b/rust_solid_cassandra/frontend/src/pages/Home.tsx index 27e771a..e19906f 100644 --- a/rust_solid_cassandra/frontend/src/pages/Home.tsx +++ b/rust_solid_cassandra/frontend/src/pages/Home.tsx @@ -55,10 +55,21 @@ const TodoModal: Component = (props) => { const selectClass = 'form-select block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding bg-no-repeat border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'; const labelClass = 'form-label inline-block mb-2 text-gray-700'; - + console.log(Object.is(props.todo, todo())); return ( <> - + + + + } + > + + }>
@@ -168,21 +179,18 @@ const TodoModal: Component = (props) => { }; const fetchTodos = async () => { - const todos = (await RestClient.GET('/todo')) as Todo[]; - setStore({ - ...store, - todos, - }); + setTodos((await RestClient.GET('/todo')) as Todo[]); }; +const [todos, setTodos] = createSignal([]); + const Home: Component = () => { onMount(fetchTodos); - return ( <> - 0} fallback={<>}> + 0} fallback={<>}> ({ + data={todos().map((todo) => ({ Title: todo.title, Description: todo.description, Status: todo.status, diff --git a/rust_solid_cassandra/frontend/src/pages/Login.tsx b/rust_solid_cassandra/frontend/src/pages/Login.tsx index 4be31ba..fc0e4a7 100644 --- a/rust_solid_cassandra/frontend/src/pages/Login.tsx +++ b/rust_solid_cassandra/frontend/src/pages/Login.tsx @@ -1,18 +1,15 @@ -import { Component, createEffect, createSignal } from 'solid-js'; +import { Component, createEffect, createSignal, Show } from 'solid-js'; import RestClient from '../api/RestClient'; import { setStore, store, User } from '../App'; import Button from '../ui/Button'; -type LoginRequest = { +type UserRequest = { login: string; password: string; }; -const [loggedInUser, setLoggedInUser] = createSignal(); -export { loggedInUser }; - const Login: Component = () => { - const [loginRequest, setLoginRequest] = createSignal({ + const [userRequest, setUserRequest] = createSignal({ login: '', password: '', }); @@ -21,13 +18,17 @@ const Login: Component = () => { // Populate the current user outside the JSX (we need createEffect for this!) createEffect(async () => { - if (loginRequest().login.trim() === '' || loginRequest().password.trim() === '') { + if (userRequest().login.trim() === '' || userRequest().password.trim() === '') { return; } - const user = (await RestClient.POST( - '/login', - JSON.stringify(loginRequest()) - )) as User; + if (window.location.href.includes('/register')) { + const register = await RestClient.POST('/user', JSON.stringify(userRequest())); + if (register) { + console.log('Could not create new user'); + return; + } + } + const user = (await RestClient.POST('/login', JSON.stringify(userRequest()))) as User; if (user.id === undefined) { console.log(user); return; @@ -96,24 +97,50 @@ const Login: Component = () => { value={password()} /> - +

+ Want to track your todo{"'"}s?{' '} + + Register + +

+ + } > - Sign in - -

- Want to track your todo{"'"}s?{' '} - { + console.log(login(), password()); + setUserRequest({ login: login(), password: password() }); + }} > Register - -

+ +

+ Back to login?{' '} + + Sign in + +

+ diff --git a/rust_solid_cassandra/frontend/src/ui/Navbar.tsx b/rust_solid_cassandra/frontend/src/ui/Navbar.tsx index 4a54fc7..65c1ce9 100644 --- a/rust_solid_cassandra/frontend/src/ui/Navbar.tsx +++ b/rust_solid_cassandra/frontend/src/ui/Navbar.tsx @@ -1,7 +1,6 @@ -import { A } from '@solidjs/router'; import { Component, Show } from 'solid-js'; import RestClient from '../api/RestClient'; -import { setStore, store, User } from '../App'; +import { setStore, store } from '../App'; import Button from './Button'; const Navbar: Component = () => { @@ -35,7 +34,7 @@ const Navbar: Component = () => { ); @@ -34,6 +33,7 @@ export const TableRow: Component = (props) => { return {props.children}; }; +// Would have been nicer with cards instead of a table... const Table: Component = (props) => { if (props.data.length < 1) { return <>;
+ {props.children}