Skip to content

Commit

Permalink
refactor(frontend): use localStorage wrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
@SARDONYX-sard
SARDONYX-sard committed Feb 16, 2024
1 parent 4950552 commit a17d5d0
Show file tree
Hide file tree
Showing 11 changed files with 85 additions and 87 deletions.
61 changes: 32 additions & 29 deletions frontend/src/components/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { SelectLogLevel } from '@/components/lists';
import { LinearWithValueLabel } from '@/components/notifications';
import { useTranslation } from '@/hooks';
import { convertDar2oar, LogLevel, progressListener, start } from '@/tauri_cmd';
import { localStorageManager } from '@/utils/local_storage_manager';
import { get_parent } from '@/utils/path';
import { selectLogLevel } from '@/utils/selector';

Expand All @@ -37,17 +38,17 @@ type FormProps = {
};

const getInitialFormValues = (): FormProps => ({
src: localStorage.getItem('src') ?? '',
dst: localStorage.getItem('dst') ?? '',
modName: localStorage.getItem('modName') ?? '',
modAuthor: localStorage.getItem('modAuthor') ?? '',
mappingPath: localStorage.getItem('mappingPath') ?? '',
mapping1personPath: localStorage.getItem('mapping1personPath') ?? '',
src: localStorageManager.get('src') ?? '',
dst: localStorageManager.get('dst') ?? '',
modName: localStorageManager.get('modName') ?? '',
modAuthor: localStorageManager.get('modAuthor') ?? '',
mappingPath: localStorageManager.get('mappingPath') ?? '',
mapping1personPath: localStorageManager.get('mapping1personPath') ?? '',
loading: false as boolean,
logLevel: selectLogLevel(localStorage.getItem('logLevel')),
runParallel: localStorage.getItem('runParallel') === 'true',
hideDar: localStorage.getItem('hideDar') === 'true',
showProgress: localStorage.getItem('showProgress') === 'true',
logLevel: selectLogLevel(localStorageManager.get('logLevel')),
runParallel: localStorageManager.get('runParallel') === 'true',
hideDar: localStorageManager.get('hideDar') === 'true',
showProgress: localStorageManager.get('showProgress') === 'true',
progress: 0,
});

Expand All @@ -65,7 +66,9 @@ export function ConvertForm() {

const setStorage = (key: keyof FormProps) => {
return (value: string) => {
localStorage.setItem(key, value);
if (!(key === 'loading' || key === 'progress')) {
localStorageManager.set(key, value);
}
if (value !== '') {
localStorage.setItem(`cached-${key}`, value);
}
Expand Down Expand Up @@ -120,9 +123,9 @@ export function ConvertForm() {
onChange={(e) => {
onChange(e);
const path = e.target.value;
localStorage.setItem('src', path); // For reload cache
localStorageManager.set('src', path); // For reload cache
if (path !== '') {
localStorage.setItem('cached-src', path); // For empty string
localStorageManager.set('cached-src', path); // For empty string
}
}}
onBlur={onBlur}
Expand All @@ -139,7 +142,7 @@ export function ConvertForm() {

<Grid xs={2}>
<SelectPathButton
path={get_parent(value === '' ? localStorage.getItem('cached-src') ?? '' : value)}
path={get_parent(value === '' ? localStorageManager.get('cached-src') ?? '' : value)}
isDir
setPath={setStorage('src')}
/>
Expand All @@ -164,9 +167,9 @@ export function ConvertForm() {
onChange={(e) => {
onChange(e);
const path = e.target.value;
localStorage.setItem('dst', path);
localStorageManager.set('dst', path);
if (path !== '') {
localStorage.setItem('cached-dst', path);
localStorageManager.set('cached-dst', path);
}
}}
onBlur={onBlur}
Expand All @@ -181,7 +184,7 @@ export function ConvertForm() {
</Grid>
<Grid xs={2}>
<SelectPathButton
path={get_parent(value === '' ? localStorage.getItem('cached-dst') ?? '' : value)}
path={get_parent(value === '' ? localStorageManager.get('cached-dst') ?? '' : value)}
isDir
setPath={setStorage('dst')}
/>
Expand All @@ -205,9 +208,9 @@ export function ConvertForm() {
margin="dense"
onChange={(e) => {
const path = e.target.value;
localStorage.setItem('mappingPath', path);
localStorageManager.set('mappingPath', path);
if (path !== '') {
localStorage.setItem('cached-mappingPath', path);
localStorageManager.set('cached-mappingPath', path);
}
onChange(e);
}}
Expand All @@ -219,9 +222,9 @@ export function ConvertForm() {

<Grid xs={2}>
<SelectPathButton
path={value === '' ? localStorage.getItem('cached-mappingPath') ?? '' : value}
path={value === '' ? localStorageManager.get('cached-mappingPath') ?? '' : value}
setPath={(value) => {
localStorage.setItem('cached-mappingPath', value);
localStorageManager.set('cached-mappingPath', value);
setStorage('mappingPath')(value);
}}
/>
Expand All @@ -245,9 +248,9 @@ export function ConvertForm() {
margin="dense"
onChange={(e) => {
const path = e.target.value;
localStorage.setItem('mapping1personPath', path);
localStorageManager.set('mapping1personPath', path);
if (path !== '') {
localStorage.setItem('cached-mapping1personPath', path);
localStorageManager.set('cached-mapping1personPath', path);
}
onChange(e);
}}
Expand All @@ -259,7 +262,7 @@ export function ConvertForm() {

<Grid xs={2}>
<SelectPathButton
path={value === '' ? localStorage.getItem('cached-mapping1personPath') ?? '' : value}
path={value === '' ? localStorageManager.get('cached-mapping1personPath') ?? '' : value}
setPath={setStorage('mapping1personPath')}
/>
</Grid>
Expand All @@ -280,7 +283,7 @@ export function ConvertForm() {
variant="outlined"
margin="dense"
onChange={(e) => {
localStorage.setItem('modName', e.target.value);
localStorageManager.set('modName', e.target.value);
onChange(e);
}}
onBlur={onBlur}
Expand All @@ -303,7 +306,7 @@ export function ConvertForm() {
variant="outlined"
margin="dense"
onChange={(e) => {
localStorage.setItem('modAuthor', e.target.value);
localStorageManager.set('modAuthor', e.target.value);
onChange(e);
}}
onBlur={onBlur}
Expand Down Expand Up @@ -349,7 +352,7 @@ export function ConvertForm() {
control={
<Checkbox
onClick={() => {
localStorage.setItem('hideDar', `${!value}`);
localStorageManager.set('hideDar', `${!value}`);
setValue('hideDar', !value);
}}
checked={value}
Expand Down Expand Up @@ -386,7 +389,7 @@ export function ConvertForm() {
<Checkbox
onClick={() => {
setValue('showProgress', !value);
localStorage.setItem('showProgress', `${!value}`);
localStorageManager.set('showProgress', `${!value}`);
}}
checked={value}
aria-label="Show Progress"
Expand Down Expand Up @@ -421,7 +424,7 @@ export function ConvertForm() {
control={
<Checkbox
onClick={() => {
localStorage.setItem('runParallel', `${!value}`);
localStorageManager.set('runParallel', `${!value}`);
setValue('runParallel', !value);
}}
checked={value}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/pages/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Tab from '@mui/material/Tab';
import { ImportBackupButton, ExportBackupButton, ImportLangButton } from '@/components/buttons';
import { CSSEditor, type CSSEditorProps, JSEditor } from '@/components/editor';
import {
NoticePositionList,
NoticeSettingsList,
SelectEditorMode,
StyleList,
TranslationList,
Expand Down Expand Up @@ -94,7 +94,7 @@ const Tabs = ({ editorMode, setEditorMode, preset, setPreset, setStyle }: TabsPr
<StyleList preset={preset} setPreset={setPreset} setStyle={setStyle} />
</TabPanel>
<TabPanel value="notice">
<NoticePositionList />
<NoticeSettingsList />
</TabPanel>
<TabPanel value="lang">
<ImportLangButton />
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/hooks/dyn_style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { useEffect, useInsertionEffect, useState } from 'react';

import { notify } from '@/components/notifications';
import { localStorageManager } from '@/utils/local_storage_manager';
import { selectPreset, presetStyles } from '@/utils/styles';

const getStyle = () => {
const presetNumber = selectPreset(localStorage.getItem('presetNumber') ?? '');
const presetNumber = selectPreset(localStorageManager.get('presetNumber'));
if (presetNumber === '0') {
return localStorage.getItem('customCSS') ?? '';
return localStorageManager.get('customCSS') ?? '';
} else {
return presetStyles[presetNumber];
}
Expand Down Expand Up @@ -35,7 +36,7 @@ export function useDynStyle(initialState = getStyle()) {
}

const initScript = () => {
return localStorage.getItem('customJS') ?? '';
return localStorageManager.get('customJS') ?? '';
};
/**
* Inject JavaScript
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/hooks/storage_state.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { useCallback, useState } from 'react';

const getCacheStr = (cacheKey: string, initialState: string) => localStorage.getItem(cacheKey) ?? initialState;
import { type CacheKey } from '@/utils/local_storage_manager';

type CacheKeyAll = CacheKey | 'runScript';
const getCacheStr = (cacheKey: CacheKeyAll, initialState: string) => localStorage.getItem(cacheKey) ?? initialState;

/**
* useState with localStorage
* @param keyName
* @param fallbackState - if localStorage.getItem is returned null, then use.
*/
export function useStorageState(keyName: string, fallbackState = '') {
export function useStorageState(keyName: CacheKeyAll, fallbackState = '') {
const [value, setValue] = useState(getCacheStr(keyName, fallbackState));

const setState = useCallback(
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/hooks/useLocale.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@ import { FlatNamespace, KeyPrefix, changeLanguage } from 'i18next';
import { useEffect } from 'react';
import { type FallbackNs, type UseTranslationOptions, useTranslation as useTrans } from 'react-i18next';

import { localStorageManager } from '@/utils/local_storage_manager';
import { type I18nKeys } from '@/utils/translation';

/**
* Change language
*/
export function useLocale() {
useEffect(() => {
const locale = localStorage.getItem('locale') ?? window.navigator.language;
const locale = localStorageManager.get('locale') ?? window.navigator.language;
changeLanguage(locale === 'auto' ? window.navigator.language : locale);
}, []);
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/tauri_cmd/backup.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { save } from '@tauri-apps/api/dialog';

import { readFile, writeFile } from '@/tauri_cmd';
import { cacheKeys, type LocalCache } from '@/utils/local_storage_manager';
import { cacheKeys, localStorageManager, type LocalCache } from '@/utils/local_storage_manager';

export const backup = {
/** @throws Error */
Expand Down Expand Up @@ -30,7 +30,7 @@ export const backup = {
/** @throws Error */
async export(settings: LocalCache) {
const pathKey = 'export-settings-path';
const cachedPath = localStorage.getItem(pathKey);
const cachedPath = localStorageManager.get(pathKey);
const path = await save({
defaultPath: cachedPath ?? undefined,
filters: [
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/tauri_cmd/converter.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { invoke } from '@tauri-apps/api';

import { localStorageManager } from '@/utils/local_storage_manager';
import { selectLogLevel } from '@/utils/selector';

type ConverterOptions = {
Expand Down Expand Up @@ -40,7 +41,7 @@ export async function convertDar2oar(props: ConverterOptions): Promise<void> {
},
};

let logLevel = selectLogLevel(localStorage.getItem('logLevel'));
let logLevel = selectLogLevel(localStorageManager.get('logLevel'));
changeLogLevel(logLevel);

const showProgress = props.showProgress ?? false;
Expand Down
11 changes: 6 additions & 5 deletions frontend/src/tauri_cmd/default_api_wrapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,20 @@ import { readTextFile } from '@tauri-apps/api/fs';
import { open as openShell } from '@tauri-apps/api/shell';

import { notify } from '@/components/notifications';
import { localStorageManager, type CacheKey } from '@/utils/local_storage_manager';

/**
* Read the entire contents of a file into a string.
* @param {string} pathKey - target path cache key
* @param pathKey - target path cache key
* @return contents
* @throws Error
* @throws `Error`
*/
export async function readFile(pathKey: string, filterName: string) {
let path = localStorage.getItem(pathKey) ?? '';
export async function readFile(pathKey: CacheKey, filterName: string) {
let path = localStorageManager.get(pathKey) ?? '';

const setPath = (newPath: string) => {
path = newPath;
localStorage.setItem(pathKey, path);
localStorageManager.set(pathKey, path);
};

if (
Expand Down
Loading

0 comments on commit a17d5d0

Please sign in to comment.