linsa-linsa-io/web/app/routes/_layout/_pages/(topic)/-item.tsx

import * as React from "react"
import { useAtom } from "jotai"
import { toast } from "sonner"

import { LaIcon } from "@/components/custom/la-icon"
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { LearningStateSelectorContent } from "@/components/custom/learning-state-selector"

import { cn, ensureUrlProtocol, generateUniqueSlug } from "@/lib/utils"
import {
  Link as LinkSchema,
  PersonalLink,
  PersonalLinkLists,
  Topic,
} from "@/lib/schema"
import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
import { useClerk } from "@clerk/tanstack-start"
import { Link, useLocation, useNavigate } from "@tanstack/react-router"
import { openPopoverForIdAtom } from "./$"

interface LinkItemProps extends React.ComponentPropsWithoutRef<"div"> {
  topic: Topic
  link: LinkSchema
  isActive: boolean
  index: number
  setActiveIndex: (index: number) => void
  personalLinks?: PersonalLinkLists
}

export const LinkItem = React.memo(
  React.forwardRef<HTMLDivElement, LinkItemProps>(
    (
      {
        topic,
        link,
        isActive,
        index,
        setActiveIndex,
        className,
        personalLinks,
        ...props
      },
      ref,
    ) => {
      const clerk = useClerk()
      const { pathname } = useLocation()
      const navigate = useNavigate()
      const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
      const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
      const { me } = useAccountOrGuest()

      const personalLink = React.useMemo(() => {
        return personalLinks?.find((pl) => pl?.link?.id === link.id)
      }, [personalLinks, link.id])

      const selectedLearningState = React.useMemo(() => {
        return LEARNING_STATES.find(
          (ls) => ls.value === personalLink?.learningState,
        )
      }, [personalLink?.learningState])

      const handleClick = React.useCallback(
        (e: React.MouseEvent) => {
          e.preventDefault()
          setActiveIndex(index)
        },
        [index, setActiveIndex],
      )

      const handleSelectLearningState = React.useCallback(
        (learningState: LearningStateValue) => {
          if (!personalLinks || !me || me?._type === "Anonymous") {
            return clerk.redirectToSignIn({
              signInFallbackRedirectUrl: pathname,
            })
          }

          const defaultToast = {
            duration: 5000,
            position: "bottom-right" as const,
            closeButton: true,
            action: {
              label: "Go to list",
              onClick: () =>
                navigate({
                  to: "/links",
                }),
            },
          }

          if (personalLink) {
            if (personalLink.learningState === learningState) {
              personalLink.learningState = undefined
              toast.error("Link learning state removed", defaultToast)
            } else {
              personalLink.learningState = learningState
              toast.success("Link learning state updated", defaultToast)
            }
          } else {
            const slug = generateUniqueSlug(link.title)
            const newPersonalLink = PersonalLink.create(
              {
                url: link.url,
                title: link.title,
                slug,
                link,
                learningState,
                sequence: personalLinks.length + 1,
                completed: false,
                topic,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
              { owner: me },
            )

            personalLinks.push(newPersonalLink)

            toast.success("Link added.", {
              ...defaultToast,
              description: `${link.title} has been added to your personal link.`,
            })
          }

          setOpenPopoverForId(null)
          setIsPopoverOpen(false)
        },
        [
          personalLink,
          personalLinks,
          me,
          link,
          navigate,
          topic,
          setOpenPopoverForId,
          clerk,
          pathname,
        ],
      )

      const handlePopoverOpenChange = React.useCallback(
        (open: boolean) => {
          setIsPopoverOpen(open)
          setOpenPopoverForId(open ? link.id : null)
        },
        [link.id, setOpenPopoverForId],
      )

      return (
        <div
          ref={ref}
          tabIndex={0}
          onClick={handleClick}
          className={cn(
            "relative flex h-14 cursor-pointer items-center outline-none xl:h-11",
            {
              "bg-muted-foreground/10": isActive,
              "hover:bg-muted/50": !isActive,
            },
            className,
          )}
          {...props}
        >
          <div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
            <div className="flex min-w-0 items-center gap-x-4">
              <Popover
                open={isPopoverOpen}
                onOpenChange={handlePopoverOpenChange}
              >
                <PopoverTrigger asChild>
                  <Button
                    size="sm"
                    type="button"
                    role="combobox"
                    variant="ghost"
                    className="h-auto shrink-0 cursor-default p-0 text-muted-foreground/75 hover:bg-inherit hover:text-foreground"
                    onClick={(e) => e.stopPropagation()}
                  >
                    {selectedLearningState?.icon ? (
                      <LaIcon
                        name={selectedLearningState.icon}
                        className={selectedLearningState.className}
                      />
                    ) : (
                      <LaIcon name="Circle" />
                    )}
                  </Button>
                </PopoverTrigger>
                <PopoverContent
                  className="w-52 rounded-lg p-0"
                  side="bottom"
                  align="start"
                >
                  <LearningStateSelectorContent
                    showSearch={false}
                    searchPlaceholder="Search state..."
                    value={personalLink?.learningState}
                    onSelect={(value: string) =>
                      handleSelectLearningState(value as LearningStateValue)
                    }
                  />
                </PopoverContent>
              </Popover>

              <div className="w-full min-w-0 flex-auto">
                <div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
                  <p
                    className={cn(
                      "line-clamp-1 text-sm font-medium text-primary hover:text-primary",
                      isActive && "font-bold",
                    )}
                  >
                    {link.title}
                  </p>

                  <div className="group flex items-center gap-x-1">
                    <LaIcon
                      name="Link"
                      aria-hidden="true"
                      className="flex-none text-muted-foreground group-hover:text-primary"
                    />

                    <Link
                      to={ensureUrlProtocol(link.url)}
                      target="_blank"
                      onClick={(e) => e.stopPropagation()}
                      className="text-xs text-muted-foreground hover:text-primary"
                    >
                      <span className="line-clamp-1">{link.url}</span>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )
    },
  ),
)

LinkItem.displayName = "LinkItem"