From aaef00ec226cf73d0d11c73f23772e35dc058f25 Mon Sep 17 00:00:00 2001 From: Mohammed Abed Date: Wed, 1 Nov 2023 19:39:30 -0400 Subject: [PATCH 1/2] Sending a request from the frontend --- frontend/package-lock.json | 2 +- frontend/src/pages/index.js | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4ab3186..61a265f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,7 +12,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.14", "@mui/material": "^5.14.14", - "next": "^13.5.6", + "next": "13.5.6", "react": "^18", "react-dom": "^18", "sass": "^1.69.4" diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js index 1741d60..92fb783 100644 --- a/frontend/src/pages/index.js +++ b/frontend/src/pages/index.js @@ -1,5 +1,17 @@ +import { useEffect, useState } from "react"; + export default function Home() { - return

- Hello Team! -

; + const [message, setMessage] = useState("Loading..."); + + useEffect(() => { + const fetchData = async () => { + const res = await fetch("/api/python"); + const data = await res.json(); + setMessage(data.message); + }; + + fetchData(); + }, []); + + return

{message}

; } From cc0b0f124cdd0c1f605cea721eab598a3e9402da Mon Sep 17 00:00:00 2001 From: Mohammed Abed Date: Fri, 3 Nov 2023 20:05:41 -0400 Subject: [PATCH 2/2] Created navigation bar for root layout --- frontend/package-lock.json | 19 ++++ frontend/package.json | 1 + frontend/src/components/Layout.js | 8 +- frontend/src/components/NavigationBar.js | 135 +++++++++++++++++++++++ 4 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/NavigationBar.js diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 61a265f..56dadd7 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.14", "@mui/material": "^5.14.14", + "mui-image": "^1.0.7", "next": "13.5.6", "react": "^18", "react-dom": "^18", @@ -3320,6 +3321,18 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/mui-image": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/mui-image/-/mui-image-1.0.7.tgz", + "integrity": "sha512-U79TWMKMfMC1ZiGnv/M+SaVJeUpubEjXOdy7w53RsvidUAMZ+4nW+QmDG9yg5fgWeYy6YJgLHyI9BHSDw76iIg==", + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.1", + "prop-types": "^15.7.2", + "react": "^17.0.2 || ^18.0.0" + } + }, "node_modules/nanoid": { "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", @@ -6904,6 +6917,12 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "mui-image": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/mui-image/-/mui-image-1.0.7.tgz", + "integrity": "sha512-U79TWMKMfMC1ZiGnv/M+SaVJeUpubEjXOdy7w53RsvidUAMZ+4nW+QmDG9yg5fgWeYy6YJgLHyI9BHSDw76iIg==", + "requires": {} + }, "nanoid": { "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", diff --git a/frontend/package.json b/frontend/package.json index 5234382..829fa38 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.14", "@mui/material": "^5.14.14", + "mui-image": "^1.0.7", "next": "13.5.6", "react": "^18", "react-dom": "^18", diff --git a/frontend/src/components/Layout.js b/frontend/src/components/Layout.js index 78e36b9..548c221 100644 --- a/frontend/src/components/Layout.js +++ b/frontend/src/components/Layout.js @@ -1,6 +1,12 @@ import React from "react"; +import NavigationBar from "./NavigationBar"; const Layout = ({ children }) => { - return
{children}
; + return ( + <> + + {children} + + ); }; export default Layout; diff --git a/frontend/src/components/NavigationBar.js b/frontend/src/components/NavigationBar.js new file mode 100644 index 0000000..7e06055 --- /dev/null +++ b/frontend/src/components/NavigationBar.js @@ -0,0 +1,135 @@ +import * as React from "react"; +import AppBar from "@mui/material/AppBar"; +import Box from "@mui/material/Box"; +import Toolbar from "@mui/material/Toolbar"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; +import Menu from "@mui/material/Menu"; +import MenuIcon from "@mui/icons-material/Menu"; +import Container from "@mui/material/Container"; +import Button from "@mui/material/Button"; +import MenuItem from "@mui/material/MenuItem"; +import AutoMateLogo from "../../public/Automate_logo.png"; +import Image from "next/image"; +import Link from "next/link"; + +const pages = ["upload", "profiling", "machine learning"]; + +function NavigationBar() { + const [anchorElNav, setAnchorElNav] = React.useState(null); + + const handleOpenNavMenu = (event) => { + setAnchorElNav(event.currentTarget); + }; + + const handleCloseNavMenu = () => { + setAnchorElNav(null); + }; + + return ( + + + + + AutoMate Logo + + + AutoMate + + + + + + + + {pages.map((page) => ( + + {page} + + ))} + + + + + AutoMate Logo + + + AutoMate + + + {pages.map((page) => ( + + ))} + + + + + ); +} +export default NavigationBar;