From 5c71cc6b17169a2c1d88a181ef69eca2c2a372ed Mon Sep 17 00:00:00 2001
From: phga <phga@posteo.de>
Date: Sat, 26 Nov 2022 23:49:15 +0100
Subject: [PATCH] fix: after some sleep the initial idea with useNavigation
 worked ._.

=> Everything makes sense now!
---
 rust_solid_cassandra/frontend/src/App.tsx     | 39 ++-----------------
 .../frontend/src/pages/Home.tsx               | 18 +++------
 .../frontend/src/pages/Login.tsx              | 11 +++---
 .../frontend/src/ui/Navbar.tsx                | 18 ++++-----
 4 files changed, 21 insertions(+), 65 deletions(-)

diff --git a/rust_solid_cassandra/frontend/src/App.tsx b/rust_solid_cassandra/frontend/src/App.tsx
index 75a1b6f..c4e976f 100644
--- a/rust_solid_cassandra/frontend/src/App.tsx
+++ b/rust_solid_cassandra/frontend/src/App.tsx
@@ -1,6 +1,5 @@
 import { Route, Routes } from '@solidjs/router';
-import { Component, createEffect, lazy } from 'solid-js';
-import { createStore, SetStoreFunction, Store } from 'solid-js/store';
+import { Component, createEffect, createSignal, lazy } from 'solid-js';
 import Navbar from './ui/Navbar';
 // Only load the components if we are navigating to them
 const Home = lazy(() => import('./pages/Home'));
@@ -12,41 +11,9 @@ export type User = {
   login: string;
 };
 
-// Helper funciton to get a global state
-// 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 = <T extends object>(
-  storeName: string,
-  init: T
-): [Store<T>, SetStoreFunction<T>] => {
-  const [state, setState] = createStore(init);
-  if (localStorage[storeName]) {
-    try {
-      setState(JSON.parse(localStorage[storeName]));
-    } catch (err) {
-      setState(() => init);
-    }
-  }
-  // 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 storeName = 'globalStore';
-const [store, setStore] = createGlobalStore(storeName, {
-  user: { id: '', login: '' } as User,
-});
+const [user, setUser] = createSignal({ id: '', login: '' } as User);
 
 const App: Component = () => {
-  createEffect(() => (localStorage[storeName] = JSON.stringify(store)));
   return (
     <>
       <Navbar />
@@ -59,5 +26,5 @@ const App: Component = () => {
   );
 };
 
-export { store, setStore };
+export { user, setUser };
 export default App;
diff --git a/rust_solid_cassandra/frontend/src/pages/Home.tsx b/rust_solid_cassandra/frontend/src/pages/Home.tsx
index e19906f..f86ec94 100644
--- a/rust_solid_cassandra/frontend/src/pages/Home.tsx
+++ b/rust_solid_cassandra/frontend/src/pages/Home.tsx
@@ -1,17 +1,9 @@
-import {
-  Component,
-  createEffect,
-  createResource,
-  createSignal,
-  For,
-  onMount,
-  Show,
-} from 'solid-js';
+import { Component, createSignal, onMount, Show } from 'solid-js';
+import { v4 as uuidv4 } from 'uuid';
 import RestClient from '../api/RestClient';
-import { store, setStore } from '../App';
+import { user } from '../App';
 import Button from '../ui/Button';
-import Table, { TableData, TableRow } from '../ui/Table';
-import { v4 as uuidv4 } from 'uuid';
+import Table from '../ui/Table';
 
 export type Todo = {
   id: string;
@@ -40,7 +32,7 @@ export enum Priority {
 
 const createNewTodo = (): Todo => ({
   id: uuidv4(),
-  user_id: store.user.id,
+  user_id: user().id,
   title: 'New Title',
   description: 'Some description.',
   status: Status.Todo,
diff --git a/rust_solid_cassandra/frontend/src/pages/Login.tsx b/rust_solid_cassandra/frontend/src/pages/Login.tsx
index fc0e4a7..0d685f8 100644
--- a/rust_solid_cassandra/frontend/src/pages/Login.tsx
+++ b/rust_solid_cassandra/frontend/src/pages/Login.tsx
@@ -1,6 +1,7 @@
+import { useNavigate } from '@solidjs/router';
 import { Component, createEffect, createSignal, Show } from 'solid-js';
 import RestClient from '../api/RestClient';
-import { setStore, store, User } from '../App';
+import { setUser, User } from '../App';
 import Button from '../ui/Button';
 
 type UserRequest = {
@@ -9,6 +10,7 @@ type UserRequest = {
 };
 
 const Login: Component = () => {
+  const nav = useNavigate();
   const [userRequest, setUserRequest] = createSignal<UserRequest>({
     login: '',
     password: '',
@@ -33,11 +35,8 @@ const Login: Component = () => {
       console.log(user);
       return;
     }
-    setStore({
-      ...store,
-      user,
-    });
-    window.location.href = '/';
+    setUser(user);
+    nav('/');
   });
 
   return (
diff --git a/rust_solid_cassandra/frontend/src/ui/Navbar.tsx b/rust_solid_cassandra/frontend/src/ui/Navbar.tsx
index 65c1ce9..e0f9f9a 100644
--- a/rust_solid_cassandra/frontend/src/ui/Navbar.tsx
+++ b/rust_solid_cassandra/frontend/src/ui/Navbar.tsx
@@ -1,9 +1,11 @@
+import { useNavigate } from '@solidjs/router';
 import { Component, Show } from 'solid-js';
 import RestClient from '../api/RestClient';
-import { setStore, store } from '../App';
+import { user, setUser } from '../App';
 import Button from './Button';
 
 const Navbar: Component = () => {
+  const nav = useNavigate();
   return (
     <div class='flex justify-between items-center bg-sh-bg p-3'>
       <div class='flex items-center'>
@@ -15,17 +17,13 @@ const Navbar: Component = () => {
         </a>
       </div>
       <h1 class='flex -ml-20 text-xl font-bold no-underline text-sh-yellow'>
-        Hey {store.user.login}!
+        Hey {user().login}!
       </h1>
       <Show
-        when={store.user.login !== ''}
+        when={user().login !== ''}
         fallback={
           <>
-            <Button
-              onClick={() => (window.location.href = '/login')}
-              backgroundColor='yellow'
-              color='black'
-            >
+            <Button onClick={() => nav('/login')} backgroundColor='yellow' color='black'>
               Login
             </Button>
           </>
@@ -34,8 +32,8 @@ const Navbar: Component = () => {
         <Button
           onClick={() => {
             RestClient.DELETE('/logout');
-            setStore({ user: { id: '', login: '' } });
-            window.location.href = '/login';
+            setUser({ id: '', login: '' });
+            ('/login');
           }}
           backgroundColor='magenta'
           color='black'