First working version of EVE-PI

src/app/components/Characters/CharacterDialog.tsx

@@ -0,0 +1,70 @@
+import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
+import { AccessToken, CharacterUpdate } from "../../../types";
+import { useEffect, useState } from "react";
+import TextField from "@mui/material/TextField";
+import { revokeToken } from "@/esi-sso";
+
+export const CharacterDialog = ({
+  character,
+  closeDialog,
+  deleteCharacter,
+  updateCharacter,
+}: {
+  character: AccessToken | undefined;
+  closeDialog: () => void;
+  deleteCharacter: (character: AccessToken) => void;
+  updateCharacter: (characer: AccessToken, update: CharacterUpdate) => void;
+}) => {
+  const [account, setAccount] = useState("");
+
+  useEffect(() => {
+    if (character?.account) setAccount(character.account);
+  }, [character]);
+
+  const logout = (character: AccessToken) => {
+    revokeToken(character)
+      .then()
+      .catch((e) => console.log("Logout failed"));
+  };
+
+  return (
+    <Dialog open={character !== undefined} onClose={closeDialog}>
+      <DialogTitle>{character && character.character.name}</DialogTitle>
+      <TextField
+        id="outlined-basic"
+        label="Account name"
+        variant="outlined"
+        value={account ?? ""}
+        sx={{ margin: 1 }}
+        onChange={(event) => setAccount(event.target.value)}
+      />
+      <DialogActions>
+        <Button
+          onClick={() => {
+            character && updateCharacter(character, { account });
+            closeDialog();
+          }}
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button
+          onClick={() => {
+            character && deleteCharacter(character);
+            character && logout(character);
+          }}
+          variant="contained"
+        >
+          Delete
+        </Button>
+        <Button
+          onClick={() => {
+            closeDialog();
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/app/components/Characters/CharacterRow.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useContext, useState } from "react";
+import Image from "next/image";
+import Stack from "@mui/material/Stack";
+import { styled } from "@mui/material/styles";
+import React from "react";
+import { CharacterDialog } from "./CharacterDialog";
+import { AccessToken } from "@/types";
+import { Box } from "@mui/material";
+import { EVE_IMAGE_URL } from "@/const";
+import { CharacterContext } from "@/app/context/Context";
+
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(2),
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+export const CharacterRow = ({ character }: { character: AccessToken }) => {
+  const [selectedCharacter, setSelectedCharacter] = useState<
+    AccessToken | undefined
+  >(undefined);
+
+  const { deleteCharacter, updateCharacter } = useContext(CharacterContext);
+
+  return (
+    <StackItem
+      key={character.character.characterId}
+      alignItems="flex-start"
+      justifyContent="flex-start"
+    >
+      <CharacterDialog
+        character={selectedCharacter}
+        deleteCharacter={deleteCharacter}
+        updateCharacter={updateCharacter}
+        closeDialog={() => setSelectedCharacter(undefined)}
+      />
+      <Box
+        onClick={() => setSelectedCharacter(character)}
+        display="flex"
+        flexDirection="column"
+      >
+        <Image
+          src={`${EVE_IMAGE_URL}/characters/${character.character.characterId}/portrait?size=64`}
+          alt=""
+          width={120}
+          height={120}
+          style={{ marginBottom: "0.2rem" }}
+        />
+        {character.character.name}
+      </Box>
+    </StackItem>
+  );
+};