リファクタリング

OpenAyame · Jan 4, 2025 · 6f0fbc4 · 6f0fbc4
1 parent b8c2dd3
commit 6f0fbc4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/devtools/src/components/DatasetConnectionState.tsx b/devtools/src/components/DatasetConnectionState.tsx
@@ -1,7 +1,7 @@
 import { useStore } from '../store/useStore'
 
 const DatasetConnectionState: React.FC = () => {
-  const ayameConnectionState = useStore((state) => state.ayameConnectionState)
+  const ayameConnectionState = useStore((state) => state.ayame.connectionState)
 
   // playwright の E2E テスト用
   return <div data-testid="connection-state" data-connection-state={ayameConnectionState} />

diff --git a/devtools/src/components/DisconnectButton.tsx b/devtools/src/components/DisconnectButton.tsx
@@ -2,7 +2,7 @@ import type React from 'react'
 import { useStore } from '../store/useStore'
 
 const DisconnectButton: React.FC = () => {
-  const ayameConnection = useStore((state) => state.ayameConnection)
+  const ayameConnection = useStore((state) => state.ayame.connection)
 
   const localMediaStream = useStore((state) => state.mediaStream.local)
 

diff --git a/devtools/src/store/createAyameSlice.ts b/devtools/src/store/createAyameSlice.ts
@@ -2,28 +2,29 @@ import type { Connection } from '@open-ayame/ayame-web-sdk'
 import type { StateCreator } from 'zustand'
 
 export interface AyameSlice {
-  ayameConnection: Connection | null
+  ayame: {
+    connection: Connection | null
+    connectionState: RTCPeerConnectionState
+  }
 
   mediaStream: {
     local: MediaStream | null
     remote: MediaStream | null
   }
 
-  ayameConnectionState: RTCPeerConnectionState
-
   setAyameConnection: (conn: Connection | null) => void
+  setAyameConnectionState: (state: RTCPeerConnectionState) => void
 
   setLocalMediaStream: (stream: MediaStream | null) => void
   setRemoteMediaStream: (stream: MediaStream | null) => void
-
-  setAyameConnectionState: (state: RTCPeerConnectionState) => void
 }
 
 export const createAyameSlice: StateCreator<AyameSlice> = (set, get) => ({
-  ayameConnection: null,
-
-  // とりあえず初期値なので new にしておく
-  ayameConnectionState: 'new' as RTCPeerConnectionState,
+  ayame: {
+    connection: null,
+    // とりあえず初期値なので new にしておく
+    connectionState: 'new' as RTCPeerConnectionState,
+  },
 
   mediaStream: {
     local: null,
@@ -34,11 +35,15 @@ export const createAyameSlice: StateCreator<AyameSlice> = (set, get) => ({
   remoteMediaStream: null,
 
   setAyameConnection: (conn: Connection | null) => {
-    set({ ayameConnection: conn })
+    set((state) => ({
+      ayame: { ...state.ayame, connection: conn },
+    }))
   },
 
-  setAyameConnectionState: (state: RTCPeerConnectionState) => {
-    set({ ayameConnectionState: state })
+  setAyameConnectionState: (connectionState: RTCPeerConnectionState) => {
+    set((state) => ({
+      ayame: { ...state.ayame, connectionState: connectionState },
+    }))
   },
 
   setLocalMediaStream: (stream: MediaStream | null) => {