refactor: split components

Author: Evyweb

.dependency-cruiser.js

@@ -75,7 +75,7 @@ module.exports = {
     /* Which modules not to follow further when encountered */
     doNotFollow: {
       /* path: an array of regular expressions in strings to match against */
-      path: ['node_modules']
+      path: ['node_modules', 'spec']
     },
 
     /* Which modules to exclude */

app/_components/Background.tsx renamed to app/_components/Background/Background.tsx

@@ -1,34 +1,33 @@
 'use client';
 
-import React, {FormEvent, useState} from 'react';
-import {useCreateCharacterController} from "@/app/_hooks/useCreateCharacterController";
+import React from 'react';
 import {Button, Flex, Text} from '@radix-ui/themes';
+import {useCreateCharacterForm} from "@/app/_features/CreateCharacter/useCreateCharacterForm";
+import {CreateCharacterFormViewModel} from "@/src/client/presentation/viewModels/CreateCharacterFormViewModel";
 
-const CreateCharacterForm: React.FC = () => {
-    const {createCharacter} = useCreateCharacterController();
+interface CreateCharacterFormProps {
+    viewModel: CreateCharacterFormViewModel;
+}
 
-    const [name, setName] = useState('');
-    const [species, setSpecies] = useState('');
-    const [homeworld, setHomeworld] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-
-    const handleSubmit = async (e: FormEvent) => {
-        setIsLoading(true);
-        e.preventDefault();
-        createCharacter({name, species, homeworld});
-        setName('');
-        setSpecies('');
-        setHomeworld('');
-        setIsLoading(false);
-    };
+const CreateCharacterForm: React.FC<CreateCharacterFormProps> = ({viewModel}: CreateCharacterFormProps) => {
+    const {
+        name,
+        species,
+        homeworld,
+        isLoading,
+        setName,
+        setSpecies,
+        setHomeworld,
+        handleSubmit
+    } = useCreateCharacterForm(viewModel);
 
     return (
         <form onSubmit={handleSubmit}>
             <Flex direction="row" gap="3">
                 <input
                     className="Input"
                     id="name"
-                    placeholder="Enter character name"
+                    placeholder={viewModel.name.placeholder}
                     value={name}
                     onChange={(e) => setName(e.target.value)}
                     required

app/_components/CreateCharacterForm.tsx renamed to app/_features/CreateCharacter/CreateCharacterForm.tsx

@@ -0,0 +1,31 @@
+import CreateCharacterForm from "@/app/_features/CreateCharacter/CreateCharacterForm";
+import {CreateCharacterFormViewModel} from "@/src/client/presentation/viewModels/CreateCharacterFormViewModel";
+
+const CreateCharacterFormContainer = () => {
+    const viewModel: CreateCharacterFormViewModel = {
+        name: {
+            initialValue: '',
+            placeholder: 'Enter character name'
+        },
+        species: {
+            initialValue: '',
+            placeholder: 'Enter character species'
+        },
+        homeworld: {
+            initialValue: '',
+            placeholder: 'Enter character homeworld'
+        },
+        button: {
+            text: '+ Add character'
+        },
+        isLoading: {
+            initialValue: false
+        }
+    };
+
+    return (
+       <CreateCharacterForm viewModel={viewModel}/>
+    );
+};
+
+export default CreateCharacterFormContainer;

app/_features/CreateCharacter/CreateCharacterFormContainer.tsx

@@ -1,22 +1,15 @@
-import {useMutation, useQueryClient} from "@tanstack/react-query";
+import {FormEvent, useState} from "react";
+import {CreateCharacterFormViewModel} from "@/src/client/presentation/viewModels/CreateCharacterFormViewModel";
 import {useDependency} from "@/app/_hooks/useDependency";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {CharacterViewModel} from "@/src/client/presentation/viewModels/CharacterViewModel";
+import {CharacterToCreateDTO} from "@/src/client/application/ports/ICharacterRepository";
 
-interface CharacterToCreateDTO {
-    name: string;
-    species: string;
-    homeworld: string;
-}
-
-interface IUseCreateCharacterController {
-    createCharacter: (characterToCreate: CharacterToCreateDTO) => void;
-}
-
-export const useCreateCharacterController = (): IUseCreateCharacterController => {
+export const useCreateCharacterForm = (viewModel: CreateCharacterFormViewModel) => {
     const controller = useDependency('CREATE_CHARACTER_CONTROLLER');
     const queryClient = useQueryClient();
 
-    const mutationResult = useMutation({
+    const {mutate: createCharacter} = useMutation({
         mutationFn: (characterToCreate: CharacterToCreateDTO) => controller.createCharacter(characterToCreate),
         onMutate: async (characterToCreate) => {
             const previousCharacters = queryClient.getQueryData<{ characters: CharacterViewModel[] }>(['characters']);
@@ -48,7 +41,29 @@ export const useCreateCharacterController = (): IUseCreateCharacterController =>
         },
     });
 
+    const [name, setName] = useState(viewModel.name.initialValue);
+    const [species, setSpecies] = useState(viewModel.species.initialValue);
+    const [homeworld, setHomeworld] = useState(viewModel.homeworld.initialValue);
+    const [isLoading, setIsLoading] = useState(viewModel.isLoading.initialValue);
+
+    const handleSubmit = async (e: FormEvent) => {
+        setIsLoading(true);
+        e.preventDefault();
+        createCharacter({name, species, homeworld});
+        setName('');
+        setSpecies('');
+        setHomeworld('');
+        setIsLoading(false);
+    };
+
     return {
-        createCharacter: mutationResult.mutate,
+        name,
+        species,
+        homeworld,
+        isLoading,
+        setName,
+        setSpecies,
+        setHomeworld,
+        handleSubmit
     };
-};
+}

app/_hooks/useCreateCharacterController.tsx renamed to app/_features/CreateCharacter/useCreateCharacterForm.tsx

@@ -1,13 +1,13 @@
 import {render} from "@testing-library/react";
-import CharactersList from "@/app/_components/CharactersList";
+import CharactersList from "@/app/_features/GetCharacters/CharactersList";
 import {DependencyProvider} from "@/app/_providers/DependencyProvider";
 import {ReactQueryClientProvider} from "@/app/_providers/ReactQueryClientProvider";
-import {GetCharactersViewModel} from "@/src/client/presentation/viewModels/GetCharactersViewModel";
 import {Container, createContainer} from "@evyweb/ioctopus";
 import {GetCharactersUseCase} from "@/src/client/application/usecases/GetCharacters/GetCharactersUseCase";
 import {GetCharactersController} from "@/src/client/presentation/controllers/GetCharacters/GetCharactersController";
 import {DI_SYMBOLS} from "@/src/client/DependencyInjection";
 import {InMemoryCharacterRepository} from "@/src/client/specs/utils/fakes/InMemoryCharacterRepository";
+import {CharactersListViewModel} from "@/src/client/presentation/viewModels/CharactersListViewModel";
 
 describe('CharactersList', () => {
     let container: Container;
@@ -22,31 +22,35 @@ describe('CharactersList', () => {
     describe('When the characters list is displayed', () => {
         it('should have all initially given characters', async () => {
             // Arrange
-            const initialCharacters = {
-                characters: [
-                    {
-                        id: '1',
-                        name: 'Luke Skywalker',
-                        description: 'Human from Tatooine',
-                        loadedFrom: 'Luke Test data',
-                    },
-                    {
-                        id: '2',
-                        name: 'Leia Organa',
-                        description: 'Human from Alderaan',
-                        loadedFrom: 'Leia Test data',
-                    },
-                    {
-                        id: '3',
-                        name: 'Han Solo',
-                        description: 'Human from Corellia',
-                        loadedFrom: 'Han Test data',
-                    },
-                ]
+            const viewModel: CharactersListViewModel = {
+                loadingMessage: 'Loading characters...',
+                errorMessage: 'An error occurred while loading characters',
+                initialData: {
+                    characters: [
+                        {
+                            id: '1',
+                            name: 'Luke Skywalker',
+                            description: 'Human from Tatooine',
+                            loadedFrom: 'Luke Test data',
+                        },
+                        {
+                            id: '2',
+                            name: 'Leia Organa',
+                            description: 'Human from Alderaan',
+                            loadedFrom: 'Leia Test data',
+                        },
+                        {
+                            id: '3',
+                            name: 'Han Solo',
+                            description: 'Human from Corellia',
+                            loadedFrom: 'Han Test data',
+                        },
+                    ]
+                }
             };
 
             // Act
-            const {findByText} = renderCharacterList(initialCharacters, container);
+            const {findByText} = renderCharacterList(viewModel, container);
 
             // Assert
             expect(await findByText('Luke Skywalker')).toBeInTheDocument();
@@ -63,11 +67,11 @@ describe('CharactersList', () => {
         });
     });
 
-    function renderCharacterList(initialCharacters: GetCharactersViewModel, container: Container) {
+    function renderCharacterList(viewModel: CharactersListViewModel, container: Container) {
         return render(
             <DependencyProvider customContainer={container}>
                 <ReactQueryClientProvider>
-                    <CharactersList initialData={initialCharacters}/>
+                    <CharactersList viewModel={viewModel}/>
                 </ReactQueryClientProvider>
             </DependencyProvider>
         );

app/_components/CharactersList.spec.tsx renamed to app/_features/GetCharacters/CharactersList.spec.tsx

@@ -1,51 +1,42 @@
 'use client';
 
-import {useAutoAnimate} from '@formkit/auto-animate/react';
-import {useGetCharactersController} from "@/app/_hooks/useGetCharactersController";
-import {GetCharactersViewModel} from "@/src/client/presentation/viewModels/GetCharactersViewModel";
 import {Avatar, Box, Card, Flex, Text} from '@radix-ui/themes';
 import {PersonIcon} from '@radix-ui/react-icons';
+import {useCharactersList} from "@/app/_features/GetCharacters/useCharactersList";
+import {CharactersListViewModel} from "@/src/client/presentation/viewModels/CharactersListViewModel";
+import {CharacterViewModel} from "@/src/client/presentation/viewModels/CharacterViewModel";
 
 interface CharactersListProps {
-    initialData: GetCharactersViewModel
+    viewModel: CharactersListViewModel
 }
 
-const CharactersList = ({initialData}: CharactersListProps) => {
-    const {data, isLoading, isError} = useGetCharactersController(initialData);
-    const [animationParent] = useAutoAnimate();
+const CharactersList = ({viewModel}: CharactersListProps) => {
+    const {isLoading, isError, characters, animationParent} = useCharactersList(viewModel);
 
-    if (isLoading) return <Text size="3">Loading...</Text>;
-    if (isError) return <Text size="3" color="red">Error fetching characters</Text>;
+    if (isLoading) return <Text size="3">{viewModel.loadingMessage}</Text>;
+    if (isError) return <Text size="3" color="red">{viewModel.errorMessage}</Text>;
 
     return (
         <Flex direction="column" gap="2" ref={animationParent}>
-            {data?.characters.map((character: {
-                id: string;
-                name: string;
-                description: string;
-                loadedFrom: string;
-            }) => (
+            {characters.map((character: CharacterViewModel) => (
                 <Card
                     key={character.id}
                     size="1">
                     <Flex gap="3" align="center">
                         <Avatar
                             size="3"
                             fallback={<PersonIcon/>}
-                            style={{
-                                backgroundColor: 'var(--color-background-translucent)',
-                            }}
                         />
                         <Box width="100%">
                             <Flex align="center" justify="between">
-                                <div>
+                                <Box>
                                     <Text as="div" size="3" weight="bold" color="iris">
                                         {character.name}
                                     </Text>
                                     <Text as="div" size="2" color="gray">
                                         {character.description}
                                     </Text>
-                                </div>
+                                </Box>
                                 <Text as="div" size="2" color="plum">
                                     {character.loadedFrom}
                                 </Text>

app/_components/CharactersList.tsx renamed to app/_features/GetCharacters/CharactersList.tsx

@@ -1,12 +1,12 @@
-import CharactersList from "@/app/_components/CharactersList";
+import CharactersList from "@/app/_features/GetCharacters/CharactersList";
 import {inject} from "@/src/server/DependencyInjection";
 
 const CharactersListContainer = async () => {
     const controller = inject('LOAD_CHARACTERS_CONTROLLER');
     const viewModel = await controller.loadCharacters();
 
     return (
-        <CharactersList initialData={viewModel}/>
+        <CharactersList viewModel={viewModel}/>
     );
 };
 

app/_components/CharactersListContainer.tsx renamed to app/_features/GetCharacters/CharactersListContainer.tsx

@@ -0,0 +1,23 @@
+import {useAutoAnimate} from "@formkit/auto-animate/react";
+import {CharactersListViewModel} from "@/src/client/presentation/viewModels/CharactersListViewModel";
+import {useDependency} from "@/app/_hooks/useDependency";
+import {useQuery} from "@tanstack/react-query";
+
+export const useCharactersList = (viewModel: CharactersListViewModel) => {
+    const controller = useDependency('GET_CHARACTERS_CONTROLLER');
+
+    const {isLoading, isError, data} = useQuery({
+        queryKey: ['characters'],
+        queryFn: () => controller.getCharacters(),
+        initialData: viewModel.initialData
+    });
+
+    const [animationParent] = useAutoAnimate();
+
+    return {
+        characters: data?.characters || [],
+        isLoading,
+        isError,
+        animationParent
+    };
+}

app/_features/GetCharacters/useCharactersList.tsx

@@ -6,7 +6,7 @@ import {DependencyProvider} from "@/app/_providers/DependencyProvider";
 import {ReactNode} from "react";
 import {ReactQueryClientProvider} from "@/app/_providers/ReactQueryClientProvider";
 import {Container, Theme} from "@radix-ui/themes";
-import Background from "@/app/_components/Background";
+import Background from "@/app/_components/Background/Background";
 
 const geistSans = localFont({
     src: "./fonts/GeistVF.woff",