V0.3.0 (#1)

* add logic to hook

* add gh-pages to dev dependencies

Co-authored-by: nhatnm <[email protected]>

README.md

@@ -1,71 +1,118 @@
 # Clean Architecture
-<img src="./clean-architecture.webp"/>
+<img src="./clean-architecture.png" style="max-width: 800px;"/>
 
-- ## Folder style ❤️
+## Folder style ❤️
 <pre>
 .
 ├── modules
 │   ├── transaction
-│   │   ├── apdapter
-│   │   │   ├── createTransactionAdapter.ts
-│   │   │   └── deleteTransactionApdapter.ts
-│   │   ├── presentation
+│   │   ├── adapters
+│   │   │   ├── index.ts
+│   │   │   ├── useCreateTransactionAdapter.ts
+│   │   │   ├── useDeleteTransactionAdapter.ts
+│   │   │   └── useGetAllTransactionAdapter.ts
+│   │   ├── domains
+│   │   │   ├── transaction.entity.ts
+│   │   │   ├── transaction.model.ts
+│   │   │   └── transaction.repository.ts
+│   │   ├── presentations
 │   │   │   ├── TransactionCreate
+│   │   │   │   ├── index.tsx
 │   │   │   │   ├── style.css
 │   │   │   │   └── TransactionCreate.tsx
-│   │   │   └── TransactionList
-│   │   │       ├── index.tsx
-│   │   │       ├── style.css
-│   │   │       ├── TransactionItem.tsx
-│   │   │       └── TransactionList.tsx
-│   │   ├── use-case
-│   │   │   └── spendMoreThanIncomeUseCase.ts
-│   │   ├── config.ts
-│   │   ├── transaction.entity.ts
-│   │   ├── transaction.model.ts
-│   │   └── transaction.repository.ts
+│   │   │   ├── TransactionList
+│   │   │   │   ├── index.tsx
+│   │   │   │   ├── style.css
+│   │   │   │   ├── TransactionItem.tsx
+│   │   │   │   └── TransactionList.tsx
+│   │   │   └── .DS_Store
+│   │   ├── use-cases
+│   │   │   ├── createTransactionUseCase.ts
+│   │   │   ├── deleteTransactionUseCase.ts
+│   │   │   └── index.ts
+│   │   └── helper.ts
 │   └── user
+│      
 ├── utils
-│   ├── dateUtils.ts
+│   ├── dateUtil.ts
 │   ├── exceptionUtil.ts
 │   └── toastUtil.ts
+├── App.test.tsx
 ├── App.tsx
+├── index.css
+└── index.tsx
+
 </pre>
 
-## Usage 💪
+## Flow 💪
+<img src="./CA-flow.drawio.png" style="max-width: 600px;width:100%"/>
 
-<img src="./Clean-architecture-usage.png" style="max-width: 400px;"/>
+## Usage 🐾
 
+1. Presentation
+
+        export default Feature(){
+            const {state, handleSomething} = useAdapter()
 
---- 
-- ## Other Folder style 😌
-<pre>
-.
-├── adapters
-├── domain
-│   ├── transaction
-│   │   ├── transaction.entity.ts
-│   │   ├── transaction.model.ts
-│   │   └── transaction.repository.ts
-│   └── user
-├── presentations
-│   ├── transaction
-│   │   ├── TransactionCreate
-│   │   │   ├── style.css
-│   │   │   └── TransactionCreate.tsx
-│   │   └── TransactionList
-│   │       ├── style.css
-│   │       ├── TransactionItem.tsx
-│   │       └── TransactionList.tsx
-│   └── user
-├── use-cases
-│   ├── transaction
-│   │   ├── createTransactionUseCase.ts
-│   │   ├── deleteTransactionUseCase.ts
-│   │   └── listTransactionUseCase.ts
-│   └── user
-├── utils
-│   ├── exceptionUtil.ts
-│   └── toastUtil.ts
-├── App.tsx
-</pre>
+            return (
+                <button onClick={handleSomething}>
+                {state}
+                </button>
+            )
+        }
+2. Adapter
+
+        import someUseCase from "../use-cases"
+        
+        export default useAdapter(service: ServiceRepository){
+            const [state, setState] = useState();
+
+            const handleSomething = ()=> {
+               const result = someUseCase.execute();
+               setState(result);
+            }
+            return {state, handleSomething}
+        }
+
+3. Use case
+
+        import service from "../domain/model"
+
+        export class SomeUseCase {
+            execute (){
+                handleSomeUserStories();
+                service.doSomething();
+            }
+        }
+        
+
+4. Domain
+
+    4.1 Entity
+
+        export interface Something {
+            id: number;
+            ...
+        }
+
+    4.2 Repository
+
+        export interface SomethingRepository {
+            getSomething(): Something;
+            setSomething(st: Something): Something;
+            ...
+        }
+
+    4.3 Model
+
+        export class SomethingService implements SomethingRepository {
+            getSomething(){
+                callApi();
+            }
+
+            setSomething(st: Something){
+                validate(st)
+                callApi(st)
+            }
+        }
+        

package.json

@@ -2,6 +2,7 @@
   "name": "clean-architecture",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://milhlhat.github.io/react-clean-architecture",
   "dependencies": {
     "@formkit/auto-animate": "^1.0.0-beta.5",
     "@testing-library/jest-dom": "^5.14.1",
@@ -23,7 +24,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -44,6 +47,7 @@
     ]
   },
   "devDependencies": {
-    "@types/uuid": "^9.0.0"
+    "@types/uuid": "^9.0.0",
+    "gh-pages": "^4.0.0"
   }
 }

src/App.tsx

@@ -1,5 +1,5 @@
 
-import { TransactionList } from 'modules/transaction/presentation/TransactionList';
+import { TransactionList } from 'modules/transaction/presentations/TransactionList';
 import { ToastContainer } from 'react-toastify';
 
 function App() {

src/modules/transaction/adapters/index.ts

@@ -1,2 +1,2 @@
-export * from "./createTransactionAdapter";
-export * from "./deleteTransactionAdapter";
+export * from "./useCreateTransactionAdapter";
+export * from "./useDeleteTransactionAdapter";

src/modules/transaction/adapters/useCreateTransactionAdapter.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { abortError, notifyError } from 'utils/exceptionUtil';
+import { toastSuccess } from 'utils/toastUtil';
+import { v4 as uuid } from 'uuid';
+import { Transaction } from "../domains/transaction.entity";
+import { TransactionRepository } from '../domains/transaction.repository';
+import CreateTransactionUseCase from '../use-cases/createTransactionUseCase';
+
+export const useCreateTransactionAdapter = (transactionService: TransactionRepository) => {
+
+    const convertFormToTransaction = (event: React.ChangeEvent<HTMLFormElement>): Transaction => {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        const transactionForm: Transaction = Object.fromEntries(formData.entries()) as unknown as Transaction;
+        return {
+            id: uuid(),
+            amount: Number(transactionForm.amount),
+            date: transactionForm.date,
+            description: transactionForm.description,
+            type: transactionForm.type,
+        };
+    }
+
+    const createTransactionAdapter = useCallback((event: React.ChangeEvent<HTMLFormElement>): boolean => {
+        try {
+            // transform data from third party library or framework (e.g. form, etc.) to domain model
+            const transaction = convertFormToTransaction(event);
+            const allTransactions = transactionService.getTransactions();
+            // execute use case or service
+            // transform data from domain model to third party library framework or UI (e.g. form, component etc.)
+            // interact with UI, e.g. show error message, show success message, etc. (not related to state management)
+
+            const createTransactionUseCase = new CreateTransactionUseCase(transactionService);
+            createTransactionUseCase.execute(transaction);
+            toastSuccess("Thêm thành công");
+            return true
+        } catch (error) {
+            notifyError(error);
+            throw abortError(error);
+        }
+
+    }, [])
+    return { createTransactionAdapter }
+}

src/modules/transaction/adapters/useDeleteTransactionAdapter.ts

@@ -0,0 +1,20 @@
+import { useCallback } from "react";
+import { abortError, notifyError } from "utils/exceptionUtil";
+import { toastSuccess } from "utils/toastUtil";
+import { TransactionRepository } from "../domains/transaction.repository";
+import DeleteTransactionUseCase from "../use-cases/deleteTransactionUseCase";
+
+
+export const useDeleteTransactionAdapter = (transactionService: TransactionRepository) => {
+    const deleteTransactionAdapter =useCallback((id: string): void => {
+        try {
+            const deleteTransactionUseCase = new DeleteTransactionUseCase(transactionService);
+            deleteTransactionUseCase.execute(id);
+            toastSuccess("Xóa thành công");
+        } catch (error) {
+            notifyError(error);
+            throw abortError(error);
+        }   
+    }, [])
+    return { deleteTransactionAdapter }
+}

src/modules/transaction/adapters/useGetAllTransactionAdapter.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from "react";
+import { Transaction } from "../domains/transaction.entity";
+import { TransactionRepository } from "../domains/transaction.repository";
+
+export default function useGetTransactionAdapter(transactionRepo: TransactionRepository) {
+    const [allTransactions, setAllTransactions] = useState<Transaction[]>([]);
+
+    const loadTransactions = useCallback(() => {
+        const transactions = transactionRepo.getTransactions().reverse();
+        if (transactions) {
+            setAllTransactions(transactions);
+        } else {
+            setAllTransactions([]);
+        }
+    }, []);
+
+    useEffect(() => {
+        loadTransactions();
+    }, [loadTransactions]);
+
+    return { allTransactions, loadTransactions }
+}

src/modules/transaction/transaction.entity.ts → src/modules/transaction/domains/transaction.model.ts

@@ -1,6 +1,6 @@
 import { abortError } from "utils/exceptionUtil";
-import { TRANSACTION_KEY } from "./config";
-import { Transaction } from "./transaction.model";
+import { TRANSACTION_KEY } from "../helper";
+import { Transaction } from "./transaction.entity";
 import { TransactionRepository } from "./transaction.repository";
 
 class TransactionService implements TransactionRepository {
@@ -10,7 +10,7 @@ class TransactionService implements TransactionRepository {
         return allTransaction ? JSON.parse(allTransaction) : [];
     }
 
-    getTransactionById(id: string): Transaction {
+    getTransactionById(id: Transaction["id"]): Transaction {
         const allTransactions = this.getTransactions();
         if (!allTransactions || (Array.isArray(allTransactions) && allTransactions.length === 0)) {
             throw new Error("No transactions found");
@@ -68,7 +68,7 @@ class TransactionService implements TransactionRepository {
         return transaction;
     }
 
-    deleteTransaction(id: string): void {
+    deleteTransaction(id: Transaction["id"]): void {
         const allTransactions = this.getTransactions();
         const index = allTransactions.findIndex((t: Transaction) => t.id === id);
         if (index === -1) {