🧵 将reset中的getCache从useEffect后设置state改为直接使用react的use

neila-a · Apr 25, 2024 · 8e5e819 · 8e5e819
1 parent ec314ec
commit 8e5e819
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 29 deletions.
diff --git a/packages/core/src/app/service-worker.ts b/packages/core/src/app/service-worker.ts
@@ -35,9 +35,9 @@ export const Cache = `Verkfi-${version}-${dev == true ? `dev${devVersion}` : "pr
 log(`版本为${Cache}`);
 self.addEventListener('install', async event => {
  const installStaticFiles = async () => {
- const cachea = await caches.open(Cache);
+ const openedCache = await caches.open(Cache);
  try {
- await cachea.addAll(installFilesEssential)
+ await openedCache.addAll(installFilesEssential);
  } catch (error) {
  console.error(error);
  }

diff --git a/packages/core/src/app/setting/about/reset.tsx b/packages/core/src/app/setting/about/reset.tsx
@@ -12,7 +12,8 @@ import {
  useState,
  useEffect,
  FC,
- ReactNode
+ ReactNode,
+ use
 } from "react";
 import dynamic from 'next/dynamic';
 const CheckDialog = dynamic(() => import("dialog/Check"));
@@ -43,20 +44,10 @@ export default function Reset() {
  const [dialogOpen, setDialogOpen] = useState<boolean>(false),
  [dialogContext, setDialogContext] = useState<string>(""),
  [dialogTitle, setDialogTitle] = useState<string>(""),
- [cacheUsed, setCacheUsed] = useState<number>(1),
- [cacheAll, setCacheAll] = useState<number>(2),
- [load, setLoad] = useState<boolean>(false),
+ cacheUsed = use(getCache("usage")),
+ cacheAll = use(getCache("quota")),
  [dialogOnDone, setDialogOnDone] = useState<() => any>(() => null);
- useEffect(() => {
- (async () => {
- const usageValue = await getCache("usage")
- setCacheUsed(usageValue);
- const quotaValue = await getCache("quota");
- setCacheAll(quotaValue);
- })();
- setLoad(true);
- }, []);
- return load && (
+ return (
  <ErrorBoundary>
  <Stack direction={direction} spacing={{
  xs: 2,

diff --git a/packages/core/src/app/setting/appearance/page.tsx b/packages/core/src/app/setting/appearance/page.tsx
@@ -28,24 +28,21 @@ import {
  Slider,
  Paper,
  PaletteMode,
- SvgIconTypeMap,
  InputLabel
 } from '@mui/material';
 import hues from './hues';
 import shades from './shades';
 import {
  Dispatch,
- FC,
  useContext,
  useId
 } from 'react';
-import {
- OverridableComponent
-} from '@mui/material/OverridableComponent';
 import useStoragedState from 'useStoragedState';
 import defaultInternalPalette from './defaultInternalPalette';
 import defaultPalette from './defaultPalette';
-import { Switcher } from 'setting/Switcher';
+import {
+ Switcher
+} from 'setting/Switcher';
 function ColorTool() {
  const palette = useContext(paletteColors),
  theme = useTheme(),
@@ -225,11 +222,7 @@ function ColorTool() {
  justifyContent: "space-evenly",
  mb: 2
  }}>
- {([["light", LightMode], ["dark", DarkMode], ["system", BrightnessMedium]] satisfies [PaletteMode | "system", (
- OverridableComponent<SvgIconTypeMap<{}, "svg">> & {
- muiName: string
- }
- ) | FC][]).map(item => {
+ {([["light", LightMode], ["dark", DarkMode], ["system", BrightnessMedium]] satisfies [PaletteMode | "system", typeof LightMode][]).map(item => {
  const isThis = darkMode.mode === item[0],
  Icon = item[1];
  return (

diff --git a/packages/core/src/app/setting/getCache.tsx b/packages/core/src/app/setting/getCache.tsx
@@ -1,7 +1,13 @@
+import {
+ isBrowser
+} from "layout/layoutClient";
 import {
  MB
 } from "./consts";
 export default async function getCache(type: "usage" | "quota") {
- const estimate = await navigator.storage.estimate();
- return type === "usage" ? estimate.usage / MB : estimate.quota / MB;
+ if (isBrowser()) {
+ const estimate = await navigator.storage.estimate();
+ return type === "usage" ? estimate.usage / MB : estimate.quota / MB;
+ }
+ return 0;
 }