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>
  ))}