chore: cleanup

src/components/EnterpriseApp/index.jsx

@@ -126,7 +126,7 @@ class EnterpriseApp extends React.Component {
         enablePortalLearnerCreditManagementScreen={enablePortalLearnerCreditManagementScreen}
       >
         <BrandStyles enterpriseBranding={enterpriseBranding} />
-        <div className="enterprise-app" style={{ minHeight: this.context.minHeight }}>
+        <div className="enterprise-app fill-vertical-space" style={{ minHeight: this.context.minHeight }}>
           <MediaQuery minWidth={breakpoints.large.minWidth}>
             {matchesMediaQ => (
               <>

src/components/Footer/index.jsx

@@ -8,10 +8,13 @@ import { configuration } from '../../config';
 import Img from '../Img';
 import messages from './messages';
 import './Footer.scss';
-import useGlobalContext from '../GlobalProvider/useGlobalContext';
-import { FOOTER_HEIGHT } from '../../data/constants/global';
+import { GlobalContext } from '../GlobalProvider';
+import { setFooterHeight } from '../../data/actions/global';
 
 class Footer extends React.Component {
+  // eslint-disable-next-line react/static-property-placement
+  static contextType = GlobalContext;
+
   ref = createRef();
 
   constructor(props) {
@@ -22,16 +25,24 @@ class Footer extends React.Component {
   }
 
   componentDidMount() {
-    console.log(this.ref.current.offsetHeight);
+    const { footerHeight, dispatch } = this.context;
+    if (this.ref.current?.offsetHeight && footerHeight < this.ref.current?.offsetHeight) {
+      dispatch(setFooterHeight(this.ref.current.offsetHeight));
+    }
   }
 
   componentDidUpdate(prevProps) {
     const { enterpriseLogo } = this.props;
+    const { footerHeight, dispatch } = this.context;
+
     if (enterpriseLogo && enterpriseLogo !== prevProps.enterpriseLogo) {
       this.setState({ // eslint-disable-line react/no-did-update-set-state
         enterpriseLogoNotFound: false,
       });
     }
+    if (this.ref.current?.offsetHeight && footerHeight < this.ref.current?.offsetHeight) {
+      dispatch(setFooterHeight(this.ref.current.offsetHeight));
+    }
   }
 
   renderEnterpriseLogo() {

src/components/GlobalProvider/index.jsx

@@ -1,20 +1,19 @@
-import { createContext } from 'react';
+import { createContext, useMemo, useReducer } from 'react';
 import PropTypes from 'prop-types';
-import useGlobalContext from './useGlobalContext';
+import { globalReducer, initialState } from '../../data/reducers/global';
 
 export const GlobalContext = createContext();
 
 const GlobalContextProvider = ({
-  refValue,
-  actionType,
   children,
 }) => {
-  const globalContext = useGlobalContext(
-    {
-      refValue,
-      actionType,
-    },
-  );
+  const [globalState, dispatch] = useReducer(globalReducer, initialState);
+  const globalContext = useMemo(() => ({
+    ...globalState,
+    // Offsets by an additional 1 rem to avoid rendering the scrollbar unnecessarily
+    minHeight: `calc(100vh - ${globalState.headerHeight + globalState.footerHeight + 16}px)`,
+    dispatch,
+  }), [globalState]);
   return (
     <GlobalContext.Provider value={globalContext}>
       {children}
@@ -23,14 +22,7 @@ const GlobalContextProvider = ({
 };
 
 GlobalContextProvider.propTypes = {
-  refValue: PropTypes.string,
-  actionType: PropTypes.string,
   children: PropTypes.node.isRequired,
 };
 
-GlobalContextProvider.defaultProps = {
-  refValue: null,
-  actionType: null,
-};
-
 export default GlobalContextProvider;

src/components/GlobalProvider/useGlobalContext.js

@@ -1,27 +1,10 @@
-import { useEffect, useMemo, useReducer } from 'react';
+import { useMemo, useReducer } from 'react';
 
 import { globalReducer, initialState } from '../../data/reducers/global';
-import { FOOTER_HEIGHT, HEADER_HEIGHT } from '../../data/constants/global';
-import { footerHeight, headerHeight } from '../../data/actions/global';
 
-function useGlobalContext({
-  actionType,
-  refValue,
-}) {
+function useGlobalContext() {
   const [globalState, dispatch] = useReducer(globalReducer, initialState);
 
-  useEffect(() => {
-    switch (actionType) {
-      case HEADER_HEIGHT:
-        dispatch(headerHeight(refValue));
-        break;
-      case FOOTER_HEIGHT:
-        dispatch(footerHeight(refValue));
-        break;
-      default:
-    }
-  }, [actionType, refValue]);
-
   return useMemo(() => ({
     ...globalState,
     minHeight: `calc(100vh - ${globalState.headerHeight + globalState.footerHeight}px)`,

src/components/Header/index.jsx

@@ -16,7 +16,7 @@ import Img from '../Img';
 import { configuration } from '../../config';
 
 import './Header.scss';
-import { headerHeight } from '../../data/actions/global';
+import { setHeaderHeight } from '../../data/actions/global';
 import { GlobalContext } from '../GlobalProvider';
 
 export const Logo = ({ enterpriseLogo, enterpriseName }) => {
@@ -87,12 +87,14 @@ const Header = ({
 }) => {
   const user = getAuthenticatedUser();
   const ref = useRef();
-  const { dispatch } = useContext(GlobalContext);
+  const { headerHeight, dispatch } = useContext(GlobalContext);
+
   useEffect(() => {
-    if (ref.current?.offsetHeight && !global.headerHeight) {
-      dispatch(headerHeight(ref.current?.offsetHeight));
+    if (ref.current?.offsetHeight && headerHeight < ref.current?.offsetHeight) {
+      dispatch(setHeaderHeight(ref.current?.offsetHeight));
     }
-  }, [dispatch, ref.current?.offsetHeight]);
+  }, [dispatch, headerHeight, ref.current?.offsetHeight]);
+
   return (
     <header ref={ref} className="container-fluid border-bottom">
       <Navbar aria-label="header" className="px-0 py-1 justify-content-between">

src/data/actions/global.js

@@ -3,20 +3,17 @@ import {
   FOOTER_HEIGHT,
 } from '../constants/global';
 
-const headerHeight = (refValue = 0) => ({
+const setHeaderHeight = (refValue = 0) => ({
   type: HEADER_HEIGHT,
   payload: { headerHeight: refValue },
 });
 
-const footerHeight = (refValue = 0) => ({
+const setFooterHeight = (refValue = 0) => ({
   type: FOOTER_HEIGHT,
   payload: { footerHeight: refValue },
 });
 
-const getGlobalHeightFromState = (state) => state;
-
 export {
-  headerHeight,
-  footerHeight,
-  getGlobalHeightFromState,
+  setHeaderHeight,
+  setFooterHeight,
 };

src/data/reducers/global.js

@@ -4,8 +4,8 @@ import {
 } from '../constants/global';
 
 export const initialState = {
-  headerHeight: null,
-  footerHeight: null,
+  headerHeight: 0,
+  footerHeight: 0,
 };
 
 export const globalReducer = (state = initialState, action) => {

src/index.scss

@@ -66,10 +66,6 @@ form {
   padding-right: 15px;
 }
 
-.offset-min-height {
-  min-height: calc(100vh - 185px);
-}
-
 .toast-container {
   z-index: $zindex-popover;
 }