Programming Task

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#IDE
+.idea

package.json

@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.129",
-    "@mui/material": "5.13.0",
+    "@mui/material": "^5.14.10",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "13.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^2.1.3",
+    "react-to-print": "^2.14.13",
     "web-vitals": "2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,98 +1,110 @@
-import React, { useEffect, useState } from 'react'
-
-import CssBaseline from '@mui/material/CssBaseline'
-
-import {
-  createTheme,
-  ThemeProvider,
-  responsiveFontSizes,
-} from '@mui/material/styles'
-
-import Stack from '@mui/material/Stack'
-
-import Content from './components/Content'
-import Loading from './components/Loading'
-
-
-let theme = createTheme({
-  palette: {
-    primary: {
-      main: '#de6720',
-    },
-    secondary: {
-      main: '#0077ea',
-    },
-  },
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        html: {
-          WebkitFontSmoothing: 'auto',
-        },
-        body: {
-          background: '#fefefe',
-          overflow: 'hidden',
-          padding: '5px',
-          width: '450px',
-          color: '#333',
-        },
-      },
-    },
-    MuiLinearProgress: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'rgba(222, 103, 32, 0.25)',
-        },
-        bar: {
-          backgroundColor: 'rgba(222, 103, 32, 1)',
-        },
-      },
-    },
-  },
-})
-theme = responsiveFontSizes(theme)
-
-
-const App = () => {
-
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-
-    // show a loading indicator
-    setLoading(true)
-
-    setTimeout(() => {
-
-      // hide loading indicator
-      setLoading(false)
-    }, 1000) // 1 second
-
-    // hide loading indicator
-    return () => {
-      setLoading(false)
+import React, {useEffect, useRef, useState} from "react";
+import {productList as productListData} from "./testData";
+import ProductList from "./components/ProductList";
+import AddProduct from "./components/AddProduct";
+import {Button, IconButton, Fab, Grid,} from "@mui/material";
+import Grid2 from "@mui/material/Unstable_Grid2";
+import SearchBar from "./components/SearchBar";
+import {checkBrowserCompatibility, renderSpeech} from './WebSpeechAPI/WebSpeedAPI'
+import {render} from "@testing-library/react";
+import {Mic, Speaker, Add} from "@mui/icons-material";
+import {SpeakerComponent} from "./components/Speaker";
+import {PrintList} from "./components/PrintList"
+import {Login} from "./components/Login";
+import {Logout} from "./components/Logout";
+
+export default function MyApp() {
+    const componentRef = useRef();
+    const [username, setUsername] = useState('');
+    const [loginPage, setLoginPage] = useState(false)
+    const [productList, setProductList] = useState([]);
+    const [completeProductList, setCompleteProductList] = useState([])
+    const [addNewTaskForm, setAddNewTaskForm] = useState(false);
+    const [searchText, setSearchText] = useState('');
+
+
+    if(!loginPage) {
+        let localUsername = localStorage.getItem("username");
+        console.log(localUsername)
+        if(localUsername !== '' && localUsername !== null) {
+            setUsername(localUsername);
+            setLoginPage(true);
+        }
+    }
+    // console.log(username)
+
+    const addProduct = async (product) => {
+        const request = await fetch('https://fakestoreapi.com/products', {
+            method: "POST",
+            body: JSON.stringify(
+                {
+                    title: 'arihant',
+                    price: 13.5,
+                    description: 'lorem ipsum set',
+                    image: 'https://i.pravatar.cc',
+                    category: 'electronic'
+                }
+            )
+        })
+        const data = await request.json()
+        // console.log(data);
+        setProductList([...productList, {id: Math.random() * 10000, ...product}]);
+        setCompleteProductList([...completeProductList, {id: Math.random() * 10000, ...product}])
     }
-  }, [])
-
-  const renderLoading = () => {
-    if ( !loading ) { return }
-    return <Loading text='loading..' />
-  }
 
-  const renderContent = () => {
-    if ( loading ) { return }
-    return <Content />
-  }
+    const searchInList = (keyword) => {
+        const updateProductList = completeProductList.filter((product) => {
+            return product.title.toLowerCase().includes(keyword)
+        });
+        setProductList([...updateProductList])
+        setSearchText(keyword)
+    }
 
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Stack spacing={2}>
-        {renderLoading()}
-        {renderContent()}
-      </Stack>
-    </ThemeProvider>
-  )
+    useEffect(() => {
+        const fetchAllProduct = async () => {
+            const products = await fetch('https://fakestoreapi.com/products');
+            const data = await products.json()
+            setProductList(data)
+            setCompleteProductList(data)
+        }
+        fetchAllProduct()
+    }, []);
+    const addNewProductSpeech = async () => {
+        console.log("speak")
+        const title = await renderSpeech(addProduct)
+    }
+    return (
+        <>
+            {
+                loginPage ? (<div>
+                    <Grid2 container spacing={2}>
+                        <Grid2 xs={8}>
+                            <SearchBar  searchText={searchText} onChange={searchInList}/>
+                        </Grid2>
+                        <Grid2 xs={4}>
+                            <PrintList componentRef={componentRef}/>
+                            {"Hey, " + username}
+                            <Logout setLoginPage={setLoginPage} setUsername={setUsername} />
+                        </Grid2>
+                        <Grid2 xs={7}>
+                            <ProductList productList={productList} ref={componentRef}/>
+                        </Grid2>
+                        <Grid2 xs={5}>
+                            <Button
+                                onClick={() => setAddNewTaskForm(!addNewTaskForm)}
+                            >
+                                {addNewTaskForm ? 'Close' : 'Add New Task'}
+                            </Button>
+                            {addNewTaskForm && <AddProduct addProduct={addProduct}/>}
+                        </Grid2>
+
+
+                        <SpeakerComponent addProduct={() => addNewProductSpeech()}/>
+                    </Grid2>
+                </div>) : (<Login setUsername={setUsername} setLoginPage={setLoginPage} />)
+            }
+        </>
+
+
+    );
 }
-
-export default App

src/WebSpeechAPI/GrammerList.js

@@ -0,0 +1,11 @@
+import data from './Groceries_dataset.json'
+import {moods} from "./WebSpeedAPI";
+
+// const grammerData = data
+// const grammerArray = grammerData.map((data) => {
+//     return data.itemDescription.split(' ')
+// }).flat().map((data) => data.split('/')).flat()
+
+const finalGrammer = data
+let grammar = '#JSGF V1.0; grammar moods; public <moods> = ' + finalGrammer.join(' | ') + ';';
+export {finalGrammer, grammar}