apply swr for list page #34

duoctvd · 2021-08-26T09:59:43Z

What I have done today

Apply swr cho admin list page, refer tới 3 links say
https://swr.vercel.app/docs/getting-started
https://nextjs.org/docs/basic-features/data-fetching#swr
https://nextjs.org/docs/api-routes/introduction

Em đã applued swr cho list page (hình như nó có cơ chế phân trang, nên hiện tại em đang tạm thời remove phân trang theo cách cũ). Em hy vọng cách em đang làm là đúng

Apply cho form page: NOT YET

Problem

Khi làm typscript và nextjs em thường xuyên bị lỗi về không khai báo biến thế này
https://gyazo.com/fde8a3b7cc5c518f3715f1838ff84b69
https://gyazo.com/e2a8425a43026e422d4b5b146fe5d785

trước kia em bị mấy lần ở file khác, chị có hướng dẫn em, tạo view và chuyển qua view nó hết, nhưng giờ em lại bị tiếp ở file khác nữa!
src/pages/api/news/retrievenews.ts
src/pages/admin/news/list.tsx

nên em vẫn chưa thật sự biết cách fix nó là gì (nó hay thông báo Parameter 'req' implicitly has an 'any' type, nên em toàn tính dùng req: any)

vercel · 2021-08-26T09:59:45Z

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/AoX6pJx7EjgnnkfcHHgoupR7D1kn
✅ Preview: https://duoctv-trainning-git-feature-5useswrandmodifytemplate-duoctvd.vercel.app

[Deployment for 1ad7029 failed]

bit-thuynt · 2021-08-26T11:06:53Z

@duoctvd

Khi làm typscript và nextjs em thường xuyên bị lỗi về không khai báo biến thế này
https://gyazo.com/fde8a3b7cc5c518f3715f1838ff84b69
https://gyazo.com/e2a8425a43026e422d4b5b146fe5d785
nên em vẫn chưa thật sự biết cách fix nó là gì (nó hay thông báo Parameter 'req' implicitly has an 'any' type, nên em toàn tính dùng req: any)

Khi sử dụng bất kỳ biến nào em đều phải khai báo kiểu dữ liệu cho nó, còn là kiểu gì thì tùy mục đích sử dụng của em.
Trường hợp dùng any là khi em sử dụng giá trị truyền vào là từ 1 thư viện nào đó không có khai báo rõ ràng. Khi sử dụng thư viện nào đó thì phải xem kĩ docs của nó xem có hỗ trợ typescript(ts) hay không để biết cách khai báo.
Còn đối với function mà mình tự viết hoặc sử dụng từ thư viện có hỗ trợ ts thì phải khai báo rõ ràng.

Đối với cái này https://gyazo.com/fde8a3b7cc5c518f3715f1838ff84b69, em tính truyền vào url dạng gì thì em khai báo cho nó dạng đó, trường hợp này thì chắc là string

Đối với cái này https://gyazo.com/e2a8425a43026e422d4b5b146fe5d785, em đang sử dụng API thì phải. Khi đọc tài liệu hoặc tìm kiếm thì nhớ lưu ý tới ts. Như tài liệu của nextjs thì nó có hướng dẫn cho ts

bit-thuynt · 2021-08-26T11:23:17Z

src/pages/admin/news/list.tsx


+ function List() {
+  // let newsList: News[] = [];
+  const { data, error } = useSWR('/api/news/retrievenews', fetcher);


@duoctvd
Bỏ xử lý useSWR vào src/hooks/useNewListData.ts
Còn fetcher không cần sử dụng api, em gọi trực tiếp lên firebase lun
(Cái này viết ví dụ thôi nha, em phải thêm khai báo và điều chỉnh lại)

export function useNewListData() { const { data, error } = useSWR("useNewListData", async () => { return await retrieveNews(); // just sample }); return { newsList: data, isError: !!error, isLoading: !data && !error, }; }

Nói chung phần sử dụng useSWR và trả về data sẽ ở trong src/hooks/useNewListData.ts
Khi sử dụng em chỉ việc gọi đơn giản vầy:

const { newsList, isError, isLoading} = useNewListData();

duoctvd · 2021-08-27T10:21:49Z

What I have done today

Applied swr for list admin: DONE - code chị demo simple em thấy nó chạy ok, k lỗi gì, nên cũng copy vào chứ k sửa gì nhiều
Applied swr for form admin : DOing

Em đang xem thử làm sao truyền idNews qua tới hooks và trong trong fetcher https://gyazo.com/273f7d101f59e1a762a4b4691ce57959

bit-thuynt · 2021-08-27T10:31:58Z

src/pages/hooks/useNewListData.ts

+import useSWR from 'swr';
+import { RetrieveNews } from "../../firestore/news/retrieveNews";
+
+export function useNewListData() {


@duoctvd
Thêm kiểu trả về cho function

interface UseNewListData { xxxx } export function useNewListData(): UseNewListData {

bit-thuynt · 2021-08-27T10:33:03Z

src/pages/hooks/useRetrieveNewsDataById.ts

+import useSWR from 'swr';
+import { RetrieveNewsById } from "../../firestore/news/retrieveNewsById";
+
+export function useRetrieveNewsDataById(idNews:string) {


@duoctvd
Tương tự phía trên, thêm kiểu trả về cho function.
Đổi tên idNews => newsId

bit-thuynt · 2021-08-27T10:35:13Z

src/pages/hooks/useRetrieveNewsDataById.ts

+export function useRetrieveNewsDataById(idNews:string) {
+
+    const { data, error } = useSWR("useRetrieveNewsDataById", async () => {
+      return await RetrieveNewsById(idNews);


@duoctvd
Cách truyền id vào như vậy đúng rồi.
Thường thì mấy file template (.tsx) sẽ viết hoa chữ đầu còn function (.ts) thì viết chữ đầu bình thường nha e.
RetrieveNewsById => retrieveNewsById

@duoctvd
Cách truyền id vào như vậy đúng rồi.
Thường thì mấy file template (.tsx) sẽ viết hoa chữ đầu còn function (.ts) thì viết chữ đầu bình thường nha e.
RetrieveNewsById => retrieveNewsById

@bit-thuynt: Em đang dùng thế này để truyền newsId qua hooks, em đang cảm thấy nó k đc truyền qua mỗi lần request (vì còn còn dùng trong getServerSideProps), nên lúc thì nó qua đc data lúc thì nó là undifie
https://gyazo.com/f594699833b6e16bec1a73ad07de83fd

@duoctvd
Tại router nó là bất đồng bộ nên news id lấy từ router cũng sẽ bất đồng bộ.
Vấn đề này thì xem sẽ thêm check bên trong useSWR
https://swr.vercel.app/docs/conditional-fetching#conditional

Khi nào news id có giá trị thì mới gọi get.

const { data, error } = useSWR( newsId ? "useRetrieveNewsDataById" : null, async () => {

duoctvd · 2021-08-30T09:51:08Z

What I have done

Applied swr for admin: DONE

Question

khi em đọc tài liệu về cách dùng useSWR

function useUser (id) {
  const { data, error } = useSWR(`/api/user/${id}`, fetcher)

  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  }
}

/api/user/${id}`,   ---> nó thường là 1 api, nó sẽ trả về 1 data vào fetcher
fetcher -> nó sẽ là 1 asynchronous function xử lý data trả về từ api

Nhưng cách mình dùng với firebase

>     const { data, error } = useSWR("useNewListData", async () => {
>       return await retrieveNews();
>     });

thì thật sự em vẫn chưa thật sử hiểu về useNewListData trong useSWR("useNewListData".....

Vdu

export function useNewListData() {
    const { data, error } = useSWR("useNewListData", async () => {
      return await retrieveNews();
    });

    return {
      newsList: data,
      isError: !!error,
      isLoading: !data && !error,
    } as UseNewListData;
}

lúc mình gọi
const { newsList, isError, isLoading} = useNewListData();

thì mình sẽ gọi useNewListData của
export function useNewListData()
hay
useSWR("useNewListData",

vậy chị ?

bit-thuynt · 2021-08-30T10:03:30Z

@duoctvd
/api/user/${id} hay là "useNewListData" thì chỉ là tên của key thôi, phần xử lý nằm ở fetcher

"useNewListData" => key

async () => {
      return await retrieveNews();
}

=> fetcher

Trong docs của nó có nói key là gì fetcher là gì.
https://swr.vercel.app/docs/options

lúc mình gọi
const { newsList, isError, isLoading} = useNewListData();

thì mình sẽ gọi useNewListData của
export function useNewListData()
hay
useSWR("useNewListData",

Tất nhiên là export function useNewListData() rồi.
Trong hàm này sẽ gọi tới useSWR và xử lý phần data trả về của useSWR cho phù hợp với mục đích sử dụng.

bit-thuynt · 2021-08-30T10:42:32Z

src/hooks/useNewListData.ts

+  isLoading: boolean;
+}
+
+export function useNewListData() {


@duoctvd
Thêm kiểu trả về ở function để khi code của mình viết nó trả về không đúng thì fix lại code.

export function useNewListData(): UseNewListData{

@duoctvd
Thêm kiểu trả về ở function để khi code của mình viết nó trả về không đúng thì fix lại code.

export function useNewListData(): UseNewListData{

@bit-thuynt: sorry chị! em nhớ hôm qua em thêm cho nó rồi! mà chắc em adjust code debug sao sao sao push lên nó lại bị xóa đi, để em thêm lại

bit-thuynt · 2021-08-30T10:44:03Z

src/hooks/useNewListData.ts

+      newsList: data,
+      isError: !!error,
+      isLoading: !data && !error,
+    } as UseNewListData;


@duoctvd
bỏ as chổ này vì đã khai báo trả về ở function.
Nếu có lỗi thì sửa lại chổ return hoặc kiểu trả về để cho cả 2 khớp nhau.

bit-thuynt · 2021-08-30T10:44:34Z

src/hooks/useRetrieveNewsDataById.ts

+import useSWR from 'swr';
+import { retrieveNewsById } from "../firestore/news/retrieveNewsById";
+
+interface useRetrieveNewsDataById {


@duoctvd
Đối với interface thì viết hoa chữ đầu

bit-thuynt · 2021-08-30T10:45:00Z

src/hooks/useRetrieveNewsDataById.ts

+      news: data,
+      isError: !!error,
+      isLoading: !data && !error,
+    } as useRetrieveNewsDataById;


tương tự ở trên, bỏ as useRetrieveNewsDataById

duoctvd · 2021-08-31T10:04:01Z

What I have done

Fix bug về khai báo interface và biến: DONE
Apply https://nextjs.org/docs/advanced-features/module-path-aliases : DONE
Modulization template Cấu trúc lại template theo Layered Architecture #33 (comment) : Doing

Problem

về aliases for firebase.js file, hiện tại file đó em vẫn đang để ngoài root của project, nên vẫn đang dùng tương đối

vdu : `src/pages/login.tsx`
import { firebase } from "../../firebase";

Về Modulization template : hiện tại em đã thử tách 2 file bên dưới
src\components\templates\admin\news\list\index.tsx
src\components\templates\admin\news\list\presenter.tsx
và đang xem thử về cách xử lý và truyền data qua lại giữa function ở 2 file

bit-thuynt · 2021-08-31T10:33:33Z

src/components/templates/admin/news/list/index.tsx

+import { useState } from "react";
+import { newsPagination } from "src/firestore/news/newsPagination";
+
+// export default function NewsListTemplate({ newsList }: { newsList: News[] }) { 


@duoctvd
Những xử lý sau vẫn nằm trong NewsListTemplate
Em chỉ cần move phần layout sang presenter thôi

bit-thuynt · 2021-08-31T10:33:57Z

src/components/templates/admin/news/list/presenter.tsx

+import { newsPagination } from "src/firestore/news/newsPagination";
+import { nextPage,prevPage } from "src/components/templates/admin/news/list/index";
+
+export default function NewsListTemplate({ newsList }: { newsList: News[] }) {


NewsListTemplate => NewsListPresenter

bit-thuynt · 2021-08-31T10:34:34Z

src/components/templates/admin/news/list/presenter.tsx

+    const router = useRouter();
+    var [newsListResult, setNewsListResult] = useState(newsList);
+    const [end, setEnd] = useState(false);
+    const [start, setStart] = useState(true);


Mấy xử lý này là thuộc container (news/list/index.tsx)

bit-thuynt · 2021-08-31T10:35:31Z

src/pages/admin/news/list.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Head from "next/head";
 import styled from "styled-components";
-import NewsListTemplate from "src/components/templates/admin/news/list";


Chổ này vẫn giữ import như cũ
import NewsListTemplate from "src/components/templates/admin/news/list";

apply swr for list page

6de73e3

delete unsued file

352f26b

vercel bot had a problem deploying to Preview August 26, 2021 10:00 Failure

bit-thuynt reviewed Aug 26, 2021

View reviewed changes

apply swr for admin

69ba4e1

vercel bot had a problem deploying to Preview August 27, 2021 10:19 Failure

bit-thuynt reviewed Aug 27, 2021

View reviewed changes

apply swr

eca60ea

vercel bot had a problem deploying to Preview August 28, 2021 11:12 Failure

apply swr

1fd7882

vercel bot deployed to Preview August 30, 2021 09:41 View deployment

bit-thuynt reviewed Aug 30, 2021

View reviewed changes

apply aliases path

f33b221

vercel bot had a problem deploying to Preview August 31, 2021 08:49 Failure

bug

5baa0ca

vercel bot deployed to Preview August 31, 2021 08:51 View deployment

apply modularization

1ad7029

vercel bot had a problem deploying to Preview August 31, 2021 09:56 Failure

bit-thuynt reviewed Aug 31, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

apply swr for list page #34

apply swr for list page #34

duoctvd commented Aug 26, 2021 •

edited

Loading

vercel bot commented Aug 26, 2021 •

edited

Loading

bit-thuynt commented Aug 26, 2021

bit-thuynt Aug 26, 2021

duoctvd commented Aug 27, 2021 •

edited

Loading

bit-thuynt Aug 27, 2021

bit-thuynt Aug 27, 2021

bit-thuynt Aug 27, 2021

duoctvd Aug 27, 2021

bit-thuynt Aug 27, 2021

duoctvd commented Aug 30, 2021

bit-thuynt commented Aug 30, 2021

bit-thuynt Aug 30, 2021

duoctvd Aug 30, 2021

bit-thuynt Aug 30, 2021

bit-thuynt Aug 30, 2021

bit-thuynt Aug 30, 2021

duoctvd commented Aug 31, 2021

bit-thuynt Aug 31, 2021

bit-thuynt Aug 31, 2021

bit-thuynt Aug 31, 2021

bit-thuynt Aug 31, 2021

apply swr for list page #34

Are you sure you want to change the base?

apply swr for list page #34

Conversation

duoctvd commented Aug 26, 2021 • edited Loading

What I have done today

Problem

vercel bot commented Aug 26, 2021 • edited Loading

bit-thuynt commented Aug 26, 2021

Choose a reason for hiding this comment

duoctvd commented Aug 27, 2021 • edited Loading

What I have done today

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duoctvd commented Aug 30, 2021

What I have done

Question

bit-thuynt commented Aug 30, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duoctvd commented Aug 31, 2021

What I have done

Problem

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duoctvd commented Aug 26, 2021 •

edited

Loading

vercel bot commented Aug 26, 2021 •

edited

Loading

duoctvd commented Aug 27, 2021 •

edited

Loading