* Yarn upgrade

* Added context for keeping track of current page
* Added Footer component
* Dependency upgrades

Author: CodeDead

.yarn/releases/yarn-2.2.2.cjs

@@ -2,6 +2,6 @@ nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/yarn-up-all-plugin.cjs
-    spec: "https://github.com/e5mode/yarn-up-all/releases/download/1.0.2/index.js"
+    spec: "https://github.com/e5mode/yarn-up-all/releases/download/1.0.3/index.js"
 
-yarnPath: .yarn/releases/yarn-2.2.2.cjs
+yarnPath: .yarn/releases/yarn-2.4.0.cjs

.yarn/releases/yarn-2.4.0.cjs

@@ -0,0 +1,8 @@
+import React from 'react';
+import MainContextProvider from './src/contexts/MainContextProvider';
+
+export const wrapRootElement = ({ element }) => (
+  <MainContextProvider>
+    {element}
+  </MainContextProvider>
+);

.yarnrc.yml

@@ -0,0 +1,9 @@
+const React = require('react');
+const MainContextProvider = require('./src/contexts/MainContextProvider');
+
+exports.wrapRootElement = ({ element }) => (
+  // eslint-disable-next-line react/jsx-filename-extension
+  <MainContextProvider>
+    {element}
+  </MainContextProvider>
+);

gatsby-browser.js

@@ -14,23 +14,23 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "gatsby": "^2.24.52",
-    "gatsby-image": "^2.4.16",
-    "gatsby-plugin-sharp": "^2.6.30",
-    "gatsby-source-filesystem": "^2.3.27",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "gatsby": "^2.31.1",
+    "gatsby-image": "^2.10.0",
+    "gatsby-plugin-sharp": "^2.13.2",
+    "gatsby-source-filesystem": "^2.10.0",
     "gatsby-theme-material-ui": "^1.0.13",
-    "gatsby-transformer-sharp": "^2.5.13",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "gatsby-transformer-sharp": "^2.11.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.0"
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0"
   },
   "repository": {
     "type": "git",

gatsby-ssr.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <BottomNavigation showLabels style={{ marginTop: 20 }}>
+      <BottomNavigationAction label={`Copyright © ${currentYear} CodeDead`} />
+    </BottomNavigation>
+  );
+};
+
+export default Footer;

package.json

@@ -1,6 +1,8 @@
 import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
+import { CssBaseline } from '@material-ui/core';
 import DefaultAppBar from '../DefaultAppBar';
+import Footer from '../Footer';
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`query {
@@ -17,13 +19,15 @@ const Layout = ({ children }) => {
 
   return (
     <>
+      <CssBaseline />
       <DefaultAppBar
         title={data.site.siteMetadata.title}
         githubUrl={data.site.siteMetadata.github}
         twitterUrl={data.site.siteMetadata.twitter}
         facebookUrl={data.site.siteMetadata.facebook}
       />
       {children}
+      <Footer />
     </>
   );
 };

src/components/Footer/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -15,6 +15,7 @@ import AnnouncementIcon from '@material-ui/icons/Announcement';
 import InfoIcon from '@material-ui/icons/Info';
 import EmailIcon from '@material-ui/icons/Email';
 import { navigate } from 'gatsby';
+import { MainContext } from '../../contexts/MainContextProvider';
 
 const useStyles = makeStyles((theme) => ({
   drawer: {
@@ -34,8 +35,11 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const NavigationDrawer = ({ open, onClose }) => {
+  const [state,] = useContext(MainContext);
   const classes = useStyles();
 
+  const { pageIndex } = state;
+
   /**
    * Close the drawer
    * @param e The event argument
@@ -62,7 +66,7 @@ const NavigationDrawer = ({ open, onClose }) => {
       </div>
       <Divider />
       <List>
-        <ListItem button onClick={() => navigate('/')}>
+        <ListItem button onClick={() => navigate('/')} selected={pageIndex === 0}>
           <ListItemIcon><HomeIcon /></ListItemIcon>
           <ListItemText>
             Home
@@ -71,29 +75,29 @@ const NavigationDrawer = ({ open, onClose }) => {
       </List>
       <Divider />
       <List>
-        <ListItem button onClick={() => navigate('/software')}>
+        <ListItem button onClick={() => navigate('/software')} selected={pageIndex === 1}>
           <ListItemIcon><BuildIcon /></ListItemIcon>
           <ListItemText>Software</ListItemText>
         </ListItem>
       </List>
       <Divider />
       <List>
-        <ListItem button onClick={() => navigate('/blog')}>
+        <ListItem button onClick={() => navigate('/blog')} selected={pageIndex === 2}>
           <ListItemIcon><AnnouncementIcon /></ListItemIcon>
           <ListItemText>Blog</ListItemText>
         </ListItem>
       </List>
       <Divider />
       <List>
-        <ListItem button onClick={() => navigate('/donate')}>
+        <ListItem button onClick={() => navigate('/donate')} selected={pageIndex === 3}>
           <ListItemIcon><AttachMoneyIcon /></ListItemIcon>
           <ListItemText>Donate</ListItemText>
         </ListItem>
-        <ListItem button onClick={() => navigate('/about')}>
+        <ListItem button onClick={() => navigate('/about')} selected={pageIndex === 4}>
           <ListItemIcon><InfoIcon /></ListItemIcon>
           <ListItemText>About</ListItemText>
         </ListItem>
-        <ListItem button onClick={() => navigate('/contact')}>
+        <ListItem button onClick={() => navigate('/contact')} selected={pageIndex === 5}>
           <ListItemIcon><EmailIcon /></ListItemIcon>
           <ListItemText>Contact</ListItemText>
         </ListItem>

src/components/Layout/index.jsx

@@ -0,0 +1,19 @@
+import React, { useReducer, createContext } from 'react';
+import MainReducer from '../../reducers/MainReducer';
+
+const initState = {
+  pageIndex: 0,
+};
+
+export const MainContext = createContext(initState);
+
+const MainContextProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(MainReducer, initState);
+  return (
+    <MainContext.Provider value={[state, dispatch]}>
+      {children}
+    </MainContext.Provider>
+  );
+};
+
+export default MainContextProvider;