From 5bb602cd17b985e3a02e7f3960362302f87256fd Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 03:14:32 +0000 Subject: [PATCH 01/10] docs(CHANGELOG.md): add changes for #329 --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cb6c5e25..3a69aa5f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,8 @@ 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][] +* Moved all custom server functions into suitable replacements provided by our site framework. - [#329][] + * This move has let us drop our entire custom backend. * Other smaller changes to sreamline development. - [#328][] @@ -31,6 +33,7 @@ For detailed rules of this file, see [Changelog Rules](#changelog-rules) [#328]: https://github.com/fuelRats/fuelrats.com/pull/328 +[#329]: https://github.com/fuelRats/fuelrats.com/pull/329 [Unreleased]: https://github.com/FuelRats/fuelrats.com/compare/v2.13.0...HEAD From 97b3d25ebc6ec76e0fd687731cd86477531163ef Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 17:30:31 +0000 Subject: [PATCH 02/10] chore: clean up vsc workspace --- .vscode/launch.json | 35 +++++++++++++++++++---------------- .vscode/settings.json | 1 - 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 824eaa6a..38c93a64 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -9,32 +9,35 @@ "type": "node", "request": "attach", "port": 9229, + "presentation": { + "hidden": true, + "group": "", + "order": 0 + } }, { "name": "Next: Attach Chrome", "type": "pwa-chrome", "request": "attach", "port": 9222, - "url": "${config:develop.attachurl}", - "webRoot": "${workspaceFolder}" - } - { - "name": "Next: Attach Edge", - "type": "pwa-msedge", - "request": "attach", - "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": true, + "group": "", + "order": 0 + } } ], "compounds": [ { - "name": "Next: Attach All", - "configurations": ["Next: Attach Server", "Next: Attach Chrome"] - }, - { - "name": "Next: Attach All (Edge)", - "configurations": ["Next: Attach Server", "Next: Attach Edge"] + "name": "Next: Attach", + "configurations": ["Next: Attach Server", "Next: Attach Chrome"], + "presentation": { + "hidden": false, + "group": "next", + "order": 0 + } } ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 9f11f470..35456f1c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -61,5 +61,4 @@ "stylelint.packageManager": "yarn", "stylelint.reportNeedlessDisables": true, "cSpell.language": "en,en-US", - "develop.attachurl": "http://localhost:3000/" } From 5d7c3d7ffc8106c8ddb590e4744db2e05e51c128 Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 18:35:56 +0000 Subject: [PATCH 03/10] feat(isPromise-util): add small function to check if an object is a promise --- src/util/isPromise.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/util/isPromise.js diff --git a/src/util/isPromise.js b/src/util/isPromise.js new file mode 100644 index 00000000..2e84334a --- /dev/null +++ b/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' +} From 32786e15286f4a02f411dc129086cd652b9c60ae Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 18:38:14 +0000 Subject: [PATCH 04/10] refactor(Switch): Remove need for async flag by checking the return type of onChange's result --- src/components/Switch/Switch.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/Switch/Switch.js b/src/components/Switch/Switch.js index d97827ed..a49f9ea6 100644 --- a/src/components/Switch/Switch.js +++ b/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,15 +24,14 @@ function Switch (props) { const [loading, setLoading] = useState(false) const handleChange = useCallback(async (event) => { - if (!isAsync) { - onChange?.(event) - return - } + const result = onChange?.(event) - setLoading(true) - await onChange?.(event) - setLoading(false) - }, [isAsync, onChange]) + if (isPromise(result)) { + setLoading(true) + await result + setLoading(false) + } + }, [onChange]) let icon = 'times' if (loading) { @@ -71,7 +71,6 @@ function Switch (props) { } Switch.propTypes = { - async: PropTypes.bool, checked: PropTypes.bool, className: PropTypes.string, containerProps: PropTypes.object, From 894975fd662973a96895a6fcc212e9bf29c5e7ae Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 18:38:47 +0000 Subject: [PATCH 05/10] refactor(RatCard): return result of updateRat instead of needlessly awaiting it --- src/components/RatCard/RatCard.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/RatCard/RatCard.js b/src/components/RatCard/RatCard.js index 80b621eb..7de5064a 100644 --- a/src/components/RatCard/RatCard.js +++ b/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,7 +224,6 @@ class RatCard extends React.Component { rat.attributes.platform === 'pc' && (
From cec938ae6076bfd4e8bdeb2494c55c8057405231 Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 20:49:24 +0000 Subject: [PATCH 06/10] chore: adjust launch configs again --- .vscode/launch.json | 34 ++++++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 38c93a64..8258179a 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -10,20 +10,33 @@ "request": "attach", "port": 9229, "presentation": { - "hidden": true, + "hidden": false, "group": "", "order": 0 } }, { - "name": "Next: Attach Chrome", + "name": "Next: Launch Edge", + "type": "pwa-msedge", + "request": "launch", + "port": 9222, + "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: Launch Chrome", "type": "pwa-chrome", - "request": "attach", + "request": "launch", "port": 9222, "url": "${config:develop.attachurl}", // Custom vscode config property. does not actually exist, but configurable via user config. "webRoot": "${workspaceFolder}", "presentation": { - "hidden": true, + "hidden": false, "group": "", "order": 0 } @@ -31,13 +44,22 @@ ], "compounds": [ { - "name": "Next: Attach", - "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 & Launch Chrome", + "configurations": ["Next: Attach Server", "Next: Launch Edge"], + "presentation": { + "hidden": false, + "group": "next", + "order": 1 + } } ] } From 6524e0ff5151646244b674a6d6e358e05dceddbc Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 20:49:45 +0000 Subject: [PATCH 07/10] fix(RatCard): attach odyssey switching to onChange instead of onClick --- src/components/RatCard/RatCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RatCard/RatCard.js b/src/components/RatCard/RatCard.js index 7de5064a..3c5c0c3d 100644 --- a/src/components/RatCard/RatCard.js +++ b/src/components/RatCard/RatCard.js @@ -226,7 +226,7 @@ class RatCard extends React.Component { + onChange={this._handleOdysseySwitch} />
) } From 90cf025202acedd6aa0564bdc16d4f89e27eeb6f Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 21:12:08 +0000 Subject: [PATCH 08/10] fix(RatCard): add missing ID to switch --- src/components/RatCard/RatCard.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/RatCard/RatCard.js b/src/components/RatCard/RatCard.js index 3c5c0c3d..dd96d6bf 100644 --- a/src/components/RatCard/RatCard.js +++ b/src/components/RatCard/RatCard.js @@ -225,6 +225,7 @@ class RatCard extends React.Component {
From 2225f0a463a1bc11da523caabbe87fa03bbfd82c Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Wed, 7 Jul 2021 21:12:50 +0000 Subject: [PATCH 09/10] refactor(Switch): improve loading state visuals --- src/components/Switch/Switch.js | 3 +-- src/components/Switch/Switch.module.scss | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/Switch/Switch.js b/src/components/Switch/Switch.js index a49f9ea6..7356a21c 100644 --- a/src/components/Switch/Switch.js +++ b/src/components/Switch/Switch.js @@ -25,7 +25,6 @@ function Switch (props) { const handleChange = useCallback(async (event) => { const result = onChange?.(event) - if (isPromise(result)) { setLoading(true) await result @@ -35,7 +34,7 @@ function Switch (props) { let icon = 'times' if (loading) { - icon = 'circle' + icon = 'sync' } else if (props.checked) { icon = 'check' } diff --git a/src/components/Switch/Switch.module.scss b/src/components/Switch/Switch.module.scss index 20b3221a..a315ec4a 100644 --- a/src/components/Switch/Switch.module.scss +++ b/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; + } } } From 1862f7b35f02fac94efe68db173aa9c82464cdaf Mon Sep 17 00:00:00 2001 From: Cameron Welter Date: Fri, 9 Jul 2021 19:05:37 +0000 Subject: [PATCH 10/10] docs(CHANGELOG.md): add changes for #330 --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a69aa5f..fe2e841f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,12 +20,14 @@ For detailed rules of this file, see [Changelog Rules](#changelog-rules) * Moved raw version information to an API route (`/api/version`), and reworked version page to draw information from that route. - [#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. -* Other smaller changes to sreamline development. - [#328][] +* Updated `` 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 @@ -34,6 +36,7 @@ For detailed rules of this file, see [Changelog Rules](#changelog-rules) [#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