Tee/add contact (#99)

* fix: assets URI get blocked by adblocker

* add: adopt pop up

* fix: await undefinded delete mutation image

* add: pet edit's contact form ui

* use gird

* add: contact state

* data  pop up

* edit page

* add: @ in contact field

* lint:fix

* fix: adopt thumbnail badge floating

* fix: adopt thumbnail badge floating real

* fix: ensure payload data

* fix: user save unsave info

* add: edit text have border

* fix: lint

---------

Co-authored-by: boomchanotai <boom9387@hotmail.com>

src/api/pets.ts

@@ -44,10 +44,7 @@ const getPetsAdmin = async (filters?: filterState) => {
   return response.data;
 };
 
-type postPetRequest = Omit<
-  Pet,
-  "id" | "images" | "is_club_pet" | "address" | "adopt_by" | "contact"
-> & {
+type postPetRequest = Omit<Pet, "id" | "images" | "is_club_pet"> & {
   images: string[]; // image id
 };
 
@@ -104,14 +101,7 @@ const deletePet = async (id: string) => {
 
 type PutPetRequest = Omit<
   Pet,
-  | "id"
-  | "images"
-  | "is_club_pet"
-  | "pattern"
-  | "status"
-  | "address"
-  | "adopt_by"
-  | "contact"
+  "id" | "images" | "is_club_pet" | "pattern" | "status"
 > & {
   origin: string;
 };

src/app/admin/pets/add/page.tsx

@@ -35,6 +35,9 @@ const adminCreate = () => {
     nature: "-",
     vaccine: false,
     sterile: false,
+    owner: "-",
+    tel: "-",
+    contact: "-",
   });
 
   const [enableSubmit, setEnableSubmit] = useState(false);
@@ -91,6 +94,9 @@ const adminCreate = () => {
       is_visible: true,
       origin: `${origin === "fromClub" ? "club" : "entrust"}`,
       images: allImage,
+      tel: info.tel,
+      contact: info.contact,
+      owner: info.owner,
     };
 
     postPetMutation.mutate(petData);

src/app/home/page.tsx

@@ -43,6 +43,8 @@ const MainPage = () => {
     maxAge: 30,
   });
   const { data, isLoading } = usePetsQuery(filters);
+  // console.log(data);
+
   return (
     <>
       <Container className="grid grid-cols-1 items-center md:grid-cols-2 md:gap-9 lg:grid-cols-3">
@@ -53,7 +55,7 @@ const MainPage = () => {
         </div>
         <div className="flex w-full flex-col items-center space-y-6 md:items-start lg:col-span-2">
           <div className="hidden md:flex">
-            <Heading onSearch quantity={data?.metadata.total} />
+            <Heading onSearch quantity={data?.metadata?.total} />
           </div>
           <Search variant="green" filter={filters} setFilters={setFilters} />
           <Filter filters={filters} setFilters={setFilters} />
@@ -63,7 +65,7 @@ const MainPage = () => {
         <Divider variant="primary" />
       </Container>
       <Container className="md:hidden">
-        <Heading onSearch quantity={data?.metadata.total} />
+        <Heading onSearch quantity={data?.metadata?.total} />
       </Container>
       <Container className="space-y-8">
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">

src/app/pets/[id]/adopt/page.tsx

@@ -5,47 +5,60 @@ import TermsAndConditions from "@/components/Pets/TermsAndConditions";
 import { usePetQuery } from "@/hooks/queries/usePetQuery";
 import { usePageParams } from "@/hooks/usePageParams";
 import MainLayout from "@/layouts/MainLayout";
+import { Pet } from "@/types/pets";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { useMemo } from "react";
+import { createContext, useMemo } from "react";
+
+export const PetContext = createContext<Pet | null>(null);
 
 const AdoptionPage = () => {
   const param = usePageParams(["id"]);
   const { data } = usePetQuery(param.id);
+  console.log(data);
 
   const petImagesArray = useMemo(() => {
     if (!data?.images) return [dog];
     return data.images?.map((img) => img.url);
   }, [data?.images]);
   return (
     data && (
-      <Container className="space-y-8">
-        <div className="flex items-center justify-between text-primary">
-          <button type="button" onClick={() => window.history.back()}>
-            <Icon icon="ion:chevron-back" className="h-8 w-8 cursor-pointer" />
-          </button>
-          <div className="md:hidden">
-            <div className="relative flex flex-col">
-              <h2 className="flex break-all pl-1 text-right text-3xl font-bold text-primary md:text-left">
-                {data.name}
-              </h2>
-              <div className="mt-1 h-[3px] w-full rounded-full bg-primary" />
+      <PetContext.Provider value={data}>
+        <Container className="space-y-8">
+          <div className="flex items-center justify-between text-primary">
+            <button type="button" onClick={() => window.history.back()}>
+              <Icon
+                icon="ion:chevron-back"
+                className="h-8 w-8 cursor-pointer"
+              />
+            </button>
+            <div className="md:hidden">
+              <div className="relative flex flex-col">
+                <h2 className="flex break-all pl-1 text-right text-3xl font-bold text-primary md:text-left">
+                  {data.name}
+                </h2>
+                <div className="mt-1 h-[3px] w-full rounded-full bg-primary" />
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className="flex flex-col items-center gap-8 md:flex-row md:items-start md:justify-between">
-          <PetThumbnails petImages={petImagesArray} origin={data?.origin} />
-          <div className="flex flex-col items-start gap-8">
-            <div className="relative hidden flex-col md:flex">
-              <h2 className="flex break-all pl-1 text-right text-3xl font-bold text-primary md:text-left">
-                {data.name}
-              </h2>
-              <div className="mt-1 h-[3px] w-full rounded-full bg-primary" />
+          <div className="flex flex-col gap-8 md:grid md:grid-cols-5 md:gap-16 lg:grid-cols-7">
+            <div className="relative col-span-2">
+              <PetThumbnails petImages={petImagesArray} origin={data?.origin} />
+            </div>
+            <div className="md:col-span-3 lg:col-span-5">
+              <div className="flex flex-col items-start gap-8">
+                <div className="relative hidden flex-col md:flex">
+                  <h2 className="flex break-all pl-1 text-right text-3xl font-bold text-primary md:text-left">
+                    {data.name}
+                  </h2>
+                  <div className="mt-1 h-[3px] w-full rounded-full bg-primary" />
+                </div>
+                <TermsAndConditions />
+              </div>
             </div>
-            <TermsAndConditions />
           </div>
-        </div>
-      </Container>
+        </Container>
+      </PetContext.Provider>
     )
   );
 };

src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx

@@ -16,6 +16,9 @@ export type info = {
   nature: string;
   vaccine: boolean;
   sterile: boolean;
+  tel: string;
+  contact: string;
+  owner: string;
 };
 
 interface EditInfoAndSubmitProps {
@@ -132,7 +135,7 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {
           )}
         </div>
 
-        <div className="mt-4 flex flex-col lg:grid lg:grid-cols-2 lg:divide-x-2">
+        <div className="mt-4 flex flex-col lg:grid lg:grid-cols-3 lg:divide-x-2">
           <div className="flex flex-col space-y-3 lg:space-y-4 lg:pr-8">
             {/* Gender */}
             <DropdownInputInfo
@@ -194,6 +197,38 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {
             />
           </div>
 
+          <section className="p-4">
+            <span className="text-xl font-bold text-primary">
+              ติดต่อเจ้าของ
+            </span>
+            <ul className="flex flex-col gap-2">
+              <TextInputInfo
+                text="ชื่อ:"
+                value={showInfo.owner}
+                enableEdit={enableEdit}
+                onChange={(event) => handleOnChangeTextArea(event, "owner")}
+              />
+
+              <TextInputInfo
+                text="เบอร์:"
+                value={showInfo.tel}
+                enableEdit={enableEdit}
+                onChange={(event) => handleOnChangeTextArea(event, "tel")}
+              />
+
+              <TextInputInfo
+                text="ไอดีไลน์:"
+                value={
+                  showInfo.contact[0] == "@" || showInfo.contact == ""
+                    ? showInfo.contact
+                    : "@" + showInfo.contact
+                }
+                enableEdit={enableEdit}
+                onChange={(event) => handleOnChangeTextArea(event, "contact")}
+              />
+            </ul>
+          </section>
+
           <div className="mt-3 flex flex-col lg:justify-between lg:px-[10%]">
             <div className="flex flex-row flex-wrap justify-center gap-4 lg:flex-col">
               {/* Vaccine */}
@@ -227,9 +262,13 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {
                 </p>
                 <Button
                   className="w-full text-2xl font-semibold"
-                  text="โพสต์เลย"
+                  text={enableEdit ? "โปรดบันทึกข้อมูลก่อนโพสต์" : "โพสต์เลย"}
                   onClick={props.onSubmit}
-                  variant={props.enableSubmit ? "accent-red" : "disabled"}
+                  variant={
+                    props.enableSubmit && !enableEdit
+                      ? "accent-red"
+                      : "disabled"
+                  }
                   rounded="full"
                 />
               </div>

src/components/Admin/Pets/Add/EditName.tsx

@@ -75,7 +75,7 @@ const EditName = (props: EditNameProps) => {
         <TextareaAutosize
           value={props.value}
           onChange={handleOnChange}
-          className={`flex w-full resize-none text-wrap break-words rounded-lg p-2 text-right text-3xl font-bold text-primary focus:outline-accent-gray-variant lg:text-left ${
+          className={`flex w-full resize-none text-wrap break-words rounded-lg border-2 p-2 text-right text-3xl font-bold text-primary focus:outline-accent-gray-variant lg:text-left ${
             enableEdit ? "visible" : "hidden"
           }`}
           disabled={!enableEdit}

src/components/Admin/Pets/Add/TextInputInfo.tsx

@@ -6,14 +6,16 @@ interface TextInputInfoProps {
   value: string;
   enableEdit: boolean;
   onChange: (event: React.FormEvent<HTMLTextAreaElement>) => void;
-  icon: string;
+  icon?: string;
 }
 
 const TextInputInfo = (props: TextInputInfoProps) => {
   return (
     <div className="grid grid-cols-4 gap-2">
       <div className="flex flex-row items-center">
-        <Icon icon={props.icon} className="h-5 w-5 text-primary" />
+        {props.icon && (
+          <Icon icon={props.icon} className="h-5 w-5 text-primary" />
+        )}
         <span className="ml-1 text-nowrap text-primary">{props.text}</span>
       </div>
       <TextareaAutosize

src/components/Card/PetCard/index.tsx

@@ -98,7 +98,7 @@ const PetCard = ({
       addToFavorites(id);
     }
     setLiked((prev) => !prev);
-    console.log("liked : " + id);
+    // console.log("liked : " + id);
   };
 
   const handleAdopt = (event: React.MouseEvent<HTMLButtonElement>) => {

src/components/Main/Banner.tsx

@@ -1,14 +1,14 @@
-import adsImage1 from "@/assets/ads/1.webp";
-import adsImage10 from "@/assets/ads/10.webp";
-import adsImage11 from "@/assets/ads/11.webp";
-import adsImage2 from "@/assets/ads/2.webp";
-import adsImage3 from "@/assets/ads/3.webp";
-import adsImage4 from "@/assets/ads/4.webp";
-import adsImage5 from "@/assets/ads/5.webp";
-import adsImage6 from "@/assets/ads/6.webp";
-import adsImage7 from "@/assets/ads/7.webp";
-import adsImage8 from "@/assets/ads/8.webp";
-import adsImage9 from "@/assets/ads/9.webp";
+import adsImage1 from "@/assets/banners/1.webp";
+import adsImage10 from "@/assets/banners/10.webp";
+import adsImage11 from "@/assets/banners/11.webp";
+import adsImage2 from "@/assets/banners/2.webp";
+import adsImage3 from "@/assets/banners/3.webp";
+import adsImage4 from "@/assets/banners/4.webp";
+import adsImage5 from "@/assets/banners/5.webp";
+import adsImage6 from "@/assets/banners/6.webp";
+import adsImage7 from "@/assets/banners/7.webp";
+import adsImage8 from "@/assets/banners/8.webp";
+import adsImage9 from "@/assets/banners/9.webp";
 import { Icon } from "@iconify/react";
 import React from "react";
 import { Carousel } from "react-responsive-carousel";

src/components/Pets/Details/Details.tsx

@@ -43,13 +43,16 @@ const Details = (props: DetailsProps) => {
   const [images, setImages] = useState<File[]>([]);
   const [enableSubmit, setEnableSubmit] = useState(false);
   const [petInfo, setPetInfo] = useState<info>({
-    type: "-",
-    gender: "-",
-    color: "-",
-    age: "-",
-    nature: "-",
-    vaccine: false,
-    sterile: false,
+    type: props.data.type as "dog" | "cat" | "-",
+    gender: props.data.gender,
+    color: props.data.color,
+    age: dayjs(props.data.birthdate).toISOString(),
+    nature: props.data.habit,
+    vaccine: props.data.is_vaccinated,
+    sterile: props.data.is_sterile,
+    owner: props.data.owner,
+    tel: props.data.tel,
+    contact: props.data.contact,
   });
 
   const convertImgToFile = async (imgFilePath: string) => {
@@ -91,6 +94,9 @@ const Details = (props: DetailsProps) => {
       nature: props.data.habit,
       vaccine: props.data.is_vaccinated,
       sterile: props.data.is_sterile,
+      owner: props.data.owner,
+      tel: props.data.tel,
+      contact: props.data.contact,
     });
   }, [props.data, id]);
 
@@ -132,8 +138,9 @@ const Details = (props: DetailsProps) => {
     );
 
     try {
-      await Promise.all(deletedImages);
+      deletedImages && (await Promise.all(deletedImages));
     } catch (err) {
+      console.log(err);
       return;
     }
 
@@ -162,6 +169,9 @@ const Details = (props: DetailsProps) => {
       is_vaccinated: petInfo.vaccine,
       is_visible: props.data.is_visible,
       origin: origin,
+      tel: petInfo.tel,
+      contact: petInfo.contact,
+      owner: petInfo.owner,
     };
 
     updatePetMutaion.mutate({