From ad7897ba73dd798f54f5db642c014ba95ecdc6a3 Mon Sep 17 00:00:00 2001 From: TeeGooodGood <122004889+TeeGoood@users.noreply.github.com> Date: Fri, 17 May 2024 14:21:02 +0700 Subject: [PATCH] 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 --- src/api/pets.ts | 14 +--- src/app/admin/pets/add/page.tsx | 6 ++ src/app/home/page.tsx | 6 +- src/app/pets/[id]/adopt/page.tsx | 61 +++++++++++------- src/assets/{ads => banners}/1.webp | Bin src/assets/{ads => banners}/10.webp | Bin src/assets/{ads => banners}/11.webp | Bin src/assets/{ads => banners}/2.webp | Bin src/assets/{ads => banners}/3.webp | Bin src/assets/{ads => banners}/4.webp | Bin src/assets/{ads => banners}/5.webp | Bin src/assets/{ads => banners}/6.webp | Bin src/assets/{ads => banners}/7.webp | Bin src/assets/{ads => banners}/8.webp | Bin src/assets/{ads => banners}/9.webp | Bin .../Admin/Pets/Add/EditInfoAndSubmit.tsx | 45 ++++++++++++- src/components/Admin/Pets/Add/EditName.tsx | 2 +- .../Admin/Pets/Add/TextInputInfo.tsx | 6 +- src/components/Card/PetCard/index.tsx | 2 +- src/components/Main/Banner.tsx | 22 +++---- src/components/Pets/Details/Details.tsx | 26 +++++--- .../Pets/TermsAndConditions/index.tsx | 56 +++++++++++++--- src/hooks/mutation/useDeleteImage.ts | 4 ++ src/hooks/mutation/usePostImage.ts | 4 ++ src/types/pets.ts | 4 +- 25 files changed, 183 insertions(+), 75 deletions(-) rename src/assets/{ads => banners}/1.webp (100%) rename src/assets/{ads => banners}/10.webp (100%) rename src/assets/{ads => banners}/11.webp (100%) rename src/assets/{ads => banners}/2.webp (100%) rename src/assets/{ads => banners}/3.webp (100%) rename src/assets/{ads => banners}/4.webp (100%) rename src/assets/{ads => banners}/5.webp (100%) rename src/assets/{ads => banners}/6.webp (100%) rename src/assets/{ads => banners}/7.webp (100%) rename src/assets/{ads => banners}/8.webp (100%) rename src/assets/{ads => banners}/9.webp (100%) diff --git a/src/api/pets.ts b/src/api/pets.ts index 295d3342..fd33bf17 100644 --- a/src/api/pets.ts +++ b/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 & { 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; }; diff --git a/src/app/admin/pets/add/page.tsx b/src/app/admin/pets/add/page.tsx index 02d740dc..6b78d2d1 100644 --- a/src/app/admin/pets/add/page.tsx +++ b/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); diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 6b4d329e..05beb1b6 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -43,6 +43,8 @@ const MainPage = () => { maxAge: 30, }); const { data, isLoading } = usePetsQuery(filters); + // console.log(data); + return ( <> @@ -53,7 +55,7 @@ const MainPage = () => {
- +
@@ -63,7 +65,7 @@ const MainPage = () => { - +
diff --git a/src/app/pets/[id]/adopt/page.tsx b/src/app/pets/[id]/adopt/page.tsx index e0b2ae41..d4484741 100644 --- a/src/app/pets/[id]/adopt/page.tsx +++ b/src/app/pets/[id]/adopt/page.tsx @@ -5,12 +5,16 @@ 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(null); const AdoptionPage = () => { const param = usePageParams(["id"]); const { data } = usePetQuery(param.id); + console.log(data); const petImagesArray = useMemo(() => { if (!data?.images) return [dog]; @@ -18,34 +22,43 @@ const AdoptionPage = () => { }, [data?.images]); return ( data && ( - -
- -
-
-

- {data.name} -

-
+ + +
+ +
+
+

+ {data.name} +

+
+
-
-
- -
-
-

- {data.name} -

-
+
+
+ +
+
+
+
+

+ {data.name} +

+
+
+ +
-
-
- + + ) ); }; diff --git a/src/assets/ads/1.webp b/src/assets/banners/1.webp similarity index 100% rename from src/assets/ads/1.webp rename to src/assets/banners/1.webp diff --git a/src/assets/ads/10.webp b/src/assets/banners/10.webp similarity index 100% rename from src/assets/ads/10.webp rename to src/assets/banners/10.webp diff --git a/src/assets/ads/11.webp b/src/assets/banners/11.webp similarity index 100% rename from src/assets/ads/11.webp rename to src/assets/banners/11.webp diff --git a/src/assets/ads/2.webp b/src/assets/banners/2.webp similarity index 100% rename from src/assets/ads/2.webp rename to src/assets/banners/2.webp diff --git a/src/assets/ads/3.webp b/src/assets/banners/3.webp similarity index 100% rename from src/assets/ads/3.webp rename to src/assets/banners/3.webp diff --git a/src/assets/ads/4.webp b/src/assets/banners/4.webp similarity index 100% rename from src/assets/ads/4.webp rename to src/assets/banners/4.webp diff --git a/src/assets/ads/5.webp b/src/assets/banners/5.webp similarity index 100% rename from src/assets/ads/5.webp rename to src/assets/banners/5.webp diff --git a/src/assets/ads/6.webp b/src/assets/banners/6.webp similarity index 100% rename from src/assets/ads/6.webp rename to src/assets/banners/6.webp diff --git a/src/assets/ads/7.webp b/src/assets/banners/7.webp similarity index 100% rename from src/assets/ads/7.webp rename to src/assets/banners/7.webp diff --git a/src/assets/ads/8.webp b/src/assets/banners/8.webp similarity index 100% rename from src/assets/ads/8.webp rename to src/assets/banners/8.webp diff --git a/src/assets/ads/9.webp b/src/assets/banners/9.webp similarity index 100% rename from src/assets/ads/9.webp rename to src/assets/banners/9.webp diff --git a/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx b/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx index 7ba03960..7441f67c 100644 --- a/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx +++ b/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) => { )}
-
+
{/* Gender */} { />
+
+ + ติดต่อเจ้าของ + +
    + handleOnChangeTextArea(event, "owner")} + /> + + handleOnChangeTextArea(event, "tel")} + /> + + handleOnChangeTextArea(event, "contact")} + /> +
+
+
{/* Vaccine */} @@ -227,9 +262,13 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {

diff --git a/src/components/Admin/Pets/Add/EditName.tsx b/src/components/Admin/Pets/Add/EditName.tsx index 7969cb5d..4b14dd73 100644 --- a/src/components/Admin/Pets/Add/EditName.tsx +++ b/src/components/Admin/Pets/Add/EditName.tsx @@ -75,7 +75,7 @@ const EditName = (props: EditNameProps) => { ) => void; - icon: string; + icon?: string; } const TextInputInfo = (props: TextInputInfoProps) => { return (
- + {props.icon && ( + + )} {props.text}
!prev); - console.log("liked : " + id); + // console.log("liked : " + id); }; const handleAdopt = (event: React.MouseEvent) => { diff --git a/src/components/Main/Banner.tsx b/src/components/Main/Banner.tsx index cddc13a9..ef667e3b 100644 --- a/src/components/Main/Banner.tsx +++ b/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"; diff --git a/src/components/Pets/Details/Details.tsx b/src/components/Pets/Details/Details.tsx index 4e8035b2..35428ebb 100644 --- a/src/components/Pets/Details/Details.tsx +++ b/src/components/Pets/Details/Details.tsx @@ -43,13 +43,16 @@ const Details = (props: DetailsProps) => { const [images, setImages] = useState([]); const [enableSubmit, setEnableSubmit] = useState(false); const [petInfo, setPetInfo] = useState({ - 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({ diff --git a/src/components/Pets/TermsAndConditions/index.tsx b/src/components/Pets/TermsAndConditions/index.tsx index d563de5b..94f39cbd 100644 --- a/src/components/Pets/TermsAndConditions/index.tsx +++ b/src/components/Pets/TermsAndConditions/index.tsx @@ -1,10 +1,13 @@ +import { PetContext } from "@/app/pets/[id]/adopt/page"; import Button from "@/components/Button"; import Modal from "@/components/Modal"; -import { useState } from "react"; +import { useContext, useState } from "react"; import { Link } from "react-router-dom"; const TermsAndConditions = () => { const [open, setOpen] = useState(false); + const pet = useContext(PetContext); + console.log(pet); return ( <> @@ -61,24 +64,59 @@ const TermsAndConditions = () => {
+ pet?.origin == "club" ? ( + +