Merge pull request #73 from m2mathew/dev

2.3.1

Author: m2mathew

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tmac-website",
   "description": "Website for the Texas Music Administrators Conference",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/m2mathew/tmac-website"
@@ -70,8 +70,8 @@
     "yup": "0.32.9"
   },
   "engines": {
-    "node": "^12.22.1",
-    "npm": "^6.14.10"
+    "node": "^14.x",
+    "npm": "^6.14.x"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",

src/components/shared/LoadingContainer.js

@@ -1,8 +1,8 @@
 // External Dependencies
-import CircularProgress from '@material-ui/core/CircularProgress';
+import { CircularProgress } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
 
 // Local Variables
 const propTypes = {

src/pages/sponsors/index.tsx

@@ -1,7 +1,7 @@
 // External Dependencies
 import {
   Box,
-  // Typography,
+  CircularProgress,
 } from '@material-ui/core';
 import { Helmet } from 'react-helmet';
 import React, {
@@ -30,8 +30,6 @@ const Sponsors: FC<Props> = ({ location }) => {
   const [sponsorData, setSponsorData] = useState<SponsorFormValues[] | null>(null);
   const previousSponsorData = usePrevious(sponsorData);
 
-  console.log('isLoading', isLoading);
-
   const handleUpdateSponsorData = (newSponsorData: SponsorFormValues[] | null) => {
     setSponsorData(newSponsorData);
   };
@@ -64,23 +62,28 @@ const Sponsors: FC<Props> = ({ location }) => {
             display="flex"
             flexDirection="column"
           >
-            <SponsorCard
-              sponsorData={sponsorData?.filter((sponsor) =>
-                sponsor.SponsorLevel === SPONSORSHIP_LEVELS.CLASS_CHAMPION)}
-              title={SPONSORSHIP_LEVELS.CLASS_CHAMPION}
-            />
-            <SponsorCard
-              sponsorData={sponsorData?.filter((sponsor) =>
-                sponsor.SponsorLevel === SPONSORSHIP_LEVELS.GOLD_MEDAL)}
-              subtitle={SPONSORSHIP_PRICE[SPONSORSHIP_LEVELS.GOLD_MEDAL]}
-              title={SPONSORSHIP_LEVELS.GOLD_MEDAL}
-            />
-            <SponsorCard
-              sponsorData={sponsorData?.filter((sponsor) =>
-                sponsor.SponsorLevel === SPONSORSHIP_LEVELS.SILVER_MEDAL)}
-              subtitle={SPONSORSHIP_PRICE[SPONSORSHIP_LEVELS.SILVER_MEDAL]}
-              title={SPONSORSHIP_LEVELS.SILVER_MEDAL}
-            />
+            {isLoading ? <CircularProgress size={64} thickness={4} />
+              : (
+                <>
+                  <SponsorCard
+                    sponsorData={sponsorData?.filter((sponsor) =>
+                      sponsor.SponsorLevel === SPONSORSHIP_LEVELS.CLASS_CHAMPION)}
+                    title={SPONSORSHIP_LEVELS.CLASS_CHAMPION}
+                  />
+                  <SponsorCard
+                    sponsorData={sponsorData?.filter((sponsor) =>
+                      sponsor.SponsorLevel === SPONSORSHIP_LEVELS.GOLD_MEDAL)}
+                    subtitle={SPONSORSHIP_PRICE[SPONSORSHIP_LEVELS.GOLD_MEDAL]}
+                    title={SPONSORSHIP_LEVELS.GOLD_MEDAL}
+                  />
+                  <SponsorCard
+                    sponsorData={sponsorData?.filter((sponsor) =>
+                      sponsor.SponsorLevel === SPONSORSHIP_LEVELS.SILVER_MEDAL)}
+                    subtitle={SPONSORSHIP_PRICE[SPONSORSHIP_LEVELS.SILVER_MEDAL]}
+                    title={SPONSORSHIP_LEVELS.SILVER_MEDAL}
+                  />
+                </>
+              )}
           </Box>
         </Container>
       </Box>

src/theme.js

@@ -1,11 +1,11 @@
 // External Dependencies
 import { amber, cyan, lightBlue } from '@material-ui/core/colors';
 import {
-  createMuiTheme,
+  createTheme,
   responsiveFontSizes,
 } from '@material-ui/core/styles';
 
-const baseTheme = createMuiTheme({
+const baseTheme = createTheme({
   palette: {
     alert: {
       info: lightBlue['500'],

src/utils/getPageContext.js

@@ -3,7 +3,7 @@
 import { SheetsRegistry } from 'jss';
 import {
   createGenerateClassName,
-  createMuiTheme,
+  createTheme,
 } from '@material-ui/core/styles';
 import {
   indigo,
@@ -12,7 +12,7 @@ import {
 
 // A theme with custom primary and secondary color.
 // It's optional.
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: {
       light: indigo[300],