Merge pull request #9 from lizzypy/use-next-layout

use next layout
lizzypy · Sep 17, 2023 · d30c99d · d30c99d
2 parents 25c1d64 + 34619d7
commit d30c99d
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 34 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -4,6 +4,9 @@
 /node_modules
 /.pnp
 .pnp.js
+.next
+*.swp
+.idea
 
 # testing
 /coverage

diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
@@ -0,0 +1,9 @@
+import Layout from '../src/components/layout'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
@@ -1,4 +1,3 @@
 import usersPage from './welcome'
 
 export default usersPage
-
diff --git a/frontend/src/components/signUpForm.tsx → frontend/src/components/Navbar.tsx b/frontend/src/components/signUpForm.tsx → frontend/src/components/Navbar.tsx
@@ -1,7 +1,8 @@
 import React, {useState} from "react";
-import {Button, Container, Typography} from '@material-ui/core'
+import {Button, Container, Typography, MenuItem} from '@material-ui/core'
 import axios from 'axios';
 import {Box, Input, Modal} from "@mui/material";
+import Link from "next/link";
 
 const style = {
     position: 'absolute' as 'absolute',
@@ -17,7 +18,7 @@ const style = {
     pb: 3,
 };
 
-function SignUpForm() {
+const Navbar = () => {
     const [open, setOpen] = useState<boolean>(false)
     const [signInOpen, setSignInOpen] = useState<boolean>(false)
     const [email, setEmail] = useState("");
@@ -70,9 +71,62 @@ function SignUpForm() {
 
     return (
         <>
-            <Button onClick={handleOpen}>Sign Up</Button>
-            <Button onClick={handleSignInOpen}>Sign In</Button>
+            <section aria-label={"toolbar-section"}
+                         style={{display: "flex", flexDirection: "row", justifyContent: "left"}}>
+              <MenuItem>
+                 <Link
+                    style={{
+                        textDecoration: 'none',
+                        color: '#000'
+                    }}
+                    href="/"
+                 >
+                   HOME
+                 </Link>
+              </MenuItem>
+              <MenuItem>
+                 <Link
+                    style={{
+                        textDecoration: 'none',
+                        color: '#000'
+                    }}
+                    href="/users"
+                 >
+                   USERS
+                 </Link>
+              </MenuItem>
+              <MenuItem>
+                 <Link
+                    style={{
+                        textDecoration: 'none',
+                        color: '#000'
+                    }}
+                    href="/participants"
+                 >
+                   PARTICIPANTS
+                 </Link>
+              </MenuItem>
+            </section>
+            <section aria-label={"toolbar-section"}
+                         style={{display: "flex", flexDirection: "row", justifyContent: "right"}}>
 
+             <MenuItem>
+                 <Link
+                  style={{
+                          textDecoration: 'none',
+                          color: '#000'
+                      }}
+                  href="/signup">SIGN UP
+                </Link>
+              </MenuItem>
+              <Button
+                style={{
+                        textDecoration: 'none',
+                        color: '#000'
+                    }}
+                onClick={handleSignInOpen}>Sign In
+              </Button>
+            </section>
             <Modal
                 open={open}
                 onClose={handleClose}
@@ -106,4 +160,4 @@ function SignUpForm() {
     );
 }
 
-export default SignUpForm;
+export default Navbar;
diff --git a/frontend/src/components/ParticipantsList.tsx b/frontend/src/components/ParticipantsList.tsx
@@ -3,7 +3,6 @@ import Box from '@mui/material/Box';
 import {AppBar, Toolbar } from "@mui/material";
 import useParticipants from "../hooks/useParticipants";
 import type {NextPage} from 'next';
-import SignUpForm from "../components/signUpForm";
 import {Typography} from "@material-ui/core";
 
 const ParticipantsList = () => {

diff --git a/frontend/src/components/layout.tsx b/frontend/src/components/layout.tsx
@@ -0,0 +1,15 @@
+import Navbar from './Navbar'
+import {AppBar, Toolbar } from "@mui/material";
+
+export default function Layout({ children }: any) {
+  return (
+    <>
+      <AppBar position="static" sx={{ bgcolor: "pink" }}>
+          <Toolbar>
+            <Navbar/>
+          </Toolbar>
+      </AppBar>
+      <main>{children}</main>
+    </>
+  )
+}
diff --git a/frontend/src/hooks/useParticipants.test.tsx b/frontend/src/hooks/useParticipants.test.tsx
@@ -77,6 +77,7 @@ describe('useParticipants', () => {
           "last_name":"johnson",
           "birthdate":"2016-04-16"
         }])
+        console.log(result.current)
         expect(mockHttpClient.get).toHaveBeenCalledWith('/participants')
       })
   })

diff --git a/frontend/src/pages/Participants.tsx b/frontend/src/pages/Participants.tsx
@@ -1,19 +1,10 @@
 import ParticipantsList from "../components/ParticipantsList";
 import {AppBar, Toolbar } from "@mui/material";
-import SignUpForm from "../components/signUpForm";
 import type {NextPage} from 'next';
 
 export const Participants: NextPage = () => {
   return (
           <>
-            <AppBar position="static" sx={{ bgcolor: "pink" }}>
-                <section aria-label={"toolbar-section"}
-                         style={{display: "flex", flexDirection: "row", justifyContent: "right"}}>
-                    <Toolbar>
-                        <SignUpForm/>
-                    </Toolbar>
-                </section>
-            </AppBar>
             <section aria-label={"participants-section"}
                      style={{
                          padding: "40px 30px",

diff --git a/frontend/src/pages/Users.tsx b/frontend/src/pages/Users.tsx
@@ -3,7 +3,6 @@ import Box from '@mui/material/Box';
 import {AppBar, Toolbar } from "@mui/material";
 import useUsers from "../hooks/useUsers";
 import type {NextPage} from 'next';
-import SignUpForm from "../components/signUpForm";
 import {Typography} from "@material-ui/core";
 
 export const Users: NextPage = () => {
@@ -27,14 +26,6 @@ export const Users: NextPage = () => {
 
     return (
         <div>
-            <AppBar position="static" sx={{ bgcolor: "pink" }}>
-                <section aria-label={"toolbar-section"}
-                         style={{display: "flex", flexDirection: "row", justifyContent: "right"}}>
-                    <Toolbar>
-                        <SignUpForm/>
-                    </Toolbar>
-                </section>
-            </AppBar>
             <section aria-label={"participants-section"}
                      style={{
                          padding: "40px 30px",

diff --git a/frontend/src/pages/Welcome.tsx b/frontend/src/pages/Welcome.tsx
@@ -3,7 +3,6 @@ import Box from '@mui/material/Box';
 import {AppBar, Toolbar } from "@mui/material";
 import useUsers from "../hooks/useUsers";
 import type {NextPage} from 'next';
-import SignUpForm from "../components/signUpForm";
 import ParticipantsList from "../components/ParticipantsList";
 import {Typography} from "@material-ui/core";
 
@@ -28,14 +27,6 @@ export const Welcome: NextPage = () => {
 
     return (
         <div>
-            <AppBar position="static" sx={{ bgcolor: "pink" }}>
-                <section aria-label={"toolbar-section"}
-                         style={{display: "flex", flexDirection: "row", justifyContent: "right"}}>
-                    <Toolbar>
-                        <SignUpForm/>
-                    </Toolbar>
-                </section>
-            </AppBar>
             <section aria-label={"participants-section"}
                      style={{
                          padding: "40px 30px",
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,9 @@ @@
     /node_modules
     /.pnp
     .pnp.js
+    .next
+    *.swp
+    .idea
     # testing
     /coverage
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		import usersPage from './welcome'

		export default usersPage