Function EditTrackCard

apps/web/components/admin/EditTrackCard.tsx:16–140

({ Track, categories }: { Track: TrackCardProps; categories: Categories[] })

}

const EditTrackCard = ({ Track, categories }: { Track: TrackCardProps; categories: Categories[] }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [title, setTitle] = useState(Track.title);
  const [description, setDescription] = useState(Track.description);
  const [image, setImage] = useState(Track.image);
  const [hidden, setHidden] = useState(Track.hidden);
  const [cohort, setCohort] = useState(Track.cohort);
  const [trackType, setTrackType] = useState(Track.trackType);
  const [canvaLink, setCanvaLink] = useState(Track.canvaLink || "");

  const [selectedCategory, setSelectedCategory] = useState<string[]>(Track.categories.map((item) => item.category.id));

  function handleEdit(id: string) {
    if (isEditing) {
      updateTrack(id, { id, title, description, image, hidden, selectedCategory, cohort, trackType, canvaLink });
      return setIsEditing(false);
    }
    setIsEditing(true);
  }

  function handleFilterButton(category: string) {
    if (selectedCategory.includes(category)) {
      setSelectedCategory(selectedCategory.filter((item) => item !== category));
    } else {
      setSelectedCategory([...selectedCategory, category]);
    }
  }

  function handleDiscardButton() {
    setTitle(Track.title);
    setDescription(Track.description);
    setImage(Track.image);
    setHidden(Track.hidden);
    setIsEditing(Track.hidden);
    setCohort(Track.cohort);
  }
  return (
    <Card key={Track.id}>
      {!isEditing && (
        <div className="grid grid-cols-6">
          <img src={image} className="m-4 flex min-h-[130px] min-w-[130px] rounded-xl sm:h-[130px] sm:w-[130px]" />
          <div className="col-span-5">
            <CardHeader>
              <div className="flex justify-between">
                <CardTitle>{title}</CardTitle>
                <Button variant={"outline"} className="" onClick={() => handleEdit(Track.id)}>
                  Edit
                </Button>
              </div>
              <CardDescription>{description}</CardDescription>
              <CardDescription>
                {selectedCategory.map((item) => {
                  return <div key={item}>{item}</div>;
                })}
              </CardDescription>
            </CardHeader>
            <CardContent>{`hidden: ${hidden}`}</CardContent>
          </div>