From ba4fc5ef1f4091bc72f932e406e3daadef6f735f Mon Sep 17 00:00:00 2001
From: "Emmanuel I. Obi" <withtwoemms@gmail.com>
Date: Mon, 12 Jul 2021 06:46:08 -0500
Subject: [PATCH 1/3] upgrades to react 16.8 for the "hooks" API

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d899695..e745ca0 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "gh-pages": "^2.0.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "scripts": {
     "start": "react-scripts start",

From 9d45f9a9a76f8d6e68871651e995dade1599f65b Mon Sep 17 00:00:00 2001
From: "Emmanuel I. Obi" <withtwoemms@gmail.com>
Date: Mon, 12 Jul 2021 06:48:28 -0500
Subject: [PATCH 2/3] keys menuItems to avoid warning

---
 src/components/Sidebar.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index f9bbf6d..6a166f3 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -33,12 +33,14 @@ const Sidebar = ({ menuItems, styles }) => {
   return (
     <div style={sidebarStyle}>
       <div style={logoStyle}>{styles.sidebarCollapsed ? "A" : "App"}</div>
-      {menuItems.map(item => (
-        <div style={menuItemStyle}>
-          <span style={iconStyle}>{item.icon}</span>
-          {!styles.sidebarCollapsed && item.text}
-        </div>
-      ))}
+        {
+          menuItems.map((item, index) => (
+            <div style={menuItemStyle} key={index}>
+              <span style={iconStyle}>{item.icon}</span>
+              {!styles.sidebarCollapsed && item.text}
+            </div>
+          ))
+        }
     </div>
   );
 };

From 7cd667c14cbc0fa5c6e1d1196232e6bda08e9843 Mon Sep 17 00:00:00 2001
From: "Emmanuel I. Obi" <withtwoemms@gmail.com>
Date: Mon, 12 Jul 2021 06:49:59 -0500
Subject: [PATCH 3/3] App.js leverages function component and "hooks" API

---
 src/App.js | 119 ++++++++++++++++++++++++-----------------------------
 1 file changed, 53 insertions(+), 66 deletions(-)

diff --git a/src/App.js b/src/App.js
index e09ffcd..4b49159 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,88 +1,75 @@
-import React, { Component } from "react";
-import TopBar from "./components/TopBar";
-import FooterMenu from "./components/FooterMenu";
+import React, { useState, useEffect } from 'react';
 import Content from "./components/Content";
+import FooterMenu from "./components/FooterMenu";
 import Sidebar from "./components/Sidebar";
+import TopBar from "./components/TopBar";
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      windowWidth: 0,
-      windowHeight: 0
-    };
-  }
-
-  componentDidMount() {
-    this.updateDimensions();
-    window.addEventListener("resize", this.updateDimensions.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.updateDimensions.bind(this));
-  }
-
-  updateDimensions() {
-    let windowWidth = typeof window !== "undefined" ? window.innerWidth : 0;
-    let windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
-
-    this.setState({ windowWidth, windowHeight });
-  }
-
-  render() {
-    const { windowWidth } = this.state;
-
+function App() {
+    const [windowState, setWindowState] = useState(
+      {
+        height: window.innerHeight,
+        width: window.innerWidth
+      }
+    );
+    const menuItems = [
+      { icon: `😀`, text: "Item 1" },
+      { icon: `😉`, text: "Item 2" },
+      { icon: `😎`, text: "Item 3" },
+      { icon: `🤔`, text: "Item 4" },
+      { icon: `😛`, text: "Item 5" }
+    ];
+    const sidebarCollapsed = windowState.width < 1100;
     const styles = {
       white: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
       black: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
       topBarHeight: 40,
       footerMenuHeight: 50,
-      showFooterMenuText: windowWidth > 500,
-      showSidebar: windowWidth > 768,
-      sidebarWidth: windowWidth < 1100 ? 50 : 150,
-      sidebarCollapsed: windowWidth < 1100
+      showFooterMenuText: windowState.width > 500,
+      showSidebar: windowState.width > 768,
+      sidebarCollapsed,
+      sidebarWidth: sidebarCollapsed ? 50 : 150
     };
 
-    const menuItems = styles.showSidebar
-      ? [
-          { icon: `😀`, text: "Item 1" },
-          { icon: `😉`, text: "Item 2" },
-          { icon: `😎`, text: "Item 3" },
-          { icon: `🤔`, text: "Item 4" },
-          { icon: `😛`, text: "Item 5" },
-          { icon: `😺️`, text: "Profile" },
-          { icon: `⚙`, text: "Settings" }
-        ]
-      : [
-          { icon: `😀`, text: "Item 1" },
-          { icon: `😉`, text: "Item 2" },
-          { icon: `😎`, text: "Item 3" },
-          { icon: `🤔`, text: "Item 4" },
-          { icon: `😛`, text: "Item 5" }
-        ];
+    useEffect(() => {
+      function handleResize() {
+        setWindowState(
+          {
+            height: window.innerHeight,
+            width: window.innerWidth
+          }
+        )
+      }
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+      }
+    })
+
+    if (styles.showSidebar) {
+      menuItems.push({ icon: `😺️`, text: "Profile" });
+      menuItems.push({ icon: `⚙`, text: "Settings" });
+    }
 
     return (
       <div
-        style={{
-          backgroundColor: styles.black(0.05),
-          minHeight: "100vh",
-          position: "relative"
-        }}
+        style={
+          {
+            backgroundColor: styles.black(0.05),
+            minHeight: "100vh",
+            position: "relative"
+          }
+        }
       >
-        {styles.showSidebar ? (
-          <Sidebar menuItems={menuItems} styles={styles} />
-        ) : (
-          <TopBar styles={styles} />
-        )}
+        {
+          styles.showSidebar ? (<Sidebar menuItems={menuItems} styles={styles} />) : 
+                               (<TopBar styles={styles} />)
+        }
 
         <Content styles={styles} />
 
-        {!styles.showSidebar && (
-          <FooterMenu menuItems={menuItems} styles={styles} />
-        )}
+        {!styles.showSidebar && (<FooterMenu menuItems={menuItems} styles={styles} />)}
       </div>
     );
-  }
 }
 
 export default App;