Bump react-scripts from 4.0.3 to 5.0.0

package.json

@@ -19,7 +19,7 @@
     "react-redux-firebase": "^3.10.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.0",
     "redux": "^4.1.0",
     "redux-firestore": "^0.15.0"
   },

src/App.js

@@ -9,22 +9,24 @@ import { Login } from "./pages/Login";
 import { Application } from "./pages/Application";
 import theme from "./theme";
 
-export const App = () => (
-  <>
-    <ColorModeScript initialColorMode="light" />
-    <ChakraProvider theme={theme}>
-      <Provider store={store}>
-        <ReactReduxFirebaseProvider {...reduxFirebaseProps}>
-          <BrowserRouter>
-            <Switch>
-              <Route path="/login">
-                <Login />
-              </Route>
-              <Application />
-            </Switch>
-          </BrowserRouter>
-        </ReactReduxFirebaseProvider>
-      </Provider>
-    </ChakraProvider>
-  </>
-);
+export var App = function () {
+  return (
+    <>
+      <ColorModeScript initialColorMode="light" />
+      <ChakraProvider theme={theme}>
+        <Provider store={store}>
+          <ReactReduxFirebaseProvider {...reduxFirebaseProps}>
+            <BrowserRouter>
+              <Switch>
+                <Route path="/login">
+                  <Login />
+                </Route>
+                <Application />
+              </Switch>
+            </BrowserRouter>
+          </ReactReduxFirebaseProvider>
+        </Provider>
+      </ChakraProvider>
+    </>
+  );
+};

src/__tests__/App.spec.js

@@ -16,8 +16,8 @@ jest.mock("../firebase", () => ({
             ),
           })),
           where: jest.fn(() => ({
-            onSnapshot: jest.fn(() => () =>
-              Promise.resolve("Never mock firebase")
+            onSnapshot: jest.fn(
+              () => () => Promise.resolve("Never mock firebase")
             ),
           })),
         })),

src/__tests__/Tasks.spec.js

@@ -49,8 +49,7 @@ jest.mock("../hooks", () => ({
         archived: false,
         date: "21/07/2019",
         projectId: "1",
-        task:
-          "Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.",
+        task: "Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.",
         userId: "jlIFXIwyAL3tzHMtzRbw",
       },
     ],

src/components/AddProject.js

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import { SmallAddIcon } from "@chakra-ui/icons";
 import { useFirestore } from "react-redux-firebase";
 
-export const AddProject = () => {
+export var AddProject = function () {
   const [show, setShow] = useState(false);
   const [projectName, setProjectName] = useState("");
 

src/components/AddTask.js

@@ -8,7 +8,7 @@ import { Box, Flex, Input, Button } from "@chakra-ui/react";
 import { SmallAddIcon } from "@chakra-ui/icons";
 import { useSelectedProjectValue } from "../context";
 
-export const AddTask = () => {
+export var AddTask = function () {
   const [taskName, setTaskName] = useState("");
   const [showMain, setShowMain] = useState(false);
 

src/components/Project.js

@@ -17,7 +17,7 @@ import { useSelectedProjectValue } from "../context";
 import { CircleIcon } from "./icons";
 import { getRandomColor } from "../helpers";
 
-export const Project = ({ project }) => {
+export var Project = function ({ project }) {
   const [showIcon, setShowIcon] = useState(false);
   const { selectedProject, setSelectedProject } = useSelectedProjectValue();
   const { colorMode } = useColorMode();

src/components/Projects.js

@@ -4,7 +4,7 @@ import { useFirestoreConnect } from "react-redux-firebase";
 import { Text } from "@chakra-ui/react";
 import { Project } from "./Project";
 
-export const Projects = () => {
+export var Projects = function () {
   const auth = useSelector((state) => state.firebase.auth);
 
   useFirestoreConnect([

src/components/Tasks.js

@@ -6,7 +6,7 @@ import { AddTask } from "./AddTask";
 import { useSelectedProjectValue } from "../context";
 import { staticProjects } from "../constants";
 
-export const Tasks = () => {
+export var Tasks = function () {
   const { selectedProject } = useSelectedProjectValue();
   const firestore = useFirestore();
   const auth = useSelector((state) => state.firebase.auth);

src/components/hocs/PrivateRoute.js

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import { isLoaded, isEmpty } from "react-redux-firebase";
 import PropTypes from "prop-types";
 
-export const PrivateRoute = ({ children, path }) => {
+export var PrivateRoute = function ({ children, path }) {
   const auth = useSelector((state) => state.firebase.auth);
 
   return (

src/components/icons/CircleIcon.js

@@ -2,14 +2,16 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Icon } from "@chakra-ui/react";
 
-export const CircleIcon = ({ boxSize, color }) => (
-  <Icon viewBox="0 0 200 200" boxSize={boxSize} color={color}>
-    <path
-      fill="currentColor"
-      d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
-    />
-  </Icon>
-);
+export var CircleIcon = function ({ boxSize, color }) {
+  return (
+    <Icon viewBox="0 0 200 200" boxSize={boxSize} color={color}>
+      <path
+        fill="currentColor"
+        d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
+      />
+    </Icon>
+  );
+};
 
 CircleIcon.propTypes = {
   boxSize: PropTypes.number.isRequired,

src/components/layout/Content.js

@@ -3,13 +3,15 @@ import { Grid, GridItem } from "@chakra-ui/react";
 import { Sidebar } from "./Sidebar";
 import { Tasks } from "../Tasks";
 
-export const Content = () => (
-  <Grid templateColumns="repeat(5, 1fr)" w={1000} m="auto">
-    <GridItem colSpan={4}>
-      <Sidebar />
-    </GridItem>
-    <GridItem>
-      <Tasks />
-    </GridItem>
-  </Grid>
-);
+export var Content = function () {
+  return (
+    <Grid templateColumns="repeat(5, 1fr)" w={1000} m="auto">
+      <GridItem colSpan={4}>
+        <Sidebar />
+      </GridItem>
+      <GridItem>
+        <Tasks />
+      </GridItem>
+    </Grid>
+  );
+};

src/components/layout/Header.js

@@ -11,7 +11,7 @@ import {
 import { AddIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
 import AddQuickTask from "../AddQuickTask";
 
-export const Header = () => {
+export var Header = function () {
   const { onOpen, onClose, isOpen } = useDisclosure();
   const { colorMode, toggleColorMode } = useColorMode();
 

src/components/layout/Sidebar.js

@@ -18,7 +18,7 @@ import { useSelectedProjectValue } from "../../context";
 import { AddProject } from "../AddProject";
 import { staticProjects } from "../../constants";
 
-export const Sidebar = () => {
+export var Sidebar = function () {
   const { selectedProject, setSelectedProject } = useSelectedProjectValue();
 
   return (

src/context/selected-project-context.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 export const SelectedProjectContext = createContext();
 
-export const SelectedProjectProvider = ({ children }) => {
+export var SelectedProjectProvider = function ({ children }) {
   const [selectedProject, setSelectedProject] = useState("inbox");
 
   return (

src/pages/Application.js

@@ -4,13 +4,15 @@ import { Header } from "../components/layout/Header";
 import { Content } from "../components/layout/Content";
 import { SelectedProjectProvider } from "../context";
 
-export const Application = () => (
-  <PrivateRoute path="/">
-    <SelectedProjectProvider>
-      <main data-testid="application">
-        <Header />
-        <Content />
-      </main>
-    </SelectedProjectProvider>
-  </PrivateRoute>
-);
+export var Application = function () {
+  return (
+    <PrivateRoute path="/">
+      <SelectedProjectProvider>
+        <main data-testid="application">
+          <Header />
+          <Content />
+        </main>
+      </SelectedProjectProvider>
+    </PrivateRoute>
+  );
+};

src/pages/Login.js

@@ -3,7 +3,7 @@ import { useFirebase } from "react-redux-firebase";
 import { useHistory } from "react-router-dom";
 import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
 
-export const Login = () => {
+export var Login = function () {
   const firebase = useFirebase();
   const history = useHistory();