Refactor Action.js

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 {
+export default function Action({ action_id }) {
-	state = {
+	const [apiData, setApiData] = React.useState()
-		xivapi_data: []
-	}
 	
-	constructor(props) {
+	React.useEffect(() => {
-		super(props);
+		let current = true
-		
+		void (async () => {
-		const actionUrl = "https://xivapi.com/Action/"+props.action_id;
+			const data = await (
-		
+				await fetch(`https://xivapi.com/Action/${action_id}`, { mode: 'cors' })
-		fetch(actionUrl, { mode: 'cors' })
+			).json()
-			.then(response => response.json())
+			if (current) {
-			.then(data => {this.setState({xivapi_data: data})})
+				setApiData(data)
-	}
+			}
+		})()
+
+		return () => {
+			current = false
+		}
+	}, [action_id])
 	
-	isGCD() {
+	const isGCD = React.useMemo(
-		if(ogcdExceptions.indexOf(this.props.action_id) !== -1) return false
+		() =>
-		if(gcdExceptions.indexOf(this.props.action_id) !== -1) return true
+			gcdOverrides.has(action_id) ||
-		
+			!ogcdOverrides.has(action_id) ||
-		return (this.state.xivapi_data.ActionCategory.ID !== 4)
+			apiData !== undefined && apiData.ActionCategory.ID !== 4,
+		[action_id]
+	)
+	
+	if (apiData === undefined || !apiData.Icon) {
+		return null
 	}
 	
-	render() {
+	return (
-		if(this.state.xivapi_data.Icon) {
+		<img
-			const classes = this.isGCD()?'action-icon gcd':'action-icon ogcd'
+			className={isGCD ? 'action-icon gcd' : 'action-icon ogcd'}
-			const img = "https://xivapi.com"+this.state.xivapi_data.Icon
+			src={`https://xivapi.com/${apiData.Icon}`}
-			return <img className={classes} src={img} alt='' />
+			alt={apiData.Name || ''}
-		}
+		/>
-		else
+	)
-		{
-			return null
-		}
-    }
 }
-
-export default Action