First working version of EVE-PI

src/app/components/Account/AccountCard.tsx

@@ -0,0 +1,35 @@
+import { AccessToken } from "@/types";
+import { Box, Stack, Typography } from "@mui/material";
+import { CharacterRow } from "../Characters/CharacterRow";
+import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
+
+export const AccountCard = ({
+  characters,
+  sessionReady,
+}: {
+  characters: AccessToken[];
+  sessionReady: boolean;
+}) => {
+  return (
+    <Box
+      sx={{
+        background: "#262626",
+        padding: 1,
+        borderRadius: 1,
+        margin: 1,
+      }}
+    >
+      <Typography paddingLeft={2}>Account: {characters[0].account}</Typography>
+      {characters.map((c) => (
+        <Stack
+          key={c.character.characterId}
+          direction="row"
+          alignItems="flex-start"
+        >
+          <CharacterRow character={c} />
+          {sessionReady && <PlanetaryInteractionRow character={c} />}
+        </Stack>
+      ))}
+    </Box>
+  );
+};

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>
+  );
+};

src/app/components/Login/LoginButton.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@mui/material";
+import { useState } from "react";
+import { LoginDialog } from "./LoginDialog";
+
+export const LoginButton = () => {
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
+  return (
+    <>
+      <Button
+        style={{ width: "100%" }}
+        variant="contained"
+        onClick={() => setLoginDialogOpen(true)}
+      >
+        Login
+      </Button>
+      <LoginDialog
+        open={loginDialogOpen}
+        closeDialog={() => setLoginDialogOpen(false)}
+      />
+    </>
+  );
+};

src/app/components/Login/LoginDialog.tsx

@@ -0,0 +1,71 @@
+import DialogTitle from "@mui/material/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import Button from "@mui/material/Button";
+import { Box, DialogActions } from "@mui/material";
+import { useContext, useEffect, useState } from "react";
+import { eveSwagger, loginParameters } from "@/esi-sso";
+import { SessionContext } from "@/app/context/Context";
+
+export const LoginDialog = ({
+  open,
+  closeDialog,
+}: {
+  open: boolean;
+  closeDialog: () => void;
+}) => {
+  const [scopes] = useState<string[]>(["esi-planets.manage_planets.v1"]);
+  const [selectedScopes, setSelectedScopes] = useState<string[]>([
+    "esi-planets.manage_planets.v1",
+  ]);
+  const [ssoUrl, setSsoUrl] = useState<string | undefined>(undefined);
+  const [loginUrl, setLoginUrl] = useState<string | undefined>(undefined);
+
+  const { EVE_SSO_CLIENT_ID, EVE_SSO_CALLBACK_URL } =
+    useContext(SessionContext);
+
+  useEffect(() => {
+    eveSwagger().then((json) => {
+      setSsoUrl(json.securityDefinitions.evesso.authorizationUrl);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!ssoUrl || selectedScopes.length === 0) return;
+    loginParameters(
+      selectedScopes,
+      EVE_SSO_CLIENT_ID,
+      EVE_SSO_CALLBACK_URL
+    ).then((res) => setLoginUrl(ssoUrl + "?" + res));
+  }, [selectedScopes, ssoUrl, EVE_SSO_CLIENT_ID, EVE_SSO_CALLBACK_URL]);
+
+  return (
+    <Dialog open={open} onClose={closeDialog}>
+      <DialogTitle>Select scopes to login with</DialogTitle>
+      {scopes.map((scope) => (
+        <Box key={scope} padding={1}>
+          <input
+            type="checkbox"
+            checked={selectedScopes.some((v) => v === scope)}
+            onChange={() => {
+              selectedScopes.some((v) => v === scope)
+                ? setSelectedScopes(selectedScopes.filter((s) => s !== scope))
+                : setSelectedScopes([...selectedScopes, scope]);
+            }}
+          />
+          {scope}
+        </Box>
+      ))}
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={() => {
+            window.open(loginUrl, "_self");
+          }}
+        >
+          Login
+        </Button>
+        <Button onClick={closeDialog}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/app/components/Login/RefreshButton.tsx

@@ -0,0 +1,16 @@
+import { SessionContext } from "@/app/context/Context";
+import { Button } from "@mui/material";
+import { useContext } from "react";
+
+export const RefreshButton = () => {
+  const { refreshSession } = useContext(SessionContext);
+  return (
+    <Button
+      style={{ width: "100%" }}
+      variant="contained"
+      onClick={refreshSession}
+    >
+      Refresh
+    </Button>
+  );
+};

src/app/components/MainGrid.tsx

@@ -0,0 +1,45 @@
+import { useContext } from "react";
+import { Box, Grid, Stack } from "@mui/material";
+import { LoginButton } from "./Login/LoginButton";
+import { RefreshButton } from "./Login/RefreshButton";
+import { AccountCard } from "./Account/AccountCard";
+import { AccessToken } from "@/types";
+import { CharacterContext } from "../context/Context";
+
+interface Grouped {
+  [key: string]: AccessToken[];
+}
+
+export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
+  const { characters } = useContext(CharacterContext);
+  const groupByAccount = characters.reduce<Grouped>((group, character) => {
+    const { account } = character;
+    group[account ?? ""] = group[account ?? ""] ?? [];
+    group[account ?? ""].push(character);
+    return group;
+  }, {});
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={1}>
+        <Grid item xs={2}>
+          <Stack direction="row" spacing={1}>
+            <LoginButton />
+            <RefreshButton />
+          </Stack>
+        </Grid>
+      </Grid>
+      <Grid container spacing={1}>
+        <Grid item xs={12}>
+          {Object.values(groupByAccount).map((g, id) => (
+            <AccountCard
+              key={`account-${id}-${g[0].account}`}
+              characters={g}
+              sessionReady={sessionReady}
+            />
+          ))}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

src/app/components/PlanetaryInteraction/NoPlanetCard.tsx

@@ -0,0 +1,32 @@
+import { Stack, Typography, styled } from "@mui/material";
+import Image from "next/image";
+
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: 0,
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+export const NoPlanetCard = ({}: {}) => {
+  return (
+    <StackItem alignItems="flex-start" className="poop" height="100%">
+      <Image
+        src={`/noplanet.png`}
+        alt=""
+        width={120}
+        height={120}
+        style={{ marginBottom: "0.2rem" }}
+      />
+      <Image
+        width={64}
+        height={64}
+        src={`/stopped.png`}
+        alt=""
+        style={{ position: "absolute" }}
+      />
+      <Typography>No planet</Typography>
+    </StackItem>
+  );
+};

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -0,0 +1,146 @@
+import { Stack, Typography, styled } from "@mui/material";
+import Image from "next/image";
+import { AccessToken, Planet } from "@/types";
+import { Api } from "@/esi-api";
+import { useEffect, useState } from "react";
+import { DateTime } from "luxon";
+import { EXTRACTOR_TYPE_IDS } from "@/const";
+import Countdown from "react-countdown";
+
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: 0,
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+export interface PlanetInfo {
+  links: {
+    destination_pin_id: number;
+    link_level: number;
+    source_pin_id: number;
+  }[];
+  pins: {
+    contents?: {
+      amount: number;
+      type_id: number;
+    }[];
+    expiry_time?: string;
+    extractor_details?: {
+      cycle_time?: number;
+      head_radius?: number;
+      heads: {
+        head_id: number;
+        latitude: number;
+        longitude: number;
+      }[];
+      product_type_id?: number;
+      qty_per_cycle?: number;
+    };
+    factory_details?: {
+      schematic_id: number;
+    };
+    install_time?: string;
+    last_cycle_start?: string;
+    latitude: number;
+    longitude: number;
+    pin_id: number;
+    schematic_id?: number;
+    type_id: number;
+  }[];
+  routes: {
+    content_type_id: number;
+    destination_pin_id: number;
+    quantity: number;
+    route_id: number;
+    source_pin_id: number;
+    waypoints?: number[];
+  }[];
+}
+
+export const PlanetCard = ({
+  planet,
+  character,
+}: {
+  planet: Planet;
+  character: AccessToken;
+}) => {
+  const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
+    undefined
+  );
+  const extractors =
+    (planetInfo &&
+      planetInfo.pins
+        .filter((p) => EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id))
+        .map((p) => p.expiry_time)) ??
+    [];
+  const getPlanet = async (
+    character: AccessToken,
+    planet: Planet
+  ): Promise<PlanetInfo> => {
+    const api = new Api();
+    const planetInfo = (
+      await api.characters.getCharactersCharacterIdPlanetsPlanetId(
+        character.character.characterId,
+        planet.planet_id,
+        {
+          token: character.access_token,
+        }
+      )
+    ).data;
+    return planetInfo;
+  };
+  useEffect(() => {
+    getPlanet(character, planet).then(setPlanetInfo);
+  }, [planet, character]);
+  return (
+    <StackItem alignItems="flex-start" className="poop" height="100%">
+      <Image
+        src={`/${planet.planet_type}.png`}
+        alt=""
+        width={120}
+        height={120}
+        style={{ marginBottom: "0.2rem" }}
+      />
+      {extractors.some((e) => {
+        if (!e) return true;
+        const dateExtractor = DateTime.fromISO(e);
+        const dateNow = DateTime.now();
+        return dateExtractor < dateNow;
+      }) && (
+        <Image
+          width={64}
+          height={64}
+          src={`/stopped.png`}
+          alt=""
+          style={{ position: "absolute" }}
+        />
+      )}
+      {extractors.map((e, idx) => {
+        const inPast = () => {
+          if (!e) return true;
+          const dateExtractor = DateTime.fromISO(e);
+          const dateNow = DateTime.now();
+          return dateExtractor < dateNow;
+        };
+
+        return (
+          <Typography
+            key={`${e}-${idx}-${character.character.characterId}`}
+            color={inPast() ? "red" : "white"}
+          >
+            {e ? (
+              <Countdown
+                overtime={true}
+                date={DateTime.fromISO(e).toMillis()}
+              />
+            ) : (
+              "STOPPED"
+            )}
+          </Typography>
+        );
+      })}
+    </StackItem>
+  );
+};

src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx

@@ -0,0 +1,57 @@
+import { Api } from "@/esi-api";
+import { AccessToken, Planet } from "@/types";
+import { Stack, styled } from "@mui/material";
+import { useEffect, useState } from "react";
+import { PlanetCard } from "./PlanetCard";
+import { NoPlanetCard } from "./NoPlanetCard";
+
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(2),
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+const getPlanets = async (character: AccessToken): Promise<Planet[]> => {
+  const api = new Api();
+  const planets = (
+    await api.characters.getCharactersCharacterIdPlanets(
+      character.character.characterId,
+      {
+        token: character.access_token,
+      }
+    )
+  ).data;
+  return planets;
+};
+
+export const PlanetaryInteractionRow = ({
+  character,
+}: {
+  character: AccessToken;
+}) => {
+  const [planets, setPlanets] = useState<Planet[]>([]);
+  useEffect(() => {
+    getPlanets(character).then(setPlanets).catch(console.log);
+  }, [character]);
+
+  return (
+    <StackItem>
+      <Stack spacing={2} direction="row" flexWrap="wrap">
+        {planets.map((planet) => (
+          <PlanetCard
+            key={`${character.character.characterId}-${planet.planet_id}`}
+            planet={planet}
+            character={character}
+          />
+        ))}
+        {Array.from(Array(6 - planets.length).keys()).map((i, id) => (
+          <NoPlanetCard
+            key={`${character.character.characterId}-no-planet-${id}`}
+          />
+        ))}
+      </Stack>
+    </StackItem>
+  );
+};

src/app/context/Context.tsx

@@ -0,0 +1,26 @@
+import { AccessToken, CharacterUpdate } from "@/types";
+import { Dispatch, SetStateAction, createContext } from "react";
+
+export const CharacterContext = createContext<{
+  characters: AccessToken[];
+  deleteCharacter: (character: AccessToken) => void;
+  updateCharacter: (character: AccessToken, update: CharacterUpdate) => void;
+}>({
+  characters: [],
+  deleteCharacter: () => {},
+  updateCharacter: () => {},
+});
+
+export const SessionContext = createContext<{
+  sessionReady: boolean;
+  refreshSession: () => void;
+  setSessionReady: Dispatch<SetStateAction<boolean>>;
+  EVE_SSO_CALLBACK_URL: string;
+  EVE_SSO_CLIENT_ID: string;
+}>({
+  sessionReady: false,
+  refreshSession: () => {},
+  setSessionReady: () => {},
+  EVE_SSO_CALLBACK_URL: "",
+  EVE_SSO_CLIENT_ID: "",
+});

src/app/globals.css

@@ -0,0 +1,23 @@
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

src/app/layout.tsx

@@ -0,0 +1,21 @@
+import "./globals.css";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "EVE PI",
+  description: "Lets PI!",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,124 @@
+"use client";
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+import { memo, useCallback, useEffect, useState } from "react";
+import { AccessToken, CharacterUpdate, Env } from "../types";
+import { MainGrid } from "./components/MainGrid";
+import { refreshToken } from "@/esi-sso";
+import { CharacterContext, SessionContext } from "./context/Context";
+import { useSearchParams } from "next/navigation";
+
+const Home = () => {
+  const [characters, setCharacters] = useState<AccessToken[]>([]);
+  const [sessionReady, setSessionReady] = useState(false);
+  const [environment, setEnvironment] = useState<Env | undefined>(undefined);
+
+  const searchParams = useSearchParams();
+  const code = searchParams && searchParams.get("code");
+
+  // Initialize SSO env
+  useEffect(() => {
+    fetch("api/env")
+      .then((r) => r.json())
+      .then((j) => {
+        setEnvironment({
+          EVE_SSO_CLIENT_ID: j.EVE_SSO_CLIENT_ID,
+          EVE_SSO_CALLBACK_URL: j.EVE_SSO_CALLBACK_URL,
+        });
+      });
+  }, []);
+
+  // Memoize chracter state manipulations
+  const addCharacter = useCallback((character: AccessToken) => {
+    setCharacters((chars) => [
+      ...chars.filter(
+        (c) => c.character.characterId !== character.character.characterId
+      ),
+      character,
+    ]);
+  }, []);
+
+  const deleteCharacter = useCallback(
+    (character: AccessToken) => {
+      setCharacters(
+        characters.filter(
+          (c) => character.character.characterId !== c.character.characterId
+        )
+      );
+    },
+    [characters]
+  );
+
+  const updateCharacter = useCallback(
+    (character: AccessToken, updates: CharacterUpdate) => {
+      setCharacters(
+        characters.map((c) => {
+          if (c.character.characterId === character.character.characterId)
+            return {
+              ...c,
+              ...(updates.account ? { account: updates.account } : {}),
+            };
+          return c;
+        })
+      );
+    },
+    [characters]
+  );
+
+  // Handle EVE SSO callback
+  useEffect(() => {
+    if (code) {
+      window.history.replaceState(null, "", "/");
+      fetch(`api/token?code=${code}`)
+        .then((res) => res.json())
+        .then(addCharacter)
+        .catch();
+    }
+  }, [code, addCharacter]);
+
+  // Initialise saved characters
+  useEffect(() => {
+    const localStorageCharacters = localStorage.getItem("characters");
+    if (localStorageCharacters) {
+      const characterArray: AccessToken[] = JSON.parse(localStorageCharacters);
+      setCharacters(characterArray);
+    }
+  }, []);
+
+  // Update saved characters to local storage on state change
+  useEffect(() => {
+    localStorage.setItem("characters", JSON.stringify(characters));
+  }, [characters]);
+
+  const refreshSession = () => {
+    Promise.all(characters.map((c) => refreshToken(c)))
+      .then(setCharacters)
+      .finally(() => setSessionReady(true));
+  };
+
+  return (
+    <SessionContext.Provider
+      value={{
+        sessionReady,
+        setSessionReady,
+        refreshSession,
+        EVE_SSO_CALLBACK_URL: environment?.EVE_SSO_CALLBACK_URL ?? "",
+        EVE_SSO_CLIENT_ID: environment?.EVE_SSO_CLIENT_ID ?? "",
+      }}
+    >
+      <CharacterContext.Provider
+        value={{
+          characters,
+          deleteCharacter,
+          updateCharacter,
+        }}
+      >
+        <MainGrid sessionReady={sessionReady} />
+      </CharacterContext.Provider>
+    </SessionContext.Provider>
+  );
+};
+
+export default memo(Home);