feat: All entries page + Navbar (#43)

* Add home screen

* Added navbar and an all entries page

* Requested changes (part 1)

* Change useFetch

* Change vars

* Add requested changes

* Remove isSuccess check

taxonomy-editor-frontend/src/App.js

@@ -1,5 +1,7 @@
 import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import ResponsiveAppBar from "./components/ResponsiveAppBar";
+import Entry from "./pages/allentries";
 import Home from './pages/home';
 
 const theme = createTheme({
@@ -13,9 +15,11 @@ function App() {
     <ThemeProvider theme={theme}>
     <CssBaseline />
     <Router>
+        <ResponsiveAppBar />
         <div className="App">
           <Routes>
             <Route path="/" element={<Home />} />
+            <Route path="/entry" element={<Entry />} />
           </Routes>
         </div>
     </Router>

taxonomy-editor-frontend/src/components/ResponsiveAppBar.jsx

@@ -0,0 +1,176 @@
+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 ListSubheader from "@mui/material/ListSubheader";
+import MuiLink from "@mui/material/Link";
+import SettingsIcon from '@mui/icons-material/Settings';
+import logo from "../assets/logosmall.jpg";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const displayedPages = [
+  { url: "entry", translationKey: "Nodes" }
+];
+
+const ResponsiveAppBar = () => {
+  const { t } = useTranslation();
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  return (
+    <AppBar position="sticky" sx={{background: '#ff8714'}} >
+      <Container maxWidth={null}>
+        <Toolbar disableGutters>
+          {/* Mobile content */}
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: "block", md: "none" },
+              }}
+            >
+              {displayedPages.map((page) =>
+                page.url ? (
+                  <MenuItem
+                    key={page.translationKey}
+                    onClick={handleCloseNavMenu}
+                    component={Link}
+                    to={`/${page.url}`}
+                  >
+                    <Typography textAlign="center">
+                      {t(page.translationKey)}
+                    </Typography>
+                  </MenuItem>
+                ) : (
+                  <ListSubheader key={page.translationKey}>
+                    {t(page.translationKey)}
+                  </ListSubheader>
+                )
+              )}
+            </Menu>
+          </Box>
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href=""
+            sx={{
+              mr: 2,
+              display: { xs: "flex", md: "none" },
+              flexGrow: 1,
+              fontFamily: "Plus Jakarta Sans",
+              fontWeight: 700,
+              letterSpacing: ".1rem",
+              color: "inherit",
+              textDecoration: "none",
+            }}
+          >
+            Taxonomy Editor
+          </Typography>
+
+          {/* Desktop content */}
+          <Box
+            sx={{
+              display: { xs: "none", md: "flex" },
+              flexDirection: "row",
+              alignItems: "center",
+              width: '100%',
+              justifyContent: 'space-between'
+            }}
+          >
+          <Box
+            sx={{
+              display: { xs: "none", md: "flex" },
+              flexDirection: "row",
+              alignItems: "baseline",
+            }}
+          >
+            <MuiLink
+              sx={{ mr: 2, display: "flex", alignSelf: 'center' }}
+              href="https://world.openfoodfacts.org/"
+              target="_blank"
+            >
+              <img
+                src={logo}
+                width="50px"
+                height="50px"
+                alt="OpenFoodFacts logo"
+              />
+            </MuiLink>
+            <Typography
+              variant="h6"
+              noWrap
+              component={Link}
+              to="/"
+              sx={{
+                mr: 2,
+                fontFamily: "Plus Jakarta Sans",
+                fontWeight: 1000,
+                letterSpacing: ".1rem",
+                color: "inherit",
+                textDecoration: "none",
+              }}
+            >
+              Taxonomy Editor
+            </Typography>
+
+            {displayedPages.map((page) =>
+            page.url ? (
+                <Button
+                color="inherit"
+                key={page.url}
+                onClick={handleCloseNavMenu}
+                sx={{ fontFamily: "Plus Jakarta Sans", my: 2, textTransform: "none" }}
+                component={Link}
+                to={`/${page.url}`}
+                >
+                {page.url === 'settings' ? <SettingsIcon /> : t(page.translationKey)}
+                </Button>
+            ) : null
+            )}
+
+          </Box>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
+export default ResponsiveAppBar;

taxonomy-editor-frontend/src/pages/allentries/index.jsx

@@ -0,0 +1,84 @@
+import { Typography, Button, Box } from "@mui/material";
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import EditIcon from '@mui/icons-material/Edit';
+import { Link } from "react-router-dom";
+import useFetch from "../../components/useFetch";
+import { API_URL } from "../../constants";
+
+const Entry = () => {
+    const { data: nodes, isPending, isError, isSuccess, errorMessage } = useFetch(API_URL+'nodes');
+    const title = "Test";
+    if (isError) {
+        return (
+            <div className="all-entries">
+                {isError && <div>{errorMessage}</div>}
+            </div>
+        )
+    }
+    if (isPending) {
+        return (
+            <div className="all-entries">
+                {isPending && <div>Loading...</div>}
+            </div>
+        )
+    }
+    return (
+        <div className="all-entries">
+            <Box className="entry">
+                <Typography sx={{mb: 1, mt:2, ml: 2}} variant="h4">
+                    List of nodes in {title} Taxonomy:
+                </Typography>
+                <Typography variant="h6" sx={{mt: 2, ml: 2, mb: 1}}>
+                    Number of nodes in taxonomy: {nodes.length}
+                </Typography>
+                {/* Table for listing all nodes in taxonomy */}
+                <Box className="entry-preview">
+                    <TableContainer sx={{ml: 2}} component={Paper}>
+                        <Table sx={{ width: 400 }}>
+                            <TableHead>
+                            <TableRow>
+                                <TableCell align="left">
+                                <Typography variant="h6">
+                                    Nodes
+                                </Typography>
+                                </TableCell>
+                                <TableCell align="left">
+                                <Typography variant="h6">
+                                    Action
+                                </Typography>
+                                </TableCell>
+                            </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {nodes.map((node) => (
+                                    <TableRow
+                                    key={node[0].id}
+                                    >   
+                                        <TableCell align="left" component="td" scope="row">
+                                            <Typography variant="subtitle1">
+                                                {node[0].id}
+                                            </Typography>
+                                        </TableCell>
+                                        <TableCell align="left" component="td" scope="row">
+                                            <Button component={Link} to={`/${node[0].id}`}>
+                                                <EditIcon color="primary"/>
+                                            </Button>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                </Box>
+            </Box>
+        </div>
+    );
+}
+
+export default Entry;