Restructure
This commit is contained in:
parent
da48f005a3
commit
22a3ca1769
16 changed files with 44 additions and 34 deletions
|
@ -1,7 +1,7 @@
|
||||||
import { JSXElement, Show, createSignal, useContext } from "solid-js";
|
import { JSXElement, Show, createSignal, useContext } from "solid-js";
|
||||||
|
|
||||||
import { LoginContext, ModalContext } from "../GlobalState";
|
import { LoginContext, ModalContext } from "../Context/GlobalState";
|
||||||
import { AuthResponse, submitLogin } from "../api";
|
import { AuthResponse, submitLogin } from "../Util/api";
|
||||||
|
|
||||||
export function LoginForm(): JSXElement {
|
export function LoginForm(): JSXElement {
|
||||||
const modal_ctx = useContext(ModalContext)!;
|
const modal_ctx = useContext(ModalContext)!;
|
|
@ -1,7 +1,7 @@
|
||||||
import { JSXElement, Show, useContext } from "solid-js";
|
import { JSXElement, Show, useContext } from "solid-js";
|
||||||
|
|
||||||
import { LoginContext, ModalContext } from "./GlobalState";
|
import { LoginContext, ModalContext } from "../Context/GlobalState";
|
||||||
import { UserCircle } from "./Icons";
|
import { UserCircle } from "../Util/Icons";
|
||||||
|
|
||||||
export function LoginButton(): JSXElement {
|
export function LoginButton(): JSXElement {
|
||||||
const modal_ctx = useContext(ModalContext)!;
|
const modal_ctx = useContext(ModalContext)!;
|
|
@ -1,8 +1,8 @@
|
||||||
import { A } from "@solidjs/router";
|
import { A } from "@solidjs/router";
|
||||||
import { JSXElement, Show, useContext } from "solid-js";
|
import { JSXElement, Show, useContext } from "solid-js";
|
||||||
|
|
||||||
import { LoginContext } from "./GlobalState";
|
import { LoginContext } from "../Context/GlobalState";
|
||||||
import { Home, Plus } from "./Icons";
|
import { Home, Plus } from "../Util/Icons";
|
||||||
|
|
||||||
// Represents a single list item in the menu bar
|
// Represents a single list item in the menu bar
|
||||||
export function MenuItem(props: {
|
export function MenuItem(props: {
|
|
@ -1,8 +1,8 @@
|
||||||
import { useNavigate } from "@solidjs/router";
|
import { useNavigate } from "@solidjs/router";
|
||||||
import { JSXElement, Show, createSignal, onMount, useContext } from "solid-js";
|
import { JSXElement, Show, createSignal, onMount, useContext } from "solid-js";
|
||||||
|
|
||||||
import { LoginContext } from "./GlobalState";
|
import { LoginContext } from "../Context/GlobalState";
|
||||||
import { NewPost, createPost } from "./api";
|
import { NewPost, createPost } from "../Util/api";
|
||||||
|
|
||||||
export function NewPostInputArea(): JSXElement {
|
export function NewPostInputArea(): JSXElement {
|
||||||
const [content, setContent] = createSignal("");
|
const [content, setContent] = createSignal("");
|
|
@ -1,8 +1,8 @@
|
||||||
import { useNavigate } from "@solidjs/router";
|
import { useNavigate } from "@solidjs/router";
|
||||||
import { For, JSXElement, Show, createSignal } from "solid-js";
|
import { For, JSXElement, Show, createSignal } from "solid-js";
|
||||||
|
|
||||||
import { Arrow, loadSpinner } from "./Icons";
|
import { Arrow, loadSpinner } from "../Util/Icons";
|
||||||
import { Post, getPosts } from "./api";
|
import { Post, getPosts } from "../Util/api";
|
||||||
|
|
||||||
export function Posts(): JSXElement {
|
export function Posts(): JSXElement {
|
||||||
const [posts, setPosts] = createSignal([] as Post[]);
|
const [posts, setPosts] = createSignal([] as Post[]);
|
|
@ -1,7 +1,7 @@
|
||||||
import { JSXElement, Show, createSignal, useContext } from "solid-js";
|
import { JSXElement, Show, createSignal, useContext } from "solid-js";
|
||||||
|
|
||||||
import { LoginContext, ModalContext } from "../GlobalState";
|
import { LoginContext, ModalContext } from "../Context/GlobalState";
|
||||||
import { AuthResponse, submitRegistration } from "../api";
|
import { AuthResponse, submitRegistration } from "../Util/api";
|
||||||
|
|
||||||
export function RegisterForm(): JSXElement {
|
export function RegisterForm(): JSXElement {
|
||||||
const modal_ctx = useContext(ModalContext)!;
|
const modal_ctx = useContext(ModalContext)!;
|
|
@ -1,9 +1,9 @@
|
||||||
import { useParams } from "@solidjs/router";
|
import { useParams } from "@solidjs/router";
|
||||||
import { JSXElement, Show, Suspense, createResource } from "solid-js";
|
import { JSXElement, Show, Suspense, createResource } from "solid-js";
|
||||||
|
|
||||||
import { loadSpinner } from "./Icons";
|
import { loadSpinner } from "../Util/Icons";
|
||||||
|
import { getPost } from "../Util/api";
|
||||||
import { PostSegment } from "./Posts";
|
import { PostSegment } from "./Posts";
|
||||||
import { getPost } from "./api";
|
|
||||||
|
|
||||||
export function SinglePost(): JSXElement {
|
export function SinglePost(): JSXElement {
|
||||||
const params = useParams();
|
const params = useParams();
|
|
@ -17,7 +17,7 @@ export function Footer(): JSXElement {
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
class="fill-current"
|
class="fill-current"
|
||||||
>
|
>
|
||||||
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
|
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a>
|
<a>
|
||||||
|
@ -28,7 +28,7 @@ export function Footer(): JSXElement {
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
class="fill-current"
|
class="fill-current"
|
||||||
>
|
>
|
||||||
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
|
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a>
|
<a>
|
||||||
|
@ -39,7 +39,7 @@ export function Footer(): JSXElement {
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
class="fill-current"
|
class="fill-current"
|
||||||
>
|
>
|
||||||
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
|
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
|
@ -1,8 +1,8 @@
|
||||||
import { JSXElement, Show, onCleanup, useContext } from "solid-js";
|
import { JSXElement, Show, onCleanup, useContext } from "solid-js";
|
||||||
|
|
||||||
import { ModalContext } from "./GlobalState";
|
import { LoginForm } from "../Components/Login";
|
||||||
import { LoginForm } from "./RegLogin/Login";
|
import { RegisterForm } from "../Components/Register";
|
||||||
import { RegisterForm } from "./RegLogin/Register";
|
import { ModalContext } from "../Context/GlobalState";
|
||||||
|
|
||||||
export function LoginModal(): JSXElement {
|
export function LoginModal(): JSXElement {
|
||||||
const modal_ctx = useContext(ModalContext)!;
|
const modal_ctx = useContext(ModalContext)!;
|
|
@ -1,9 +1,9 @@
|
||||||
import { A } from "@solidjs/router";
|
import { A } from "@solidjs/router";
|
||||||
import { JSXElement } from "solid-js";
|
import { JSXElement } from "solid-js";
|
||||||
|
|
||||||
import { Flake } from "./Icons";
|
import { LoginButton } from "../Components/LoginButton";
|
||||||
import { LoginButton } from "./LoginButton";
|
import { Menu } from "../Components/Menu";
|
||||||
import { Menu } from "./Menu";
|
import { Flake } from "../Util/Icons";
|
||||||
|
|
||||||
export function Navbar(): JSXElement {
|
export function Navbar(): JSXElement {
|
||||||
return (
|
return (
|
|
@ -1,9 +1,9 @@
|
||||||
import { Route, Routes } from "@solidjs/router";
|
import { Route, Routes } from "@solidjs/router";
|
||||||
import { JSXElement } from "solid-js";
|
import { JSXElement } from "solid-js";
|
||||||
|
|
||||||
import { NewPostInputArea } from "./NewPost";
|
import { NewPostInputArea } from "../Components/NewPost";
|
||||||
import { Posts } from "./Posts";
|
import { Posts } from "../Components/Posts";
|
||||||
import { SinglePost } from "./SinglePost";
|
import { SinglePost } from "../Components/SinglePost";
|
||||||
|
|
||||||
// Primary is the section of the page that holds the main content
|
// Primary is the section of the page that holds the main content
|
||||||
export function Primary(): JSXElement {
|
export function Primary(): JSXElement {
|
|
@ -1,10 +1,10 @@
|
||||||
import { JSXElement } from "solid-js";
|
import { JSXElement } from "solid-js";
|
||||||
|
|
||||||
import { GlobalStateProvider } from "./GlobalState";
|
import { GlobalStateProvider } from "../Context/GlobalState";
|
||||||
|
import { Footer } from "./Footer";
|
||||||
import { LoginModal } from "./LoginModal";
|
import { LoginModal } from "./LoginModal";
|
||||||
import { Navbar } from "./Navbar";
|
import { Navbar } from "./Navbar";
|
||||||
import { Primary } from "./Primary";
|
import { Primary } from "./Primary";
|
||||||
import { Footer } from "./Footer";
|
|
||||||
|
|
||||||
function Root(): JSXElement {
|
function Root(): JSXElement {
|
||||||
return (
|
return (
|
||||||
|
@ -14,7 +14,7 @@ function Root(): JSXElement {
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<LoginModal />
|
<LoginModal />
|
||||||
<div class="flex w-full min-h-[65vh] flex-col items-center mb-8 space-y-2 px-2 md:max-w-3xl">
|
<div class="mb-8 flex min-h-[65vh] w-full flex-col items-center space-y-2 px-2 md:max-w-3xl">
|
||||||
<Primary />
|
<Primary />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
|
@ -47,7 +47,7 @@ export function GlobalStateProvider(props: {
|
||||||
return token() != "" && username() != "";
|
return token() != "" && username() != "";
|
||||||
}
|
}
|
||||||
|
|
||||||
function logIn (username: string, token: string): void {
|
function logIn(username: string, token: string): void {
|
||||||
setUsername(username);
|
setUsername(username);
|
||||||
setToken(token);
|
setToken(token);
|
||||||
localStorage.setItem("token", token);
|
localStorage.setItem("token", token);
|
||||||
|
@ -63,9 +63,19 @@ export function GlobalStateProvider(props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ModalContext.Provider value={{ isOpen: loginModalOpen, setOpen: setLoginModalOpen }}>
|
<ModalContext.Provider
|
||||||
|
value={{ isOpen: loginModalOpen, setOpen: setLoginModalOpen }}
|
||||||
|
>
|
||||||
<LoginContext.Provider
|
<LoginContext.Provider
|
||||||
value={{ token, setToken, username, setUsername, loggedIn, logOut, logIn }}
|
value={{
|
||||||
|
token,
|
||||||
|
setToken,
|
||||||
|
username,
|
||||||
|
setUsername,
|
||||||
|
loggedIn,
|
||||||
|
logOut,
|
||||||
|
logIn,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
</LoginContext.Provider>
|
</LoginContext.Provider>
|
|
@ -1,7 +1,7 @@
|
||||||
import { Router } from "@solidjs/router";
|
import { Router } from "@solidjs/router";
|
||||||
import { render } from "solid-js/web";
|
import { render } from "solid-js/web";
|
||||||
|
|
||||||
import Root from "./Root";
|
import Root from "./Containers/Root";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|
||||||
const root = document.getElementById("root");
|
const root = document.getElementById("root");
|
||||||
|
|
Loading…
Reference in a new issue