dave/eve-pi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add color selection and save it to localStorage

Browse Source
This commit is contained in:
Calli
2023-10-06 19:40:54 +03:00
parent 5a34784c9c
commit e69e65059e
9 changed files with 236 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
package-lock.json generated
View File

@@ -24,6 +24,7 @@
"luxon": "^3.3.0",
"next": "13.4.5",
"react": "18.2.0",
"react-color": "^2.19.3",
"react-countdown": "^2.3.5",
"react-dom": "18.2.0",
"sharp": "^0.32.1",
@@ -33,6 +34,7 @@
"devDependencies": {
"@types/crypto-js": "^4.1.1",
"@types/luxon": "^3.3.0",
"@types/react-color": "^3.0.7",
"@types/three": "^0.152.1",
"eslint-plugin-prettier": "^5.0.0",
"prettier": "3.0.3"
@@ -397,6 +399,14 @@
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
},
"node_modules/@icons/material": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
"integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/@mui/base": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.4.tgz",
@@ -922,6 +932,16 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-color": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.7.tgz",
"integrity": "sha512-IGZA7e8Oia0+Sb3/1KP0qTThGelZ9DRspfeLrFWQWv5vXHiYlJJQMC2kgQr75CtP4uL8/kvT8qBgrOVlxVoNTw==",
"dev": true,
"dependencies": {
"@types/react": "*",
"@types/reactcss": "*"
}
},
"node_modules/@types/react-dom": {
"version": "18.2.5",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.5.tgz",
@@ -946,6 +966,15 @@
"@types/react": "*"
}
},
"node_modules/@types/reactcss": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.7.tgz",
"integrity": "sha512-MYPuVierMjIo0EDQnNauvBA94IOeB9lfjC619g+26u7ilsTtoFv6X7eQvaw79Fqqpi0yzoSMz0nUazeJlQUZnA==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -3302,6 +3331,16 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3337,6 +3376,11 @@
"node": ">=12"
}
},
"node_modules/material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -4001,6 +4045,23 @@
"node": ">=0.10.0"
}
},
"node_modules/react-color": {
"version": "2.19.3",
"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
"integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
"dependencies": {
"@icons/material": "^0.2.4",
"lodash": "^4.17.15",
"lodash-es": "^4.17.15",
"material-colors": "^1.2.1",
"prop-types": "^15.5.10",
"reactcss": "^1.2.0",
"tinycolor2": "^1.4.1"
},
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-countdown": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
@@ -4045,6 +4106,14 @@
"react-dom": ">=16.6.0"
}
},
"node_modules/reactcss": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
"integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
"dependencies": {
"lodash": "^4.0.1"
}
},
"node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -4670,6 +4739,11 @@
"resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
"integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
},
"node_modules/tinycolor2": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
},
"node_modules/titleize": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
@@ -5242,6 +5316,12 @@
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
},
"@icons/material": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
"integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
"requires": {}
},
"@mui/base": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.4.tgz",
@@ -5533,6 +5613,16 @@
"csstype": "^3.0.2"
}
},
"@types/react-color": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.7.tgz",
"integrity": "sha512-IGZA7e8Oia0+Sb3/1KP0qTThGelZ9DRspfeLrFWQWv5vXHiYlJJQMC2kgQr75CtP4uL8/kvT8qBgrOVlxVoNTw==",
"dev": true,
"requires": {
"@types/react": "*",
"@types/reactcss": "*"
}
},
"@types/react-dom": {
"version": "18.2.5",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.5.tgz",
@@ -5557,6 +5647,15 @@
"@types/react": "*"
}
},
"@types/reactcss": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.7.tgz",
"integrity": "sha512-MYPuVierMjIo0EDQnNauvBA94IOeB9lfjC619g+26u7ilsTtoFv6X7eQvaw79Fqqpi0yzoSMz0nUazeJlQUZnA==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/scheduler": {
"version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -7185,6 +7284,16 @@
"p-locate": "^5.0.0"
}
},
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7211,6 +7320,11 @@
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz",
"integrity": "sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg=="
},
"material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
},
"merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -7637,6 +7751,20 @@
"loose-envify": "^1.1.0"
}
},
"react-color": {
"version": "2.19.3",
"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
"integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
"requires": {
"@icons/material": "^0.2.4",
"lodash": "^4.17.15",
"lodash-es": "^4.17.15",
"material-colors": "^1.2.1",
"prop-types": "^15.5.10",
"reactcss": "^1.2.0",
"tinycolor2": "^1.4.1"
}
},
"react-countdown": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
@@ -7670,6 +7798,14 @@
"prop-types": "^15.6.2"
}
},
"reactcss": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
"integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
"requires": {
"lodash": "^4.0.1"
}
},
"readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -8071,6 +8207,11 @@
"resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
"integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
},
"tinycolor2": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
},
"titleize": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",

2
package.json
View File

@@ -26,6 +26,7 @@
"luxon": "^3.3.0",
"next": "13.4.5",
"react": "18.2.0",
"react-color": "^2.19.3",
"react-countdown": "^2.3.5",
"react-dom": "18.2.0",
"sharp": "^0.32.1",
@@ -35,6 +36,7 @@
"devDependencies": {
"@types/crypto-js": "^4.1.1",
"@types/luxon": "^3.3.0",
"@types/react-color": "^3.0.7",
"@types/three": "^0.152.1",
"eslint-plugin-prettier": "^5.0.0",
"prettier": "3.0.3"

14
src/app/components/PlanetaryInteraction/PlanetCard.tsx
View File

@@ -31,7 +31,7 @@ const Transition = forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>
ref: React.Ref<unknown>,
) {
return <Slide direction="up" ref={ref} {...props} />;
});
@@ -44,7 +44,7 @@ export const PlanetCard = ({
character: AccessToken;
}) => {
const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
undefined
undefined,
);
const [planetInfoUniverse, setPlanetInfoUniverse] = useState<
@@ -71,7 +71,7 @@ export const PlanetCard = ({
[];
const getPlanet = async (
character: AccessToken,
planet: Planet
planet: Planet,
): Promise<PlanetInfo> => {
const api = new Api();
const planetInfo = (
@@ -80,14 +80,14 @@ export const PlanetCard = ({
planet.planet_id,
{
token: character.access_token,
}
},
)
).data;
return planetInfo;
};
const getPlanetUniverse = async (
planet: Planet
planet: Planet,
): Promise<PlanetInfoUniverse> => {
const api = new Api();
const planetInfo = (
@@ -96,7 +96,7 @@ export const PlanetCard = ({
return planetInfo;
};
const colorContext = useContext(ColorContext)
const { colors } = useContext(ColorContext);
useEffect(() => {
getPlanet(character, planet).then(setPlanetInfo);
@@ -144,7 +144,7 @@ export const PlanetCard = ({
return (
<Typography
key={`${e}-${idx}-${character.character.characterId}`}
color={timeColor(e, colorContext)}
color={timeColor(e, colors)}
fontSize={theme.custom.smallText}
>
{e ? (

10
src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
View File

@@ -1,8 +1,4 @@
import {
SessionContext,
ColorContext,
ColorContextType,
} from "@/app/context/Context";
import { SessionContext, ColorContext } from "@/app/context/Context";
import {
EXTRACTOR_TYPE_IDS,
FACTORY_IDS,
@@ -178,7 +174,7 @@ export const PlanetTableRow = ({
getPlanetUniverse(planet).then(setPlanetInfoUniverse);
}, [planet, character]);
const colorContext = useContext(ColorContext);
const { colors } = useContext(ColorContext);
return (
<TableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
<TableCell component="th" scope="row">
@@ -210,7 +206,7 @@ export const PlanetTableRow = ({
style={{ display: "flex" }}
>
<Typography
color={timeColor(e.expiry_time, colorContext)}
color={timeColor(e.expiry_time, colors)}
fontSize={theme.custom.smallText}
paddingRight={1}
>

4
src/app/components/PlanetaryInteraction/timeColors.ts
View File

@@ -1,9 +1,9 @@
import { ColorContextType } from "@/app/context/Context";
import { ColorSelectionType } from "@/app/context/Context";
import { DateTime } from "luxon";
export const timeColor = (
extractorDate: string | undefined,
colors: ColorContextType,
colors: ColorSelectionType,
): string => {
if (!extractorDate) return colors.expiredColor;
const dateExtractor = DateTime.fromISO(extractorDate);

48
src/app/components/Settings/SettingsButtons.tsx
View File

@@ -1,10 +1,22 @@
import { SessionContext } from "@/app/context/Context";
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField, Tooltip } from "@mui/material";
import {
ColorContext,
ColorSelectionType,
} from "@/app/context/Context";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Tooltip,
Typography,
} from "@mui/material";
import { ColorChangeHandler, ColorResult, CompactPicker } from "react-color";
import React from "react";
import { useContext } from "react";
export const SettingsButton = () => {
const { compactMode, toggleCompactMode } = useContext(SessionContext);
const { colors, setColors } = useContext(ColorContext);
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
@@ -14,6 +26,14 @@ export const SettingsButton = () => {
const handleClose = () => {
setOpen(false);
};
const handleColorSelection = (key: string, currentColors: ColorSelectionType) => (selection: ColorResult) => {
console.log(key, selection.hex)
setColors({
...currentColors,
[key]: selection.hex
})
};
return (
<Tooltip title="Toggle settings dialog">
<>
@@ -27,17 +47,21 @@ export const SettingsButton = () => {
<DialogTitle id="alert-dialog-title">
{"Override default timer colors"}
</DialogTitle>
<DialogContent style={{ paddingTop: '1rem'}}>
<TextField
label="Required"
defaultValue="Hello World"
/>
<DialogContent style={{ paddingTop: "1rem" }}>
{Object.keys(colors).map((key) => {
return (
<div key={`color-row-${key}`}>
<Typography>{key}</Typography>
<CompactPicker
color={colors[key as keyof ColorSelectionType]}
onChangeComplete={handleColorSelection(key, colors)}
/>
</div>
);
})}
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Disagree</Button>
<Button onClick={handleClose} autoFocus>
Agree
</Button>
<Button onClick={handleClose}>Close</Button>
</DialogActions>
</Dialog>
</>

44
src/app/components/Settings/SettingsDialog.tsx
View File

@@ -1,44 +0,0 @@
import * as React from 'react';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { Button } from '@mui/material';
export default function AlertDialog({handleClickOpen}: ) {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Use Google's location service?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Disagree</Button>
<Button onClick={handleClose} autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
);
}

32
src/app/context/Context.tsx
View File

@@ -36,8 +36,8 @@ export const SessionContext = createContext<{
planMode: false,
togglePlanMode: () => {},
piPrices: undefined,
})
export type ColorContextType = {
});
export type ColorSelectionType = {
defaultColor: string;
expiredColor: string;
twoHoursColor: string;
@@ -46,16 +46,22 @@ export type ColorContextType = {
twelveHoursColor: string;
dayColor: string;
twoDaysColor: string;
};
}
export const ColorContext = createContext<ColorContextType>({
defaultColor: '#006596',
expiredColor: '#AB324A',
twoHoursColor: '#9C4438',
fourHoursColor: '#765B21',
eightHoursColor: '#63620D',
twelveHoursColor: '#2C6C2F',
dayColor: '#2F695A',
twoDaysColor: '#2F695A',
export const defaultColors = {
defaultColor: "#006596",
expiredColor: "#AB324A",
twoHoursColor: "#9C4438",
fourHoursColor: "#765B21",
eightHoursColor: "#63620D",
twelveHoursColor: "#2C6C2F",
dayColor: "#2F695A",
twoDaysColor: "#2F695A",
};
export const ColorContext = createContext<{
colors: ColorSelectionType;
setColors: (colors: ColorSelectionType) => void;
}>({
colors: defaultColors,
setColors: () => {}
});

35
src/app/page.tsx
View File

@@ -7,7 +7,13 @@ 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 {
CharacterContext,
ColorContext,
ColorSelectionType,
SessionContext,
defaultColors,
} from "./context/Context";
import { useSearchParams } from "next/navigation";
import { EvePraisalResult, fetchAllPrices } from "@/eve-praisal";
@@ -18,9 +24,9 @@ const Home = () => {
const [compactMode, setCompactMode] = useState(false);
const [planMode, setPlanMode] = useState(false);
const [piPrices, setPiPrices] = useState<EvePraisalResult | undefined>(
undefined
undefined,
);
const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
const searchParams = useSearchParams();
const code = searchParams && searchParams.get("code");
@@ -28,7 +34,7 @@ const Home = () => {
const deleteCharacter = (character: AccessToken) => {
const charactersToSave = characters.filter(
(c) => character.character.characterId !== c.character.characterId
(c) => character.character.characterId !== c.character.characterId,
);
setCharacters(charactersToSave);
saveCharacters(charactersToSave);
@@ -36,7 +42,7 @@ const Home = () => {
const updateCharacter = (
character: AccessToken,
updates: CharacterUpdate
updates: CharacterUpdate,
) => {
const charactersToSave = characters.map((c) => {
if (c.character.characterId === character.character.characterId)
@@ -56,7 +62,7 @@ const Home = () => {
};
const handleCallback = async (
characters: AccessToken[]
characters: AccessToken[],
): Promise<AccessToken[]> => {
if (code) {
window.history.replaceState(null, "", "/");
@@ -89,19 +95,28 @@ const Home = () => {
};
const togglePlanMode = () => {
setPlanMode(!planMode)
}
setPlanMode(!planMode);
};
useEffect(() => {
const storedCompactMode = localStorage.getItem("compactMode");
if (!storedCompactMode) return;
storedCompactMode === "true" ? setCompactMode(true) : false;
}, []);
useEffect(() => {
const storedColors = localStorage.getItem("colors");
if (!storedColors) return;
setColors(JSON.parse(storedColors))
}, []);
useEffect(() => {
localStorage.setItem("compactMode", compactMode ? "true" : "false");
}, [compactMode]);
useEffect(() => {
localStorage.setItem("colors", JSON.stringify(colors))
}, [colors]);
// Initialize EVE PI
useEffect(() => {
fetch("api/env")
@@ -157,7 +172,9 @@ const Home = () => {
restoreCharacters,
}}
>
<MainGrid />
<ColorContext.Provider value={{ colors: colors, setColors: setColors }}>
<MainGrid />
</ColorContext.Provider>
</CharacterContext.Provider>
</SessionContext.Provider>
);