Mihir Mangesh Pavuskar - Submission

package.json

@@ -13,6 +13,7 @@
     "@testing-library/user-event": "13.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "web-vitals": "2.1.4"
   },

src/App.js

@@ -1,98 +1,119 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import CssBaseline from '@mui/material/CssBaseline'
+import Login from "./pages/login";
+
+import CssBaseline from "@mui/material/CssBaseline";
 
 import {
   createTheme,
   ThemeProvider,
   responsiveFontSizes,
-} from '@mui/material/styles'
-
-import Stack from '@mui/material/Stack'
+} from "@mui/material/styles";
 
-import Content from './components/Content'
-import Loading from './components/Loading'
+import Stack from "@mui/material/Stack";
 
+import Content from "./components/Content";
+import Loading from "./components/Loading";
+import ShoppingList from "./pages/shoppingList";
 
 let theme = createTheme({
   palette: {
     primary: {
-      main: '#de6720',
+      main: "#de6720",
     },
     secondary: {
-      main: '#0077ea',
+      main: "#0077ea",
     },
   },
   components: {
     MuiCssBaseline: {
       styleOverrides: {
         html: {
-          WebkitFontSmoothing: 'auto',
+          WebkitFontSmoothing: "auto",
         },
         body: {
-          background: '#fefefe',
-          overflow: 'hidden',
-          padding: '5px',
-          width: '450px',
-          color: '#333',
+          background: "#fefefe",
+          overflow: "hidden",
+          padding: "5px",
+          width: "100vw",
+          height: "100vh",
+          color: "#333",
         },
       },
     },
     MuiLinearProgress: {
       styleOverrides: {
         root: {
-          backgroundColor: 'rgba(222, 103, 32, 0.25)',
+          backgroundColor: "rgba(222, 103, 32, 0.25)",
         },
         bar: {
-          backgroundColor: 'rgba(222, 103, 32, 1)',
+          backgroundColor: "rgba(222, 103, 32, 1)",
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f5f5f5",
+          fontWeight: "600",
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          fontSize: "1.2rem",
+        },
+      },
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          minWidth: "80vw",
+          minHeight: "50vh",
         },
       },
     },
   },
-})
-theme = responsiveFontSizes(theme)
+});
+theme = responsiveFontSizes(theme);
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <ShoppingList />,
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+]);
 
 const App = () => {
-
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-
     // show a loading indicator
-    setLoading(true)
+    setLoading(true);
 
     setTimeout(() => {
-
       // hide loading indicator
-      setLoading(false)
-    }, 1000) // 1 second
+      setLoading(false);
+    }, 1000); // 1 second
 
     // hide loading indicator
     return () => {
-      setLoading(false)
-    }
-  }, [])
-
-  const renderLoading = () => {
-    if ( !loading ) { return }
-    return <Loading text='loading..' />
-  }
-
-  const renderContent = () => {
-    if ( loading ) { return }
-    return <Content />
-  }
+      setLoading(false);
+    };
+  }, []);
 
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Stack spacing={2}>
-        {renderLoading()}
-        {renderContent()}
-      </Stack>
+      <RouterProvider router={router} />
     </ThemeProvider>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/api/products.js

@@ -0,0 +1,14 @@
+const API_URL = "https://dummyjson.com/products";
+
+export const ProductsAPI = {
+  getAllProducts: async () => {
+    const response = await fetch(API_URL);
+    const data = await response.json();
+		return data;
+  },
+	searchProducts: async (query) => {
+		const response = await fetch(`${API_URL}/search?q=${query}`);
+		const data = await response.json();
+		return data;
+	}
+};

src/pages/login.jsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+function Copyright(props) {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+// TODO remove, this demo shouldn't need to reset the theme.
+
+const defaultTheme = createTheme();
+
+export default function SignIn() {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const user = {
+      email: data.get('email'),
+      password: data.get('password'),
+    };
+
+  };
+
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign In
+            </Button>
+            <Grid container>
+              <Grid item xs>
+                <Link href="#" variant="body2">
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="#" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+        <Copyright sx={{ mt: 8, mb: 4 }} />
+      </Container>
+    </ThemeProvider>
+  );
+}