From 9bf08c101e1ee906f678c6c20707c7c717adbd7c Mon Sep 17 00:00:00 2001 From: Eva1ent Date: Mon, 27 Mar 2023 13:16:09 +0800 Subject: [PATCH] Add Jotai to package.json and update Main page to use Jotai instead of Valtio for state management --- package.json | 4 ++-- pnpm-lock.yaml | 34 ++++++++++++++-------------------- src-tauri/tauri.conf.json | 2 +- src/app.tsx | 6 +++++- src/pages/Main/index.tsx | 16 ++++++++-------- src/pages/Main/styles.ts | 3 ++- src/store.ts | 30 +++++++++++++----------------- 7 files changed, 45 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index ef31574..e0f33d5 100644 --- a/package.json +++ b/package.json @@ -25,12 +25,12 @@ "@swan-io/chicane": "1.3.4", "@tauri-apps/api": "1.2.0", "@total-typescript/ts-reset": "0.4.2", + "jotai": "2.0.3", "react": "18.2.0", "react-dom": "18.2.0", "react-use": "17.4.0", "ress": "5.0.2", - "ts-pattern": "4.2.2", - "valtio": "1.10.3" + "ts-pattern": "4.2.2" }, "devDependencies": { "@babel/core": "7.21.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f03a8d5..c6f77ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,6 +18,7 @@ specifiers: core-dts: 0.0.3 eslint: 8.36.0 eslint-config-with-tsconfig: 1.2.3 + jotai: 2.0.3 prettier: 2.8.7 react: 18.2.0 react-dom: 18.2.0 @@ -26,7 +27,6 @@ specifiers: sass: 1.60.0 ts-pattern: 4.2.2 typescript: 5.0.2 - valtio: 1.10.3 vite: 4.2.1 dependencies: @@ -38,12 +38,12 @@ dependencies: '@swan-io/chicane': 1.3.4_react@18.2.0 '@tauri-apps/api': 1.2.0 '@total-typescript/ts-reset': 0.4.2 + jotai: 2.0.3_react@18.2.0 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y ress: 5.0.2 ts-pattern: 4.2.2 - valtio: 1.10.3_react@18.2.0 devDependencies: '@babel/core': 7.21.3 @@ -3281,6 +3281,18 @@ packages: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} dev: true + /jotai/2.0.3_react@18.2.0: + resolution: {integrity: sha512-MMjhSPAL3RoeZD9WbObufRT2quThEAEknHHridf2ma8Ml7ZVQmUiHk0ssdbR3F0h3kcwhYqSGJ59OjhPge7RRg==} + engines: {node: '>=12.20.0'} + peerDependencies: + react: '>=17.0.0' + peerDependenciesMeta: + react: + optional: true + dependencies: + react: 18.2.0 + dev: false + /js-cookie/2.2.1: resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==} dev: false @@ -3802,10 +3814,6 @@ packages: react-is: 16.13.1 dev: true - /proxy-compare/2.5.0: - resolution: {integrity: sha512-f1us0OsVAJ3tdIMXGQx2lmseYS4YXe4W+sKF5g5ww/jV+5ogMadPt+sIZ+88Ga9kvMJsrRNWzCrKPpr6pMWYbA==} - dev: false - /punycode/2.3.0: resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} engines: {node: '>=6'} @@ -4616,20 +4624,6 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /valtio/1.10.3_react@18.2.0: - resolution: {integrity: sha512-t3Ez/+baJ+Z5tIyeaI6nCAbW/hrmcq2jditwg/X++o5IvCdiGirQKTOv1kJq0glgUo13v5oABCVGcinggBfiKw==} - engines: {node: '>=12.20.0'} - peerDependencies: - react: '>=16.8' - peerDependenciesMeta: - react: - optional: true - dependencies: - proxy-compare: 2.5.0 - react: 18.2.0 - use-sync-external-store: 1.2.0_react@18.2.0 - dev: false - /vite/4.2.1_jbbgimbprg6gc6g7l5xgp24u3u: resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 2026240..386f89d 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -8,7 +8,7 @@ }, "package": { "productName": "SensiMouse", - "version": "0.0.1" + "version": "0.0.2" }, "tauri": { "allowlist": { diff --git a/src/app.tsx b/src/app.tsx index d3c19fd..1983fdf 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,9 +1,11 @@ import { type MantineThemeOverride } from '@mantine/core' import { MantineProvider } from '@mantine/core' +import { Provider } from 'jotai/react' import { lazy, useMemo } from 'react' import { match } from 'ts-pattern' import { Router } from './router' +import { store } from './store' import { styled } from './theme' const Main = lazy(() => import('./pages/Main')) @@ -40,7 +42,9 @@ export const App = () => { return ( - {contentView} + + {contentView} + ) diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index 94950d1..51a1155 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -1,7 +1,7 @@ import { Input, Text } from '@mantine/core' -import { useSnapshot } from 'valtio' +import { useAtom } from 'jotai/react' -import { state, updateAccEnabled, updateSen } from '@/store' +import { accEnabledAtom, senAtom } from '@/store' import * as SC from './styles' @@ -14,7 +14,8 @@ const marks = [ ] const Main = () => { - const data = useSnapshot(state) + const [sen, setSen] = useAtom(senAtom) + const [accEnabled, setAccEnabled] = useAtom(accEnabledAtom) return ( @@ -23,12 +24,11 @@ const Main = () => { ({ markLabel: { color: '#55585f' @@ -41,9 +41,9 @@ const Main = () => { size="md" onLabel="ON" offLabel="OFF" - checked={data.accEnabled} + checked={accEnabled} onChange={event => { - updateAccEnabled(event.target.checked) + setAccEnabled(event.target.checked) }} /> diff --git a/src/pages/Main/styles.ts b/src/pages/Main/styles.ts index 975d0cc..7bddaeb 100644 --- a/src/pages/Main/styles.ts +++ b/src/pages/Main/styles.ts @@ -32,7 +32,8 @@ export const xSlider = styled(Slider, { }) export const xSwitch = styled(Switch, { - marginTop: '4px' + marginTop: '4px', + cursor: 'pointer' }) export const xDivider = styled(Divider, { diff --git a/src/store.ts b/src/store.ts index 2fa1300..9760751 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,29 +1,25 @@ -/* eslint-disable functional/immutable-data */ import { invoke } from '@tauri-apps/api/tauri' -import { proxy } from 'valtio' +import { atom, createStore } from 'jotai' import { on } from './helper' -export const state = proxy({ - sen: 0, - accEnabled: false +export const store = createStore() + +export const senAtom = atom(0, (get, set, sen: number) => { + set(senAtom, sen) + invoke('set_mouse_cfg', { sen, accEnabled: get(accEnabledAtom) }) +}) + +export const accEnabledAtom = atom(false, (get, set, accEnabled: boolean) => { + set(accEnabledAtom, accEnabled) + invoke('set_mouse_cfg', { sen: get(senAtom), accEnabled }) }) export const fetchState = async () => { const [sen, accEnabled] = await invoke<[number, boolean]>('get_mouse_cfg') - state.sen = sen - state.accEnabled = accEnabled -} - -export const updateSen = async (sen: number) => { - state.sen = sen - await invoke('set_mouse_cfg', { sen, accEnabled: state.accEnabled }) -} - -export const updateAccEnabled = async (accEnabled: boolean) => { - state.accEnabled = accEnabled - await invoke('set_mouse_cfg', { sen: state.sen, accEnabled }) + store.set(senAtom, sen) + store.set(accEnabledAtom, accEnabled) } fetchState()