getUser

src/api/index.ts

@@ -182,3 +182,16 @@ export const newFlightPlan = (
   destination: string
 ): Promise<any> =>
   postSecure(token, `users/${username}/flight-plans`, { shipId, destination });
+
+type GetUserResponse = {
+  user: {
+    credits: number;
+    ships: Ship[];
+    loans: Loan[];
+  };
+};
+
+export const getUser = (
+  token: string,
+  username: string
+): Promise<GetUserResponse> => getSecure(token, `users/${username}`);

src/components/ConfirmDialog.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode } from "react";
+
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  makeStyles,
+  Typography,
+} from "@material-ui/core";
+import Button from "@material-ui/core/Button";
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    width: "40%",
+    [theme.breakpoints.down("sm")]: {
+      width: "70%",
+    },
+  },
+}));
+
+type Props = {
+  header: ReactNode;
+  content: ReactNode;
+  action: () => void;
+  setOpen: (open: boolean) => void;
+  open: boolean;
+};
+
+export const ConfirmDialog = (props: Props) => {
+  const { header, content, action, setOpen, open } = props;
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleOk = () => {
+    setOpen(false);
+    action();
+  };
+
+  const classes = useStyles();
+
+  const getContent = () => {
+    if (typeof content === "string")
+      return <Typography variant="body1">{content}</Typography>;
+    else return content;
+  };
+  const getHeader = () => {
+    if (typeof header === "string")
+      return <Typography variant="h5">{header}</Typography>;
+    else return header;
+  };
+
+  return (
+    <Dialog
+      PaperProps={{
+        className: classes.paper,
+      }}
+      open={open}
+      onClose={handleClose}
+    >
+      <DialogContent>
+        {getHeader()}
+        {getContent()}
+      </DialogContent>
+      <DialogActions>
+        <Button color="primary" onClick={handleOk}>
+          Ok
+        </Button>
+        <Button onClick={handleClose}>Cancel</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/components/Player.tsx

@@ -1,11 +1,17 @@
-import React from "react";
+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 { useSelector } from "react-redux";
+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) => ({
   paper: {
@@ -15,6 +21,10 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "row",
     width: 450,
   },
+  item: {
+    display: "flex",
+    paddingTop: theme.spacing(0.5),
+  },
   icon: {
     marginRight: theme.spacing(1),
   },
@@ -23,17 +33,44 @@ const useStyles = makeStyles((theme) => ({
 export const Player = () => {
   const classes = useStyles();
   const player = useSelector((p: RootState) => p.game?.player);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const handleNew = () => {
+    console.log("handle new");
+    dispatch(getToken(newPlayerName()));
+  };
 
   return (
-    <Paper className={classes.paper}>
-      {player ? (
-        <>
-          <PersonIcon className={classes.icon} />
-          <Typography>{player.user.username}</Typography>
-        </>
-      ) : (
-        <CircularProgress size={24} />
-      )}
-    </Paper>
+    <>
+      <Paper className={classes.paper}>
+        {player ? (
+          <Grid container justify="space-between">
+            <Grid item className={classes.item}>
+              <PersonIcon className={classes.icon} />
+              <Typography>{player.user.username}</Typography>
+            </Grid>
+            <Grid item>
+              <IconButton
+                size="small"
+                title="New user"
+                onClick={() => setConfirmOpen(true)}
+              >
+                <RefreshIcon />
+              </IconButton>
+            </Grid>
+          </Grid>
+        ) : (
+          <CircularProgress size={24} />
+        )}
+      </Paper>
+      <ConfirmDialog
+        header="Create new user?"
+        content="API key will be lost!"
+        setOpen={setConfirmOpen}
+        open={confirmOpen}
+        action={handleNew}
+      />
+    </>
   );
 };

src/store/gameSlice.ts

@@ -21,6 +21,7 @@ type Game = {
   availableLoans: AvailableLoan[];
   availableShips: AvailableShip[];
   systems: System[];
+  credits: number;
 };
 
 const getPlayer = () => {
@@ -34,6 +35,7 @@ const initialState = {
   availableShips: [],
   ships: [],
   systems: [],
+  credits: 0,
 } as Game;
 
 export const getToken = wrappedThunk("getToken", (username: string) =>
@@ -59,6 +61,11 @@ export const getFlightPlans = wrappedThunk(
   ({ token, symbol }: GetFlightPlansParams) => api.getFlightPlans(token, symbol)
 );
 
+export const getUser = wrappedThunk(
+  "getUser",
+  ({ token, username }: UserParams) => api.getUser(token, username)
+);
+
 type NewFlightPlanParams = UserParams & {
   shipId: string;
   destination: string;
@@ -136,7 +143,7 @@ const gameSlice = createSlice({
   name: "game",
   initialState,
   reducers: {
-    setPlayer: (state, action: PayloadAction<Player>) => ({
+    setPlayer: (state, action: PayloadAction<Player | undefined>) => ({
       ...state,
       player: action.payload,
     }),
@@ -153,10 +160,14 @@ const gameSlice = createSlice({
       fulfilledCaseReducer:
         | CaseReducer<Game, PayloadAction<Returned, string, {}>>
         | undefined = undefined,
-      fulfilledPayloadLogConverter = (payload: Returned) => payload
+      fulfilledPayloadLogConverter = (payload: Returned) => payload,
+      pendingCaseReducer:
+        | CaseReducer<Game, PayloadAction<void, string, {}>>
+        | undefined = undefined
     ) => {
       builder.addCase(thunk.pending, (state, action) => {
         console.log(`${thunk.typePrefix}-pending`);
+        if (pendingCaseReducer) return pendingCaseReducer(state, action);
       });
       builder.addCase(thunk.fulfilled, (state, action) => {
         console.log(
@@ -170,15 +181,20 @@ const gameSlice = createSlice({
       });
     };
 
-    reduceThunk(getToken, (state, action) => {
-      localStorage.setItem("player", JSON.stringify(action.payload));
-      return {
-        ...state,
-        player: {
-          ...action.payload,
-        },
-      };
-    });
+    reduceThunk(
+      getToken,
+      (state, action) => {
+        localStorage.setItem("player", JSON.stringify(action.payload));
+        return {
+          ...state,
+          player: {
+            ...action.payload,
+          },
+        };
+      },
+      undefined,
+      (state) => ({ ...state, player: undefined })
+    );
     reduceThunk(requestNewLoan);
     reduceThunk(buyShip);
     reduceThunk(getSystems, (state, action) => ({
@@ -213,6 +229,10 @@ const gameSlice = createSlice({
       ],
     }));
 
+    reduceThunk(getUser, (state, action) => ({
+      ...state,
+      ...action.payload.user,
+    }));
     reduceThunk(getFlightPlans);
     reduceThunk(newFlightPlan);
     reduceThunk(purchaseOrder);