Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cấu trúc lại template theo Layered Architecture #33

Open
bit-thuynt opened this issue Aug 26, 2021 · 3 comments
Open

Cấu trúc lại template theo Layered Architecture #33

bit-thuynt opened this issue Aug 26, 2021 · 3 comments

Comments

@bit-thuynt
Copy link

Nội dung cần làm

  1. Cấu trúc lại template theo Layered Architecture:
    https://martinfowler.com/bliki/PresentationDomainDataLayering.html
    https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html

  2. Sử dụng path aliases để tránh sử dụng ../../ ở import path

    duoctv-trainning/src/components/templates/admin/news/list.tsx

    Lines 10 to 12 in 8205062

    import { DeleteNewsById } from "../../../../firestore/news/deleteNewsById";
    import { useState } from "react";
    import { NewsPagination } from "../../../../firestore/news/newsPagination";

    Tài liệu tham khảo: https://nextjs.org/docs/advanced-features/module-path-aliases
@bit-thuynt bit-thuynt mentioned this issue Aug 26, 2021
Merged
@duoctvd
Copy link
Owner

duoctvd commented Aug 30, 2021

Cấu trúc lại template theo Layered Architecture:
https://martinfowler.com/bliki/PresentationDomainDataLayering.html
https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
Em đã đọc tài liệu của nó, hiểu tinh thần là mình sẽ phân chưa ra lớp giống như MVC (Presentation Domain Data)

hiện tại thì code của mình, em thấy nó cũng chia ra đc theo cấu trúc xử lý riêng nhất định
https://gyazo.com/4dd4e823052f8cea8a852f6fbb5957f7

Nhưng cái mình cần làm trong task này có phải là cấu trúc lại hết tất cả theo dạng kiểu này k chị?
https://gyazo.com/9c6eb7fefcc3eb159463df8b3ccfc69f
https://dev.to/joaosczip/clean-architecture-a-little-introduction-4ag6

hay chỉ cấu trúc lại 1 số phần nào đó?

Vì em đang tìm 1 cái sample nào đó để refer và cấu trúc theo cho đỡ sai, 2 links tài liệu trên họ chỉ nói về tư tưởng lý thuyết chứ k đề cập 1 sample cho mình dễ hình dung nhỉ

@bit-thuynt
Copy link
Author

@duoctvd vậy em làm số 2 trước đi.

@bit-thuynt
Copy link
Author

@duoctvd
#33 (comment)

Phần M trong MVC thì cũng đã chia ra ok rồi, còn phần VC thì còn hơn lung tung xíu
Ví dụ như ở new list https://github.com/duoctvd/duoctv-trainning/blob/main/src/components/templates/admin/news/list.tsx
Mấy cái xử lý như này sẽ thuộc C (controller or container):

duoctv-trainning/src/components/templates/admin/news/list.tsx

Line 23 in e1d8115

const newNewsList = await NewsPagination("next", newsListResult);

duoctv-trainning/src/components/templates/admin/news/list.tsx

Line 31 in e1d8115

const prevPage = async () => {

duoctv-trainning/src/components/templates/admin/news/list.tsx

Line 60 in e1d8115

async function handleDelete(id: string) {

Còn mấy cái này thì thuộc V (view or presenter):

duoctv-trainning/src/components/templates/admin/news/list.tsx

Lines 69 to 80 in e1d8115

<Head>
<Title>News List</Title>
</Head>
<Heading>News List</Heading>
<Container>
<TotalCount>
<B>Total: 20 news</B>
<Link href={`/admin/news/form`} passHref>
<AddNewsButton>Add new</AddNewsButton>
</Link>

Đối với presenter thì chỉ nhận props truyền vào rồi hiển thị ra view chứ không có mấy bước xử lý tạo hàm này nọ, mấy cái nào phức tạp sẽ thuộc xử lý của container.

Cách làm là em sẽ tách list.ts ra như sau

  • list/index.tsx => container khai báo mấy function, get data, xử lý onlick ....
  • list/presenter.tsx => nhận props và hiển thị theo props

@duoctvd duoctvd mentioned this issue Aug 31, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@duoctvd @bit-thuynt