fix: after some sleep the initial idea with useNavigation worked ._.
=> Everything makes sense now!
This commit is contained in:
parent
018db91090
commit
5c71cc6b17
@ -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;
|
||||
|
@ -1,17 +1,9 @@
|
||||
import {
|
||||
Component,
|
||||
createEffect,
|
||||
createResource,
|
||||
createSignal,
|
||||
For,
|
||||
onMount,
|
||||
Show,
|
||||
} from 'solid-js';
|
||||
import RestClient from '../api/RestClient';
|
||||
import { store, setStore } from '../App';
|
||||
import Button from '../ui/Button';
|
||||
import Table, { TableData, TableRow } from '../ui/Table';
|
||||
import { Component, createSignal, onMount, Show } from 'solid-js';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import RestClient from '../api/RestClient';
|
||||
import { user } from '../App';
|
||||
import Button from '../ui/Button';
|
||||
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,
|
||||
|
@ -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 (
|
||||
|
@ -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'
|
||||
|
Loading…
x
Reference in New Issue
Block a user