added total shopping cost & quantity functionality

microsoft · Jul 18, 2023 · e9afa68 · e9afa68
1 parent a0f6da8
commit e9afa68
Show file tree

Hide file tree

Showing 13 changed files with 219 additions and 216 deletions.
diff --git a/full/smart-shopping-planner-app/Solution/package-lock.json b/full/smart-shopping-planner-app/Solution/package-lock.json
diff --git a/full/smart-shopping-planner-app/Solution/package.json b/full/smart-shopping-planner-app/Solution/package.json
@@ -15,6 +15,7 @@
     "graphql": "^16.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-loading-icons": "^1.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/full/smart-shopping-planner-app/Solution/public/images/devtools-network.png b/full/smart-shopping-planner-app/Solution/public/images/devtools-network.png
diff --git a/full/smart-shopping-planner-app/Solution/public/index.html b/full/smart-shopping-planner-app/Solution/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>Smart Shopping</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/full/smart-shopping-planner-app/Solution/src/App.js b/full/smart-shopping-planner-app/Solution/src/App.js
@@ -2,32 +2,45 @@ import './App.css';
 import CreateItem from './components/CreateItem';
 import ItemList from './components/ItemList';
 import PriceTag from './components/PriceTag';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { Container, Grid, Box } from '@mui/material';
 import Typography from '@mui/joy/Typography';
+import React, { useState } from 'react';
+import { totalItems, totalCost } from './utils/Utils'
+import Loading from './components/Loading';
 
-// Apollo Client setup for GraphQL API calls to the backend server 
-const client = new ApolloClient({
-  uri: '/data-api/graphql',
-  cache: new InMemoryCache({
-    addTypename: false
-  })
-});
 
 function App() {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = async () => {
+    setLoading(true)
+    try {
+      const response = await fetch('/data-api/api/Item');
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+      const data = await response.json();
+      setItems(data.value);
+      setLoading(false);
+    } catch (error) {
+      console.log(error);
+      setLoading(false);
+    }
+  };
+
   return (
-    <ApolloProvider client={client}>
-       <Container maxWidth="lg" sx={{ padding:5 }}>
+      <Container maxWidth="lg" sx={{ padding: 5 }}>
+        {loading && <Loading />}
         <Typography level="h1" color="info" variant='outlined'>Smart Shopping Planner</Typography>
-          <Grid item xs={12} md={6} sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr 1fr', gap: '20px', paddingTop: '20px' }}>
-          { <CreateItem />}
-          { <ItemList />}
-            <Box>
-              { <PriceTag />}
-            </Box>
-          </Grid>
+        <Grid item xs={12} md={6} sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr 1fr', gap: '20px', paddingTop: '20px' }}>
+          {<CreateItem fetchData={fetchData} />}
+          {<ItemList fetchData={fetchData} items={items} />}
+          <Box>
+            {<PriceTag itemsNo={totalItems(items)} totalCost={totalCost(items)} />}
+          </Box>
+        </Grid>
       </Container>
-    </ApolloProvider>
   );
 }
 

diff --git a/full/smart-shopping-planner-app/Solution/src/App.test.js b/full/smart-shopping-planner-app/Solution/src/App.test.js