Update react-scripts from 3.4.4 to 4.0.0

Ejected the create-react-app and fixed 2 security vulnerabilities

Author: Sean Prashad

package-lock.json

@@ -18,7 +18,7 @@
 "react-ga": "^2.7.0",
 "react-icons": "^3.11.0",
 "react-markdown": "^4.3.1",
-"react-scripts": "^3.4.4",
+"react-scripts": "4.0.0",
 "react-scroll": "^1.8.0",
 "react-table": "^7.6.3",
 "react-test-renderer": "^16.14.0",
@@ -28,7 +28,7 @@
  },
 "devDependencies": {
 "babel-eslint": "^10.0.3",
-"eslint": "^6.8.0",
+"eslint": "^7.11.0",
 "eslint-config-airbnb": "^18.2.1",
 "eslint-config-prettier": "^6.15.0",
 "eslint-plugin-import": "^2.22.1",

package.json

@@ -12,12 +12,13 @@ import {
 }from'reactstrap';
 import{Event}from'../Shared/Tracking';
 
-importBlindfrom'../../images/Blind.png';
-importEducativefrom'../../images/Educative.png';
-importHackernoonfrom'../../images/Hackernoon.png';
-
 import'./styles.scss';
 
+constimagePath=`${process.env.PUBLIC_URL}/assets/images/`;
+constBlind=`${imagePath}Blind.png`;
+constEducative=`${imagePath}Educative.png`;
+constHackernoon=`${imagePath}Hackernoon.png`;
+
 constAcknowledgements=()=>{
 return(
 <ContainerclassName="acknowledgements">

src/icons/Adobe.pngrenamed to public/assets/icons/Adobe.png

@@ -10,7 +10,7 @@ function CreateDropDownListHelper(options, filterValue, setFilter) {
 >
 <optionvalue="">All</option>
 {options.map((option,idx)=>(
-<optionkey={idx}value={option}>
+<optionkey={`${idx+option}`}value={option}>
 {option}
 </option>
 ))}
@@ -19,8 +19,10 @@ function CreateDropDownListHelper(options, filterValue, setFilter) {
 }
 
 exportfunctionDefaultColumnFilter({
-column: { filterValue, preFilteredRows, setFilter, id },
+// eslint-disable-next-line react/prop-types
+column: { filterValue, preFilteredRows, setFilter },
 }){
+// eslint-disable-next-line react/prop-types
 constcount=preFilteredRows.length;
 
 return(

src/icons/Airbnb.pngrenamed to public/assets/icons/Airbnb.png

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 importReact,{useState,useEffect}from'react';
 import{
 TableasReactTable,
@@ -22,7 +23,7 @@ import questions from '../../data';
 import'react-toggle/style.css';
 import'./styles.scss';
 
-constimages=require.context('../../icons',true);
+consticonPath=`${process.env.PUBLIC_URL}/assets/icons/`;
 
 constTable=()=>{
 constdata=React.useMemo(()=>questions,[]);
@@ -213,6 +214,8 @@ const Table = () => {
 {
 Header: ()=>{
 return(
+// eslint-disable-next-line
+// eslint-disable-next-line jsx-a11y/label-has-associated-control
 <labelhtmlFor="pattern-toggle">
 <span>Show/Hide Patterns </span>
 <Toggle
@@ -284,11 +287,10 @@ const Table = () => {
 accessor: 'companies',
 Cell: cellInfo=>{
 constcompanies=cellInfo.row.original.companies.map(company=>{
-consticon=images(`./${company}.png`);
 return(
 <img
 key={company}
-src={icon}
+src={`${iconPath}${company}.png`}
 alt={company}
 data-tip={company}
 />