diff options
Diffstat (limited to 'src/web/components')
30 files changed, 1920 insertions, 0 deletions
diff --git a/src/web/components/app/App.css b/src/web/components/app/App.css new file mode 100644 index 0000000..e211974 --- /dev/null +++ b/src/web/components/app/App.css @@ -0,0 +1,19 @@ + +.content { + /* sticky footer */ + flex-grow: 1; + flex-shrink: 0; + + display: flex; + flex-direction: column; + align-items: left; + + padding: 0; + background-color: var(--black-10); +} + +@media (min-width: 40em) { + .content { + padding: 0em 0em 0em var(--menu-width); + } +}
\ No newline at end of file diff --git a/src/web/components/app/App.jsx b/src/web/components/app/App.jsx new file mode 100644 index 0000000..ffd2cc7 --- /dev/null +++ b/src/web/components/app/App.jsx @@ -0,0 +1,29 @@ +import React from "react"; +import {Route, Routes} from "react-router-dom"; + +import NavBar from "components/nav_bar/NavBar.jsx"; +import Forum from "components/forum/Forum.jsx"; +import NotFound from "components/not_found/NotFound.jsx"; +import Settings from "components/settings/Settings.jsx"; +import {UserContextProvider} from "contexts/UserContext.jsx"; +import {StateContextProvider} from "contexts/StateContext.jsx"; + +import styles from "./App.css"; + +export default function App() { + return ( + <UserContextProvider> + <StateContextProvider> + <NavBar /> + <main className={styles.content}> + <Routes> + <Route path="/*" element={<Forum />} /> + <Route path="/settings/*" element={<Settings />} /> + + <Route path="*" element={<NotFound />} /> + </Routes> + </main> + </StateContextProvider> + </UserContextProvider> + ); +} diff --git a/src/web/components/button/Button.css b/src/web/components/button/Button.css new file mode 100644 index 0000000..76c5450 --- /dev/null +++ b/src/web/components/button/Button.css @@ -0,0 +1,15 @@ +.button { + padding: 0.75em 1em; + + color: var(--black-98); + background-color: var(--brand-80); + border: 2px solid var(--brand-80); + border-radius: 2em; + font-family: inherit; + letter-spacing: inherit; + cursor: pointer; +} +.button:hover { + color: white; + background-color: var(--brand-90); +}
\ No newline at end of file diff --git a/src/web/components/button/Button.jsx b/src/web/components/button/Button.jsx new file mode 100644 index 0000000..8d7de02 --- /dev/null +++ b/src/web/components/button/Button.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import styles from "./Button.css"; + +export default function Button({className, children, ...others}) { + return ( + <button className={styles.button + (className != null ? " " + className : "")} {...others} > + {children} + </button> + ) +}
\ No newline at end of file diff --git a/src/web/components/card/Card.css b/src/web/components/card/Card.css new file mode 100644 index 0000000..79d38ac --- /dev/null +++ b/src/web/components/card/Card.css @@ -0,0 +1,5 @@ +.card { + box-shadow: 0 0 0.2em 0.01em var(--black-10); + border-radius: 1.0em; + background-color: var(--black-10); +}
\ No newline at end of file diff --git a/src/web/components/card/Card.jsx b/src/web/components/card/Card.jsx new file mode 100644 index 0000000..36c4f1d --- /dev/null +++ b/src/web/components/card/Card.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import styles from "./Card.css"; + +export default function Card({children, className, ...others}) { + return ( + <div className={styles.card + (className ? " " + className : "")} {...others}> + {children} + </div> + ); +}
\ No newline at end of file diff --git a/src/web/components/comments/Comments.css b/src/web/components/comments/Comments.css new file mode 100644 index 0000000..402e4a2 --- /dev/null +++ b/src/web/components/comments/Comments.css @@ -0,0 +1,30 @@ +.container { + width: 100%; + position: relative; + + /*TODO*/ + display: none; + + justify-content: center; + padding: 1em 1em 0em 0em; + overflow: auto; + + color: var(--black-98); +} + +.card { + padding: 1em; +} + +.originalPost { + +} +.originalPost > h1 { + font-size: 1.8em; +} + +@media (min-width: 80em) { + .container { + display: flex; + } +}
\ No newline at end of file diff --git a/src/web/components/comments/Comments.jsx b/src/web/components/comments/Comments.jsx new file mode 100644 index 0000000..66e0f06 --- /dev/null +++ b/src/web/components/comments/Comments.jsx @@ -0,0 +1,44 @@ +import React, {Fragment} from "react"; + +import Card from "components/card/Card.jsx"; + +import styles from "./Comments.css"; + +function OtherComments() { + return ( + <Fragment /> + ); +} + +function OriginalComment() { + return ( + <div className={styles.originalPost}> + <h1>Galahs in Australia</h1> + <p> + The galah is very common as a companion parrot or avicultural specimen around the world, although generally + absent from Australian aviaries, although permits are available to take a limited number of galahs from + the wild per year for avicultural purposes. When tame, it can be an affectionate and friendly bird that + can learn to talk, as well as mimic other sounds heard in its environment. While it is a noisy bird that may + be unsuitable for apartment living, it is comparatively quieter than other cockatoo species. Like most + parrots, the galah requires plenty of exercise and play time out of its cage as well as several hours of daily + social interaction with humans or other birds in order to thrive in captivity. It may also be prone to obesity + if not provided with a suitable, nutritionally-balanced diet. The World Parrot Trust recommends that captive + galahs should be kept in an aviary with a minimum length of 7 metres. + The breeding requirements include the use upright or tilted logs with a hollow some twenty to thirty + centimetres in diameter. Sand and finer grades of wood material are used to construct their nest, the + availability of eucalypt leaves for the nest lining is also suggested for captive breeding. + </p> + </div> + ); +} + +export default function Comments() { + return ( + <div className={styles.container}> + <Card className={styles.card}> + <OriginalComment /> + <OtherComments /> + </Card> + </div> + ); +}
\ No newline at end of file diff --git a/src/web/components/darken/Darken.css b/src/web/components/darken/Darken.css new file mode 100644 index 0000000..bd3b151 --- /dev/null +++ b/src/web/components/darken/Darken.css @@ -0,0 +1,14 @@ +.darken { + visibility: hidden; + + position: fixed; + inset: 0; + + background-color: rgba(0, 0, 0, 0.0); + cursor: pointer; + transition: background-color var(--transition-time) ease-in-out; +} +.darkenActive { + visibility: initial; + background-color: rgba(0, 0, 0, 0.5); +}
\ No newline at end of file diff --git a/src/web/components/darken/Darken.jsx b/src/web/components/darken/Darken.jsx new file mode 100644 index 0000000..7f46365 --- /dev/null +++ b/src/web/components/darken/Darken.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import styles from "./Darken.css"; + +export default function Darken({active, className, ...others}) { + + return ( + <div + className={styles.darken + + (active ? " " + styles.darkenActive : "") + + (className ? " " + className : "")} + {...others} /> + ); +}
\ No newline at end of file diff --git a/src/web/components/forum/Forum.css b/src/web/components/forum/Forum.css new file mode 100644 index 0000000..4ba6dea --- /dev/null +++ b/src/web/components/forum/Forum.css @@ -0,0 +1,21 @@ +.container { + width: 100%; + + /* + We're using dvh, which is a newish feature that excludes the size of mobile + added menus. If we don't use this and instead use 100vh, we have to scroll + before we see some elements at the bottom of the page. + */ + height: calc(100vh - var(--nav-bar-height)); + height: calc(100dvh - var(--nav-bar-height)); + + display: flex; + + background-color: var(--black-15); +} + +@media(min-width: 40em) { + .container { + border-radius: 1em 0 0 0; + } +} diff --git a/src/web/components/forum/Forum.jsx b/src/web/components/forum/Forum.jsx new file mode 100644 index 0000000..eed0fe9 --- /dev/null +++ b/src/web/components/forum/Forum.jsx @@ -0,0 +1,14 @@ +import React from "react"; + +import Posts from "components/posts/Posts.jsx"; +import Comments from "components/comments/Comments.jsx"; +import styles from "./Forum.css"; + +export default function Forum() { + return ( + <div className={styles.container}> + <Posts /> + <Comments /> + </div> + ); +}
\ No newline at end of file diff --git a/src/web/components/input/Input.css b/src/web/components/input/Input.css new file mode 100644 index 0000000..a7da62d --- /dev/null +++ b/src/web/components/input/Input.css @@ -0,0 +1,31 @@ +.container { + display: flex; + flex-direction: column; +} + +.row { + width: 100%; + + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.input { + padding: 0.2rem 1rem; + margin: 0.5rem 0 1rem; + + background-color: transparent; + border-radius: 2em; + border: 2px solid var(--brand-80); + color: var(--black-98); + font-size: inherit; + font-family: inherit; + letter-spacing: inherit; + resize: none; +} + +.label { + font-size: 1.35em; + font-style: italic; +} diff --git a/src/web/components/input/Input.jsx b/src/web/components/input/Input.jsx new file mode 100644 index 0000000..2c7bc6e --- /dev/null +++ b/src/web/components/input/Input.jsx @@ -0,0 +1,38 @@ +import React from "react"; + +import styles from "./Input.css"; +import animations from "styles/animations.css"; + +function InputField({className, type, id, value, onChange, inputType}) { + // idk how to do this less uglily + switch (inputType) { + case "textarea": + return <textarea className={className} type={type} id={id} value={value} onChange={onChange} />; + default: + break; + } + return <input className={className} type={type} id={id} value={value} onChange={onChange} />; +} + +export default function Input({className, type, field, title, setField, validateField, inputType}) { + return ( + <div className={styles.container + (className ? " " + className : "")}> + <div className={styles.row}> + <label htmlFor={title} className={styles.label}>{title}</label> + <h3 className={(field?.animating ? animations.shake : "")} + onAnimationEnd={() => {setField({...field, animating: false});}}> + {field?.erroring ? validateField(field) : null} + </h3> + </div> + <InputField className={styles.input} + inputType={inputType} + type={type} + id={title} + value={field?.target?.value ?? ""} + onChange={(event) => {setField({...field, + erroring: true, + target: event.target});}} + field={field} /> + </div> + ); +}
\ No newline at end of file diff --git a/src/web/components/loading/Loading.css b/src/web/components/loading/Loading.css new file mode 100644 index 0000000..3889953 --- /dev/null +++ b/src/web/components/loading/Loading.css @@ -0,0 +1,13 @@ +.loading { + width: 1em; + height: 1em; + animation: rotate 1s infinite linear; +} +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +}
\ No newline at end of file diff --git a/src/web/components/loading/Loading.jsx b/src/web/components/loading/Loading.jsx new file mode 100644 index 0000000..df2caf4 --- /dev/null +++ b/src/web/components/loading/Loading.jsx @@ -0,0 +1,13 @@ +import React from "react"; + +import styles from "./Loading.css"; + +import half_circle from "assets/svg/half_circle.svg"; + +export default function Loading({className, ...others}) { + return ( + <img src={half_circle} + className={styles.loading + (className ? " " + className : "")} + {...others} /> + ); +}
\ No newline at end of file diff --git a/src/web/components/login/Login.css b/src/web/components/login/Login.css new file mode 100644 index 0000000..1be8f84 --- /dev/null +++ b/src/web/components/login/Login.css @@ -0,0 +1,118 @@ +.screenCenter { + display: flex; + justify-content: center; + align-items: center; + z-index: var(--login-z-index); + + position: fixed; + inset: 0; + visibility: hidden; +} + +.darken { + z-index: calc(var(--login-z-index) - 1); +} +.login { + display: flex; + flex-direction: column; + justify-content: center; + flex: 0 1 100%; + + position: relative; + padding: 4em 2em 2em; + margin: 0em 3em; + max-width: 25em; + + color: var(--black-98); + visibility: visible; + border-radius: 2em; + + translate: 100vw; + transition: translate var(--transition-time) ease-in-out; +} +.loginActive { + translate: initial; + visibility: initial; +} + +.formContainer { + display: flex; + justify-content: center; + flex-direction: column; +} + +.login .formContainer h1 { + font-size: 2em; + font-weight: bolder; + text-align: center; + color: white; + margin-bottom: 2rem; +} +.login .formContainer h2 { + font-size: 1.5em; + font-weight: 500; + margin-bottom: 0.5rem; +} +.login .formContainer p { + text-align: center; + line-height: 1.25em; +} + +.promptContainer { + min-height: 5em; + display: flex; + justify-content: space-between; +} + +.login .formContainer button { + height: 2.25rem; + font-size: 1.25em; + margin-bottom: 1.25rem; + width: 100%; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 2.5rem; + font-weight: 600; + cursor: pointer; +} + +.loading { + font-size: 1.65rem; + filter: invert(95%); +} + +.formContainer a { + display: block; + text-align: center; + text-decoration: underline; + cursor: pointer; + min-height: 3em; + color: inherit; +} + +.promptContainer input { + margin: 0 0.25em 0 0; +} + +.cardError { + display: none; + position: absolute; + inset: 0 0 auto 0; + min-height: 2em; + margin: 1em; + + justify-content: center; + align-items: center; + + color: white; + border-radius: 2em; + font-weight: normal; + font-style: italic; + text-transform: uppercase; +} +.cardErrorActive { + display: flex; +}
\ No newline at end of file diff --git a/src/web/components/login/Login.jsx b/src/web/components/login/Login.jsx new file mode 100644 index 0000000..7944aa3 --- /dev/null +++ b/src/web/components/login/Login.jsx @@ -0,0 +1,218 @@ +import React, {Fragment, useState, useContext} from "react"; +import {Link} from "react-router-dom"; + +import Card from "components/card/Card.jsx"; +import Button from "components/button/Button.jsx"; +import Darken from "components/darken/Darken.jsx"; +import Loading from "components/loading/Loading.jsx"; +import Input from "components/input/Input.jsx"; +import {UserContext} from "contexts/UserContext.jsx"; +import {maybeAuthFromCookie} from "helpers/Auth.jsx"; +import {getFieldError, correctFieldAnimate} from "helpers/Input.jsx"; + +import styles from "./Login.css"; + +const validateEmail = (email) => getFieldError(email?.target?.value, [3, 254]); +const validatePassword = (password) => getFieldError(password?.target?.value, [8, 64]); + +function RequestButton({email, password, apiPath, promise, setPromise, setEmail, + setPassword, setLoginActive, setError, children}) { + + const userState = useContext(UserContext); + + const onClick = () => { + if (promise != null) { + return; + } + setError(null); + + // We don't want to send a worthless request, we should animate the bad values. + const emailErrors = validateEmail(email); + const passwordErrors = validatePassword(password); + if (emailErrors != null || passwordErrors != null) { + correctFieldAnimate(email, setEmail, emailErrors); + correctFieldAnimate(password, setPassword, passwordErrors); + return; + } + + const init = { + method: "POST", + headers: { + 'Content-Type': "application/json" + }, + body: JSON.stringify({ + "email": email.target.value, + "password": password.target.value + }), + referrer: "same-origin", + }; + setPromise(fetch(apiPath, init) + .then((response) => { + if (response.ok) { + if (!maybeAuthFromCookie(userState)) { + throw new Error("rejected authentication token"); + } + + setLoginActive(false); + return; + } + + return response.json() + .then((json) => { + if ("error" in json) { + throw new Error(json.error); + } + throw new Error("unexpected data received"); + }) + }) + .catch((error) => { + console.log(error); + setError(error.message); + }) + .finally(() => { + setPromise(null); + }) + ); + }; + + // I'm not worried about this object becoming unmounted mid promise because + // our website design removes this possibility. + return ( + <Button className={(promise != null ? styles.buttonLoading : null)} + onClick={onClick}> + + {children} + </Button> + ); +} + +function CardError({active, text}) { + return ( + <div className={styles.cardError + (active ? " " + styles.cardErrorActive : "")}> + <p> + {text} + </p> + </div> + ); +} + +function FormContents(props) { + const {setLoginActive, + isRegister, + setIsRegister, + title, + prompt, + linkContents, + apiPath} = props; + + const [error, setError] = useState(null); + // Email and password .value's are null here to represent the state where the user + // has not typed in anything yet. This is to only validate after at least some + // input has been received. + const [email, setEmail] = useState(null); + const [password, setPassword] = useState(null); + const [promise, setPromise] = useState(null); + + return ( + <div className={styles.formContainer}> + <CardError active={error != null} text={error} /> + + <h1>{title}</h1> + + <Input type="text" + title="Email" + field={email} + setField={setEmail} + validateField={validateEmail} /> + + <Input type="text" + title="Password" + field={password} + setField={setPassword} + validateField={validatePassword} /> + + <div className={styles.promptContainer}> + {prompt} + </div> + + <RequestButton email={email} + password={password} + promise={promise} + setEmail={setEmail} + setPassword={setPassword} + setLoginActive={setLoginActive} + setPromise={setPromise} + setError={setError} + apiPath={apiPath}> + + {promise == null ? title : <Loading className={styles.loading} />} + </RequestButton> + + <a onClick={() => { + if (promise != null) { // disallow mid transaction change + return; + } + setIsRegister(!isRegister); + setError(null); + setEmail({...email, value: null, animating: false}); + setPassword({...password, value: null, animating: false});}}> + + {linkContents} + </a> + </div> + ); +}; + +function RegisterPrompt() { + return ( + <p> + By registering, you agree to both our privacy policy and to + waive all rights of basic privacy and security. + </p> + ); +} + +function LoginPrompt(props) { + const {setLoginActive} = props; + + return ( + <Fragment> + <div> + <input type="checkbox" id="save_login" /><label htmlFor="save_login">Save Login</label> + </div> + <Link to="settings/recover" onClick={() => setLoginActive(false)}> + Can't log in? + </Link> + </Fragment> + ); +} + +function Prompt(props) { + const {setLoginActive} = props; + const [isRegister, setIsRegister] = useState(true); + return ( + <FormContents setLoginActive={setLoginActive} + isRegister={isRegister} + setIsRegister={setIsRegister} + title={isRegister ? "Sign Up" : "Login"} + prompt={isRegister ? <RegisterPrompt /> : <LoginPrompt setLoginActive={setLoginActive} />} + linkContents={isRegister ? "Already have an account?" : "Don't have an account?"} + apiPath={isRegister ? "/api/signup" : "/api/login"} /> + ); +} + +// A popup which asks for login/register info. +export default function Login(props) { + const {active, setActive} = props; + + return ( + <Fragment> + <Darken active={active} onClick={() => setActive(false)} className={styles.darken} /> + <div className={styles.screenCenter}> + <Card className={styles.login + (active ? " " + styles.loginActive : "")}> + <Prompt setLoginActive={setActive} /> + </Card> + </div> + </Fragment> + ); +}
\ No newline at end of file diff --git a/src/web/components/nav_bar/NavBar.css b/src/web/components/nav_bar/NavBar.css new file mode 100644 index 0000000..d9e315e --- /dev/null +++ b/src/web/components/nav_bar/NavBar.css @@ -0,0 +1,304 @@ +:root { + --nav-bar-color: var(--black-10); + --nav-bar-font-color: var(--black-98); + --nav-bar-height: 4rem; + --nav-bar-shadow: 0 0.05em 0.16em var(--nav-bar-color); +} + +.navBar { + /* sticky footer */ + flex-shrink: 0; + + min-width: 100%; + height: var(--nav-bar-height); + + z-index: var(--nav-bar-z-index); + position: sticky; + top: 0; + display: flex; + justify-content: space-between; + align-items: center; + + background-color: var(--nav-bar-color); + box-shadow: var(--nav-bar-shadow); + font-weight: bolder; +} + +.container { + display: flex; + align-items: center; + min-height: var(--nav-bar-height); +} +.bannerContainer > a { + display: inherit; + justify-content: inherit; + align-items: inherit; + min-height: var(--nav-bar-height); + text-decoration: none; +} + +.bannerContainer { + display: flex; + align-items: center; + min-height: var(--nav-bar-height); +} +.logo { + margin-left: 0.5em; + height: calc(var(--nav-bar-height) - 0.5em); + width: calc(var(--nav-bar-height) - 0.5em); +} + +.bannerContainer h1 { + font-size: 1.5em; + margin: 0; + + color: var(--nav-bar-font-color); + text-decoration: none; + text-transform: none; + font-weight: bold; +} + +.burgerButton { + height: var(--nav-bar-height); + width: var(--nav-bar-height); + margin-left: 0.5em; + + display: flex; + justify-content: center; + align-items: center; + + border: 0; + background-color: transparent; + cursor: pointer; + background: url(assets/svg/burger.svg) center center no-repeat; + background-size: 3em; + filter: invert(95%); +} + +:root { + --menu-width: calc(100vw * 0.7); +} + +.menu { + position: fixed; + inset: 0 calc(100vw - var(--menu-width)) 0 0; + translate: calc(var(--menu-width) * -1); + z-index: var(--menu-z-index); + + display: flex; + flex-direction: column; + + background-color: var(--nav-bar-color); + + transition: translate var(--transition-time) ease-in; +} +.menuActive { + translate: initial; +} + +.darken { + z-index: calc(var(--menu-z-index) - 1); +} + +.itemListContainer { + display: inherit; + flex-direction: inherit; + overflow: scroll; + height: 100%; +} +.itemList { + position: static; + display: block; + margin: 0; + overflow: visible; + padding: 0 0.5em; +} +.itemList + .itemList { + border-top: solid hsl(0, 0%, 35%) 1px; +} +.itemList > p { + margin-bottom: 1em; + height: var(--nav-bar-height); + padding-top: 1.5em; + + text-align: center; + color: var(--nav-bar-font-color); + font-style: italic; + font-weight: 100; +} + +.titleContainer { + display: flex; + align-items: end; + margin: 1em 0 0.5em 0.5em; +} +.titleContainer h3 { + color: var(--nav-bar-font-color); + font-size: 1.25em; + text-transform: uppercase; +} + +.item { + display: flex; + align-items: center; + width: 100%; + padding: 0 1.0rem; + min-height: var(--nav-bar-height); + + background-color: transparent; + border-radius: 1.5rem; + text-decoration: none; + color: var(--nav-bar-font-color); + font-size: 1.75em; + text-transform: uppercase; +} +.item:hover { + background-color: hsl(0, 0%, 25%); +} +.itemActive { + background-color: var(--brand-80); +} +.itemActive:hover { + color: white; + background-color: var(--brand-90); +} +.itemIcon { + width: 1em; +} +.item h4 { + margin-left: 2rem; + font-size: 0.675em; + text-transform: capitalize; + font-weight: 100; +} +.itemActive h4 { + font-weight: 800; +} + +.menu span { + font-size: 0.8em; + width: 100%; + margin-top: auto; + + display: flex; + align-items: center; + justify-content: center; + + color: var(--nav-bar-font-color); +} + +.loginStatus { + font-size: 0.8em; + + padding: 0.75em 1em; + + margin: 0em 1.5em 0em 0.7em; + font-weight: 600; +} + +.accountContainer { + display: flex; + align-items: center; + justify-content: center; + margin-right: 1em; + width: 12em; + + color: var(--black-98); + background-color: hsl(0, 0%, 15%); + padding: 0.5em 1em; + border-radius: 1em; +} +.accountIcon { + height: 1.75em; + color: hsl(186, 90%, 50%); +} +.accountContainer h2 { + margin: 0 0.4em 0 0.25em; +} +.accountArrow { + height: 0.8em; + rotate: -90deg; +} +.accountInfoItemList { + display: none; + padding-top: 0.5em; + + position: absolute; + right: 1em; + top: 3em; + width: 12em; + + flex-direction: column; + background-color: inherit; + border-radius: 1em; + border-top-right-radius: 0em; + border-top-left-radius: 0em; +} +.accountInfoItem { + display: flex; + justify-content: center; + align-items: center; + + color: var(--black-98); + text-decoration: none; + padding: 1em 0; +} +.accountInfoItem + .accountInfoItem { + border-top: 1px hsl(0, 0%, 50%) solid; +} +.accountInfoItem h3 { + font-weight: 200; +} +@media (max-width: 40em) { + .accountContainerActive { + background-color: hsl(0, 0%, 25%); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + .accountArrowActive { + rotate: 90deg; + } + .accountInfoItemListActive { + display: flex; + } +} + +@media (min-width: 40em) { + :root { + --menu-width: 15em; + } + .darken { + display: none; + } + .burgerButton { + display: none; + } + .menu { + translate: initial; + transition: none; + + } + .itemListContainer { + font-size: 0.8em; + box-shadow: var(--nav-bar-shadow); + } + + .accountInfoListActive { + display: unset; + } + .accountContainer:hover { + background-color: hsl(0, 0%, 25%); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + .accountContainer:hover .accountInfoItemList { + display: flex; + } + .accountContainer:hover .accountArrow { + rotate: 90deg; + } + .accountInfoItem:hover h3 { + color: white; + font-weight: bolder; + } +}
\ No newline at end of file diff --git a/src/web/components/nav_bar/NavBar.jsx b/src/web/components/nav_bar/NavBar.jsx new file mode 100644 index 0000000..3c22851 --- /dev/null +++ b/src/web/components/nav_bar/NavBar.jsx @@ -0,0 +1,174 @@ +import React, {useState, Fragment, useContext, useEffect} from "react"; +import {Link, useLocation} from "react-router-dom"; + +import Button from "components/button/Button.jsx"; +import Login from "components/login/Login.jsx"; +import Darken from "components/darken/Darken.jsx"; +import {UserContext} from "contexts/UserContext.jsx"; +import {StateContext} from "contexts/StateContext.jsx"; +import {refreshToken, logout} from "helpers/Auth.jsx"; +import {getSubreactFromLocation, getInfoFromSubreact} from "helpers/Location.jsx"; + +import styles from "./NavBar.css" +import logo from "assets/images/logo.png" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faUser, faPlay} from "@fortawesome/free-solid-svg-icons"; + +function AccountInfoItem({title, onClick, path, className}) { + return ( + <Link className={styles.accountInfoItem + (className ? " " + className : "")} + onClick={onClick} + to={path}> + + <h3>{title}</h3> + </Link> + ); +} + +function AccountInfo({user, setUser}) { + // At this stage the user is logged in and we keep them logged in by periodically + // refreshing our token. + useEffect(() => { + const interval = setInterval(() => { + refreshToken(user, setUser); + }, 58 * 60 * 1000); // refresh every 58 minutes, expires every sixty. + return () => clearInterval(interval); + }, []); + const [active, setActive] = useState(false); + + return ( + <div className={styles.accountContainer + (active ? " " + styles.accountContainerActive : "")} + onClick={() => {setActive(!active);}}> + <FontAwesomeIcon icon={faUser} className={styles.accountIcon} /> + <h2>{user.username ?? "anonymous"}</h2> + <FontAwesomeIcon icon={faPlay} className={styles.accountArrow + (active ? " " + styles.accountArrowActive : "")} /> + <div className={styles.accountInfoItemList + (active ? " " + styles.accountInfoItemListActive : "")}> + <AccountInfoItem title="Profile" path="/settings" /> + <AccountInfoItem title="Settings" path="/settings" /> + <AccountInfoItem title="Logout" path="/" onClick={() => {logout(setUser);}} /> + </div> + </div> + ); +} + +function LoginStatus({loginActive, setLoginActive}) { + const [user, setUser] = useContext(UserContext); + + // Not logged in, request a login. + if (user == null) { + return ( + <Button className={styles.loginStatus} + onClick={() => {setLoginActive(!loginActive);}}> + + <h2>Not Logged In</h2> + </Button> + ); + } + + return <AccountInfo user={user} setUser={setUser} />; +} + +function Account() { + const [state, setState] = useContext(StateContext); + const {loginActive} = state; + const setLoginActive = (isActive) => {setState({...state, loginActive: isActive});}; + + return ( + <Fragment> + <Login active={loginActive} setActive={setLoginActive} /> + <LoginStatus loginActive={loginActive} setLoginActive={setLoginActive} /> + </Fragment> + ); +} + +function Banner({navBarActive, setNavBarActive, shouldToggleNavBar}) { + + return ( + <div className={styles.bannerContainer}> + <button className={styles.burgerButton} + onClick={() => setNavBarActive(!navBarActive)} /> + + <Link to="/" + onClick={shouldToggleNavBar ? () => setNavBarActive(!navBarActive) : null}> + + <img className={styles.logo} src={logo} /> + <h1>GoReact</h1> + </Link> + </div> + ); +} + +function Item({path, setNavBarActive}) { + const location = useLocation(); + const subreact = path.replace("/", ""); // "a", "m" etc + const {icon, name} = getInfoFromSubreact(subreact); + + return ( + <Link to={path} + className={styles.item + (getSubreactFromLocation(location) === subreact ? " " + styles.itemActive : "")} + onClick={() => setNavBarActive(false)}> + <FontAwesomeIcon icon={icon} className={styles.itemIcon} /> + <h4>{name}</h4> + </Link> + ); +} + +function ItemList({children, title}) { + + return ( + <div className={styles.itemList}> + <div className={styles.titleContainer}> + <h3>{title}</h3> + </div> + {children && React.Children.count(children) > 0 ? children : <p>There's nothing here...</p>} + </div> + ); +} + +function Menu({navBarActive, setNavBarActive}) { + + return ( + <div className={styles.container}> + <nav className={styles.menu + (navBarActive ? " " + styles.menuActive : "")}> + <Banner navBarActive={navBarActive} setNavBarActive={setNavBarActive} shouldToggleNavBar /> + <div className={styles.itemListContainer}> + <ItemList title="Subreacts"> + <Item path="/" setNavBarActive={setNavBarActive} /> + <Item path="/t" setNavBarActive={setNavBarActive} /> + <Item path="/g" setNavBarActive={setNavBarActive} /> + <Item path="/k" setNavBarActive={setNavBarActive} /> + <Item path="/p" setNavBarActive={setNavBarActive} /> + <Item path="/a" setNavBarActive={setNavBarActive} /> + <Item path="/pr" setNavBarActive={setNavBarActive} /> + <Item path="/m" setNavBarActive={setNavBarActive} /> + </ItemList> + + {/*TODO*/} + <ItemList title="Watched Threads"> + </ItemList> + <ItemList title="Your Threads"> + </ItemList> + <ItemList title="Recent Threads"> + </ItemList> + + <span> + <p>GoReact 2022-2023</p> + </span> + </div> + </nav> + <Account /> + </div> + ); +} + +export default function NavBar() { + const [active, setActive] = useState(false); + + return ( + <header className={styles.navBar}> + <Darken active={active} onClick={() => setActive(false)} className={styles.darken} /> + <Banner setNavBarActive={setActive} /> + <Menu navBarActive={active} setNavBarActive={setActive} /> + </header> + ); +}
\ No newline at end of file diff --git a/src/web/components/not_found/NotFound.css b/src/web/components/not_found/NotFound.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/web/components/not_found/NotFound.css diff --git a/src/web/components/not_found/NotFound.jsx b/src/web/components/not_found/NotFound.jsx new file mode 100644 index 0000000..5546d1e --- /dev/null +++ b/src/web/components/not_found/NotFound.jsx @@ -0,0 +1,10 @@ +import React, {Fragment} from "react"; +import styles from "./NotFound.css"; + +export default function NotFound() { + return ( + <Fragment> + <p>Not found route!</p> + </Fragment> + ); +} diff --git a/src/web/components/post/Post.css b/src/web/components/post/Post.css new file mode 100644 index 0000000..8721640 --- /dev/null +++ b/src/web/components/post/Post.css @@ -0,0 +1,91 @@ + + +.postCard { + display: flex; + justify-content: space-around; + align-items: center; + + font-size: 2em; + margin-bottom: 0.75rem; + padding: 1rem 1rem; + + background-color: var(--black-10); + border-radius: 0.5em; + color: white; + box-shadow: none; + + cursor: pointer; +} +.postCard:hover { + background-color: hsl(0, 0%, 25%); +} + +.postCard > img { + flex-shrink: 0; + + border-radius: 50%; + height: 2.5em; + width: 2.5em; +} + +.rowContainer { + display: flex; + flex-direction: column; + flex-basis: 100%; + justify-content: space-between; + + height: 2.5em; + padding-left: 0.5em; + min-width: 0; + + color: var(--black-95); +} + +.rowContainer > h4 { + font-size: 0.4em; + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + text-overflow: ellipsis; + overflow: hidden; +} + +.titleContainer { + display: flex; + justify-content: space-between; + align-items: center; +} +.titleContainer h3 { + font-size: 0.5em; + font-weight: bold; + color: var(--black-98); + + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.titleContainer h4 { + font-size: 0.5em; + font-style: italic; + white-space: nowrap; +} + +.placeholder { + text-decoration: line-through hsl(0, 0%, 60%) 1em; +} +.placeholder img { + background-color: hsl(0, 0%, 50%); +} + +.postIconsContainer { + display: flex; + align-items: center; + justify-content: flex-end; + + font-size: 0.5em; + color: var(--brand-50); +} +.postIconsContainer > div { + margin-left: 0.25em; +} diff --git a/src/web/components/post/Post.jsx b/src/web/components/post/Post.jsx new file mode 100644 index 0000000..3780a38 --- /dev/null +++ b/src/web/components/post/Post.jsx @@ -0,0 +1,63 @@ +import React from "react"; +import {useLocation, useNavigate} from "react-router-dom"; +import dayjs from "dayjs"; +import * as relativeTime from "dayjs/plugin/relativeTime"; + +import Card from "components/card/Card.jsx"; +import styles from "./Post.css"; +import {getInfoFromSubreact} from "helpers/Location.jsx"; + +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; + +dayjs.extend(relativeTime); + +function TopRow({title, timeUpdated}) { + return ( + <div className={styles.titleContainer}> + <h3> + {title} + </h3> + <h4> + {dayjs.unix(timeUpdated).fromNow()} + </h4> + </div> + ); +} + +function MiddleRow({contents}) { + return ( + <h4> + {contents} + </h4> + ); +} + +function BottomRow({subreact}) { + const {icon, name} = getInfoFromSubreact(subreact); + + return ( + <div className={styles.postIconsContainer}> + <FontAwesomeIcon icon={icon} className={styles.subreactIcon} /> + <div> + {name} + </div> + </div> + ); +} + +export default function Post({title, contents, timeUpdated, placeholder, subreact, uid}) { + const location = useLocation(); + const navigate = useNavigate(); + + return ( + <Card className={styles.postCard + (placeholder ? " " + styles.placeholder : "")} + onClick={() => {navigate("/" + subreact + "/" + uid);}}> + <img src={placeholder ? null : "/image/" + uid + ".png?thumbnail=1"} /> + <div className={styles.rowContainer}> + <TopRow title={title} timeUpdated={timeUpdated} /> + <MiddleRow contents={contents} /> + <BottomRow subreact={subreact} /> + </div> + </Card> + ); +}
\ No newline at end of file diff --git a/src/web/components/posts/Posts.css b/src/web/components/posts/Posts.css new file mode 100644 index 0000000..1bee23a --- /dev/null +++ b/src/web/components/posts/Posts.css @@ -0,0 +1,84 @@ +.container { + position: relative; + + display: flex; + flex-direction: column; + justify-content: stretch; + + width: 100%; +} +.containerPadding { + padding: 1rem 1rem 0 1rem; + overflow: scroll; +} +.postContainer { + flex-basis: 100%; + transition: opacity var(--transition-time) ease-in-out; +} +.postContainerActive { + cursor: pointer; + opacity: 50%; +} +.blockEvents { + pointer-events: none; +} + +.container > h1 { + font-size: 1.8em; + + margin-top: 1rem; + margin-bottom: 1rem; + + color: white; + font-weight: bolder; + text-align: center; +} +.container > h2 { + color: var(--black-95); + text-align: center; +} +.container > h3 { + margin-top: 1em; + padding: 1.5em 2em; + + color: var(--brand-100); + opacity: 0.5; + background-color: var(--black-5); + border-radius: 1em; +} +.container > button { + align-self: center; + + margin-top: 1.5em; + + text-transform: uppercase; + font-weight: 600; + cursor: pointer; +} + +.containerFade { + animation: containerFade var(--transition-time) linear; +} +@keyframes containerFade { + 0% { + opacity: 0%; + } + 100% { + opacity: 100%; + } +} + +.containerLoading { + filter: blur(1px); + pointer-events: none; + animation: containerLoading 0.6s infinite; + mask-image: linear-gradient(to bottom, black 0%, transparent 22em); +} +@keyframes containerLoading { + 0%, 100% { + opacity: 100%; + } + 50% { + opacity: 80%; + } +} diff --git a/src/web/components/posts/Posts.jsx b/src/web/components/posts/Posts.jsx new file mode 100644 index 0000000..3944f67 --- /dev/null +++ b/src/web/components/posts/Posts.jsx @@ -0,0 +1,163 @@ +import React, {useState, useEffect, useRef} from "react"; +import {Route, Routes, useLocation, useNavigate} from "react-router-dom"; + + +import Button from "components/button/Button.jsx"; +import Submission from "components/submission/Submission.jsx"; +import Post from "components/post/Post.jsx"; +import {getSubreactFromLocation} from "helpers/Location.jsx"; + +import styles from "./Posts.css"; + +async function makePostsRequest(location, setPosts, setError, mounted) { + const init = { + method: "GET", + referrer: "same-origin", + } + const url = "/api/posts?" + new URLSearchParams({ + page: 0, + amount: 25, + subreact: getSubreactFromLocation(location), + }); + return fetch(url, init) + .then((response) => { + return response.json() + .catch(() => { + throw new Error("unexpected response from server") + }) + }) + .then((json) => { + if ("error" in json) { + throw new Error(json.error); + } + if (!mounted) { + return; + } + setPosts(json.posts); + }) + .catch((error) => { + console.log(error); + if (!mounted) { + return; + } + setError(error.message); + }); +} + +function PostsError({navigate, error}) { + return ( + <div className={styles.container + " " + styles.containerFade}> + <h1>Something's wrong!</h1> + <h2>Sorry, but an unexpected issue has forced us to stop early. Here are the technical details:</h2> + <h3>Error: {error}</h3> + <Button onClick={() => {navigate(0);}}> + Try again + </Button> + </div> + ); +} + +function PostsLoading() { + return ( + <div className={styles.container + " " + styles.containerLoading}> + {[...Array(3)].map((_, i) => + <Post placeholder key={i} /> + )} + </div> + ); +} + +function PostsEmpty({navigate}) { + return ( + <div className={styles.container + " " + styles.containerFade}> + <h1>There's nothing here?!?</h1> + <h2>Try changing subreacts.</h2> + <Button onClick={() => {navigate("/");}}> + Take me home + </Button> + </div> + ); +} + +function PostsStates({error, posts, navigate}) { + if (error !== null) { // Error message. + return ( + <PostsError navigate={navigate} error={error} /> + ); + } + + if (posts == null) { + return ( + <PostsLoading /> + ) + } + + + if (posts.length == 0) { + return ( + <PostsEmpty navigate={navigate} /> + ); + } + + return ( + posts.map(({uid, title, contents, time_updated, thumbnail, subreact}, i) => + <Post key={i} + uid={uid} + title={title} + contents={contents} + timeUpdated={time_updated} + image={thumbnail} + subreact={subreact} />) + ); +} + +export default function Posts() { + const navigate = useNavigate(); + const location = useLocation(); + const locationRef = useRef(location); + + const [posts, setPosts] = useState(null); + const [error, setError] = useState(null); + const [submissionActive, setSubmissionActive] = useState(false); + + + // We make a request if we're at the homepage or if we're changing subreacts. + const shouldMakeRequest = () => { + if (posts === null) { + return true; + } + const [previous, current] = + [locationRef.current, location].map((loc) => getSubreactFromLocation(loc)); + return previous != current; + }; + // This is a bit ugly, we're caching off our previous location so that we know + // if we should update or not. + useEffect(() => { + let mounted = true; + + if (shouldMakeRequest()) { + setPosts(null); + makePostsRequest(location, setPosts, setError, mounted); + } + + locationRef.current = location; + return () => { + setError(null); + mounted = false; + } + }, [location]); + + return ( + <div className={styles.container}> + <div className={styles.containerPadding}> + <div className={styles.postContainer + (submissionActive ? " " + styles.postContainerActive : "")} + onClick={(submissionActive ? () => {setSubmissionActive(false);} : null)}> + <div className={(submissionActive ? styles.blockEvents : "")}> + <PostsStates error={error} posts={posts} navigate={navigate}/> + </div> + </div> + </div> + <Submission active={submissionActive} setActive={setSubmissionActive} /> + </div> + ); +} diff --git a/src/web/components/settings/Settings.css b/src/web/components/settings/Settings.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/web/components/settings/Settings.css diff --git a/src/web/components/settings/Settings.jsx b/src/web/components/settings/Settings.jsx new file mode 100644 index 0000000..e2068a1 --- /dev/null +++ b/src/web/components/settings/Settings.jsx @@ -0,0 +1,9 @@ +import React from "react"; +import styles from "./Settings.css"; + +export default function Settings() { + + return ( + <p>settings route!</p> + ); +}
\ No newline at end of file diff --git a/src/web/components/submission/Submission.css b/src/web/components/submission/Submission.css new file mode 100644 index 0000000..a170132 --- /dev/null +++ b/src/web/components/submission/Submission.css @@ -0,0 +1,146 @@ +.container { + position: absolute; + inset: 0; + + width: 100%; + height: 100%; + padding: 0em 1em; + + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + + visibility: hidden; + overflow: hidden; +} + +.card { + --submission-height: 37em; + + position: relative; + + width: 100%; + padding: 1em; + height: var(--submission-height); + + color: var(--black-98); + background-color: var(--black-10); + border-radius: 0; + border-top: 0.25em solid var(--brand-80); + box-shadow: unset; + + visibility: initial; + translate: 0 var(--submission-height); + + transition: translate var(--transition-time) ease-in-out; +} +.cardActive { + translate: 0 0; +} + +.tabContainer { + font-size: 5em; + + position: absolute; + top: -0.5em; + right: 0em; + + width: var(--tab-size); + height: 0.5em; + + overflow: hidden; +} +.tab { + --tab-size: 1em; + width: var(--tab-size); + height: var(--tab-size); + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + padding-bottom: calc(0.5 * var(--tab-size)); + + border-radius: 1em; + background-color: var(--brand-80); + cursor: pointer; +} +.tab:hover { + color: white; +} +.tabIcon { + position: absolute; + + width: calc(0.4 * var(--tab-size)); + height: calc(0.4 * var(--tab-size)); + + background-color: transparent; + opacity: 100%; + + transition: opacity var(--transition-time) linear; +} +.tabIconHidden { + opacity: 0%; +} + +.card h1 { + font-size: 1.8em; + font-weight: bolder; + text-align: center; +} + +form { + display: flex; + flex-direction: column; +} +.contentsInput textarea { + min-height: 15em; + border-radius: 1em; +} +.fileInput input { + border: unset; + margin-bottom: 0; +} + +.submissionButton { + margin: 0.5rem auto 0; + padding: 0.25em 2em; + min-height: 2.3em; + min-width: 8em; + + display: flex; + justify-content: center; + align-items: center; + + font-size: 1.25em; +} + +.error { + margin-top: 0.5em; + min-height: 2em; + + display: flex; + justify-content: center; + align-items: center; + + visibility: hidden; +} +.errorActive{ + visibility: visible; +} +.error p { + padding: 0.5em 1em; + + color: var(--brand-80); + background-color: var(--black-15); + border-radius: 1em; + font-style: italic; + font-weight: 300; + text-transform: uppercase; +} + +.loading { + filter: invert(100%); +}
\ No newline at end of file diff --git a/src/web/components/submission/Submission.jsx b/src/web/components/submission/Submission.jsx new file mode 100644 index 0000000..9fc080e --- /dev/null +++ b/src/web/components/submission/Submission.jsx @@ -0,0 +1,221 @@ +import React, {useEffect, useState, useContext} from "react"; +import {useLocation} from "react-router-dom"; +import {encode} from "base64-arraybuffer"; + +import {getSubreactFromLocation} from "helpers/Location.jsx"; +import {UserContext} from "contexts/UserContext.jsx"; +import {StateContext} from "contexts/StateContext.jsx"; + +import Card from "components/card/Card.jsx"; +import Button from "components/button/Button.jsx"; +import Input from "components/input/Input.jsx"; +import Loading from "components/loading/Loading.jsx"; + +import styles from "./Submission.css"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faMinus, faPlus} from "@fortawesome/free-solid-svg-icons"; +import {getFieldError, correctFieldAnimate, isSupportedExtension} from "helpers/Input.jsx"; + +const maxFileSize = 4 * 1000 * 1000; // 4MB max size + +const validateTitle = (title) => getFieldError(title?.target?.value, [3, 128]); +const validateContents = (contents) => getFieldError(contents?.target?.value, [5, 3000]); +function validateFile(file) { + const files = file?.target?.files; + if (files == null || files.length == 0) { + return "Required"; + } + const f = files.item(0); + if (f.size > maxFileSize) { // 4MB + return "File too large, exceeded 4MB"; + } + const ext = f.name.split(".")?.pop()?.toLowerCase(); + if (!isSupportedExtension(ext)) { + return "Unsupported image extension"; + } + return null; +} + +function ErrorMessage({message}) { + return ( + <div className={styles.error + (message != null ? " " + styles.errorActive : "")}> + <p> + {message} + </p> + </div> + ); +} + +function RequestButton({promise, setPromise, title, setTitle, contents, setContents, + file, setFile, setError, className, children, setSubmissionActive, subreact}) { + const onClick = (event) => { + event.preventDefault(); + if (promise != null) { + return; + } + setError(null); + + const titleErrors = validateTitle(title); + const contentsErrors = validateContents(contents); + const fileErrors = validateFile(file); + if (titleErrors != null || contentsErrors != null || fileErrors != null) { + correctFieldAnimate(title, setTitle, titleErrors); + correctFieldAnimate(contents, setContents, contentsErrors); + correctFieldAnimate(file, setFile, fileErrors); + return; + } + + setPromise(file.target.files.item(0).arrayBuffer() + .then((buffer) => { + const init = { + method: "POST", + headers: { + 'Content-Type': "application/json" + }, + body: JSON.stringify({ + "title": title.target.value, + "contents": contents.target.value, + "subreact": subreact, + "file": encode(buffer), + }), + referrer: "same-origin", + }; + return fetch("/api/post", init); + }) + .then((response) => { + if (response.ok) { + setSubmissionActive(false); + setContents(null); + setTitle(null); + setFile(null); + return; + } + + return response.json() + .then((json) => { + if ("error" in json) { + throw new Error(json.error); + } + throw new Error("unexpected data received"); + }); + }) + .catch((error) => { + console.log(error); + setError(error.message); + }) + .finally(() => { + setPromise(null); + })); + } + + return ( + <Button className={className} onClick={onClick}> + {promise == null ? children : <Loading className={styles.loading} />} + </Button> + ); +} + +function TabIcon({icon, submissionActive, isDefault}) { + return ( + <FontAwesomeIcon icon={icon} + className={styles.tabIcon + + (!isDefault == submissionActive ? " " + styles.tabIconHidden : "")} /> + ); +} + +function Tab({submissionActive, setSubmissionActive, user, setLoginActive}) { + const [animate, setAnimate] = useState(false); + + const onClick = () => { + if (user === null) { + setLoginActive(true); + return; + } + setAnimate(true); + setSubmissionActive(!submissionActive); + }; + + return ( + <div className={styles.tabContainer}> + <div className={styles.tab + (animate ? " " + styles.fade : "")} onClick={onClick}> + <TabIcon icon={faMinus} submissionActive={submissionActive} isDefault /> + <TabIcon icon={faPlus} submissionActive={submissionActive} /> + </div> + </div> + ); +} + +function SubmissionForm({setSubmissionActive, setError, subreact}) { + const [promise, setPromise] = useState(null); + const [title, setTitle] = useState(null); + const [contents, setContents] = useState(null); + const [file, setFile] = useState(null); + + return ( + <form> + <Input type="text" + id="title" + title="Title" + field={title} + setField={setTitle} + validateField={validateTitle} /> + + <Input className={styles.contentsInput} + inputType="textarea" + type="text" + title="Contents" + field={contents} + setField={setContents} + validateField={validateContents} /> + + <Input className={styles.fileInput} + inputType="file" + type="file" + title="Upload image" + field={file} + setField={setFile} + validateField={validateFile}/> + + <RequestButton className={styles.submissionButton} + setError={setError} setSubmissionActive={setSubmissionActive} + promise={promise} setPromise={setPromise} + title={title} setTitle={setTitle} + contents={contents} setContents={setContents} + file={file} setFile={setFile} subreact={subreact}> + + Submit + </RequestButton> + </form> + ); +} + +export default function Submission({active, setActive}) { + const [error, setError] = useState(null); + + const location = useLocation(); + const subreact = getSubreactFromLocation(location); + + const [user] = useContext(UserContext); + + const [state, setState] = useContext(StateContext); + const setLoginActive = (active) => {setState({...state, loginActive: active})}; + + // If our subreact is the front page, disable our ability to post. Posting + // should be done to the main subreact. + useEffect(() => { + if (subreact === "") { + setActive(false); + } + }, [location]); + + return ( + <div className={styles.container}> + <Card className={styles.card + (active ? " " + styles.cardActive : "")}> + <Tab submissionActive={active} setSubmissionActive={setActive} user={user} setLoginActive={setLoginActive} /> + <h1>Make a new submission</h1> + <ErrorMessage message={error} /> + <SubmissionForm setSubmissionActive={setActive} setError={setError} subreact={subreact}/> + </Card> + </div> + ); +}
\ No newline at end of file |