make news list layout #23

duoctvd · 2021-07-27T10:10:00Z

2021/07/27

Make news list cms layout: 90% https://gyazo.com/4e7447a14e0431359307f60be080d061
Fix vấn đề lúc trước em từng report cho chị về: Khi F5 hay enter link thì layout nó bị vỡ: Em tham khảo link này styled-component overridden on hot reload vercel/next.js#4068 . Thêm .babelrc file và _document.js file thì thấy nó fixed được: DONE
Make form cms layout buy using react-hook-form ( em tính sẽ dùng https://react-hook-form.com/get-started/ ) : NOT YET
yarn add react hook form : DONE

2021/07/28

Make news list cms layout: DONE https://gyazo.com/4e7447a14e0431359307f60be080d061
Make form cms layout buy using react-hook-form ( em tính sẽ dùng https://react-hook-form.com/get-started/ ) : Doing
Layout: https://gyazo.com/2dcfeae332b2c7c952fc8e48544ff5ff
+ Em đang gắng làm theo tài liệu react-hook-form, nhưng có vẻ nó đang dùng thẻ html bình thường như code dưới đây, em có nên dùng nó kết hợp vời styled component không?

2021/07/29

Apply styled component and TS styled for form: DONE

Url that user can login
https://duoctv-trainning-q63uxzcjs-duoctvd.vercel.app

Preeview url for this task:
https://duoctv-trainning-git-feature-5makenewsmangelayout-duoctvd.vercel.app/admin/news/list
https://duoctv-trainning-git-feature-5makenewsmangelayout-duoctvd.vercel.app/admin/news/form

vercel · 2021-07-27T10:10:04Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/duoctvd/duoctv-trainning/GpLJdkcWzEJvWLJWxh2iMRpp1KYu
✅ Preview: https://duoctv-trainning-git-feature-5makenewsmangelayout-duoctvd.vercel.app

bit-thuynt · 2021-07-28T10:20:09Z

@duoctvd

Em đang gắng làm theo tài liệu react-hook-form, nhưng có vẻ nó đang dùng thẻ html bình thường như code dưới đây, em có nên dùng nó kết hợp vời styled component không?

Chắc chắn là phải dùng styled component rồi. Em chỉ việc thay tên của tag html bằng styled component thôi.

bit-thuynt · 2021-07-28T10:29:39Z

pages/admin/news/form.tsx

+import "firebase/auth";
+import { useForm } from "react-hook-form";
+
+type FormValues = {


@duoctvd
Trong phần code tham khảo của react-hook-form có chọn ngôn ngữ JS và TS, em chọn vào TS (typescript) để xem và làm theo nha.

@bit-thuynt ah dạ! hôm nay em refer theo source đính kèm dưới video này https://gyazo.com/c4801108834acc463cc6f0bbfe955135 https://codesandbox.io/s/pensive-jepsen-lqyk7 , nên có 1 số chỗ nó chưa thật sự đúng TS
mai em sẽ compare lại và fix

@duoctvd
Trong phần code tham khảo của react-hook-form có chọn ngôn ngữ JS và TS, em chọn vào TS (typescript) để xem và làm theo nha.

@bit-thuynt : DONE

duoctvd · 2021-07-29T07:48:27Z

@duoctvd

Em đang gắng làm theo tài liệu react-hook-form, nhưng có vẻ nó đang dùng thẻ html bình thường như code dưới đây, em có nên dùng nó kết hợp vời styled component không?

Chắc chắn là phải dùng styled component rồi. Em chỉ việc thay tên của tag html bằng styled component thôi.

@bit-thuynt DONE

bit-thuynt · 2021-07-29T07:53:55Z

@duoctvd
Trang preview này https://duoctv-trainning-git-feature-5makenewsmangelayout-duoctvd.vercel.app login vào được ko e ?

duoctvd · 2021-07-29T07:56:09Z

@duoctvd
Trang preview này https://duoctv-trainning-git-feature-5makenewsmangelayout-duoctvd.vercel.app login vào được ko e ?

@bit-thuynt hiện tại em chỉ add link này vào auth của firebase á chị
https://gyazo.com/308352314086336a65a064cac1c410a7
duoctv-trainning-q63uxzcjs-duoctvd.vercel.app

nên link chị gửi sẽ k login đc

bit-thuynt · 2021-07-29T07:59:24Z

@duoctvd
Vậy trên phần mô tả em nhớ thêm ghi chú url dùng để confirm vào để người xem biết được.
Confirm url: https://duoctv-trainning-q63uxzcjs-duoctvd.vercel.app

duoctvd · 2021-07-29T08:02:53Z

@duoctvd
Vậy trên phần mô tả em nhớ thêm ghi chú url dùng để confirm vào để người xem biết được.
Confirm url: https://duoctv-trainning-q63uxzcjs-duoctvd.vercel.app

@bit-thuynt dạ, em đã updated ngen chị #23 (comment)

bit-thuynt · 2021-07-29T08:04:13Z

@duoctvd
Login vô rồi làm sao để vào trang tạo news vậy em.
Em thêm link confirm chi tiết tới trang tạo news lun nha.

Trường hợp có thay đổi layout hoặc tạo trang mới, trên chổ mô tả #23 (comment) em thêm phần screen shot vào nha. Làm vậy sẽ review được dễ hơn.

duoctvd · 2021-07-29T08:06:42Z

@duoctvd
Login vô rồi làm sao để vào trang tạo news vậy em.
Em thêm link confirm chi tiết tới trang tạo news lun nha.

Trường hợp có thay đổi layout hoặc tạo trang mới, trên chổ mô tả #23 (comment) em thêm phần screen shot vào nha. Làm vậy sẽ review được dễ hơn.

@bit-thuynt dạ! em sẽ thêm vài button để cách page link lẫn nhau

bit-thuynt · 2021-07-29T08:39:04Z

@duoctvd
em điều chỉnh chiều rộng của form và margin giữa các item cho nó dễ xem chút. Ko yêu cầu layout hoàn hảo nhưng cũng dễ xem 1 tí.

Về kích thước của width, height, margin, padding thì sẽ có rule là bội số của 8 hoặc của 4, tất nhiên những trường hợp đặc biệt thì có thể ko theo rule này.
Ví dụ:
margin: 24px => 8x3
padding: 4px 8px => 4x1 4x2
width: 360px => 8x45

bit-thuynt · 2021-07-29T08:41:01Z

@duoctvd
Mấy chổ link hay button mà click được thì em cho css cursor: pointer;

duoctvd · 2021-07-29T08:42:10Z

@duoctvd
em điều chỉnh chiều rộng của form và margin giữa các item cho nó dễ xem chút. Ko yêu cầu layout hoàn hảo nhưng cũng dễ xem 1 tí.

Về kích thước của width, height, margin, padding thì sẽ có rule là bội số của 8 hoặc của 4, tất nhiên những trường hợp đặc biệt thì có thể ko theo rule này.
Ví dụ:
margin: 24px => 8x3
padding: 4px 8px => 4x1 4x2
width: 360px => 8x45

@bit-thuynt dạ, nhân tiên, như chị nói trước đây, tất cả project bên này css sẽ do mình tự viết hết hín chị? vì hiện tại css (frontend) em chỉ đang biết cơ bản!! vì bên team hiện tại hầu như layout có bộ phận design, nên em k đụng css nhiều

bit-thuynt · 2021-07-29T08:52:13Z

@duoctvd

dạ, nhân tiên, như chị nói trước đây, tất cả project bên này css sẽ do mình tự viết hết hín chị? vì hiện tại css (frontend) em chỉ đang biết cơ bản!! vì bên team hiện tại hầu như layout có bộ phận design, nên em k đụng css nhiều

^^ đúng rồi, bên này tự xem design xong tự làm frontend + backend lun.
Nếu em muốn làm được tốt thì nên học thêm html/css. Còn không thích làm frontend thì phải nói rõ với sếp ngay từ đầu.

duoctvd · 2021-07-29T08:55:28Z

@duoctvd

dạ, nhân tiên, như chị nói trước đây, tất cả project bên này css sẽ do mình tự viết hết hín chị? vì hiện tại css (frontend) em chỉ đang biết cơ bản!! vì bên team hiện tại hầu như layout có bộ phận design, nên em k đụng css nhiều

^^ đúng rồi, bên này tự xem design xong tự làm frontend + backend lun.
Nếu em muốn làm được tốt thì nên học thêm html/css. Còn không thích làm frontend thì phải nói rõ với sếp ngay từ đầu.

ah dạ! em hỏi để biết rõ hơn về dự án bên này! lúc sếp họp cũng nói là bên này làm frontend, nhưng hổm nay em cũng ỷ y chú tâm bên nexjst nên hay copy css sơ xài! nên để từ giờ khi commit, em sẽ cố gắng commit css/layout dễ nhìn hơn!

duoctvd · 2021-07-29T09:00:52Z

@duoctvd

dạ, nhân tiên, như chị nói trước đây, tất cả project bên này css sẽ do mình tự viết hết hín chị? vì hiện tại css (frontend) em chỉ đang biết cơ bản!! vì bên team hiện tại hầu như layout có bộ phận design, nên em k đụng css nhiều

^^ đúng rồi, bên này tự xem design xong tự làm frontend + backend lun.
Nếu em muốn làm được tốt thì nên học thêm html/css. Còn không thích làm frontend thì phải nói rõ với sếp ngay từ đầu.

ah dạ! em hỏi để biết rõ hơn về dự án bên này! lúc sếp họp cũng nói là bên này làm frontend, nhưng hổm nay em cũng ỷ y chú tâm bên nexjst nên hay copy css sơ xài! nên để từ giờ khi commit, em sẽ cố gắng commit css/layout dễ nhìn hơn!

@bit-thuynt nhân tiện, tháng 7-8 vẫn đang ở ' under study season'. Em sẽ gắng tấm tuần nữa sẽ xong những yêu cầu về nextjs ở slack, sau đó sẽ bỏ ra tầm 3-5 ngày để tìm 1 mẫu layout nào đó (hoặc chị gửi em 1 images layout nào đó). em sẽ apply lại theo cho các pages mình đã làm để review và học lại mớ về css. chị thấy ổn không?

bit-thuynt

@duoctvd Em fix layout sơ sơ rồi merge đi ha.

duoctvd · 2021-07-29T09:30:29Z

@duoctvd Em fix layout sơ sơ rồi merge đi ha.

@bit-thuynt
Em đã deployed ngen chị
URL: https://duoctv-trainning-24kz7gc7e-duoctvd.vercel.app/

Screenshot:
Top page: https://gyazo.com/601d36984a310394a81f24e7e7a07655
Admin top page: https://gyazo.com/453d28245a9af70918469f4ab39c5107
Admin news list page: https://gyazo.com/b004d17930ec9fc4cc91c0ce91dd1df9
Amin news form page: https://gyazo.com/a212070759eb19b1ecf48f009a06d23b

Problem: Cẩn optimize sau này

ở đây 2 button https://github.com/duoctvd/duoctv-trainning/blob/main/pages/admin/news/list.tsx#L171-L191 , em vẫn chưa sử dụng được (passe-props) để kế thừa css lẫn nhau (refer: https://styled-components.com/docs/basics#passed-props) . Nên đang lặp lại code. Em nên fixed cái này liền không hay sẽ fix nó sau?
Css đang rất không tốt, dự định sau này khi finished nextjs ở slack sẽ adjust lại tất cả

bit-thuynt · 2021-07-29T09:54:17Z

@duoctvd

ở đây 2 button https://github.com/duoctvd/duoctv-trainning/blob/main/pages/admin/news/list.tsx#L171-L191 , em vẫn chưa sử dụng được (passe-props) để kế thừa css lẫn nhau (refer: https://styled-components.com/docs/basics#passed-props) . Nên đang lặp lại code. Em nên fixed cái này liền không hay sẽ fix nó sau?

Cái này quan trọng, thường xuyên sử dụng khi làm project nên em ưu tiên fix nó.

Css đang rất không tốt, dự định sau này khi finished nextjs ở slack sẽ adjust lại tất cả

Cái này thì tùy em. Css dễ học nên ko gấp, chủ yếu là react-js, bữa giờ em có sử dụng useState chưa, cái này là kiến thức cơ bản của react-js cần phải nắm được.

duoctvd · 2021-07-29T09:59:52Z

@bit-thuynt

Cái này quan trọng, thường xuyên sử dụng khi làm project nên em ưu tiên fix nó.

Dạ, em sẽ fix nó

Cái này thì tùy em. Css dễ học nên ko gấp, chủ yếu là react-js, bữa giờ em có sử dụng useState chưa, cái này là kiến thức cơ bản của react-js cần phải nắm được.

dạ!

về [css:] improve later
về: [bữa giờ em có sử dụng useState chưa, cái này là kiến thức cơ bản của react-js cần phải nắm được:] tới lúc này tất cả page em làm tới lúc này, em chưa sử dụng nó! em sẽ tìm hiểu! nhưng nó có lưu ý đặc biệt gì về nó khi học không chị?

bit-thuynt · 2021-07-29T10:06:52Z

@duoctvd

nhưng nó có lưu ý đặc biệt gì về nó khi học không chị?

Ko có lưu ý gì, em xem mấy ví dụ sử dụng nó là được. Chị sẽ thêm yêu cầu mà có sử dụng useState sau.

make news list layout

58d6eb5

reverst source

ba23e28

vercel bot deployed to Preview July 27, 2021 10:10 View deployment

make news form

3190d83

vercel bot deployed to Preview July 28, 2021 10:20 View deployment

bit-thuynt reviewed Jul 28, 2021

View reviewed changes

apply styled component form layout

f1850a9

vercel bot deployed to Preview July 29, 2021 07:45 View deployment

bit-thuynt approved these changes Jul 29, 2021

View reviewed changes

finish layout

8c899af

vercel bot deployed to Preview July 29, 2021 09:19 View deployment

duoctvd merged commit 2994208 into main Jul 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

make news list layout #23

make news list layout #23

duoctvd commented Jul 27, 2021 •

edited

vercel bot commented Jul 27, 2021 •

edited

bit-thuynt commented Jul 28, 2021

bit-thuynt Jul 28, 2021

duoctvd Jul 28, 2021 •

edited

duoctvd Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021 •

edited

duoctvd commented Jul 29, 2021 •

edited

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021 •

edited

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt left a comment

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

make news list layout #23

make news list layout #23

Conversation

duoctvd commented Jul 27, 2021 • edited

2021/07/27

2021/07/28

2021/07/29

vercel bot commented Jul 27, 2021 • edited

bit-thuynt commented Jul 28, 2021

bit-thuynt Jul 28, 2021

Choose a reason for hiding this comment

duoctvd Jul 28, 2021 • edited

Choose a reason for hiding this comment

duoctvd Jul 29, 2021

Choose a reason for hiding this comment

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021 • edited

duoctvd commented Jul 29, 2021 • edited

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021 • edited

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt left a comment

Choose a reason for hiding this comment

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 29, 2021

bit-thuynt commented Jul 29, 2021

duoctvd commented Jul 27, 2021 •

edited

vercel bot commented Jul 27, 2021 •

edited

duoctvd Jul 28, 2021 •

edited

bit-thuynt commented Jul 29, 2021 •

edited

duoctvd commented Jul 29, 2021 •

edited

duoctvd commented Jul 29, 2021 •

edited