diff --git a/src/Action.js b/src/Action.js
index 427bc64..2889628 100644
--- a/src/Action.js
+++ b/src/Action.js
@@ -1,7 +1,7 @@
import React from 'react'
import './css/Action.css'
-const gcdExceptions = [
+const gcdOverrides = new Set([
15997, //standard step
15998, //technical step
15999,
@@ -18,47 +18,50 @@ const gcdExceptions = [
16196, //quadruple technical finish
7418, //flamethrower
16483 //tsubame-gaeshi
-]
+])
-const ogcdExceptions = [
+const ogcdOverrides = new Set([
3559, //bard WM
116, //bard AP
114 //bard MB
-]
+])
-class Action extends React.Component {
- state = {
- xivapi_data: []
- }
+export default function Action({ action_id }) {
+ const [apiData, setApiData] = React.useState()
- constructor(props) {
- super(props);
-
- const actionUrl = "https://xivapi.com/Action/"+props.action_id;
-
- fetch(actionUrl, { mode: 'cors' })
- .then(response => response.json())
- .then(data => {this.setState({xivapi_data: data})})
- }
+ React.useEffect(() => {
+ let current = true
+ void (async () => {
+ const data = await (
+ await fetch(`https://xivapi.com/Action/${action_id}`, { mode: 'cors' })
+ ).json()
+ if (current) {
+ setApiData(data)
+ }
+ })()
+
+ return () => {
+ current = false
+ }
+ }, [action_id])
- isGCD() {
- if(ogcdExceptions.indexOf(this.props.action_id) !== -1) return false
- if(gcdExceptions.indexOf(this.props.action_id) !== -1) return true
-
- return (this.state.xivapi_data.ActionCategory.ID !== 4)
+ const isGCD = React.useMemo(
+ () =>
+ gcdOverrides.has(action_id) ||
+ !ogcdOverrides.has(action_id) ||
+ apiData !== undefined && apiData.ActionCategory.ID !== 4,
+ [action_id]
+ )
+
+ if (apiData === undefined || !apiData.Icon) {
+ return null
}
- render() {
- if(this.state.xivapi_data.Icon) {
- const classes = this.isGCD()?'action-icon gcd':'action-icon ogcd'
- const img = "https://xivapi.com"+this.state.xivapi_data.Icon
- return
- }
- else
- {
- return null
- }
- }
+ return (
+
+ )
}
-
-export default Action
\ No newline at end of file