From 651f308cdbbabe04be98ce36effc142a646b9ec1 Mon Sep 17 00:00:00 2001
From: user <james@jamesnuanez.com>
Date: Fri, 29 May 2020 16:27:37 -0700
Subject: [PATCH] Refactor side menu out of internal template into a separate
 file

---
 src/App.js                                   |  70 +++++-----
 src/components/blocks/SideMenu.js            |  99 +++++++++++++
 src/components/templates/InternalTemplate.js | 139 +++----------------
 3 files changed, 159 insertions(+), 149 deletions(-)
 create mode 100644 src/components/blocks/SideMenu.js

diff --git a/src/App.js b/src/App.js
index 282ac3a..a6844fc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@ import InvalidRoute from './components/pages/InvalidRoute';
 
 import Notification from './components/blocks/Notification';
 import Nav from './components/blocks/Nav';
+import SideMenu from './components/blocks/SideMenu';
 
 function App() {
   const notifications = useContext(NotificationStateContext);
@@ -36,41 +37,46 @@ function App() {
         <Route exact path="/configure-sip-trunk"><ConfigureSipTrunk /></Route>
         <Route exact path="/setup-complete"><SetupComplete /></Route>
 
-        <Route exact path="/internal/accounts"><AccountsList /></Route>
-        <Route exact path="/internal/applications"><ApplicationsList /></Route>
-        <Route exact path="/internal/sip-trunks"><SipTrunksList /></Route>
-        <Route exact path="/internal/phone-numbers"><PhoneNumbersList /></Route>
+        <Route path="/internal">
+          <div style={{ display: "flex" }}>
+            <SideMenu />
+            <Route exact path="/internal/accounts"><AccountsList /></Route>
+            <Route exact path="/internal/applications"><ApplicationsList /></Route>
+            <Route exact path="/internal/sip-trunks"><SipTrunksList /></Route>
+            <Route exact path="/internal/phone-numbers"><PhoneNumbersList /></Route>
 
-        <Route exact path={[
-          "/internal/accounts/add",
-          "/internal/accounts/:account_sid/edit"
-        ]}>
-          <AccountsAddEdit />
+            <Route exact path={[
+              "/internal/accounts/add",
+              "/internal/accounts/:account_sid/edit"
+            ]}>
+              <AccountsAddEdit />
+            </Route>
+
+            <Route exact path={[
+              "/internal/applications/add",
+              "/internal/applications/:application_sid/edit"
+            ]}>
+              <ApplicationsAddEdit />
+            </Route>
+
+            <Route exact path={[
+              "/internal/sip-trunks/add",
+              "/internal/sip-trunks/:voip_carrier_sid/edit"
+            ]}>
+              <SipTrunksAddEdit />
+            </Route>
+
+            <Route exact path={[
+              "/internal/phone-numbers/add",
+              "/internal/phone-numbers/:phone_number_sid/edit"
+            ]}>
+              <PhoneNumbersAddEdit />
+            </Route>
+
+            <Route exact path="/internal/settings"><Settings /></Route>
+          </div>
         </Route>
 
-        <Route exact path={[
-          "/internal/applications/add",
-          "/internal/applications/:application_sid/edit"
-        ]}>
-          <ApplicationsAddEdit />
-        </Route>
-
-        <Route exact path={[
-          "/internal/sip-trunks/add",
-          "/internal/sip-trunks/:voip_carrier_sid/edit"
-        ]}>
-          <SipTrunksAddEdit />
-        </Route>
-
-        <Route exact path={[
-          "/internal/phone-numbers/add",
-          "/internal/phone-numbers/:phone_number_sid/edit"
-        ]}>
-          <PhoneNumbersAddEdit />
-        </Route>
-
-        <Route exact path="/internal/settings"><Settings /></Route>
-
         <Route><InvalidRoute /></Route>
       </Switch>
     </Router>
diff --git a/src/components/blocks/SideMenu.js b/src/components/blocks/SideMenu.js
new file mode 100644
index 0000000..b20ed54
--- /dev/null
+++ b/src/components/blocks/SideMenu.js
@@ -0,0 +1,99 @@
+import React, { useContext } from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components/macro';
+import { ModalStateContext } from '../../contexts/ModalContext';
+import { ReactComponent as AccountsIcon } from '../../images/AccountsIcon.svg';
+import { ReactComponent as ApplicationsIcon } from '../../images/ApplicationsIcon.svg';
+import { ReactComponent as SipTrunksIcon } from '../../images/SipTrunksIcon.svg';
+import { ReactComponent as PhoneNumbersIcon } from '../../images/PhoneNumbersIcon.svg';
+import { ReactComponent as SettingsIcon } from '../../images/SettingsIcon.svg';
+
+const StyledSideMenu = styled.div`
+  width: 15rem;
+  flex-shrink: 0;
+  height: calc(100vh - 4rem);
+  overflow: auto;
+  background: #FFF;
+  padding-top: 3.25rem;
+`;
+
+const activeClassName = 'nav-item-active';
+
+const StyledNavLink = styled(NavLink).attrs({ activeClassName })`
+  height: 2.75rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: stretch;
+  font-weight: 500;
+  text-decoration: none;
+  color: #565656;
+  fill: #565656;
+
+  &.${activeClassName} {
+    box-shadow: inset 3px 0 0 0 #D91C5C;
+    color: #D91C5C;
+    fill: #D91C5C;
+  }
+
+  &:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 3px #D91C5C;
+  }
+
+  &:hover {
+    background: RGBA(217, 28, 92, 0.1);
+    color: #C0134D;
+    fill: #C0134D;
+  }
+  &.${activeClassName}:hover {
+    color: #D91C5C;
+    fill: #D91C5C;
+  }
+`;
+
+const IconContainer = styled.span`
+  width: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline: 0;
+`;
+
+const MenuText = styled.span`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  outline: 0;
+`;
+
+const MenuLink = props => {
+  const modalOpen = useContext(ModalStateContext);
+  return (
+    <StyledNavLink
+      to={props.to}
+      activeClassName={activeClassName}
+      tabIndex={modalOpen ? '-1' : ''}
+    >
+      <IconContainer tabIndex="-1">
+        {props.icon}
+      </IconContainer>
+      <MenuText tabIndex="-1">
+        {props.name}
+      </MenuText>
+    </StyledNavLink>
+  );
+};
+
+const SideMenu = () => {
+  return (
+    <StyledSideMenu>
+      <MenuLink to="/internal/accounts"      name="Accounts"      icon={<AccountsIcon     />} />
+      <MenuLink to="/internal/applications"  name="Applications"  icon={<ApplicationsIcon />} />
+      <MenuLink to="/internal/sip-trunks"    name="SIP Trunks"    icon={<SipTrunksIcon    />} />
+      <MenuLink to="/internal/phone-numbers" name="Phone Numbers" icon={<PhoneNumbersIcon />} />
+      <MenuLink to="/internal/settings" name="Settings" icon={<SettingsIcon />} />
+    </StyledSideMenu>
+  );
+};
+
+export default SideMenu;
diff --git a/src/components/templates/InternalTemplate.js b/src/components/templates/InternalTemplate.js
index da6d5bc..f7a3581 100644
--- a/src/components/templates/InternalTemplate.js
+++ b/src/components/templates/InternalTemplate.js
@@ -1,79 +1,11 @@
 import React, { useEffect, useContext } from 'react';
-import { NavLink, useHistory } from 'react-router-dom';
-import { ModalStateContext } from '../../contexts/ModalContext';
+import { useHistory } from 'react-router-dom';
 import { NotificationDispatchContext } from '../../contexts/NotificationContext';
 import styled from 'styled-components/macro';
 import H1 from '../elements/H1';
-import { ReactComponent as AccountsIcon } from '../../images/AccountsIcon.svg';
-import { ReactComponent as ApplicationsIcon } from '../../images/ApplicationsIcon.svg';
-import { ReactComponent as SipTrunksIcon } from '../../images/SipTrunksIcon.svg';
-import { ReactComponent as PhoneNumbersIcon } from '../../images/PhoneNumbersIcon.svg';
-import { ReactComponent as SettingsIcon } from '../../images/SettingsIcon.svg';
 import AddButton from '../elements/AddButton';
 import Breadcrumbs from '../blocks/Breadcrumbs';
 
-const PageContainer = styled.div`
-  display: flex;
-`;
-
-const SideMenu = styled.div`
-  width: 15rem;
-  flex-shrink: 0;
-  height: calc(100vh - 4rem);
-  overflow: auto;
-  background: #FFF;
-  padding-top: 3.25rem;
-`;
-
-const activeClassName = 'nav-item-active';
-
-const StyledNavLink = styled(NavLink).attrs({ activeClassName })`
-  height: 2.75rem;
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: stretch;
-  font-weight: 500;
-  text-decoration: none;
-  color: #565656;
-  fill: #565656;
-
-  &.${activeClassName} {
-    box-shadow: inset 3px 0 0 0 #D91C5C;
-    color: #D91C5C;
-    fill: #D91C5C;
-  }
-
-  &:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 3px #D91C5C;
-  }
-
-  &:hover {
-    background: RGBA(217, 28, 92, 0.1);
-    color: #C0134D;
-    fill: #C0134D;
-  }
-  &.${activeClassName}:hover {
-    color: #D91C5C;
-    fill: #D91C5C;
-  }
-`;
-
-const IconContainer = styled.span`
-  width: 3rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  outline: 0;
-`;
-
-const MenuText = styled.span`
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  outline: 0;
-`;
-
 const PageMain = styled.main`
   height: calc(100vh - 4rem);
   width: calc(100% - 15rem);
@@ -102,24 +34,6 @@ const ContentContainer = styled.div`
   }
 `;
 
-const MenuLink = props => {
-  const modalOpen = useContext(ModalStateContext);
-  return (
-    <StyledNavLink
-      to={props.to}
-      activeClassName={activeClassName}
-      tabIndex={modalOpen ? '-1' : ''}
-    >
-      <IconContainer tabIndex="-1">
-        {props.icon}
-      </IconContainer>
-      <MenuText tabIndex="-1">
-        {props.name}
-      </MenuText>
-    </StyledNavLink>
-  );
-};
-
 const InternalTemplate = props => {
   const history = useHistory();
   const dispatch = useContext(NotificationDispatchContext);
@@ -136,36 +50,27 @@ const InternalTemplate = props => {
   }, [history, dispatch]);
 
   return (
-    <PageContainer>
-      <SideMenu>
-        <MenuLink to="/internal/accounts"      name="Accounts"      icon={<AccountsIcon     />} />
-        <MenuLink to="/internal/applications"  name="Applications"  icon={<ApplicationsIcon />} />
-        <MenuLink to="/internal/sip-trunks"    name="SIP Trunks"    icon={<SipTrunksIcon    />} />
-        <MenuLink to="/internal/phone-numbers" name="Phone Numbers" icon={<PhoneNumbersIcon />} />
-        <MenuLink to="/internal/settings" name="Settings" icon={<SettingsIcon />} />
-      </SideMenu>
-      <PageMain>
-        {props.breadcrumbs && (
-          <Breadcrumbs breadcrumbs={props.breadcrumbs} />
-        )}
-        <H1>{props.title}</H1>
-        {props.addButtonText && (
-          <AddButton
-            addButtonText={props.addButtonText}
-            to={props.addButtonLink}
-          />
-        )}
-        {typeof props.subtitle === 'object'
-          ? props.subtitle
-          : <P>{props.subtitle}</P>
-        }
-        <ContentContainer
-          type={props.type}
-        >
-          {props.children}
-        </ContentContainer>
-      </PageMain>
-    </PageContainer>
+    <PageMain>
+      {props.breadcrumbs && (
+        <Breadcrumbs breadcrumbs={props.breadcrumbs} />
+      )}
+      <H1>{props.title}</H1>
+      {props.addButtonText && (
+        <AddButton
+          addButtonText={props.addButtonText}
+          to={props.addButtonLink}
+        />
+      )}
+      {typeof props.subtitle === 'object'
+        ? props.subtitle
+        : <P>{props.subtitle}</P>
+      }
+      <ContentContainer
+        type={props.type}
+      >
+        {props.children}
+      </ContentContainer>
+    </PageMain>
   );
 };