|
|
|
|
@ -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 = <T extends object>(
|
|
|
|
|
storeName: string,
|
|
|
|
|
init: T
|
|
|
|
|
): [Store<T>, SetStoreFunction<T>] => {
|
|
|
|
|
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 (
|
|
|
|
|
<>
|
|
|
|
|
<Navbar />
|
|
|
|
|
|
