[#355] Ligretto: migrate Ligretto frontend app to fsd

Co-authored-by: Artem Zverev <[email protected]>

apps/ligretto-frontend/src/containers/app/AppContainer.tsx → apps/ligretto-frontend/src/app/AppContainer.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import { useSelector } from 'react-redux'
 
-import { useMinTimeLoading } from 'hooks/useMinTimeLoader'
-import { Routes } from 'components/routes'
+import { useMinTimeLoading } from 'shared/lib/hooks/useMinTimeLoader'
+import { LoaderScreen } from 'shared/ui/screens/LoaderScreen'
 import { isUserLoadingSelector } from 'ducks/auth'
-import { LoaderScreen } from 'components/screens/LoaderScreen'
+import { Routes } from './routes'
 
 export const AppContainer = () => {
   const isUserLoading = useSelector(isUserLoadingSelector)

apps/ligretto-frontend/src/containers/AuthContainer/AuthContainer.tsx → apps/ligretto-frontend/src/app/AuthContainer.tsx

@@ -4,14 +4,14 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useNavigate } from 'react-router'
 import { ThemeProvider } from '@memebattle/ui'
 
-import { MainLayout } from 'components/layouts/main'
-import { LigrettoLogo } from 'components/LigrettoLogo'
-import { routes } from 'utils/constants'
+import { MainLayout } from 'shared/ui/layouts/main'
+import { LigrettoLogo } from 'shared/ui/LigrettoLogo'
+import { routes } from 'shared/constants'
 import { getMeRequest } from 'ducks/auth/authActions'
 import { tokenSelector } from 'ducks/auth'
-import { ligrettoAuthTheme } from '../../themes/ligrettoAuth'
+import { ligrettoAuthTheme } from './themes/ligrettoAuth'
 
-import { CAS_STATIC_URL, CAS_PARTNER_ID, CAS_URL } from 'config'
+import { CAS_STATIC_URL, CAS_PARTNER_ID, CAS_URL } from 'shared/constants/config'
 
 export const AuthContainer = () => {
   const dispatch = useDispatch()

apps/ligretto-frontend/src/components/routes/Routes.tsx → apps/ligretto-frontend/src/app/routes/Routes.tsx

@@ -1,15 +1,14 @@
-import React from 'react'
 import { Routes as ReactRouterRoutes, Route } from 'react-router-dom'
 
 import { HomePage } from 'pages/home/HomePage'
-import { GamePage } from 'pages/game/GamePage'
-import { AuthContainer } from 'containers/AuthContainer'
-import { routes } from 'utils/constants'
+import { GamePageContainer } from 'pages/game/GamePageContainer'
+import { AuthContainer } from '../AuthContainer'
+import { routes } from 'shared/constants'
 
 export const Routes = () => (
   <ReactRouterRoutes>
     <Route index element={<HomePage />} />
-    <Route path={routes.GAME} element={<GamePage />} />
+    <Route path={routes.GAME} element={<GamePageContainer />} />
     <Route path={routes.AUTH_ALL} element={<AuthContainer />} />
   </ReactRouterRoutes>
 )

apps/ligretto-frontend/src/store/index.ts → apps/ligretto-frontend/src/app/store/index.ts

@@ -1,7 +1,7 @@
 import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
 import createSagaMiddleware from 'redux-saga'
 
-import { IS_DEV_MODE } from 'config'
+import { IS_DEV_MODE } from 'shared/constants/config'
 
 import rootSaga from './rootSaga'
 import { routerMiddleware, createReduxHistory } from './reduxHistoryContext'

apps/ligretto-frontend/src/store/rootSaga.ts → apps/ligretto-frontend/src/app/store/rootSaga.ts

@@ -1,6 +1,6 @@
 import { all, fork, takeLatest } from 'redux-saga/effects'
 
-import { socketSaga } from 'middlewares/saga'
+import { socketSaga } from 'entities/socket'
 import { roomsRootSaga } from 'ducks/rooms'
 import { gameRootSaga } from 'ducks/game'
 import { usersRootSaga } from 'ducks/users'

apps/ligretto-frontend/src/ducks/analytics/analytics.ts

@@ -1,4 +1,4 @@
 import { Analytics } from '@memebattle/analytics'
-import { AMPLITUDE_TOKEN } from 'config'
+import { AMPLITUDE_TOKEN } from 'shared/constants/config'
 
 export const analytics = new Analytics({ apiKey: AMPLITUDE_TOKEN })

apps/ligretto-frontend/src/ducks/game/sagas.ts

@@ -30,9 +30,9 @@ import {
 import { gameIdSelector, isDndEnabledSelector, playerStatusSelector, selectedCardIndexSelector, selectPlayerCardByIndex } from './selectors'
 import { STACK_OPEN_DECK_INDEX } from './utils'
 import { matchPath } from 'react-router-dom'
-import { routes } from 'utils/constants'
+import { routes } from 'shared/constants'
 import { LOCATION_CHANGE, push } from 'redux-first-history'
-import { socketConnectedAction } from 'middlewares/saga/actions'
+import { socketConnectedAction } from 'entities/socket'
 import { locationSelector } from 'ducks/router'
 import { connectToRoomAction } from 'ducks/rooms'
 

apps/ligretto-frontend/src/ducks/rooms/sagas.ts

@@ -13,7 +13,7 @@ import {
 import { replace, push } from 'redux-first-history'
 import { generatePath } from 'react-router-dom'
 
-import { routes } from 'utils/constants'
+import { routes } from 'shared/constants'
 
 import { connectToRoomAction, createRoomAction, getRoomsAction, updateRoomsAction, setErrorRoomsAction, removeRoomAction } from './slice'
 

apps/ligretto-frontend/src/ducks/users/usersSagas.ts

@@ -3,8 +3,8 @@ import type { SagaIterator } from 'redux-saga'
 import type { AxiosResponse } from 'axios'
 import { connectToRoomSuccessAction, userJoinToRoomAction } from '@memebattle/ligretto-shared'
 
-import { getMe, getUsersByIds } from 'api'
-import type { GetMeResponse, GetUsersResponse } from 'api'
+import { getMe, getUsersByIds } from 'shared/api'
+import type { GetMeResponse, GetUsersResponse } from 'shared/api'
 
 import { addUser, addUsers } from './usersActions'
 import type { User } from './usersTypes'

apps/ligretto-frontend/src/ducks/users/usersTypes.ts

@@ -1,4 +1,4 @@
-import type { UserModel } from 'api/apiTypes'
+import type { UserModel } from 'shared/api/apiTypes'
 
 export type User = UserModel & {
   isLoading?: boolean

apps/ligretto-frontend/src/entities/card/index.ts

@@ -0,0 +1,5 @@
+export { Card } from './ui/Card'
+export { CardPlace } from './ui/CardPlace'
+export { CardHotkeyBadge } from './ui/CardHotkeyBadge'
+export { CardsStack } from './ui/CardsStack'
+export { LigrettoPack } from 'features/player'

apps/ligretto-frontend/src/components/blocks/game/Card/Card.tsx → apps/ligretto-frontend/src/entities/card/ui/Card/Card.tsx

@@ -3,7 +3,7 @@ import { CardColors } from '@memebattle/ligretto-shared'
 import { ButtonBase } from '@mui/material'
 import { Typography, useOnClickOutside } from '@memebattle/ui'
 import { styled } from '@mui/material/styles'
-import type { CardPlaceSize } from 'components/blocks/game/CardPlace/CardPlace'
+import type { CardPlaceSize } from '../CardPlace'
 
 type CardSize = 'small' | 'medium' | 'large'
 

apps/ligretto-frontend/src/entities/card/ui/CardPlace/index.ts

@@ -0,0 +1,2 @@
+export { CardPlace } from './CardPlace'
+export type { CardPlaceProps, CardPlaceSize } from './CardPlace'

apps/ligretto-frontend/src/components/blocks/game/CardsRow/CardsRow.tsx → apps/ligretto-frontend/src/entities/card/ui/CardsRow/CardsRow.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react'
-import React from 'react'
 import { Stack, useMediaQuery, useTheme } from '@memebattle/ui'
 
 export const CardsRow = ({ children }: { children: ReactNode }) => {

apps/ligretto-frontend/src/components/blocks/game/stack/Stack.tsx → apps/ligretto-frontend/src/entities/card/ui/CardsStack/CardsStack.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import type { Card as PlayerCard } from '@memebattle/ligretto-shared'
 import { Hotkey } from 'ducks/game'
-import { CardsRow } from 'components/blocks/game/CardsRow'
-import { CardPlace } from 'components/blocks/game/CardPlace'
-import { Card } from 'components/blocks/game/Card'
-import { CardHotkeyBadge } from 'components/blocks/game/CardHotkeyBadge'
+import { CardsRow } from '../CardsRow'
+import { Card } from '../Card'
+import { CardHotkeyBadge } from '../CardHotkeyBadge'
+import { CardPlace } from '../CardPlace'
 
-export interface StackProps {
+export interface CardsStackProps {
   stackOpenDeckCard?: PlayerCard
   stackDeckCards: PlayerCard[]
   onStackOpenDeckCardClick: () => void
@@ -17,7 +17,7 @@ export interface StackProps {
   isStackOpenDeckDarkened: boolean
 }
 
-export const Stack: React.FC<StackProps> = ({
+export const CardsStack: React.FC<CardsStackProps> = ({
   stackOpenDeckCard,
   stackDeckCards,
   onStackOpenDeckCardClick,

apps/ligretto-frontend/src/entities/card/ui/CardsStack/index.ts

@@ -0,0 +1 @@
+export { CardsStack } from './CardsStack'

apps/ligretto-frontend/src/entities/socket/index.ts

@@ -0,0 +1,2 @@
+export { socketSaga } from './model/socket-saga'
+export { socketConnectedAction } from './model/actions'

apps/ligretto-frontend/src/entities/socket/model/actions.ts

@@ -0,0 +1,2 @@
+import { createAction } from '@reduxjs/toolkit'
+export const socketConnectedAction = createAction('@@socket/SOCKET_CONNECTED')

apps/ligretto-frontend/src/middlewares/saga/socket-middleware.ts → apps/ligretto-frontend/src/entities/socket/model/socket-saga.ts

@@ -7,7 +7,7 @@ import type { Socket } from 'socket.io-client'
 
 import { LOCAL_STORAGE_TOKEN_KEY } from 'ducks/auth/constants'
 
-import { LIGRETTO_GAMEPLAY_URL } from '../../config'
+import { LIGRETTO_GAMEPLAY_URL } from 'shared/constants/config'
 import { socketConnectedAction } from './actions'
 
 function socketChannel(socket: Socket): EventChannel<NotUndefined> {

apps/ligretto-frontend/src/features/create-room/index.ts

@@ -0,0 +1 @@
+export { CreateRoomContainer } from './ui/CreateRoomContainer'

apps/ligretto-frontend/src/containers/CreateRoomContainer/CreateRoomContainer.tsx → apps/ligretto-frontend/src/features/create-room/ui/CreateRoomContainer.tsx

@@ -4,8 +4,8 @@ import type { CreateRoomError } from '@memebattle/ligretto-shared/src/dto'
 
 import { createRoomAction, roomsErrorSelector } from 'ducks/rooms'
 
-import { roomNameValidation } from './utils'
-import { InputWithButton } from 'components/InputWithButton'
+import { roomNameValidation } from '../model/roomNameValidator'
+import { InputWithButton } from 'shared/ui/InputWithButton'
 import { Typography } from '@memebattle/ui'
 
 export const CreateRoomContainer = () => {

apps/ligretto-frontend/src/features/player-scores-table/index.ts

@@ -0,0 +1 @@
+export { PlayersScoresTableContainer } from './ui/PlayersScoresTableContainer'

apps/ligretto-frontend/src/containers/PlayersScoresTable/PlayersScoresTable.selectors.ts → apps/ligretto-frontend/src/features/player-scores-table/ui/PlayersScoresTable.selectors.ts

@@ -1,11 +1,11 @@
 import { createSelector } from '@reduxjs/toolkit'
 import orderBy from 'lodash/orderBy'
 
-import { buildCasStaticUrl } from 'utils/buildCasStaticUrl'
+import { buildCasStaticUrl } from 'shared/api/buildCasStaticUrl'
 import { gameResultsSelector, playersIdsSelector } from 'ducks/game'
 import { usersMapSelector } from 'ducks/users'
 import { currentUserIdSelector } from 'ducks/auth'
-import { getRandomAvatar } from 'components/Avatar/getRandomAvatar'
+import { getRandomAvatar } from 'shared/ui/Avatar/getRandomAvatar'
 
 export const playersSelector = createSelector(
   [playersIdsSelector, gameResultsSelector, usersMapSelector, currentUserIdSelector],

apps/ligretto-frontend/src/components/blocks/game/PlayersScoresTable/PlayersScoresTable.tsx → apps/ligretto-frontend/src/features/player-scores-table/ui/PlayersScoresTable.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import last from 'lodash/last'
 import { Box, Grid, Typography, useMediaQuery, useTheme } from '@memebattle/ui'
-import { Avatar } from 'components/Avatar'
+import { Avatar } from 'shared/ui/Avatar'
 
 import { PlayersScoresTableCell } from './PlayersScoresTableCell'
 import { PlayersScoresTableHead } from './PlayersScoresTableHead'

apps/ligretto-frontend/src/containers/PlayersScoresTable/PlayersScoresTableContainer.tsx → apps/ligretto-frontend/src/features/player-scores-table/ui/PlayersScoresTableContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 
-import { PlayersScoresTable } from 'components/blocks/game/PlayersScoresTable'
+import { PlayersScoresTable } from './PlayersScoresTable'
 import { playersSelector } from './PlayersScoresTable.selectors'
 
 export const PlayersScoresTableContainer = () => {

apps/ligretto-frontend/src/features/player/index.ts

@@ -0,0 +1,3 @@
+export { Opponent } from './ui/Opponent'
+export { CardsPanelContainer } from './ui/CardsPanelContainer'
+export { LigrettoPack } from './ui/LigrettoPack'

apps/ligretto-frontend/src/components/blocks/game/CardsPanel/CardsPanel.stories.tsx → apps/ligretto-frontend/src/features/player/ui/CardsPanel/CardsPanel.stories.tsx

@@ -2,7 +2,7 @@ import { CardsPanel } from './CardsPanel'
 import type { Meta, StoryFn } from '@storybook/react'
 import { PlayerStatus } from '@memebattle/ligretto-shared'
 import { Provider } from 'react-redux'
-import { store } from 'store'
+import { store } from 'app/store'
 
 export default {
   component: CardsPanel,

apps/ligretto-frontend/src/components/blocks/game/CardsPanel/CardsPanel.tsx → apps/ligretto-frontend/src/features/player/ui/CardsPanel/CardsPanel.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import { PlayerStatus } from '@memebattle/ligretto-shared'
 
-import { CardsRowContainer } from 'containers/cards-row'
-import { StackContainer } from 'containers/stack'
-import { LigrettoDeckContainer } from 'containers/ligretto-deck/LigrettoDeckContainer'
+import { PlayerCardsStack } from 'features/player/ui/PlayerCardsStack'
+import { LigrettoDeckContainer } from '../LigrettoDeckContainer'
 import { Stack, useMediaQuery, useTheme, Box } from '@memebattle/ui'
 
+import { PlayerRowCardsContainer } from '../PlayerRowCardsContainer'
 import { Player } from '../Player'
 
 export interface CardsPanelProps {
@@ -19,12 +19,12 @@ export interface CardsPanelProps {
 const CardsPanelMobile = () => (
   <Stack mb={2} spacing={1}>
     <Box display="flex" justifyContent="center">
-      <CardsRowContainer />
+      <PlayerRowCardsContainer />
     </Box>
 
     <Box display="flex" justifyContent="center">
       <Stack spacing={1} direction="row">
-        <StackContainer />
+        <PlayerCardsStack />
         <LigrettoDeckContainer />
       </Stack>
     </Box>
@@ -42,7 +42,7 @@ export const CardsPanel: FC<CardsPanelProps> = ({ player }) => {
   return (
     <Box mb={1.5} display="flex" justifyContent="center">
       <Stack spacing={2} direction="row">
-        {player?.status === PlayerStatus.InGame ? [<StackContainer />, <CardsRowContainer />, <LigrettoDeckContainer />] : null}
+        {player?.status === PlayerStatus.InGame ? [<PlayerCardsStack />, <PlayerRowCardsContainer />, <LigrettoDeckContainer />] : null}
         {player ? <Player status={player.status} username={player.username} avatar={player?.avatar} isActivePlayer /> : null}
       </Stack>
     </Box>