Merge remote-tracking branch 'origin/development' into bhavpreet_create_choosing_village_map_frontend

Author: fangedShadow

package-lock.json

@@ -16,7 +16,7 @@
     "axios": "^0.21.2",
     "axios-mock-adapter": "^1.22.0",
     "bootstrap": "^4.5.3",
-    "chart.js": "^4.4.7",
+    "chart.js": "^3.9.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "classnames": "^2.2.6",
     "d3": "^7.8.5",
@@ -30,7 +30,6 @@
     "html-to-pdfmake": "^2.0.6",
     "joi": "^14.0.6",
     "jwt-decode": "^2.2.0",
-    "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "moment": "^2.29.2",
@@ -50,8 +49,10 @@
     "react-html-parser": "^2.0.2",
     "react-icons": "^4.3.1",
     "react-input-range": "^1.3.0",
-    "react-leaflet": "^4.2.1",
-    "react-leaflet-cluster": "^2.1.0",
+    "react-leaflet": ">=3.1.0 <3.2.0",
+    "@react-leaflet/core": ">=1.0.0 <1.1.0",
+    "leaflet": "1.7.1",
+    "react-leaflet-cluster": "^1.0.4",
     "react-multi-select-component": "^4.0.2",
     "react-phone-input-2": "^2.14.0",
     "react-redux": "^7.2.0",
@@ -81,7 +82,7 @@
     "prestart": "npm run test",
     "postinstall": "node ./postinstall.js",
     "start": "react-scripts start",
-    "build": "npm run postinstall && react-scripts build",
+    "build": "npm run postinstall && set CI=false && react-scripts build",
     "test": "cross-env CI=true react-scripts test --env=jest-environment-jsdom-sixteen",
     "test:watch": " react-scripts test --env=jest-environment-jsdom-sixteen",
     "test:coverage": "cross-env CI=true react-scripts test --env=jest-environment-jsdom-sixteen --coverage",
@@ -94,7 +95,6 @@
   "browserslist": [
     ">0.2%",
     "not dead",
-    "not ie <= 11",
     "not op_mini all"
   ],
   "devDependencies": {
@@ -126,6 +126,7 @@
     "node-fetch": "^3.1.1",
     "node-sass": "^8.0.0",
     "prettier": "^1.19.1",
+    "react-error-overlay": "^6.0.9",
     "redux-mock-store": "^1.5.4",
     "sinon": "^7.3.2",
     "surge": "^0.21.6"

package.json

@@ -3,26 +3,29 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import './NotFoundPage.css';
+import cn from 'classnames';
+import styles from './NotFoundPage.module.css';
 import NotFoundImage from '../../assets/images/404Image1.png';
 import NotFoundDarkImage from '../../assets/images/404ImageDarkMode1.png';
 
 function NotFoundPage() {
   const darkMode = useSelector(state => state.theme.darkMode);
 
   return (
-    <div className={`not-found-container ${darkMode ? 'dark-mode bg-black' : ''}`}>
+    <div className={cn(styles.notFoundContainer, darkMode ? cn(
+      styles.darkMode, styles.bgBlack
+    ) : '')}>
       <img
-        className="not-found-image"
+        className={styles.notFoundImage}
         src={darkMode ? NotFoundDarkImage : NotFoundImage}
         alt="Page Not Found"
       />
-      <div className="not-found-text">
+      <div className={styles.notFoundText}>
         <h1>PAGE NOT FOUND</h1>
         <p>The rabbits have been nibbling the cables again...</p>
         <p>
           Maybe this will help{' '}
-          <Link to="/" className="back-home-link">
+          <Link to="/" className={styles.backHomeLink}>
             Home
           </Link>
         </p>

src/components/NotFound/NotFoundPage.jsx

@@ -1,10 +1,4 @@
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-.not-found-container {
+.notFoundContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -15,56 +9,56 @@
   background-color: #fff;
 }
 
-.not-found-image {
+.notFoundImage {
   max-width: 100%;
   height: auto;
   /* margin-bottom:-20px; */
 }
 
-.not-found-text {
+.notFoundText {
   padding: 0 20px;
 }
 
-.not-found-text h1 {
+.notFoundText h1 {
   font-size: 2em;
   margin-bottom: 10px;
 }
 
-.not-found-text p {
+.notFoundText p {
   font-size: 1.1em;
   margin-bottom: 10px;
 }
 
-.back-home-link {
+.backHomeLink {
   color: #3293f9;
   cursor: pointer;
   text-decoration: underline;
   transition: background-color 0.3s;
 }
 
-.back-home-link:hover {
+.backHomeLink:hover {
   background-color: transparent;
 }
 
-.dark-mode {
+.darkMode {
   color: #f1f1f1;
 
-  .not-found-image {
+  .notFoundImage {
     height: 38%;
     width: auto;
   }
 }
 
-.bg-black {
+.bgBlack {
   background-color: #121212;
 }
 
 @media (max-width: 768px) {
-  .not-found-text h1 {
+  .notFoundText h1 {
     font-size: 1.5em;
   }
 
-  .not-found-text p {
+  .notFoundText p {
     font-size: 1em;
   }
-}
+}