refactor: refactor tictactoe example

Author: chungheon_yi

apps/docs/stories/scope/tictactoe/App.tsx

@@ -1,6 +1,8 @@
 import { ComposeProviders } from '@lodado/react-namespace'
 import { useCallback } from 'react'
 
+import PlayerRepository from './components/models/PlayerRepository'
+import TicTacToe from './components/models/TicTacToe'
 import {
   BoardProvider,
   createUser1Scope,
@@ -9,8 +11,6 @@ import {
   ScopeContainerProvider,
 } from './components/Provider'
 import TicTacToeGame from './components/TicTacToeGame'
-import PlayerRepository from './models/PlayerRepository'
-import TicTacToe from './models/TicTacToe'
 
 export const TicTacToeExample = () => {
   const game = useCallback(() => new TicTacToe(), [])

apps/docs/stories/scope/tictactoe/components/Provider.tsx

@@ -1,7 +1,7 @@
 import { createNamespaceContext, createNamespaceScope, createScopeContainer, Scope } from '@lodado/react-namespace'
 
-import PlayerRepository from '../models/PlayerRepository'
-import TicTacToe from '../models/TicTacToe'
+import PlayerRepository from './models/PlayerRepository'
+import TicTacToe from './models/TicTacToe'
 
 export const [createRepositoryProvider, createRepositoryScope] = createNamespaceScope('TicTacToeRepository')
 

apps/docs/stories/scope/tictactoe/components/TicTacToeGame.tsx

@@ -1,34 +1,14 @@
-import { TicTacToeUseCase } from '../models/TicTacToeUsecase'
-import { useBoardNamespaceContext, useBoardNamespaceStores, useRepositoryContext, useScopeContainer } from './Provider'
+import useTicTacToeAdapter from './useTicTacToeAdapter'
 
 const TicTacToeGame = () => {
-  const { user1: player1Scope, user2: player2Scope } = useScopeContainer()
-
-  const { turn, board } = useBoardNamespaceStores((state) => {
-    return { turn: state.turn, board: state.board }
-  })
-
-  // you can swap scope whatever you want
-  const currentUserScope = turn % 2 === 0 ? player1Scope : player2Scope
-
-  const game = useBoardNamespaceContext()!
-  const repository = useRepositoryContext(currentUserScope.__scopeTicTacToeRepository)!
-  const useCase = new TicTacToeUseCase(game, repository)
-
-  const handleMove = async (row: number, col: number) => {
-    await useCase.play({ row, col })
-  }
-
-  const resetGame = async () => {
-    await useCase.resetGame()
-  }
+  const { board, icon, winner, handleMove, resetGame } = useTicTacToeAdapter()
 
   return (
     <div>
       <h2>Tic Tac Toe</h2>
-      <span>current Player : {repository?.getIcon()}</span>
+      <span>current Player : {icon}</span>
 
-      {game.getWinner() && <p>Winner: {game.getWinner()}</p>}
+      {winner && <p>Winner: {winner}</p>}
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 100px)' }}>
         {board.map((row, rowIndex) =>
           row.map((cell, colIndex) => (
@@ -39,7 +19,7 @@ const TicTacToeGame = () => {
               key={`${rowIndex}-${colIndex}`}
               style={{ width: '100px', height: '100px', fontSize: '24px' }}
               onClick={() => handleMove(rowIndex, colIndex)}
-              disabled={!!cell || !!game.getWinner()}
+              disabled={!!cell || !!winner}
             >
               {cell}
             </button>

apps/docs/stories/scope/tictactoe/models/PlayerRepository.ts renamed to apps/docs/stories/scope/tictactoe/components/models/PlayerRepository.ts

@@ -0,0 +1,36 @@
+import { TicTacToeUseCase } from './models/TicTacToeUsecase'
+import { useBoardNamespaceContext, useBoardNamespaceStores, useRepositoryContext, useScopeContainer } from './Provider'
+
+const useTicTacToeAdapter = () => {
+  const { user1: player1Scope, user2: player2Scope } = useScopeContainer()
+
+  const { turn, board, winner } = useBoardNamespaceStores((state) => {
+    return { turn: state.turn, board: state.board, winner: state.winner }
+  })
+
+  // you can swap scope whatever you want
+  const currentUserScope = turn % 2 === 0 ? player1Scope : player2Scope
+
+  const game = useBoardNamespaceContext()!
+  const repository = useRepositoryContext(currentUserScope.__scopeTicTacToeRepository)!
+  const useCase = new TicTacToeUseCase(game, repository)
+
+  const handleMove = async (row: number, col: number) => {
+    await useCase.play({ row, col })
+  }
+
+  const resetGame = async () => {
+    await useCase.resetGame()
+  }
+
+  return {
+    board,
+    turn,
+    winner,
+    icon: repository.getIcon(),
+    handleMove,
+    resetGame,
+  }
+}
+
+export default useTicTacToeAdapter