Merge pull request #30 from duoctvd/feature/5/apply_pagination

Feature/5/apply pagination
duoctvd · Aug 23, 2021 · 8205062 · 8205062 · vercel · Aug 23, 2021
2 parents bee8cd7 + 80d9c82
commit 8205062
Show file tree

Hide file tree

Showing 27 changed files with 443 additions and 393 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -56,4 +56,4 @@ module.exports = {
       version: "detect",
     },
   },
-};
+};
diff --git a/firestore/news/deleteNewsById.ts b/firestore/news/deleteNewsById.ts
diff --git a/firestore/news/insertNews.ts b/firestore/news/insertNews.ts
diff --git a/firestore/news/retrieveNews.ts b/firestore/news/retrieveNews.ts
diff --git a/firestore/news/retrieveNewsById.ts b/firestore/news/retrieveNewsById.ts
diff --git a/models/news.ts b/models/news.ts
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "start": "next start",
     "eslint": "eslint pages --ext .ts,.tsx,.js,.jsx --ignore-path ./.gitignore . --max-warnings=0",
     "eslint:fix": "yarn eslint --fix",
-    "prettier": "prettier --write \"{,pages/**/,components/**}*.{js,jsx,ts,tsx,json,yaml,md}\""
+    "prettier": "prettier --write \"{,src/**/}*.{js,jsx,ts,tsx,json,yaml,md}\""
   },
   "dependencies": {
     "firebase": "^8.7.1",

diff --git a/src/components/CaptionProduct.tsx b/src/components/CaptionProduct.tsx
@@ -1,6 +1,5 @@
 import styled from "styled-components";
-import {News} from "../../models/news";
-
+import { News } from "../models/news";
 
 export default function CaptionProduct({ news }: { news: News }) {
   return (

diff --git a/src/components/Product.tsx b/src/components/Product.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import Image from "next/image";
 import Link from "next/link";
-import {News} from "../../models/news";
+import { News } from "../models/news";
 export default function Product({ news }: { news: News }) {
   return (
     <Container>
@@ -14,9 +14,7 @@ export default function Product({ news }: { news: News }) {
         width={200}
         height={200}
       />
-      <Description>
-      {news.description}
-      </Description>
+      <Description>{news.description}</Description>
     </Container>
   );
 }

diff --git a/src/components/ThumnailProduct.tsx b/src/components/ThumnailProduct.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import CaptionProduct from "./CaptionProduct";
 import Image from "next/image";
-import {News} from "../../models/news";
+import { News } from "../models/news";
 
 export default function ThumnailProduct({ news }: { news: News }) {
   return (
@@ -12,14 +12,11 @@ export default function ThumnailProduct({ news }: { news: News }) {
         width={200}
         height={200}
       />
-      <CaptionProduct news={news}/>
+      <CaptionProduct news={news} />
     </Container>
   );
 }
 
-
-
-
 const Container = styled.div`
   display: block;
   padding: 4px;

diff --git a/src/components/templates/admin/news/form.tsx b/src/components/templates/admin/news/form.tsx
@@ -3,33 +3,32 @@ import Head from "next/head";
 import styled from "styled-components";
 import Footer from "../../../../components/Footer";
 import Link from "next/link";
-import {News} from "../../../../../models/news";
+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";
 
 interface Props {
-    news: News;
-};
+  news: News;
+}
 
 export default function NewsFormTemplate({ news }: Props) {
-    const {
-        register,
-        handleSubmit,
-        formState: { errors },
-      } = useForm<News>();
-    
-    const onSubmit: SubmitHandler<News> = data => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<News>();
+
+  const onSubmit: SubmitHandler<News> = (data) => {
     const db = firebase.firestore();
-    if(!news.id)
-    {
-      const insertData:News = {
+    if (!news.id) {
+      const insertData: News = {
         title: data.title,
         description: data.description,
         openFlag: true,
-        delFlag: false
+        delFlag: false,
       };
       const insertId = InsertNews(insertData);
 
@@ -50,78 +49,77 @@ export default function NewsFormTemplate({ news }: Props) {
       //       console.error("Error adding document: ", error);
       //   });
     } else {
-         // To update age and favorite color:
+      // To update age and favorite color:
 
-         const updateData:News = {
-            id: news.id,
-            title: data.title,
-            description: data.description,
-        };
+      const updateData: News = {
+        id: news.id,
+        title: data.title,
+        description: data.description,
+      };
 
-        UpdateNews(updateData);
+      UpdateNews(updateData);
 
-        alert("Document successfully updated!");
+      alert("Document successfully updated!");
 
-        // db.collection("news").doc(news.id).update()
-        // .then(() => {
-        //     alert("Document successfully updated!");
-        // });
+      // db.collection("news").doc(news.id).update()
+      // .then(() => {
+      //     alert("Document successfully updated!");
+      // });
     }
-
-    };
-    return (
-        <>
-          <Head>
-            <Title>News Edit Form</Title>
-          </Head>
-          <Heading>News Edit Form</Heading>
-
-          <Container>
-            <FormGroup onSubmit={handleSubmit(onSubmit)}>
-            <InputHiden
-                defaultValue={news.id}
-              />
-              <Label htmlFor="title">Title</Label>
-              <Input
-                defaultValue={news.title}
-                {...register("title", {
-                  required: { value: true, message: "Title is required" },
-                })}
-                id="title"
-                placeholder="please input title"
-              />
-              {errors.title && <PValidation>{errors.title.message}</PValidation>}
-
-              <Label htmlFor="description">Description</Label>
-              <Textarea
-                defaultValue={news.description}
-                {...register("description", {
-                  required: { value: true, message: "Desciption is required" },
-                })}
-                id="description"
-              />
-              {errors.description && <PValidation>{errors.description.message}</PValidation>}
-
-              <Label htmlFor="photo">Photo</Label>
-              <Input
-                {...register("photo", {
-                  required: { value: false, message: "Photo is required" },
-                })}
-                id="photo"
-                type="file"
-              />
-              {errors.photo && <PValidation>{errors.photo.message}</PValidation>}
-
-              <InputButton type="submit">Submit</InputButton>
-
-              <Link href={`/admin/news/list`} passHref>
-                <Button>Back</Button>
-              </Link>
-            </FormGroup>
-          </Container>
-          <Footer />
-        </>
-      );
+  };
+  return (
+    <>
+      <Head>
+        <Title>News Edit Form</Title>
+      </Head>
+      <Heading>News Edit Form</Heading>
+
+      <Container>
+        <FormGroup onSubmit={handleSubmit(onSubmit)}>
+          <InputHiden defaultValue={news.id} />
+          <Label htmlFor="title">Title</Label>
+          <Input
+            defaultValue={news.title}
+            {...register("title", {
+              required: { value: true, message: "Title is required" },
+            })}
+            id="title"
+            placeholder="please input title"
+          />
+          {errors.title && <PValidation>{errors.title.message}</PValidation>}
+
+          <Label htmlFor="description">Description</Label>
+          <Textarea
+            defaultValue={news.description}
+            {...register("description", {
+              required: { value: true, message: "Desciption is required" },
+            })}
+            id="description"
+          />
+          {errors.description && (
+            <PValidation>{errors.description.message}</PValidation>
+          )}
+
+          <Label htmlFor="photo">Photo</Label>
+          <Input
+            {...register("photo", {
+              required: { value: false, message: "Photo is required" },
+            })}
+            id="photo"
+            type="file"
+          />
+          {errors.photo && <PValidation>{errors.photo.message}</PValidation>}
+
+          <InputButton type="submit">Submit</InputButton>
+
+          <Link href={`/admin/news/list`} passHref>
+            <Button>Back</Button>
+          </Link>
+        </FormGroup>
+      </Container>
+      <Footer />
+    </>
+  );
 }
 
 const Heading = styled.h1`
@@ -191,4 +189,4 @@ const Button = styled.button`
   cursor: pointer;
 `;
 
-const InputButton = styled(Button)``;
+const InputButton = styled(Button)``;