56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { Accessor, JSXElement, createContext, createSignal } from "solid-js";
|
|
|
|
import { LoginModal } from "./LoginModal";
|
|
import { Navbar } from "./Navbar";
|
|
import { Primary } from "./Primary";
|
|
|
|
// Representing the state of varoious modals.
|
|
// So far we only have one modal, but we can add more later
|
|
// by adding more fields to this interface, or maybe an enum
|
|
interface ModalContextType {
|
|
loginModalOpen: Accessor<boolean>;
|
|
setLoginModalOpen: (value: boolean) => void;
|
|
}
|
|
|
|
interface LoginContextType {
|
|
token: Accessor<string>;
|
|
setToken: (value: string) => void;
|
|
username: Accessor<string>;
|
|
setUsername: (value: string) => void;
|
|
}
|
|
|
|
// It is unclear to me if this is the idiomatic way to do this in Solid
|
|
export const ModalContext = createContext<ModalContextType>();
|
|
export const LoginContext = createContext<LoginContextType>();
|
|
|
|
function Root(): JSXElement {
|
|
// All of these are passed into context providers
|
|
const [loginModalOpen, setLoginModalOpen] = createSignal(false);
|
|
const [token, setToken] = createSignal("");
|
|
const [username, setUsername] = createSignal("");
|
|
|
|
// This may not be the best place to do this.
|
|
localStorage.getItem("token") && setToken(localStorage.getItem("token")!);
|
|
localStorage.getItem("username") &&
|
|
setUsername(localStorage.getItem("username")!);
|
|
|
|
return (
|
|
<>
|
|
<ModalContext.Provider value={{ loginModalOpen, setLoginModalOpen }}>
|
|
<LoginContext.Provider
|
|
value={{ token, setToken, username, setUsername }}
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<Navbar />
|
|
<LoginModal />
|
|
<div class="flex w-full flex-col items-center space-y-2 px-2 md:max-w-3xl">
|
|
<Primary />
|
|
</div>
|
|
</div>
|
|
</LoginContext.Provider>
|
|
</ModalContext.Provider>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Root;
|