basic service worker file added, react log errors are removed in multiple files

Author: vigneshwaran-chandrasekaran

public/index.html

@@ -36,4 +36,14 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     --></body>
+	<script>
+		if ('serviceWorker' in navigator) {
+			window.addEventListener('load', () => {
+				navigator.serviceWorker
+					.register('./serviceworker.js')
+					.then((reg) => console.log('Success: ', reg.scope))
+					.catch((err) => console.log('Failure: ', err));
+			});
+		}
+	</script>
 </html>

public/serviceworker.js

@@ -0,0 +1,44 @@
+const CACHE_NAME = 'version-1';
+const urlsToCache = ['index.html', 'offline.html'];
+
+const self = this;
+
+// Install SW
+self.addEventListener('install', (event) => {
+	event.waitUntil(
+		caches.open(CACHE_NAME).then((cache) => {
+			console.log('Opened cache');
+
+			return cache.addAll(urlsToCache);
+		})
+	);
+});
+
+// Listen for requests
+self.addEventListener('fetch', (event) => {
+	event.respondWith(
+		caches.match(event.request).then(() => {
+			return fetch(event.request).catch(() =>
+				caches.match('offline.html')
+			);
+		})
+	);
+});
+
+// Activate the SW
+self.addEventListener('activate', (event) => {
+	const cacheWhitelist = [];
+	cacheWhitelist.push(CACHE_NAME);
+
+	event.waitUntil(
+		caches.keys().then((cacheNames) =>
+			Promise.all(
+				cacheNames.map((cacheName) => {
+					if (!cacheWhitelist.includes(cacheName)) {
+						return caches.delete(cacheName);
+					}
+				})
+			)
+		)
+	);
+});

src/components/routes/PrivateRoute.js

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
-import { Route } from 'react-router-dom';
 import { Layout } from 'antd';
+import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
+import { Route } from 'react-router-dom';
 import { SESSION } from '../../services';
-import { Sidebar } from '../sidebar';
+// import { Sidebar } from '../sidebar';
 import { HeadNavbar } from '../common';
 
 const { Content } = Layout;

src/forms/todo/todo.form.js

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { message, Col, Row } from 'antd';
-import { Form, Input, DatePicker, Select } from 'formik-antd';
+import { Col, message, Row } from 'antd';
 import { Formik } from 'formik';
-import * as Yup from 'yup';
-import PropTypes from 'prop-types';
-import moment from 'moment';
+import { DatePicker, Form, Input, Select } from 'formik-antd';
 import { isEmpty } from 'lodash';
-import { API } from '../../services';
-import { FormActionButtons } from '../FormActionButtons';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as Yup from 'yup';
 import { TODO_LABEL } from '../../helpers/constants';
+import { API } from '../../services';
 import { updatedTodoList } from '../../store/actions/api.actions';
+import { FormActionButtons } from '../FormActionButtons';
 
 const { Option } = Select;
 
@@ -46,17 +46,17 @@ function TodoForm({ onClose }) {
 
 	useEffect(() => {
 		try {
-			const formInitialValues = {
+			const formData = {
 				title: editMode ? editTodoData.title : undefined,
 				description: editMode ? editTodoData.description : undefined,
 				dueDate: editMode ? moment(editTodoData.dueDate) : TOMORROW,
 				label: editMode ? editTodoData.label : 1,
 			};
-			setFormInitialValues(formInitialValues);
+			setFormInitialValues(formData);
 		} catch (error) {
 			console.log('error', error);
 		}
-	}, [editMode]);
+	}, [editMode, editTodoData]);
 
 	function handleSubmit(values, { setErrors, resetForm, setSubmitting }) {
 		let url = `todos`;

src/index.js

@@ -1,22 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-
 import 'typeface-roboto';
-import './styles/style.scss';
+// import { ErrorBoundary } from './components/common';
 import Router from './router';
-import store from './store/configureStore';
 import * as serviceWorker from './serviceWorker';
-import { ErrorBoundary } from './components/common';
+import store from './store/configureStore';
+import './styles/style.scss';
 
 console.log('build = ', process.env.NODE_ENV);
 
 ReactDOM.render(
-	<ErrorBoundary>
-		<Provider store={store}>
-			<Router />
-		</Provider>
-	</ErrorBoundary>,
+	// <ErrorBoundary></ErrorBoundary>
+	<Provider store={store}>
+		<Router />
+	</Provider>,
 	document.getElementById('root')
 );
 

src/pages/Todo.js

@@ -1,12 +1,13 @@
+import { Col, Row } from 'antd';
 import React from 'react';
-import { Row, Col } from 'antd';
-import { ModalForm, DrawerForm, TodoForm } from '../forms/todo';
+// import { ModalForm, DrawerForm, TodoForm } from '../forms/todo';
 import { TodoList } from '../components/todo';
+import { ModalForm } from '../forms/todo';
 
 export default function Todo() {
-	function onClose() {
-		console.log('onClose');
-	}
+	// function onClose() {
+	// 	console.log('onClose');
+	// }
 
 	return (
 		<div className="main-layout">