switch to xstate

staff0rd · Mar 16, 2021 · 56a957e · 56a957e
1 parent 57f29c1
commit 56a957e
Show file tree

Hide file tree

Showing 17 changed files with 225 additions and 627 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,25 +5,24 @@
   "dependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
-    "@reduxjs/toolkit": "^1.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "@types/jest": "^26.0.20",
     "@types/node": "^12.20.5",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "@types/react-redux": "^7.1.16",
     "@types/webpack-env": "^1.16.0",
     "@use-it/interval": "^1.0.0",
+    "@xstate/react": "^1.3.1",
     "bottleneck": "^2.19.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-redux": "^7.2.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.2.3",
     "unique-names-generator": "^4.4.0",
-    "web-vitals": "^1.1.1"
+    "web-vitals": "^1.1.1",
+    "xstate": "^4.16.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/api/index.ts b/src/api/index.ts
@@ -15,11 +15,12 @@ const limiter = new Bottleneck({
   minTime: 500,
 });
 
-type Status = {
+export type GetStatusResponse = {
   status: string;
 };
+
 export const getStatus = async () => {
-  const json: Status = await get("game/status");
+  const json: GetStatusResponse = await get("game/status");
   return json;
 };
 

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,23 +1,14 @@
-import React, { useEffect } from "react";
-import { useDispatch } from "react-redux";
+import React from "react";
 import "./App.css";
 import { GithubFork } from "./GithubFork";
 import { Status } from "./Status";
-import { startup } from "../store/gameSlice";
-import { Player } from "./Player";
 
 function App() {
-  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(startup());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return (
     <div className="App">
       <GithubFork />
       <header className="App-header">
         <Status />
-        <Player />
       </header>
     </div>
   );

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -2,15 +2,12 @@ import React, { useState } from "react";
 import Typography from "@material-ui/core/Typography";
 import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
-import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "../store/rootReducer";
 import PersonIcon from "@material-ui/icons/Person";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import { CircularProgress } from "@material-ui/core";
 import { IconButton } from "@material-ui/core";
 import { Grid } from "@material-ui/core";
 import { ConfirmDialog } from "./ConfirmDialog";
-import { getToken } from "../store/gameSlice";
 import { newPlayerName } from "../newPlayerName";
 
 const useStyles = makeStyles((theme) => ({
@@ -32,13 +29,12 @@ const useStyles = makeStyles((theme) => ({
 
 export const Player = () => {
   const classes = useStyles();
-  const player = useSelector((p: RootState) => p.game?.player);
+  const player = newPlayerName();
   const [confirmOpen, setConfirmOpen] = useState(false);
-  const dispatch = useDispatch();
 
   const handleNew = () => {
     console.log("handle new");
-    dispatch(getToken(newPlayerName()));
+    //dispatch(getToken(newPlayerName()));
   };
 
   return (
@@ -48,7 +44,7 @@ export const Player = () => {
           <Grid container justify="space-between">
             <Grid item className={classes.item}>
               <PersonIcon className={classes.icon} />
-              <Typography>{player.user.username}</Typography>
+              <Typography>{player}</Typography>
             </Grid>
             <Grid item>
               <IconButton

diff --git a/src/components/Status.tsx b/src/components/Status.tsx
@@ -1,11 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import DnsIcon from "@material-ui/icons/Dns";
 import Typography from "@material-ui/core/Typography";
 import Paper from "@material-ui/core/Paper";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import { getStatus } from "../api";
-import useInterval from "@use-it/interval";
 import { makeStyles } from "@material-ui/core/styles";
+import { useMachine } from "@xstate/react";
+import { apiPollMachine } from "./apiMachine";
+import { getStatus } from "../api";
+
+const statusMachine = apiPollMachine(getStatus);
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -21,30 +24,19 @@ const useStyles = makeStyles((theme) => ({
 
 export const Status = () => {
   const classes = useStyles();
-  const [status, setStatus] = useState("");
-
-  const updateStatus = async () => {
-    try {
-      setStatus("");
-      const response = await getStatus();
-      setStatus(response.status);
-    } catch (e) {
-      console.error(e);
-      setStatus(e.message);
-    }
-  };
 
-  useInterval(updateStatus, 60000);
+  const [state, send] = useMachine(statusMachine);
 
   useEffect(() => {
-    updateStatus();
+    send({ type: "FETCH" });
   }, []);
 
   return (
     <Paper className={classes.paper}>
-      {status ? (
+      {state.matches("success") ? (
         <>
-          <DnsIcon className={classes.icon} /> <Typography>{status}</Typography>
+          <DnsIcon className={classes.icon} />{" "}
+          <Typography>{state.context.result.status}</Typography>
         </>
       ) : (
         <CircularProgress size={24} />