refactor theme

mebtte · Aug 13, 2024 · 3d43efc · 3d43efc
1 parent 5b98c73
commit 3d43efc
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 40 deletions.
diff --git a/apps/pwa/src/app/index.tsx b/apps/pwa/src/app/index.tsx
@@ -5,16 +5,16 @@ import { ThemeProvider } from 'styled-components';
 import { HashRouter } from 'react-router-dom';
 import App from './app';
 import UncaughtError from './uncaught_error';
-import theme from '../global_states/theme';
 import Head from './head';
+import { useTheme } from '@/global_states/theme';
 
 const fallback = (error: Error) => <UncaughtError error={error} />;
 
 function Wrapper() {
   return (
     <ErrorBoundary fallback={fallback}>
       <HashRouter>
-        <ThemeProvider theme={theme.useState()}>
+        <ThemeProvider theme={useTheme()}>
           <Head />
           <App />
           <GlobalStyle />

diff --git a/apps/pwa/src/global_states/theme/index.ts b/apps/pwa/src/global_states/theme/index.ts
@@ -1,30 +1,26 @@
 import { MINI_MODE_MAX_WIDTH } from '@/constants';
-import XState from '@/utils/x_state';
 import throttle from 'lodash/throttle';
 import scrollbarObserver from './scrollbar_observer';
-import type { DefaultTheme } from 'styled-components';
+import { create } from 'zustand';
+import { Theme } from '@/styled';
 
-const theme = new XState<DefaultTheme>({
+export const useTheme = create<Theme>(() => ({
   miniMode: window.innerWidth <= MINI_MODE_MAX_WIDTH,
   autoScrollbar: scrollbarObserver.getScrollbarWidth() === 0,
-});
+}));
 
 window.addEventListener(
   'resize',
   throttle(
     () =>
-      theme.set((t) => ({
-        ...t,
+      useTheme.setState({
         miniMode: window.innerWidth <= MINI_MODE_MAX_WIDTH,
-      })),
+      }),
     300,
   ),
 );
 scrollbarObserver.onChange(() =>
-  theme.set((t) => ({
-    ...t,
+  useTheme.setState({
     autoScrollbar: scrollbarObserver.getScrollbarWidth() === 0,
-  })),
+  }),
 );
-
-export default theme;
diff --git a/apps/pwa/src/global_states/theme/scrollbar_observer.ts b/apps/pwa/src/global_states/theme/scrollbar_observer.ts
@@ -3,16 +3,16 @@ import Eventin from 'eventin';
 enum EventType {
   RESIZE = 'resize',
 }
-type EventTypeMapData = {
+interface EventTypeMapData {
   [EventType.RESIZE]: null;
-};
+}
 
 export default new (class {
   outer: HTMLDivElement;
 
   inner: HTMLDivElement;
 
-  private eventemitter: Eventin<EventType, EventTypeMapData>;
+  private readonly eventemitter: Eventin<EventType, EventTypeMapData>;
 
   constructor() {
     this.eventemitter = new Eventin<EventType, EventTypeMapData>();

diff --git a/apps/pwa/src/pages/player/controller/controller.tsx b/apps/pwa/src/pages/player/controller/controller.tsx
@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import theme from '@/global_states/theme';
 import { useContext } from 'react';
 import getResizedImage from '@/server/asset/get_resized_image';
 import { type QueueMusic, ZIndex } from '../constants';
@@ -12,6 +11,7 @@ import Context from '../context';
 import playerEventemitter, {
   EventType as PlayerEventType,
 } from '../eventemitter';
+import { useTheme } from '@/global_states/theme';
 
 const toggleLyric = () =>
   playerEventemitter.emit(PlayerEventType.TOGGLE_LYRIC_PANEL, { open: true });
@@ -68,7 +68,7 @@ function Controller() {
     | QueueMusic
     | undefined;
 
-  const { miniMode } = theme.useState();
+  const { miniMode } = useTheme();
   return (
     <Style>
       <ProgressBar

diff --git a/apps/pwa/src/pages/player/controller/operation.tsx b/apps/pwa/src/pages/player/controller/operation.tsx
@@ -10,14 +10,14 @@ import {
   MdReadMore,
   MdOutlinePostAdd,
 } from 'react-icons/md';
-import theme from '@/global_states/theme';
 import { CSSVariable } from '@/global_style';
 import playerEventemitter, {
   EventType as PlayerEventType,
 } from '../eventemitter';
 import { QueueMusic } from '../constants';
 import notice from '@/utils/notice';
 import { t } from '@/i18n';
+import { useTheme } from '@/global_states/theme';
 
 const openPlaylistPlayqueueDrawer = () =>
   playerEventemitter.emit(PlayerEventType.OPEN_PLAYLIST_PLAYQUEUE_DRAWER, null);
@@ -56,7 +56,7 @@ function Operation({
   paused: boolean;
   loading: boolean;
 }) {
-  const { miniMode } = theme.useState();
+  const { miniMode } = useTheme();
   return (
     <Style>
       {miniMode ? null : (

diff --git a/apps/pwa/src/pages/player/header/index.tsx b/apps/pwa/src/pages/player/header/index.tsx
@@ -1,7 +1,6 @@
 import { memo } from 'react';
 import styled from 'styled-components';
 import Cover from '@/components/cover';
-import theme from '@/global_states/theme';
 import IconButton from '@/components/icon_button';
 import { MdMenu, MdSearch } from 'react-icons/md';
 import useNavigate from '@/utils/use_navigate';
@@ -12,6 +11,7 @@ import useTitle from './use_title';
 import e, { EventType } from '../eventemitter';
 import useTitlebar from './use_titlebar';
 import { HEADER_HEIGHT } from '../constants';
+import { useTheme } from '@/global_states/theme';
 
 const openSidebar = () => e.emit(EventType.MINI_MODE_OPEN_SIDEBAR, null);
 const Style = styled.div`
@@ -33,7 +33,7 @@ const Style = styled.div`
 
 function Header() {
   const navigate = useNavigate();
-  const { miniMode } = theme.useState();
+  const { miniMode } = useTheme();
   const title = useTitle();
   const { left, right } = useTitlebar();
 

diff --git a/apps/pwa/src/pages/player/header/search.tsx b/apps/pwa/src/pages/player/header/search.tsx
@@ -10,24 +10,24 @@ import {
 import { PLAYER_PATH, ROOT_PATH } from '@/constants/route';
 import useNavigate from '@/utils/use_navigate';
 import Input from '@/components/input';
-import theme from '@/global_states/theme';
 import { Query } from '@/constants';
 import { useLocation } from 'react-router-dom';
 import parseSearch from '@/utils/parse_search';
 import { t } from '@/i18n';
 import capitalize from '#/utils/capitalize';
 import eventemitter, { EventType } from '../eventemitter';
+import { useTheme } from '@/global_states/theme';
 
 const style: CSSProperties = {
-  // @ts-expect-error
+  // @ts-expect-error: existed css property
   WebkitAppRegion: 'no-drag',
   width: 180,
 };
 
 function Wrapper() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { miniMode } = theme.useState();
+  const { miniMode } = useTheme();
 
   const ref = useRef<HTMLInputElement>(null);
 

diff --git a/apps/pwa/src/pages/player/header/use_titlebar.ts b/apps/pwa/src/pages/player/header/use_titlebar.ts
@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
-import theme from '@/global_states/theme';
 import useTitlebarAreaRect from '@/utils/use_titlebar_area_rect';
 import useWindowWidth from '@/utils/use_window_width';
+import { useTheme } from '@/global_states/theme';
 
 const INITIAL_LEFT = 20;
 const INITIAL_RIGHT = 20;
 
 export default () => {
-  const { miniMode } = theme.useState();
+  const { miniMode } = useTheme();
   const windowWidth = useWindowWidth();
   const rect = useTitlebarAreaRect();
 

diff --git a/apps/pwa/src/pages/player/pages/search/index.tsx b/apps/pwa/src/pages/player/pages/search/index.tsx
@@ -2,7 +2,6 @@ import { Query } from '@/constants';
 import styled, { css } from 'styled-components';
 import TabList from '@/components/tab_list';
 import useNavigate from '@/utils/use_navigate';
-import theme from '@/global_states/theme';
 import Input from './input';
 import { HEADER_HEIGHT, SearchTab } from '../../constants';
 import Page from '../page';
@@ -13,6 +12,7 @@ import {
 } from './constants';
 import Content from './content';
 import useTab from './use_tab';
+import { useTheme } from '@/global_states/theme';
 
 const Style = styled(Page)`
   position: relative;
@@ -54,7 +54,7 @@ function Search() {
     <Style>
       <Content tab={tab} />
       <div className="toolbar">
-        {theme.useState().miniMode ? <Input /> : null}
+        {useTheme().miniMode ? <Input /> : null}
         <TabList<SearchTab>
           current={tab}
           tabList={TAB_LIST}

diff --git a/apps/pwa/src/pages/player/pages/setting/volume.tsx b/apps/pwa/src/pages/player/pages/setting/volume.tsx
@@ -1,7 +1,7 @@
 import { type CSSProperties, memo } from 'react';
 import setting from '@/global_states/setting';
 import Slider from '@/components/slider';
-import theme from '@/global_states/theme';
+import { useTheme } from '@/global_states/theme';
 import { t } from '@/i18n';
 import Item from './item';
 import { itemStyle } from './constants';
@@ -26,7 +26,7 @@ function Volume() {
       <Slider
         current={playerVolume}
         onChange={onVolumnChange}
-        style={theme.useState().miniMode ? miniModeSliderStyle : sliderStyle}
+        style={useTheme().miniMode ? miniModeSliderStyle : sliderStyle}
       />
     </Item>
   );

diff --git a/apps/pwa/src/pages/player/sidebar/index.tsx b/apps/pwa/src/pages/player/sidebar/index.tsx
@@ -1,10 +1,10 @@
 import { CSSVariable } from '@/global_style';
-import theme from '@/global_states/theme';
 import styled from 'styled-components';
 import autoScrollbar from '@/style/auto_scrollbar';
 import { WIDTH } from './constants';
 import Content from './content';
 import MiniMode from './mini_mode';
+import { useTheme } from '@/global_states/theme';
 
 const Placeholder = styled.div`
   width: ${WIDTH}px;
@@ -16,7 +16,7 @@ const Placeholder = styled.div`
 `;
 
 function Sidebar() {
-  if (theme.useState().miniMode) {
+  if (useTheme().miniMode) {
     return <MiniMode />;
   }
   return (

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -173,7 +173,8 @@
     "workbox-strategies": "^6.5.4",
     "workbox-webpack-plugin": "^6.5.4",
     "workbox-window": "^6.5.4",
-    "xss": "^1.0.14"
+    "xss": "^1.0.14",
+    "zustand": "^4.5.4"
   },
   "overrides": {
     "react": "^18.1.0",