Add Jotai to package.json and update Main page to use Jotai instead o…

…f Valtio for state management

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",

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
  },
  "package": {
  "productName": "SensiMouse",
- "version": "0.0.1"
+ "version": "0.0.2"
  },
  "tauri": {
  "allowlist": {

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 (
  <MantineProvider withGlobalStyles withCSSVariables theme={theme}>
  <AppShellScreen id="app-shell-screen">
- <MainContent>{contentView}</MainContent>
+ <Provider store={store}>
+ <MainContent>{contentView}</MainContent>
+ </Provider>
  </AppShellScreen>
  </MantineProvider>
  )

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 (
  <SC.Container>
@@ -23,12 +24,11 @@ const Main = () => {
  <Input.Wrapper label="Sensitivity">
  <SC.xSlider
  size="lg"
- labelAlwaysOn
  marks={marks}
  min={0}
  max={100}
- value={data.sen}
- onChange={updateSen}
+ value={sen}
+ onChange={setSen}
  styles={theme => ({
  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)
  }}
  />
  </Input.Wrapper>

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, {

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()