Merge pull request #4 from carrawao/feature/watchlist

Feature/watchlist

Frontend/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.1",
+    "@mui/material": "^5.5.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
@@ -11,6 +15,7 @@
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "bootstrap": "^5.1.3",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2",

Frontend/src/App.css

@@ -1,38 +1,38 @@
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+    height: 40vmin;
+    pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }

Frontend/src/App.jsx

@@ -0,0 +1,18 @@
+import React, {Suspense} from 'react';
+import {BrowserRouter as Router} from 'react-router-dom';
+import AppRoutes from './routes';
+import './App.css';
+
+/**
+ * App root component with link navigations and routes
+ * @constructor
+ */
+const App = () => (
+  <Router>
+    <Suspense fallback={<div>Loading...</div>}>
+      <AppRoutes/>
+    </Suspense>
+  </Router>
+);
+
+export default App;

Frontend/src/App.test.tsx → Frontend/src/App.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
+  render(<App/>);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

Frontend/src/components/ScreensTemplate.jsx

@@ -0,0 +1,81 @@
+import React, {useState, useEffect} from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import CssBaseline from '@mui/material/CssBaseline';
+import MenuIcon from '@mui/icons-material/Menu';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import SideNavLeft from "./common/SideNavLeft";
+
+const drawerWidth = 12; // This is the value in rem units, for responsiveness
+/**
+ * Drawer navigation menu throughout the app
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const ScreensTemplate = (props) => {
+  const [openInMobile, setOpenInMobile] = useState(false);
+
+  const handleDrawerToggle = () => {
+    setOpenInMobile(!openInMobile);
+  };
+
+  return (
+    <Box className='d-flex'>
+      <CssBaseline/>
+      <AppBar
+        className={`position-fixed ${props.searchBar ? 'bg-white' : ''}`}
+        elevation={0}
+        sx={{
+          width: {md: `calc(100% - ${drawerWidth}rem)`},
+          marginLeft: {md: `${drawerWidth}rem`},
+        }}
+      >
+        <Toolbar>
+          <IconButton
+            aria-label='open drawer'
+            size='medium'
+            onClick={handleDrawerToggle}
+            sx={{
+              display: {md: 'none'},
+              color: '#493f35',
+              border: '1px solid #493f35',
+              borderRadius: 0,
+              padding: '0.1rem 0.1rem',
+              marginRight: '1rem'
+            }}
+          >
+            <MenuIcon/>
+          </IconButton>
+
+          {props.headerComponent()}
+        </Toolbar>
+      </AppBar>
+
+      <SideNavLeft
+        openInMobile={openInMobile}
+        setOpenInMobile={setOpenInMobile}
+        selectedNavLinkIndex={props.selectedNavLinkIndex}
+        handleDrawerToggle={handleDrawerToggle}
+      />
+
+      <Box
+        component="main"
+        sx={{flexGrow: 1, padding: '1rem', width: {md: `calc(100% - ${drawerWidth}rem)`}}}
+      >
+        <Toolbar style={{minHeight: '3rem'}}/>
+        {props.bodyComponent()}
+      </Box>
+    </Box>
+  );
+}
+
+ScreensTemplate.propTypes = {
+  headerComponent: PropTypes.func,
+  bodyComponent: PropTypes.func,
+  selectedNavLinkIndex: PropTypes.number
+};
+
+export default ScreensTemplate;

Frontend/src/components/common/CustomModal.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Box,
+  Modal,
+  Container,
+  Typography, IconButton
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+/**
+ * Drawer navigation menu throughout the app
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CustomModal = (props) => {
+  return (
+    <Modal
+      open={props.open}
+      onClose={() => props.handleClose()}
+      aria-labelledby={props.labelledby}
+    >
+      <Box sx={{...style}}>
+        <Container
+          className='d-flex justify-content-between px-0 align-self-center'
+        >
+          <Typography id={props.labelledby} variant='h6' component='h2' className='pb-3 mb-2'>
+            {props.modalTitle}
+          </Typography>
+          <IconButton
+            onClick={() => props.handleClose()}
+            className='px-0 py-1 align-self-start'
+          >
+            <CloseIcon style={{color: '#493f35'}}/>
+          </IconButton>
+        </Container>
+
+        {props.modalBody ? props.modalBody() : null}
+        {props.modalButton()}
+      </Box>
+    </Modal>
+  );
+}
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: {
+    xs: '70vw',
+    sm: '55vw',
+    md: '40vw',
+    lg: '30vw'
+  },
+  minHeight: '10vh',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  backgroundColor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  padding: '1.5rem'
+};
+
+CustomModal.propTypes = {
+  open: PropTypes.bool,
+  handleClose: PropTypes.func,
+  labelledby: PropTypes.string,
+  modalTitle: PropTypes.string,
+  modalBody: PropTypes.func,
+  modalButton: PropTypes.func,
+};
+
+export default CustomModal;