apply swr for list page

package.json

@@ -16,7 +16,8 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-hook-form": "^7.12.0",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5.3.0",
+    "swr": "^0.5.6"
   },
   "devDependencies": {
     "@types/firebase": "^3.2.1",

src/components/templates/admin/news/form.tsx

@@ -7,8 +7,8 @@ import { News } from "../../../../models/news";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { firebase } from "../../../../../firebase";
 import "firebase/firestore";
-import { InsertNews } from "../../../../firestore/news/insertNews";
-import { UpdateNews } from "../../../../firestore/news/updateNews";
+import { insertNews } from "../../../../firestore/news/insertNews";
+import { updateNews } from "../../../../firestore/news/updateNews";
 import "firebase/storage";
 
 interface Props {
@@ -52,7 +52,7 @@ export default function NewsFormTemplate({ news }: Props) {
         openFlag: true,
         delFlag: false,
       };
-      newsID = await InsertNews(insertData);
+      newsID = await insertNews(insertData);
       alert("Document written " + newsID);
     } else {
       // To update age and favorite color:
@@ -63,7 +63,7 @@ export default function NewsFormTemplate({ news }: Props) {
         description: data.description,
         imagePath: imagePath,
       };
-      UpdateNews(updateData);
+      updateNews(updateData);
       alert("Document successfully updated!");
     }
   };

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

@@ -7,9 +7,9 @@ import Link from "next/link";
 import { News } from "../../../../models/news";
 import "firebase/firestore";
 import { useRouter } from "next/router";
-import { DeleteNewsById } from "../../../../firestore/news/deleteNewsById";
+import { deleteNewsById } from "../../../../firestore/news/deleteNewsById";
 import { useState } from "react";
-import { NewsPagination } from "../../../../firestore/news/newsPagination";
+import { newsPagination } from "../../../../firestore/news/newsPagination";
 
 export default function NewsListTemplate({ newsList }: { newsList: News[] }) {
   const router = useRouter();
@@ -20,7 +20,7 @@ export default function NewsListTemplate({ newsList }: { newsList: News[] }) {
   const nextPage = async () => {
     setEnd(false);
 
-    const newNewsList = await NewsPagination("next", newsListResult);
+    const newNewsList = await newsPagination("next", newsListResult);
     setNewsListResult((newsListResult = newNewsList));
     if (newsListResult.length < 2) {
       setEnd(true);
@@ -31,7 +31,7 @@ export default function NewsListTemplate({ newsList }: { newsList: News[] }) {
   const prevPage = async () => {
     setEnd(false);
     setStart(false);
-    const newNewsList = await NewsPagination("prev", newsListResult);
+    const newNewsList = await newsPagination("prev", newsListResult);
     // newsL = newNewsList;
     setNewsListResult((newsListResult = newNewsList));
 
@@ -59,7 +59,7 @@ export default function NewsListTemplate({ newsList }: { newsList: News[] }) {
 
   async function handleDelete(id: string) {
     // e.preventDefault();
-    await DeleteNewsById(id);
+    await deleteNewsById(id);
     alert("Document successfully deleted!" + id);
     router.replace("/admin/news/list");
   }

src/firestore/news/deleteNewsById.ts

@@ -1,6 +1,6 @@
 import { firebase } from "../../../firebase";
 import "firebase/firestore";
 
-export const DeleteNewsById = async (id: string): Promise<void> => {
+export const deleteNewsById = async (id: string): Promise<void> => {
   await firebase.firestore().collection("news").doc(id).delete();
 };

src/firestore/news/insertNews.ts

@@ -2,7 +2,7 @@ import { firebase } from "../../../firebase";
 import "firebase/firestore";
 import { News } from "../../models/news";
 
-export const InsertNews = async (news: News): Promise<string> => {
+export const insertNews = async (news: News): Promise<string> => {
   const doc = await firebase.firestore().collection("news").add(news);
 
   return doc.id;

src/firestore/news/newsPagination.ts

@@ -2,7 +2,7 @@ import { firebase } from "../../../firebase";
 import "firebase/firestore";
 import { News } from "../../models/news";
 
-export const NewsPagination = async (
+export const newsPagination = async (
   mode = "",
   currentNewsList: News[] = []
 ): Promise<News[]> => {

src/firestore/news/retrieveNews.ts

@@ -2,7 +2,7 @@ import { firebase } from "../../../firebase";
 import "firebase/firestore";
 import { News } from "../../models/news";
 
-export const RetrieveNews = async (limit = 0): Promise<News[]> => {
+export const retrieveNews = async (limit = 0): Promise<News[]> => {
   const newsList: News[] = [];
 
   let query = firebase.firestore().collection("news").orderBy("title", "desc");

src/firestore/news/retrieveNewsById.ts

@@ -2,28 +2,12 @@ import { firebase } from "../../../firebase";
 import "firebase/firestore";
 import { News } from "../../models/news";
 
-export const RetrieveNewsById = async (id: string): Promise<News> => {
+export const retrieveNewsById = async (id: string): Promise<News> => {
   const doc = await firebase.firestore().collection("news").doc(id).get();
-
   return {
     id: doc.id,
     title: doc.data()?.title,
     description: doc.data()?.description,
   } as News;
 
-  // await docRef.get().then((doc) => {
-  //     if (doc.exists) {
-  //     //   news.id =  doc.id;
-  //     //   news.title = doc.data()?.title;
-  //     //   news.description =  doc.data()?.description;
-  //     return doc;
-  //     } else {
-  //         // doc.data() will be undefined in this case
-  //         console.warn("No such document!");
-  //         return null;
-  //     }
-  // }).catch((error) => {
-  //     console.warn("Error getting document:", error);
-  //     return null;
-  // });
 };

src/firestore/news/updateNews.ts

@@ -5,7 +5,7 @@ import { News } from "../../models/news";
 // export const InsertNews = async (news: News) => {   => OK
 // async function UpdateNews(news: News): Promise<any> {  => ok
 // async function UpdateNews(news: News): string {  => LỖI :Type 'string' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.
-export const UpdateNews = async (news: News): Promise<void> => {
+export const updateNews = async (news: News): Promise<void> => {
   const dataUpdate: News = {
     title: news.title,
     description: news.description,

src/hooks/useNewListData.ts

@@ -0,0 +1,22 @@
+import "firebase/firestore";
+import { News } from "../models/news";
+import useSWR from 'swr';
+import { retrieveNews } from "../firestore/news/retrieveNews";
+
+interface UseNewListData {
+  newsList: News[];
+  isError: boolean;
+  isLoading: boolean;
+}
+
+export function useNewListData() {
+    const { data, error } = useSWR("useNewListData", async () => {
+      return await retrieveNews();
+    });
+
+    return {
+      newsList: data,
+      isError: !!error,
+      isLoading: !data && !error,
+    } as UseNewListData;
+}

src/hooks/useRetrieveNewsDataById.ts

@@ -0,0 +1,23 @@
+import "firebase/firestore";
+import { News } from "../models/news";
+import useSWR from 'swr';
+import { retrieveNewsById } from "../firestore/news/retrieveNewsById";
+
+interface useRetrieveNewsDataById {
+  news: News;
+  isError: boolean;
+  isLoading: boolean;
+}
+
+export function useRetrieveNewsDataById(newsId:string): useRetrieveNewsDataById {
+
+    const { data, error } = useSWR(newsId ? "useRetrieveNewsDataById" : null, async () => {
+      return await retrieveNewsById(newsId);
+    });
+
+    return {
+      news: data,
+      isError: !!error,
+      isLoading: !data && !error,
+    } as useRetrieveNewsDataById;
+}

src/pages/admin/news/form/[id].tsx

@@ -5,23 +5,33 @@ import { News } from "../../../../models/news";
 import NewsFormTemplate from "../../../../components/templates/admin/news/form";
 import { GetServerSideProps } from "next";
 import { InferGetServerSidePropsType } from "next";
-import { RetrieveNewsById } from "../../../../firestore/news/retrieveNewsById";
+import { useRetrieveNewsDataById } from "../../../../hooks/useRetrieveNewsDataById";
+import { useRouter } from 'next/router';
 
-function Form({
-  news,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+function Form() {
+  const router = useRouter()
+
+  const newsId:string = router.query.id as string;
+
+  const { news, isError, isLoading} = useRetrieveNewsDataById(newsId);
+
+
+  if (isError) return <div>failed to load</div>
+  if (isLoading) return <div>loading...</div>
+
+  // console.log(news);
   return <NewsFormTemplate news={news} />;
 }
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
-  const idNews: string = context.query.id as string;
-  var news: News = { id: "", title: "", description: "" };
+// export const getServerSideProps: GetServerSideProps = async (context) => {
+//   const idNews: string = context.query.id as string;
+//   var news: News = { id: "", title: "", description: "" };
 
-  news = await RetrieveNewsById(idNews);
+//   news = await RetrieveNewsById(idNews);
 
-  return {
-    props: { news }, // will be passed to the page component as props
-  };
-};
+//   return {
+//     props: { news }, // will be passed to the page component as props
+//   };
+// };
 
 export default Form;

src/pages/admin/news/list.tsx

@@ -8,40 +8,32 @@ import "firebase/firestore";
 import { GetStaticProps, GetStaticPropsContext } from "next";
 import { InferGetStaticPropsType } from "next";
 import { News } from "../../../models/news";
-import { RetrieveNews } from "../../../firestore/news/retrieveNews";
-import { GetServerSideProps } from "next";
-import { InferGetServerSidePropsType } from "next";
+// import { GetServerSideProps } from "next";
+// import { InferGetServerSidePropsType } from "next";
 import "firebase/storage";
+import { useNewListData } from "../../../hooks/useNewListData";
 
-function List({
-  newsList,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  //  // Create a root reference
-  //  var storageRef = firebase.storage().ref();
-  //  let reader = new FileReader();
+ function List() {
 
-  // ;
-  //  // Create a reference to 'mountains.jpg'
-  //  var mountainsRef = storageRef.child('/photo1.jpg');
-  //  mountainsRef.put(reader.readAsText('/photo1.jpg')).then((snapshot) => {
-  //   console.log('Uploaded a blob or file!');
-  // });
+  const { newsList, isError, isLoading} = useNewListData();
+
+  if (isError) return <div>failed to load</div>
+  if (isLoading) return <div>loading...</div>
 
   return <NewsListTemplate newsList={newsList} />;
 }
-
 export default List;
 
-export const getServerSideProps: GetServerSideProps = async () => {
-  var newsList: News[] = [];
-  // await the promise
-  newsList = await RetrieveNews();
+// export const getServerSideProps: GetServerSideProps = async () => {
+//   var newsList: News[] = [];
+//   // await the promise
+//   newsList = await RetrieveNews();
 
-  // By returning { props: { posts } }, the Blog component
-  // will receive `posts` as a prop at build time
-  return {
-    props: {
-      newsList,
-    },
-  };
-};
+//   // By returning { props: { posts } }, the Blog component
+//   // will receive `posts` as a prop at build time
+//   return {
+//     props: {
+//       newsList,
+//     },
+//   };
+// };

src/pages/article/[id].tsx

@@ -5,8 +5,8 @@ import styled from "styled-components";
 import ThumnailProduct from "../../components/ThumnailProduct";
 import Footer from "../../components/Footer";
 import { News } from "../../models/news";
-import { RetrieveNews } from "../../firestore/news/retrieveNews";
-import { RetrieveNewsById } from "../../firestore/news/retrieveNewsById";
+import { retrieveNews } from "../../firestore/news/retrieveNews";
+import { retrieveNewsById } from "../../firestore/news/retrieveNewsById";
 import { GetStaticProps } from "next";
 import { GetStaticPaths } from "next";
 import { InferGetStaticPropsType } from "next";
@@ -44,7 +44,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
 
   var news: News = { id: "", title: "", description: "" };
 
-  news = await RetrieveNewsById(idNews);
+  news = await retrieveNewsById(idNews);
 
   // Pass post data to the page via props
   return { props: { news } };
@@ -54,7 +54,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
 export const getStaticPaths: GetStaticPaths = async () => {
   var newsList: News[] = [];
   // await the promise
-  newsList = await RetrieveNews();
+  newsList = await retrieveNews();
 
   // Get the paths we want to pre-render based on posts
   const paths = newsList.map((news) => ({

src/pages/index.tsx

@@ -2,7 +2,7 @@ import Head from "next/head";
 import { InferGetStaticPropsType } from "next";
 import { GetStaticProps } from "next";
 import { News } from "../models/news";
-import { RetrieveNews } from "../firestore/news/retrieveNews";
+import { retrieveNews } from "../firestore/news/retrieveNews";
 import TopTemplate from "../components/templates/top";
 
 function Home({ newsList }: InferGetStaticPropsType<typeof getStaticProps>) {
@@ -14,7 +14,7 @@ export default Home;
 export const getStaticProps: GetStaticProps = async () => {
   var newsList: News[] = [];
   // await the promise
-  newsList = await RetrieveNews(4);
+  newsList = await retrieveNews(4);
   return {
     props: {
       newsList,

yarn.lock

@@ -1361,6 +1361,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -3601,6 +3606,13 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
+swr@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.6.tgz#70bfe9bc9d7ac49a064be4a0f4acf57982e55a31"
+  integrity sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==
+  dependencies:
+    dequal "2.0.2"
+
 table@^6.0.9:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"