#717 - Updating packages and resolving errors (#721)

* Updated minor package versions * Fixing lint issues * Updated eslint and gatsby * updated packages babel, fortawesome, react-github-calendar, react-hot-toast, applicationinsights, lighthouse, prettier * fixed missing dependency warnings * updated person template the resolve warnings - css conflict warnings with styles.css - missing dependency warnings * refactored to resolve missing dependemcy warnings * updated github react calendar * updated ava and megamenu * fixed missing return warning * Removed error on build for audio requiring browser
SSWConsulting · Jan 8, 2025 · 26a4159 · 26a4159
1 parent c577b7e
commit 26a4159
Show file tree

Hide file tree

Showing 13 changed files with 7,147 additions and 3,596 deletions.
diff --git a/package.json b/package.json
@@ -21,62 +21,62 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.26.0",
     "@brainhubeu/react-carousel": "^2.0.4",
-    "@fontsource-variable/inter": "^5.1.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@microsoft/applicationinsights-web": "^3.3.3",
+    "@fontsource-variable/inter": "^5.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@microsoft/applicationinsights-web": "^3.3.4",
     "@raae/gatsby-remark-oembed": "^0.3.3",
     "@reach/router": "^1.3.4",
     "assert": "^2.1.0",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
-    "gatsby": "^5.13.7",
+    "gatsby": "^5.14.1",
     "gatsby-plugin-breadcrumb": "^12.3.2",
     "gatsby-plugin-client-side-redirect": "^1.1.0",
-    "gatsby-plugin-google-gtag": "^5.13.1",
-    "gatsby-plugin-google-tagmanager": "^5.13.1",
-    "gatsby-plugin-image": "^3.13.1",
-    "gatsby-plugin-postcss": "^6.13.1",
-    "gatsby-plugin-react-helmet": "^6.13.1",
+    "gatsby-plugin-google-gtag": "^5.14.0",
+    "gatsby-plugin-google-tagmanager": "^5.14.0",
+    "gatsby-plugin-image": "^3.14.0",
+    "gatsby-plugin-postcss": "^6.14.0",
+    "gatsby-plugin-react-helmet": "^6.14.0",
     "gatsby-plugin-react-svg": "^3.3.0",
-    "gatsby-plugin-sharp": "^5.13.1",
-    "gatsby-plugin-sitemap": "^6.13.1",
-    "gatsby-remark-copy-linked-files": "^6.13.2",
+    "gatsby-plugin-sharp": "^5.14.0",
+    "gatsby-plugin-sitemap": "^6.14.0",
+    "gatsby-remark-copy-linked-files": "^6.14.0",
     "gatsby-remark-custom-blocks": "^3.15.0",
     "gatsby-remark-embed-video": "^3.2.1",
     "gatsby-remark-figure-caption": "^2.0.0",
-    "gatsby-remark-images": "^7.13.2",
+    "gatsby-remark-images": "^7.14.0",
     "gatsby-remark-relative-images": "^0.3.0",
-    "gatsby-remark-responsive-iframe": "^6.13.2",
-    "gatsby-source-filesystem": "^5.13.1",
+    "gatsby-remark-responsive-iframe": "^6.14.0",
+    "gatsby-source-filesystem": "^5.14.0",
     "gatsby-source-git": "^1.1.0",
-    "gatsby-transformer-json": "^5.13.1",
+    "gatsby-transformer-json": "^5.14.0",
     "gatsby-transformer-remark": "^3.2.0",
-    "gatsby-transformer-sharp": "^5.13.1",
+    "gatsby-transformer-sharp": "^5.14.0",
     "gray-matter": "^4.0.3",
     "history": "^5.3.0",
     "https-browserify": "^1.0.0",
     "lottie-web": "^5.12.2",
     "moment": "^2.30.1",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^6.2.0",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^9.1.0",
+    "query-string": "^9.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-ga": "^3.3.1",
-    "react-github-calendar": "^4.3.1",
+    "react-github-calendar": "^4.5.3",
     "react-helmet": "^6.1.0",
-    "react-hot-toast": "^2.4.1",
+    "react-hot-toast": "^2.5.1",
     "react-jotform": "^1.0.2",
     "react-lazy-youtube": "^1.0.1",
     "react-pose": "^4.0.10",
@@ -86,35 +86,37 @@
     "ssw.rules.widget": "^2.0.8",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
-    "styled-components": "^6.1.13",
+    "styled-components": "^6.1.14",
+    "to": "^0.2.9",
+    "update": "^0.7.4",
     "url": "^0.11.4",
     "util": "^0.12.5",
     "webpack-assets-manifest": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.25.1",
-    "@babel/preset-react": "^7.24.7",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "applicationinsights": "^3.3.0",
+    "applicationinsights": "^3.4.0",
     "array-flat-polyfill": "^1.0.1",
     "autoprefixer": "^10.4.20",
-    "ava": "^6.1.3",
+    "ava": "^6.2.0",
     "babel-eslint": "^10.1.0",
     "chrome-launcher": "^1.1.2",
     "directory-named-webpack-plugin": "^4.1.0",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.11.1",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.17.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react": "^7.37.3",
     "favicons": "^6.2.2",
-    "gatsby-cli": "^5.13.3",
-    "lighthouse": "^12.2.1",
+    "gatsby-cli": "^5.14.0",
+    "lighthouse": "^12.3.0",
     "mkdirp": "^3.0.1",
-    "prettier": "^3.3.3",
-    "tailwindcss": "^3.4.13"
+    "prettier": "^3.4.2",
+    "tailwindcss": "^3.4.17"
   },
   "packageComments": {
     "⚠️  gatsby-remark-custom-blocks": "Locked to ^3.2.0 - Higher versions are incompatible with gatsby-transformer-remark@^4.0.0 as per https://www.gatsbyjs.com/plugins/gatsby-remark-custom-blocks/",

diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
@@ -61,6 +61,7 @@ const Footer = () => {
                     href="https://www.tiktok.com/@ssw_tv"
                     target="_blank"
                     rel="noreferrer"
+                    aria-label="SSW on TikTok"
                   >
                     <FontAwesomeIcon icon={faTiktok} size="lg" />
                   </a>
@@ -70,6 +71,7 @@ const Footer = () => {
                     href="https://twitter.com/SSW_TV"
                     target="_blank"
                     rel="noreferrer"
+                    aria-label="SSW on Twitter"
                   >
                     <FontAwesomeIcon icon={faTwitter} size="lg" />
                   </a>
@@ -79,6 +81,7 @@ const Footer = () => {
                     href="https://www.instagram.com/ssw_tv"
                     target="_blank"
                     rel="noreferrer"
+                    aria-label="SSW on Instagram"
                   >
                     <FontAwesomeIcon icon={faInstagram} size="lg" />
                   </a>
@@ -88,6 +91,7 @@ const Footer = () => {
                     href="https://www.facebook.com/SSW.page"
                     target="_blank"
                     rel="noreferrer"
+                    aria-label="SSW on Facebook"
                   >
                     <FontAwesomeIcon icon={faFacebook} size="lg" />
                   </a>
@@ -97,6 +101,7 @@ const Footer = () => {
                     href="https://www.linkedin.com/company/ssw/"
                     target="_blank"
                     rel="noreferrer"
+                    aria-label="SSW on LinkedIn"
                   >
                     <FontAwesomeIcon icon={faLinkedin} size="lg" />
                   </a>
@@ -106,6 +111,7 @@ const Footer = () => {
                     href="https://www.youtube.com/user/sswtechtalks/"
                     target="_blank"
                     rel="noreferrer"
+                    aria-label="SSW on YouTube"
                   >
                     <FontAwesomeIcon icon={faYoutube} size="lg" />
                   </a>
@@ -176,11 +182,11 @@ const getLastDeployTime = () => {
   var minutes = Math.floor(delta / 60) % 60;
   delta -= minutes * 60;
 
-  return days != 0
+  return days !== 0
     ? `${days} day(s)`
-    : '' + ' ' + hours != 0
+    : ' ' + hours !== 0
       ? `${hours} hour(s)`
-      : '' + ' ' + minutes > 1
+      : ' ' + minutes > 1
         ? `${minutes} minutes`
         : '1 minute';
 };

diff --git a/src/components/people-filters/people-filters.js b/src/components/people-filters/people-filters.js
@@ -20,7 +20,7 @@ const PeopleFilters = ({
       { name: 'skills', selected: selectedSkills },
       { name: 'events', selected: selectedEvents },
     ]);
-  }, [selectedEvents, selectedSkills, selectedRoles]);
+  }, [selectedEvents, selectedSkills, selectedRoles, onFilterChange]);
 
   return (
     <>

diff --git a/src/components/play-audio/play-audio.js b/src/components/play-audio/play-audio.js
@@ -1,17 +1,18 @@
-import React, { useState, useEffect, createRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PlayIcon from '-!svg-react-loader!../../images/SSWPlay2x.svg';
 import PauseIcon from '-!svg-react-loader!../../images/SSWPause2x.svg';
 import lottie from 'lottie-web';
 import animation from '../../animations/lf30_editor_DirdRw.json';
 import PropTypes from 'prop-types';
 
 const PlayAudio = ({ hasAnimation, audioSrc }) => {
-  const animationContainer = createRef();
-  const [audio, setAudio] = useState({});
+  const animationContainer = useRef(null);
+  const audioRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [hoverAudio, setHoverAudio] = useState(false);
 
   const playAudio = () => {
+    const audio = audioRef.current;
     setIsPlaying(true);
     audio.src = audioSrc;
     audio.play();
@@ -20,6 +21,7 @@ const PlayAudio = ({ hasAnimation, audioSrc }) => {
     }
   };
   const pauseAudio = () => {
+    const audio = audioRef.current;
     setIsPlaying(false);
     audio.pause();
     if (hasAnimation) {
@@ -37,15 +39,22 @@ const PlayAudio = ({ hasAnimation, audioSrc }) => {
     e.preventDefault();
   };
 
-  audio.onended = () => {
-    setIsPlaying(false);
-    if (hasAnimation) {
-      lottie.stop();
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      audioRef.current = new Audio();
     }
-  };
+  }, []);
 
   useEffect(() => {
-    setAudio(new Audio());
+    const audio = audioRef.current;
+
+    // Handle audio playback ending
+    audio.onended = () => {
+      setIsPlaying(false);
+      if (hasAnimation) {
+        lottie.stop();
+      }
+    };
 
     if (hasAnimation) {
       lottie.loadAnimation({
@@ -58,7 +67,7 @@ const PlayAudio = ({ hasAnimation, audioSrc }) => {
 
       return () => lottie.destroy();
     }
-  }, []);
+  }, [hasAnimation]);
 
   return (
     <>
@@ -97,6 +106,8 @@ const PlayAudio = ({ hasAnimation, audioSrc }) => {
             'absolute top-0 right-0 p-2 h-30px' +
             (hoverAudio ? ' hovered' : ' bg-grey-translucent')
           }
+          role="button"
+          tabIndex="0"
           onMouseEnter={() => {
             setHoverAudio(true);
           }}

diff --git a/src/components/profile-box/profile-box.js b/src/components/profile-box/profile-box.js
@@ -75,11 +75,13 @@ const ProfileBox = ({
   useEffect(() => {
     if (hover && linkRef.current && linkRef.current.matches(':hover') === false)
       setHover(false);
-  });
+  }, [hover, setHover]);
 
   return (
     <div
       className="w-full flex-profile-box unstyled relative"
+      role="gridcell"
+      tabIndex="0"
       onMouseEnter={() => {
         setHover(true);
       }}

diff --git a/src/components/profile-photo/profile-photo.js b/src/components/profile-photo/profile-photo.js
@@ -34,6 +34,8 @@ const ProfilePhoto = ({ profileImage, sketchImage, children }) => {
   return (
     <div
       className="image-bg relative text-center"
+      role="gridcell"
+      tabIndex="0"
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >

diff --git a/src/components/youtube-playlist/youtube-playlist.js b/src/components/youtube-playlist/youtube-playlist.js
@@ -56,7 +56,7 @@ const YoutubePlaylist = ({ youtubePlayListId }) => {
   useEffect(() => {
     const youtubeApiKey = process.env.YOUTUBE_API_KEY;
 
-    if (youtubePlayListId == '') {
+    if (youtubePlayListId === '') {
       return null;
     }
 
@@ -74,7 +74,7 @@ const YoutubePlaylist = ({ youtubePlayListId }) => {
           setError(error);
         }
       );
-  }, []);
+  }, [youtubePlayListId]);
 
   if (error) {
     return null;
@@ -86,7 +86,7 @@ const YoutubePlaylist = ({ youtubePlayListId }) => {
     if (items.length >= 3) {
       numVideosDesktop = 3;
       numVideosTablet = 2;
-    } else if (items.length == 2) {
+    } else if (items.length === 2) {
       numVideosDesktop = 2;
       numVideosTablet = 2;
     } else {
@@ -138,7 +138,7 @@ const YoutubePlaylist = ({ youtubePlayListId }) => {
               .BrainhubCarousel__arrows:hover:enabled{
                 background-color:#CC4141
               }
-              
+
             `,
               },
             ]}

diff --git a/src/helpers/profileSort.js b/src/helpers/profileSort.js
@@ -1,7 +1,7 @@
 export const BillingRateSort = (a, b) => {
   let sorting = b.billingRate - a.billingRate;
 
-  if (sorting != 0) {
+  if (sorting !== 0) {
     return sorting;
   }
 

diff --git a/src/helpers/schemaGenerator.js b/src/helpers/schemaGenerator.js
@@ -1,7 +1,7 @@
 // This does not support nested pages (level 2 and up)
 // If you're working with deeply nested pages, remove this or rework it.
 
-export default ({
+const generateSchema = ({
   location,
   canonical,
   siteUrl,
@@ -48,3 +48,5 @@ export default ({
 
   return schema;
 };
+
+export default generateSchema;
diff --git a/src/pages/alumni/index.js b/src/pages/alumni/index.js
@@ -66,7 +66,7 @@ const Index = ({ data }) => {
       .sort(AlphabeticalSort);
 
     setFilteredPeople(people);
-  }, [selectedLocation, selectedRoles]);
+  }, [allPeople, selectedLocation, selectedRoles]);
 
   return (
     <>
@@ -218,6 +218,7 @@ function buildPeople(data) {
             skills: [],
           };
         }
+        return null;
       }
     })
     .filter((x) => x !== undefined)