Fix/carousel loading weirdness

.babelrc.js

@@ -7,15 +7,14 @@ module.exports = {
           bugfixes: true,
           targets: 'defaults, not IE 11, not IE_mob 11, node 16',
         },
-        'class-properties': {
-          loose: true,
-        },
       },
     ],
   ],
+  assumptions: {
+    setPublicClassFields: true,
+  },
   plugins: [
     [require.resolve('@fuelrats/babel-plugin-classnames'), { transformObjects: true, packageName: 'clsx' }],
     [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-    require.resolve('@babel/plugin-proposal-export-default-from'),
   ],
 }

package.json

@@ -24,31 +24,31 @@
     "lint": "yarn lint:js; yarn lint:css"
   },
   "dependencies": {
-    "@fingerprintjs/fingerprintjs": "^3.2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fingerprintjs/fingerprintjs": "^3.3.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@fuelrats/next-adorable-avatars": "^0.3.0",
     "@fuelrats/validation-util": "^1.2.0",
     "@fuelrats/web-util": "^0.3.3",
-    "@next/eslint-plugin-next": "^11.0.1",
-    "axios": "^0.21.1",
+    "@next/eslint-plugin-next": "^11.1.2",
+    "axios": "^0.21.4",
     "clsx": "^1.1.1",
-    "date-fns": "^2.22.1",
-    "date-fns-tz": "^1.1.4",
+    "date-fns": "^2.23.0",
+    "date-fns-tz": "^1.1.6",
     "dotenv": "^10.0.0",
-    "flux-standard-action": "^2.1.1",
+    "flux-standard-action": "^2.1.2",
     "framer-motion": "^4.1.17",
     "hoist-non-react-statics": "^3.3.2",
     "http-proxy-middleware": "^2.0.1",
-    "immer": "^9.0.5",
+    "immer": "^9.0.6",
     "ip6addr": "^0.2.3",
-    "js-cookie": "^2.2.1",
+    "js-cookie": "^3.0.1",
     "jsonfile": "^6.1.0",
     "koa-compose": "^4.1.0",
     "lodash": "^4.17.21",
-    "next": "^11.0.1",
+    "next": "^11.1.2",
     "next-cookies": "^2.0.3",
     "next-redux-wrapper": "5.0.0",
     "next-safe": "^3.0.1",
@@ -63,30 +63,29 @@
     "rc-slider": "^9.7.2",
     "re-reselect": "^4.0.0",
     "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
+    "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.2",
     "react-easy-crop": "^3.5.2",
     "react-is": "^17.0.2",
-    "react-redux": "^7.2.4",
+    "react-redux": "^7.2.5",
     "react-table-6": "^6.11.0",
-    "redux": "^4.1.0",
+    "redux": "^4.1.1",
     "redux-devtools-extension": "^2.13.9",
     "redux-immutable-state-invariant": "^2.1.0",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "stripe": "^8.165.0",
+    "stripe": "^8.174.0",
     "ua-parser-js": "^0.7.28",
     "use-immer": "^0.6.0",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/eslint-parser": "^7.14.7",
+    "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.15.4",
     "@babel/eslint-plugin": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
-    "@babel/plugin-proposal-export-default-from": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.15.4",
     "@fuelrats/babel-plugin-classnames": "^0.3.0",
-    "@fuelrats/eslint-config": "^2.4.0-canary.14",
+    "@fuelrats/eslint-config": "^2.4.0-canary.17",
     "@fuelrats/eslint-config-react": "^2.4.0-canary.11",
     "@fuelrats/eslint-plugin": "^2.4.0-canary.11",
     "@fuelrats/stylelint-config": "^1.2.3",
@@ -95,9 +94,9 @@
     "@types/ip6addr": "^0.2.3",
     "@types/js-cookie": "^2.2.7",
     "@types/jsonfile": "^6.0.1",
-    "@types/lodash": "^4.14.171",
+    "@types/lodash": "^4.14.172",
     "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.14",
+    "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "@types/react-is": "^17.0.2",
     "@types/react-redux": "^7.1.18",
@@ -107,20 +106,20 @@
     "babel-loader": "8.2.2",
     "builtin-modules": "^3.2.0",
     "doctoc": "^2.0.1",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-node": "^0.3.4",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsdoc": "^35.5.1",
+    "eslint-import-resolver-node": "^0.3.6",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsdoc": "^36.1.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "sass": "^1.35.2",
+    "sass": "^1.39.0",
     "semver": "^7.3.5",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.20.1",
-    "webpack": "^5.46.0",
+    "webpack": "^5.52.0",
     "worker-loader": "^3.0.8"
   },
   "engines": {

src/components/Carousel.js

@@ -21,24 +21,31 @@ const { appUrl } = publicRuntimeConfig
 const getSlides = (_, props) => {
   return props.slides
 }
+
 const getId = (_, props) => {
   return props.id
 }
 
-const selectConnectedSlides = createSelector(
+const selectSlides = createSelector(
+  [getSlides, getId],
+  (slides, compId) => {
+    return Object.entries(slides).reduce((acc, [key, slide]) => {
+      return {
+        ...acc,
+        [`${compId}-${key}`]: slide,
+      }
+    }, {})
+  },
+)
+
+const selectSlideImages = createSelector(
   [selectImages, getSlides, getId],
   (images, slides, compId) => {
-    return Object.entries(slides).reduce((acc, [key, slide]) => {
+    return Object.keys(slides).reduce((acc, key) => {
       const slideId = `${compId}-${key}`
-
       return {
         ...acc,
-        [slideId]: {
-          ...slide,
-          id: slideId,
-          url: `${appUrl}/static/images/${slide.filename ?? `slide_${key}.jpg`}`,
-          image: images[slideId],
-        },
+        [slideId]: images[slideId],
       }
     }, {})
   },
@@ -72,72 +79,80 @@ function Carousel (props) {
     interval = 10000,
   } = props
 
-  const imageSlides = useSelectorWithProps(props, selectConnectedSlides)
-  const [curSlideId, setCurSlide] = useState(Object.keys(imageSlides)[0])
+  const slides = useSelectorWithProps(props, selectSlides)
+  const images = useSelectorWithProps(props, selectSlideImages)
+  const [curSlideId, setCurSlide] = useState(Object.keys(slides)[0])
 
-  const timerRef = useRef(null)
+  const curSlide = slides[curSlideId]
+  const curSlideUrl = images[curSlideId]
 
+  const timerRef = useRef(null)
   const dispatch = useDispatch()
 
-  const setSlide = useCallback((nextSlide) => {
-    timerRef.current = window.setTimeout(setSlide, interval)
+  const handleSlideButtonClick = useCallback((event) => {
+    window.clearTimeout(timerRef.current)
+    setCurSlide(event.target.name)
+  }, [])
 
+  const setSlide = useCallback((nextSlide) => {
     if (document.visibilityState === 'hidden') {
+      timerRef.current = window.setTimeout(setSlide, interval)
       return
     }
 
-    const slideKeys = Object.keys(imageSlides)
+    const slideKeys = Object.keys(slides)
 
     setCurSlide((slideId) => {
       return typeof nextSlide === 'undefined'
         ? slideKeys[(slideKeys.indexOf(slideId) + 1) % slideKeys.length]
         : nextSlide
     })
-  }, [imageSlides, interval])
+  }, [slides, interval])
 
   useEffect(() => {
-    Object.values(imageSlides).forEach((slide) => {
-      if (!slide.image) {
-        dispatch(getImage(slide))
+    Object.entries(slides).forEach(([key, slide]) => {
+      if (!images[key]) {
+        dispatch(getImage({
+          id: key,
+          url: `${appUrl}/static/images/${slide.filename}`,
+        }))
       }
     })
-  }, [dispatch, imageSlides])
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- Only perform this on mount since this is a fetch operation.
+  }, [])
 
   useEffect(() => {
-    setSlide()
+    if (curSlideUrl) {
+      timerRef.current = window.setTimeout(setSlide, interval)
+    }
     return () => {
-      window.clearTimeout(timerRef.current)
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current)
+      }
     }
-  }, [setSlide])
-
-  const handleSlideButtonClick = useCallback((event) => {
-    window.clearTimeout(timerRef.current)
-    setCurSlide(event.target.name)
-  }, [])
-
-
-  const curSlide = imageSlides[curSlideId]
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- only set a timeout if curSlideUrl changes
+  }, [curSlideUrl])
 
   return (
     <div className={['carousel', className]} id={id}>
       <AnimatePresence>
         {
-        Boolean(curSlide.image) && (
+        Boolean(curSlideUrl) && (
           <m.div
             key={`${curSlideId}-img`}
             {...slideMotionConfig}
             className="carousel-slide"
-            src={curSlide.image}
+            src={curSlideUrl}
             style={
               {
-                backgroundImage: `url(${curSlide.image})`,
+                backgroundImage: `url(${curSlideUrl})`,
                 backgroundPosition: curSlide.position ?? 'center',
               }
             } />
         )
       }
         {
-        Boolean(curSlide.image && curSlide.text) && (
+        Boolean(curSlideUrl && curSlide.text) && (
           <m.span
             key={`${curSlideId}-text`}
             {...slideTextMotionConfig}
@@ -149,7 +164,7 @@ function Carousel (props) {
       </AnimatePresence>
       <div className="carousel-slide-picker">
         {
-        Object.keys(imageSlides).map((slideId) => {
+        Object.keys(images).map((slideId) => {
           return (
             <button
               key={slideId}

src/components/TagsInput.js

@@ -2,7 +2,6 @@
 /* eslint-disable
     no-magic-numbers,
     no-negated-condition,
-    no-restricted-syntax,
     no-return-assign,
     react/jsx-no-bind,
     react/no-unsafe,

src/pages/index.js

@@ -13,32 +13,32 @@ import makeRoute from '~/util/router/makeRoute'
 
 // Component constants
 const CarouselSlides = {
-  0: {
+  chives: {
     text: 'CMDR Dr Chives',
     position: '13% 50%',
     filename: 'chives.jpg',
   },
-  1: {
+  rafa: {
     text: 'CMDR rafaBC_',
     position: '20% 50%',
     filename: 'rafa.jpg',
   },
-  2: {
+  numpi: {
     text: 'CMDR NumberPi',
     position: '50% 50%',
     filename: 'pi.jpg',
   },
-  3: {
+  alpaca: {
     text: 'CMDR Worthy Alpaca',
     position: '25% 50%',
     filename: 'worthyalpaca.jpg',
   },
-  4: {
+  light: {
     text: 'CMDR Light1c3',
     position: '70% 100%',
     filename: 'light.jpg',
   },
-  5: {
+  fenri: {
     text: 'CMDR Fenrishi',
     position: '40% 50%',
     filename: 'fenrishi.jpg',