Umprovements

package.json

@@ -29,7 +29,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "pretty": "prettier --config .prettierrc run --write src/"
   },
   "eslintConfig": {
     "extends": [
@@ -48,5 +49,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.4.1"
   }
 }

src/Pages/Home.tsx

@@ -1,54 +0,0 @@
-import { useState } from "react"
-import { useNavigate } from "react-router"
-import { Box, Avatar, TextField } from "@mui/material"
-import { useSnackbar } from "notistack"
-import { Profile } from "socialvoid"
-import { dispatch } from "../socialvoid"
-
-export default function Home() {
-    const navigate = useNavigate()
-    const snackbar = useSnackbar()
-
-    const [profile, setProfile] = useState<Profile & { photo: string }>()
-
-    dispatch(
-        async (client) => {
-            const profile = await client.network.getProfile()
-
-            const photo = await client.cdn.download(
-                profile.display_picture_sizes[0].document,
-                true
-            )
-
-            setProfile({ ...profile, photo: URL.createObjectURL(photo) })
-        },
-        { navigate, snackbar }
-    )
-
-    return (
-        <Box
-            sx={{
-                marginTop: 8,
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-            }}
-        >
-            <Avatar
-                src={profile?.photo}
-                alt="Your profile photo"
-                sx={{ width: 100, height: 100, mb: 3 }}
-            />
-            <TextField
-                required
-                fullWidth
-                id="name"
-                label="Name"
-                name="username"
-                autoComplete="off"
-                autoFocus
-                sx={{ mb: 3 }}
-            />
-        </Box>
-    )
-}

src/Pages/index.tsx

@@ -1,18 +0,0 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom"
-import Home from "./Home"
-import SignIn from "./SignIn"
-import SignUp from "./SignUp"
-import ToS from "./ToS"
-
-export default function Pages() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/signin" element={<SignIn />} />
-        <Route path="/signup" element={<SignUp />} />
-        <Route path="/tos" element={<ToS />} />
-      </Routes>
-    </BrowserRouter>
-  )
-}

src/Routes/Home.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react"
+import { useNavigate } from "react-router"
+import { Box, Avatar, TextField } from "@mui/material"
+import { useSnackbar } from "notistack"
+import { Profile } from "socialvoid"
+import { dispatch } from "../socialvoid"
+
+export default function Home() {
+  const navigate = useNavigate()
+  const snackbar = useSnackbar()
+
+  const [profile, setProfile] = useState<Profile & { photo: string }>()
+
+  dispatch(
+    async (client) => {
+      const profile = await client.network.getProfile()
+
+      const photo = await client.cdn.download(
+        profile.display_picture_sizes[0].document,
+        true
+      )
+
+      setProfile({ ...profile, photo: URL.createObjectURL(photo) })
+    },
+    { navigate, snackbar }
+  )
+
+  return (
+    <Box
+      sx={{
+        marginTop: 8,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <Avatar
+        src={profile?.photo}
+        alt="Your profile photo"
+        sx={{ width: 100, height: 100, mb: 3 }}
+      />
+      <TextField
+        required
+        fullWidth
+        id="name"
+        label="Name"
+        name="username"
+        autoComplete="off"
+        autoFocus
+        sx={{ mb: 3 }}
+      />
+    </Box>
+  )
+}

src/Routes/index.tsx

@@ -0,0 +1,23 @@
+import { Route as R, Routes as S } from "react-router-dom"
+import Home from "./Home"
+import SignIn from "./SignIn"
+import SignUp from "./SignUp"
+import ToS from "./ToS"
+
+export const titles: { [pathname: string]: string } = {
+  "/": "Home",
+  "/signin": "Sign In",
+  "/signup": "Sign Up",
+  "/tos": "ToS",
+}
+
+export default function Routes() {
+  return (
+    <S>
+      <R path="/" element={<Home />} />
+      <R path="/signin" element={<SignIn />} />
+      <R path="/signup" element={<SignUp />} />
+      <R path="/tos" element={<ToS />} />
+    </S>
+  )
+}

src/UI.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react"
+import { useLocation } from "react-router"
 import {
   useMediaQuery,
   createTheme,
@@ -8,8 +9,10 @@ import {
 } from "@mui/material"
 import { SnackbarProvider } from "notistack"
 import { Bar } from "./components"
+import { titles } from "./Routes"
 
 export default function UI({ children }: any) {
+  const location = useLocation()
   const dark = useMediaQuery("(prefers-color-scheme: dark)")
 
   const theme = useMemo(
@@ -22,7 +25,7 @@ export default function UI({ children }: any) {
       <CssBaseline />
       <SnackbarProvider>
         <Container component="main" maxWidth="sm" sx={{ mt: 12 }}>
-          <Bar />
+          <Bar routeTitle={titles[location.pathname]} />
           {children}
         </Container>
       </SnackbarProvider>

src/components/Bar.tsx

@@ -1,7 +1,7 @@
 import { AppBar, Toolbar, Typography, AppBarProps } from "@mui/material"
 import HideOnScroll from "./HideOnScroll"
 
-export default function Bar(props: AppBarProps) {
+export default function Bar(props: AppBarProps & { routeTitle?: string }) {
   return (
     <HideOnScroll>
       <AppBar {...props} sx={{ userSelect: "none" }}>
@@ -9,13 +9,18 @@ export default function Bar(props: AppBarProps) {
           sx={{
             display: "flex",
             alignItems: "center",
-            justifyContent: "space-around",
+            justifyContent: "space-evenly",
             textAlign: "center",
           }}
         >
           <Typography variant="h6" component="div">
             Socialvoid
           </Typography>
+          {props.routeTitle ? (
+            <Typography variant="h6" component="div">
+              {props.routeTitle}
+            </Typography>
+          ) : undefined}
         </Toolbar>
       </AppBar>
     </HideOnScroll>

src/index.tsx

@@ -1,13 +1,16 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import { BrowserRouter } from "react-router-dom"
 import UI from "./UI"
-import Pages from "./Pages"
+import Routes from "./Routes"
 
 ReactDOM.render(
   <React.StrictMode>
-    <UI>
-      <Pages />
-    </UI>
+    <BrowserRouter>
+      <UI>
+        <Routes />
+      </UI>
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")
 )

src/strings.ts

@@ -0,0 +1,16 @@
+export default {
+  en: {
+    meta: { languageName: "English", languageNameInEnglish: "English" },
+    terms: { signIn: "Sign In", signUp: "Sign Up" },
+    questions: {
+      haveAccount: "Already have an account?",
+      haveNoAccount: "Don’t have an account?",
+    },
+    credentials: {
+      username: "Username",
+      password: "Password",
+      firstName: "First name",
+      lastName: "Last name",
+    },
+  },
+}

yarn.lock

@@ -9364,6 +9364,11 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
+  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
+
 pretty-bytes@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"