};
const Toolbar = () => {
- const { config, setConfig } = useTracker();
+ const { config, saveConfig } = useTracker();
const controller = React.useMemo(() => ({
getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
getDefault: (state, icons) => icons[0],
handlePrimary: (state, setState, icons) => {
const prop = mapWild[icons[0]];
- setConfig(c => ({ ...c, [prop]: !c[prop] }));
+ saveConfig({ [prop]: !config[prop] });
},
handleSecondary: () => null,
- }), [config, setConfig]);
+ }), [config, saveConfig]);
return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
<Container fluid>
const [manualState, setManualState] = React.useState(makeEmptyState());
const [dungeons, setDungeons] = React.useState(DUNGEONS);
+ const saveConfig = React.useCallback((values) => {
+ setConfig(s => {
+ const newConfig = { ...s, ...values };
+ localStorage.setItem('tracker.config', JSON.stringify(newConfig));
+ return newConfig;
+ });
+ }, []);
+
+ React.useEffect(() => {
+ const savedConfig = localStorage.getItem('tracker.config');
+ if (savedConfig) {
+ setConfig(JSON.parse(savedConfig));
+ }
+ }, []);
+
React.useEffect(() => {
const newDungeons = DUNGEONS.map(dungeon => {
const newDungeon = JSON.parse(JSON.stringify(dungeon));
}, [autoState, manualState]);
const value = React.useMemo(() => {
- return { config, setConfig, dungeons, setAutoState, setManualState, state };
+ return { config, saveConfig, dungeons, setAutoState, setManualState, state };
}, [config, dungeons, state]);
return <context.Provider value={value}>