Improve switch loader and fix "Using Odyssey" switch loading state

.vscode/launch.json

@@ -9,32 +9,57 @@
       "type": "node",
       "request": "attach",
       "port": 9229,
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 0
+      }
     },
     {
-      "name": "Next: Attach Chrome",
-      "type": "pwa-chrome",
-      "request": "attach",
+      "name": "Next: Launch Edge",
+      "type": "pwa-msedge",
+      "request": "launch",
       "port": 9222,
-      "url": "${config:develop.attachurl}",
-      "webRoot": "${workspaceFolder}"
-    }
+      "url": "${config:develop.attachurl}", // Custom vscode config property. does not actually exist, but configurable via user config.
+      "webRoot": "${workspaceFolder}",
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 0
+      }
+    },
     {
-      "name": "Next: Attach Edge",
-      "type": "pwa-msedge",
-      "request": "attach",
+      "name": "Next: Launch Chrome",
+      "type": "pwa-chrome",
+      "request": "launch",
       "port": 9222,
-      "url": "${config:develop.attachurl}",
-      "webRoot": "${workspaceFolder}"
+      "url": "${config:develop.attachurl}", // Custom vscode config property. does not actually exist, but configurable via user config.
+      "webRoot": "${workspaceFolder}",
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 0
+      }
     }
   ],
   "compounds": [
     {
-      "name": "Next: Attach All",
-      "configurations": ["Next: Attach Server", "Next: Attach Chrome"]
+      "name": "Next: Attach & Launch Edge",
+      "configurations": ["Next: Attach Server", "Next: Launch Edge"],
+      "presentation": {
+        "hidden": false,
+        "group": "next",
+        "order": 0
+      }
     },
     {
-      "name": "Next: Attach All (Edge)",
-      "configurations": ["Next: Attach Server", "Next: Attach Edge"]
+      "name": "Next: Attach & Launch Chrome",
+      "configurations": ["Next: Attach Server", "Next: Launch Edge"],
+      "presentation": {
+        "hidden": false,
+        "group": "next",
+        "order": 1
+      }
     }
   ]
 }

.vscode/settings.json

@@ -61,5 +61,4 @@
   "stylelint.packageManager": "yarn",
   "stylelint.reportNeedlessDisables": true,
   "cSpell.language": "en,en-US",
-  "develop.attachurl": "http://localhost:3000/"
 }

CHANGELOG.md

@@ -18,19 +18,25 @@ For detailed rules of this file, see  [Changelog Rules](#changelog-rules)
 * Optimized image loading and accessibility for images site-wide. - [#328][]
 * Further optimized font loading. - [#328][]
 * Moved raw version information to an API route (`/api/version`), and reworked version page to draw information from that route. - [#328][]
-* Other smaller changes to sreamline development. - [#328][]
+* Moved all custom server functions into suitable replacements provided by our site framework. - [#329][]
+    * This move has let us drop our entire custom backend.
+* Updated `<Switch />` with an improved loading state animation. - [#330][]
+* Other smaller changes to sreamline development. - [#328][], [#329][]
 
 
 ### 🐛 Fixed
 * Resolved form submitting issues that occured when password evaluation fails to load. - [#328][]
 * Fixed authorization page displaying an `Invalid Authorize Request` error when redirecting users after login. - [#328][]
+* Fixed `Using Odyssey` switch not properly entering loading state while waiting on a response from the API. - [#330][]
 
 ### ⚙ Tasks
 * Update lint configs
 * Add `@next/eslint-plugin-next` into linting config.
 
 
 [#328]: https://github.com/fuelRats/fuelrats.com/pull/328
+[#329]: https://github.com/fuelRats/fuelrats.com/pull/329
+[#330]: https://github.com/fuelRats/fuelrats.com/pull/330
 [Unreleased]: https://github.com/FuelRats/fuelrats.com/compare/v2.13.0...HEAD
 
 

src/components/RatCard/RatCard.js

@@ -147,8 +147,8 @@ class RatCard extends React.Component {
     }
   }
 
-  _handleOdysseySwitch = async () => {
-    await this.props.updateRat({
+  _handleOdysseySwitch = () => {
+    return this.props.updateRat({
       id: this.props.rat.id,
       attributes: {
         odyssey: !this.props.rat.attributes.odyssey,
@@ -224,10 +224,10 @@ class RatCard extends React.Component {
           rat.attributes.platform === 'pc' && (
             <div className="panel-content">
               <Switch
-                async
                 checked={rat.attributes.odyssey}
+                id={`OdysseySwitch-${rat.id}`}
                 label="Using Odyssey"
-                onClick={this._handleOdysseySwitch} />
+                onChange={this._handleOdysseySwitch} />
             </div>
           )
         }

src/components/Switch/Switch.js

@@ -2,6 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import PropTypes from 'prop-types'
 import { useCallback, useState } from 'react'
 
+import isPromise from '~/util/isPromise'
+
 import styles from './Switch.module.scss'
 
 
@@ -10,7 +12,6 @@ import styles from './Switch.module.scss'
 
 function Switch (props) {
   const {
-    async: isAsync,
     containerProps,
     className,
     disabled,
@@ -23,19 +24,17 @@ function Switch (props) {
   const [loading, setLoading] = useState(false)
 
   const handleChange = useCallback(async (event) => {
-    if (!isAsync) {
-      onChange?.(event)
-      return
+    const result = onChange?.(event)
+    if (isPromise(result)) {
+      setLoading(true)
+      await result
+      setLoading(false)
     }
-
-    setLoading(true)
-    await onChange?.(event)
-    setLoading(false)
-  }, [isAsync, onChange])
+  }, [onChange])
 
   let icon = 'times'
   if (loading) {
-    icon = 'circle'
+    icon = 'sync'
   } else if (props.checked) {
     icon = 'check'
   }
@@ -71,7 +70,6 @@ function Switch (props) {
 }
 
 Switch.propTypes = {
-  async: PropTypes.bool,
   checked: PropTypes.bool,
   className: PropTypes.string,
   containerProps: PropTypes.object,

src/components/Switch/Switch.module.scss

@@ -1,5 +1,15 @@
 @import '../../scss/colors';
 
+@keyframes loader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .switch {
   display: inline-block;
   position: relative;
@@ -23,6 +33,11 @@
       background: $grey;
 
       transform: translateX(50%);
+
+      > path {
+        animation: loader-spin 2s infinite linear;
+        transform-origin: center;
+      }
     }
   }
 

src/util/isPromise.js

@@ -0,0 +1,9 @@
+/**
+ * Accepts an object and tests some basic patterns of promises
+ * @param {any} obj
+ * @returns {boolean}
+ */
+export default function isPromise (obj) {
+  return (typeof obj === 'object' || typeof obj === 'function')
+    && typeof obj.then === 'function'
+}