Adding service worker

arangates · Aug 5, 2020 · 1990d33 · 1990d33
1 parent 181badd
commit 1990d33
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 113 deletions.
diff --git a/.gitignore b/.gitignore
@@ -32,3 +32,8 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# next-pwa
+
+**/public/workbox-*.js
+**/public/sw.js
diff --git a/README.md b/README.md
@@ -2,11 +2,12 @@
 
 All network requests are proxied via CORS Anywhere helps with accessing data from other websites that is normally forbidden by the same origin policy of web browsers
 
-SWR - state management 
-SSR - NextJS
-PWA - next-pwa
-recharts - Charting library
-idb-keyval - IndexedDB
+- SWR - state management 
+- SSR - NextJS
+- PWA - next-pwa
+- recharts - Charting library
+- idb-keyval - IndexedDB
 
+App works Offline after initial load
 
 Demo : https://comparecart.vercel.app/
diff --git a/components/Analytics/Chart.tsx b/components/Analytics/Chart.tsx
@@ -18,7 +18,7 @@ export const Chart = ({ items, title, colour, name }: chartProps) => {
         {name}
       </h2>
       <LineChart width={400} height={400} data={data}>
-        <Line type='monotone' dataKey='uv' stroke='#8884d8' />
+        <Line  dataKey='uv' stroke='#8884d8' />
       </LineChart>
     </div>
   );

diff --git a/components/SideBar/MenuOptions.ts b/components/SideBar/MenuOptions.ts
@@ -1,12 +1,11 @@
 export interface MenuOptions {
-  'my store': Item[];
-  'Research Products': Item[];
-  'Learn': Item[];
-  'Settings': Item[];
+  id:      number;
+  name:    string;
+  options: Option[];
 }
 
-export interface Item {
-  id: number;
+export interface Option {
+  id:   number;
   icon: string;
   name: string;
-}
+}
diff --git a/components/SideBar/OptionsList.tsx b/components/SideBar/OptionsList.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import OptionsListItem from './OptionsListItem';
 import OptionsListHeading from './OptionsListHeading';
-import { MenuOptions, Item } from './MenuOptions';
+import { MenuOptions, Option } from './MenuOptions';
 
 interface Iprops {
-  menuOptions: MenuOptions;
+  menuOptions: MenuOptions[];
 }
 
 const OptionsList = ({ menuOptions }: Iprops) => {
@@ -15,15 +15,15 @@ const OptionsList = ({ menuOptions }: Iprops) => {
   );
 };
 
-const renderOptions = (menuOptions: MenuOptions): React.ReactNode => {
-  return Object.entries(menuOptions).map(([heading, options]) => {
+const renderOptions = (menuOptions: MenuOptions[]): React.ReactNode => {
+  return menuOptions.map((option: MenuOptions) => {
     return (
-      <>
-        <OptionsListHeading key={heading.toString()} title={heading} />
-        {options.map((option: Item) => (
+      <div key={option.id}>
+        <OptionsListHeading title={option.name} />
+        {option.options.map((option: Option) => (
           <OptionsListItem key={option.id} item={option} />
         ))}
-      </>
+      </div>
     );
   });
 };

diff --git a/components/SideBar/OptionsListItem.tsx b/components/SideBar/OptionsListItem.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Item } from './MenuOptions';
+import { Option } from './MenuOptions';
 
 interface Iprops {
-  item: Item;
+  item: Option;
 }
 
 const OptionsListItem = ({ item }: Iprops) => {

diff --git a/components/SideBar/index.tsx b/components/SideBar/index.tsx
@@ -1,82 +1,6 @@
 import React from 'react';
 import OptionsList from './OptionsList';
-import { MenuOptions } from './MenuOptions';
-
-const MenuItems: MenuOptions = {
-  'my store': [
-    {
-      id: 1,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 2,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 3,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 4,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-  ],
-  'Research Products': [
-    {
-      id: 5,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 6,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 7,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 8,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-  ],
-  Learn: [
-    {
-      id: 9,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 10,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-  ],
-  Settings: [
-    {
-      id: 11,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 12,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-    {
-      id: 13,
-      icon: 'some.svg',
-      name: 'Item Name',
-    },
-  ],
-};
+import { MenuItems } from 'services/globals';
 
 const SideBar = () => {
   return (

diff --git a/next.config.js b/next.config.js
@@ -1,10 +1,10 @@
-// const isProd = process.env.NODE_ENV === "production";
+const isProd = process.env.NODE_ENV === "production";
 
 const withPWA = require("next-pwa")
 
 module.exports = withPWA({
  pwa: {
-  //  disable: !isProd,
+   disable: !isProd,
    dest: "public"
  }
 })
diff --git a/pages/_app.js b/pages/_app.js
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,19 @@
+import '../styles/index.css';
+import Head from 'next/head';
+
+import { AppProps } from 'next/app';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <title>CompareCart</title>
+        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+        <meta name='theme-color' content='#4553F0' />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -16,9 +16,7 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
       <Head>
-        <title>CompareCart</title>
-        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
-        <meta name='theme-color' content='#4553F0' />
+
         <meta
           name='description'
           content='The compare cart will show the difference between the sellers, rating and price.'

diff --git a/public/sw.js b/public/sw.js
diff --git a/services/globals.ts b/services/globals.ts
@@ -1,3 +1,5 @@
+import { MenuOptions } from "components/SideBar/MenuOptions";
+
 export const BOL_SERVER = 'https://api.bol.com';
 export const PROXY_SERVER = 'https://cors-anywhere.herokuapp.com/';
 export const baseURL = PROXY_SERVER + BOL_SERVER;
@@ -40,3 +42,110 @@ export const TableHeading = [
     name: 'Action thing',
   },
 ];
+
+export const MenuItems: MenuOptions[] = [
+  {
+     "id":1,
+     "name":"my store",
+     "options":[
+        {
+           "id":1,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":2,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":3,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":4,
+           "icon":"some.svg",
+           "name":"Item Name"
+        }
+     ]
+  },
+  {
+     "id":2,
+     "name":"Research Products",
+     "options":[
+        {
+           "id":1,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":2,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":3,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":4,
+           "icon":"some.svg",
+           "name":"Item Name"
+        }
+     ]
+  },
+  {
+     "id":3,
+     "name":"Learn",
+     "options":[
+        {
+           "id":1,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":2,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":3,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":4,
+           "icon":"some.svg",
+           "name":"Item Name"
+        }
+     ]
+  },
+  {
+     "id":4,
+     "name":"Settings",
+     "options":[
+        {
+           "id":1,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":2,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":3,
+           "icon":"some.svg",
+           "name":"Item Name"
+        },
+        {
+           "id":4,
+           "icon":"some.svg",
+           "name":"Item Name"
+        }
+     ]
+  }
+];