FrostByte/client-solid/src/Root.tsx

import { Accessor, Show, createSignal, useContext } from "solid-js";
import { createContext } from "solid-js";

import { createPost } from "./api";
import { NewPost } from "./api";
import { Navbar } from "./Navbar";
import { Primary } from "./Primary";
import { Login } from "./Navbar";
import { useNavigate } from "@solidjs/router";

// 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() {
  // 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 my-2">
            <Navbar />
            <Login />
            <div class="flex flex-col items-center md:w-96 space-y-2">
              <Primary />
            </div>
          </div>
        </LoginContext.Provider>
      </ModalContext.Provider>
    </>
  );
}

export function NewPostInputArea() {
  const [content, setContent] = createSignal("");
  const [waiting, setWaiting] = createSignal(false);
  const login_ctx = useContext(LoginContext);

  const nav = useNavigate();

  const sendPost = () => {
    setWaiting(true);
    const response = createPost({
      content: content(),
      token: login_ctx?.token(),
    } as NewPost);
    if (response) {
      response.then(() => {
        setWaiting(false);
        setContent("");
        nav("/");
      });
    }
  };

  return (
    <Show
      when={!waiting()}
      fallback={
        <span class="loading loading-spinner loading-lg self-center"></span>
      }
    >
      <div class="flex flex-col space-y-2">
        <textarea
          class="textarea textarea-bordered"
          placeholder="Speak your mind..."
          maxLength={500}
          oninput={(input) => {
            setContent(input.target.value);
          }}
        ></textarea>
        <button
          class={
            "btn btn-primary self-end btn-sm" +
            (content() == "" ? " btn-disabled" : "")
          }
          onclick={sendPost}
        >
          Submit
        </button>
      </div>
    </Show>
  );
}

export default Root;