Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Jul 9, 2021
55 changes: 40 additions & 15 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
]
}
1 change: 0 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,5 +61,4 @@
"stylelint.packageManager": "yarn",
"stylelint.reportNeedlessDisables": true,
"cSpell.language": "en,en-US",
"develop.attachurl": "http://localhost:3000/"
}
8 changes: 7 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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


Expand Down
8 changes: 4 additions & 4 deletions src/components/RatCard/RatCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
)
}
Expand Down
20 changes: 9 additions & 11 deletions src/components/Switch/Switch.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'


Expand All @@ -10,7 +12,6 @@ import styles from './Switch.module.scss'

function Switch (props) {
const {
async: isAsync,
containerProps,
className,
disabled,
Expand All @@ -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'
}
Expand Down Expand Up @@ -71,7 +70,6 @@ function Switch (props) {
}

Switch.propTypes = {
async: PropTypes.bool,
checked: PropTypes.bool,
className: PropTypes.string,
containerProps: PropTypes.object,
Expand Down
15 changes: 15 additions & 0 deletions src/components/Switch/Switch.module.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
@import '../../scss/colors';

@keyframes loader-spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

.switch {
display: inline-block;
position: relative;
Expand All @@ -23,6 +33,11 @@
background: $grey;

transform: translateX(50%);

> path {
animation: loader-spin 2s infinite linear;
transform-origin: center;
}
}
}

Expand Down
9 changes: 9 additions & 0 deletions src/util/isPromise.js
Original file line number Diff line number Diff line change
@@ -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'
}