add indexedDB

Author: AryanSinghalGit

package-lock.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.10.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "dexie": "^3.0.2",
     "faker": "^4.1.0",
+    "idb": "^5.0.4",
     "material-table": "^1.68.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

package.json

@@ -1,34 +1,91 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
-  Paper, Button, Grid, TextField, MenuItem,
+  Button, Grid, TextField, MenuItem,
 } from '@material-ui/core';
 import faker from 'faker';
 import MaterialTable from 'material-table';
+// import { openDB } from 'idb';
+import Dexie from 'dexie';
 
 const Todo = () => {
   const [dataStructure, setDataStructure] = React.useState('array');
   const [array, setArray] = React.useState([]);
+  const [arrayFromDB, setArrayFromDB] = React.useState([]);
   const [dataCount, setDataCount] = React.useState(1);
   const [error, setError] = React.useState('');
+  const [store, setStore] = React.useState();
+  const [addDelete, setAddDelete] = React.useState(false);
 
-  const generateData = () => {
+  useEffect(() => {
+    try {
+      if (!('indexedDB' in window)) {
+        console.log('This browser doesn\'t support IndexedDB');
+        return;
+      }
+      const db = new Dexie('listOfObjects');
+      db.version(1).stores({
+        listOfObjects: 'id,jobTitle,jobType',
+      });
+      db.listOfObjects.clear();
+      setStore(db.listOfObjects);
+    } catch (err) {
+      console.log(err);
+    }
+  }, []);
+
+  const generateData = async () => {
+    setAddDelete(true);
+    const initialTime = new Date();
     if (dataStructure === 'array') {
       for (let i = 0; i < dataCount; i += 1) {
         array.push({
           jobTitle: faker.name.jobTitle(),
           jobType: faker.name.jobType(),
         });
       }
-      setArray([...array]);
+      setAddDelete(false);
+      console.log('time taken by Array in inserting is:', (new Date() - initialTime));
+      return setArray([...array]);
+    }
+    try {
+      const arrayFromDBLength = arrayFromDB.length;
+      for (let i = 1; i <= dataCount; i += 1) {
+        store.add({
+          id: arrayFromDBLength + i,
+          jobTitle: faker.name.jobTitle(),
+          jobType: faker.name.jobType(),
+        });
+      }
+      const dbArray = await store.where('id').above(0).toArray();
+      console.log('time taken by DB in inserting is:', (new Date() - initialTime));
+      setAddDelete(false);
+      return setArrayFromDB(dbArray);
+    } catch (e) {
+      setAddDelete(false);
+      return alert(`Error:  + ${e.stack || e}`);
     }
   };
 
-  const deleteData = () => {
+  const deleteData = async () => {
+    const initialTime = new Date();
     if (dataStructure === 'array') {
-      for (let i = 0; i < dataCount; i += 1) {
+      const arrayLength = array.length;
+      for (let i = 0; i < dataCount && arrayLength; i += 1) {
         array.pop();
       }
-      setArray([...array]);
+      console.log('time taken by Array in deleting is:', (new Date() - initialTime));
+      return setArray([...array]);
+    }
+    try {
+      const arrayLength = arrayFromDB.length;
+      for (let i = 0; i < dataCount && arrayLength; i += 1) {
+        store.delete(arrayLength - i);
+      }
+      const dbArray = await store.where('id').above(0).toArray();
+      console.log('time taken by DB in deleting is:', (new Date() - initialTime));
+      return setArrayFromDB(dbArray);
+    } catch (e) {
+      return alert(`Error:  + ${e.stack || e}`);
     }
   };
 
@@ -59,6 +116,7 @@ const Todo = () => {
       label: 'IndexedDB',
     },
   ];
+
   const columns = [
     { title: 'Job Title', field: 'jobTitle' },
     { title: 'Job Type', field: 'jobType' },
@@ -75,7 +133,6 @@ const Todo = () => {
             label="Select Data Structure"
             value={dataStructure}
             onChange={handleScrollDownChange}
-            helperText="Please select your currency"
             variant="outlined"
           >
             {options.map((option) => (
@@ -123,20 +180,11 @@ const Todo = () => {
           </Button>
         </Grid>
       </Grid>
-      <div align="center">
-        {console.log(array)}
-        {
-          (array && array.length)
-            ? (
-              <MaterialTable
-                title="TODO"
-                columns={columns}
-                data={array}
-              />
-            )
-            : null
-        }
-      </div>
+      <MaterialTable
+        title="TODO"
+        columns={columns}
+        data={(dataStructure === 'array') ? [...array] : [...arrayFromDB]}
+      />
     </div>
   );
 };