Boom/fix/minor bug 1 (#98)

* fix: birthdate thai format * fix: age * fix: no default gender * fix: gender * fix: adjust heading box * fix: pets page no gender * fix: remove outline * refactor: improve sterile state * fix: default description
isd-sgcu · May 10, 2024 · 9f047db · 9f047db
1 parent cbdae3b
commit 9f047db
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 47 deletions.
diff --git a/src/app/frequently-asked-questions/page.tsx b/src/app/frequently-asked-questions/page.tsx
@@ -39,7 +39,7 @@ const Faq = () => {
             <input
               type="text"
               placeholder="ค้นหาคำถาม"
-              className="ml-3 w-full rounded-md bg-transparent text-black"
+              className="ml-3 w-full rounded-md bg-transparent text-black outline-none"
             />{" "}
           </div>
         </div>

diff --git a/src/components/Admin/Pets/Add/DateInputInfo.tsx b/src/components/Admin/Pets/Add/DateInputInfo.tsx
@@ -1,5 +1,6 @@
 import { Icon } from "@iconify/react/dist/iconify.js";
 import dayjs from "dayjs";
+import "dayjs/locale/th";
 import { ChangeEvent, useMemo } from "react";
 
 interface DateInputInfoProps {
@@ -19,7 +20,9 @@ const DateInputInfo = (props: DateInputInfoProps) => {
   };
 
   const birthdate = useMemo(() => {
-    if (props.value != "-") return dayjs(props.value).format("MMMM DD, YYYY");
+    dayjs.locale("th");
+
+    if (props.value != "-") return dayjs(props.value).format("DD MMMM YYYY");
     return "-";
   }, [props.value]);
 

diff --git a/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx b/src/components/Admin/Pets/Add/EditInfoAndSubmit.tsx
@@ -10,7 +10,7 @@ import ToggleInputInfo from "./ToggleInputInfo";
 
 export type info = {
   type: "dog" | "cat" | "-";
-  gender: "male" | "female" | "-";
+  gender: "male" | "female" | "-" | "";
   color: string;
   age: string;
   nature: string;
@@ -138,7 +138,11 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {
             <DropdownInputInfo
               text={"เพศ:"}
               icon={"ph:gender-intersex"}
-              value={showInfo.gender}
+              value={
+                !enableEdit && showInfo.gender === ""
+                  ? "ไม่ระบุเพศ"
+                  : showInfo.gender
+              }
               setValue={(newOption) =>
                 handleOnChangeDropDown(newOption, "gender")
               }
@@ -198,7 +202,7 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {
                 onClick={() => handleOnClickButton("vaccine")}
                 enableEdit={enableEdit}
                 icon={"ph:eyedropper"}
-                text={"ฉีดวัคซีนแล้ว"}
+                text={showInfo["vaccine"] ? "ฉีดวัคซีนแล้ว" : "ยังไม่ฉีดวัคซีน"}
               />
 
               {/* Sterile */}
@@ -207,7 +211,7 @@ const EditInfoAndSubmit = (props: EditInfoAndSubmitProps) => {
                 onClick={() => handleOnClickButton("sterile")}
                 enableEdit={enableEdit}
                 icon={"ph:medal"}
-                text={"ทำหมันแล้ว"}
+                text={showInfo["sterile"] ? "ทำหมันแล้ว" : "ยังไม่ทำหมัน"}
               />
             </div>
 

diff --git a/src/components/Admin/Pets/Add/EditName.tsx b/src/components/Admin/Pets/Add/EditName.tsx
@@ -51,7 +51,7 @@ const EditName = (props: EditNameProps) => {
           />
         )}
         <div className="relative flex flex-col">
-          <h2 className="flex break-all pl-1 text-right text-3xl font-bold text-primary md:text-left">
+          <h2 className="flex break-all pl-1 pt-1 text-right text-3xl font-bold text-primary md:text-left">
             {props.value}
           </h2>
           <div className="mt-1 h-[3px] w-full rounded-full bg-primary" />

diff --git a/src/components/Admin/Pets/Add/EditText.tsx b/src/components/Admin/Pets/Add/EditText.tsx
@@ -32,7 +32,7 @@ const EditText = (props: EditTextProps) => {
   }, [enableEdit]);
 
   return (
-    <div className={`relative flex min-h-60 w-full md:h-full md:min-h-0`}>
+    <div className="relative flex min-h-60 w-full md:h-full md:min-h-0">
       <TextareaAutosize
         value={props.value}
         className={
@@ -42,7 +42,9 @@ const EditText = (props: EditTextProps) => {
         onChange={handleOnChange}
         ref={ref}
         disabled={!enableEdit}
-        placeholder="ใส่ข้อความตรงนี้..."
+        placeholder={
+          !props.isAdmin ? "ฝากรับเลี้ยงผ๋มด้วยงับ" : "ใส่ข้อความตรงนี้..."
+        }
       />
       {props.isAdmin && (
         <div ref={saveRef} tabIndex={0}>

diff --git a/src/components/Card/MiniPetCard.tsx b/src/components/Card/MiniPetCard.tsx
@@ -1,5 +1,5 @@
 import dog from "@/assets/dog.webp";
-import { UtcStringToYear } from "@/utils/dateConverter";
+import dayjs from "dayjs";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
 
@@ -20,16 +20,24 @@ const MiniPetCard = ({
   gender,
   birthdate,
 }: MiniPetCardProps) => {
-  const genderAns = useMemo(() => {
-    return gender === "male" ? "ผู้" : "เมีย";
+  const genderInfo = useMemo(() => {
+    if (gender === "male") return "เพศผู้";
+    if (gender === "female") return "เพศเมีย";
+    return null;
   }, [gender]);
 
   const linkTo = useMemo(() => {
     return "/pets/" + id;
   }, [id]);
 
-  const years = useMemo(() => {
-    return UtcStringToYear({ utcString: birthdate });
+  const age = useMemo(() => {
+    const year = dayjs().diff(dayjs(birthdate), "year");
+    const month = dayjs().diff(dayjs(birthdate), "month");
+    const day = dayjs().diff(dayjs(birthdate), "day");
+
+    if (year > 0) return year + " ขวบ";
+    if (month > 0) return month + " เดือน";
+    return day + " วัน";
   }, [birthdate]);
 
   return (
@@ -57,11 +65,13 @@ const MiniPetCard = ({
             </div>
           </div>
           <div className="space-x-1.5">
-            <span className="rounded-xl bg-accent-blue-variant px-2 py-0.5 text-sm font-semibold text-accent-blue">
-              เพศ{genderAns}
-            </span>
+            {genderInfo && (
+              <span className="rounded-xl bg-accent-blue-variant px-2 py-0.5 text-sm font-semibold text-accent-blue">
+                {genderInfo}
+              </span>
+            )}
             <span className="rounded-xl bg-accent-light-gray px-2 py-0.5 text-sm font-semibold text-black">
-              {years} ขวบ
+              {age}
             </span>
           </div>
         </div>

diff --git a/src/components/Card/PetCard/index.tsx b/src/components/Card/PetCard/index.tsx
@@ -72,7 +72,9 @@ const PetCard = ({
   }, [birthDate]);
 
   const petGender = useMemo(() => {
-    return gender === "female" ? "ตัวเมีย" : "ตัวผู้";
+    if (gender === "male") return "ตัวผู้";
+    if (gender === "female") return "ตัวเมีย";
+    return null;
   }, [gender]);
 
   const petSterile = useMemo(() => {
@@ -104,6 +106,13 @@ const PetCard = ({
     navigate(`/pets/${id}/adopt`);
   };
 
+  const petDetail = useMemo(() => {
+    if (petGender && age) {
+      return `${petGender}, ${age}`;
+    }
+    return age;
+  }, [petGender, age]);
+
   return (
     <>
       <Link to={linkTo}>
@@ -141,10 +150,7 @@ const PetCard = ({
           </div>
           <div className="flex w-full flex-row items-end justify-between gap-2">
             <div className="w-3/5 space-y-1">
-              <PetDetail
-                icon={"ph:paw-print"}
-                description={`${petGender}, ${age}`}
-              />
+              <PetDetail icon={"ph:paw-print"} description={petDetail} />
               <PetDetail icon={"ph:music-notes"} description={habit} />
               <PetDetail icon={"ph:medal"} description={petSterile} />
             </div>

diff --git a/src/components/Card/SmallPetCard.tsx b/src/components/Card/SmallPetCard.tsx
@@ -21,8 +21,10 @@ const SmallPetCard = ({
   birthdate,
   status,
 }: SmallPetCardProps) => {
-  const genderAns = useMemo(() => {
-    return gender === "male" ? "ผู้" : "เมีย";
+  const genderInfo = useMemo(() => {
+    if (gender === "male") return "เพศผู้";
+    if (gender === "female") return "เพศเมีย";
+    return "ไม่ระบุเพศ";
   }, [gender]);
 
   const linkTo = useMemo(() => {
@@ -63,7 +65,7 @@ const SmallPetCard = ({
                     />
                   </div>
                   <div className="text-xs font-normal  text-accent-gray">
-                    ตัว{genderAns}
+                    {genderInfo}
                   </div>
                 </div>
                 <div className="flex flex-row items-center justify-start gap-2">

diff --git a/src/components/Pets/Details/Details.tsx b/src/components/Pets/Details/Details.tsx
@@ -184,29 +184,37 @@ const Details = (props: DetailsProps) => {
         </div>
 
         {/* thumbnail */}
-        <div className="mx-auto flex w-full flex-col items-center justify-between gap-8 md:h-80 md:flex-row md:items-start">
-          <div className="relative w-80">
-            {!props.isAdmin ? (
-              <PetThumbnails petImages={imgs} origin={origin} />
-            ) : (
-              <AddThumbnail
-                valueOrigin={origin}
-                setOrigin={setOrigin}
-                valueThumbnail={thumbnail}
-                setThumbnail={setThumbnail}
-              />
-            )}
+        <div className="flex flex-col gap-8 md:grid md:grid-cols-5 md:gap-16 lg:grid-cols-7">
+          <div className="col-span-2">
+            <div className="relative aspect-square w-full">
+              {!props.isAdmin ? (
+                <PetThumbnails petImages={imgs} origin={origin} />
+              ) : (
+                <AddThumbnail
+                  valueOrigin={origin}
+                  setOrigin={setOrigin}
+                  valueThumbnail={thumbnail}
+                  setThumbnail={setThumbnail}
+                />
+              )}
+            </div>
           </div>
 
-          <div className="flex w-full flex-col items-start gap-8 overflow-auto md:h-full md:flex-1">
-            <div className="hidden md:block">
-              <EditName
-                value={name}
-                setValue={setName}
+          <div className="md:col-span-3 lg:col-span-5">
+            <div className="flex w-full flex-col items-start gap-8 overflow-auto md:h-full md:flex-1">
+              <div className="hidden md:block">
+                <EditName
+                  value={name}
+                  setValue={setName}
+                  isAdmin={props.isAdmin}
+                />
+              </div>
+              <EditText
+                value={text}
+                setValue={setText}
                 isAdmin={props.isAdmin}
               />
             </div>
-            <EditText value={text} setValue={setText} isAdmin={props.isAdmin} />
           </div>
         </div>
         {props.isAdmin && (

diff --git a/src/components/Pets/PetThumbnails/index.tsx b/src/components/Pets/PetThumbnails/index.tsx
@@ -10,12 +10,12 @@ interface PetThumbnailsProps {
 
 const PetThumbnails = ({ petImages, origin }: PetThumbnailsProps) => {
   return (
-    <div className="relative aspect-square min-w-40 rounded-[20px] sm:min-w-80">
+    <div className="relatitve rounded-[20px]">
       <div className="absolute -top-1 right-4 z-10">
         {/* Recieved where they're from */}
         <PetBadge value={origin} setValue={() => {}} isEditabled={false} />
       </div>
-      <div className="z-80 relative max-h-80 max-w-80 rounded-2xl">
+      <div className="z-80 relative aspect-square w-full rounded-2xl">
         <Carousel
           renderArrowPrev={(clickHandler: () => void) => {
             return (
@@ -58,7 +58,7 @@ const PetThumbnails = ({ petImages, origin }: PetThumbnailsProps) => {
               <div key={index}>
                 <img
                   src={item}
-                  className="z-0 aspect-square max-w-80 rounded-2xl object-cover object-center"
+                  className="z-0 aspect-square rounded-2xl object-cover object-center"
                 />
               </div>
             ))}