community-rule/app/components/modals/Share/Share.container.tsx

"use client";

/**
 * Figma: Community Rule System — "Modal / Share"
 * https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22073-30884
 * Copy-link hover / Copied! : 23769:27494 / 23769:27443
 */
import { memo, useCallback, useEffect, useId, useRef, useState } from "react";
import { useTranslation } from "../../../contexts/MessagesContext";
import { useCreateModalA11y } from "../Create/useCreateModalA11y";
import { ShareView } from "./Share.view";
import type { ShareProps } from "./Share.types";

const ShareContainer = memo<ShareProps>((props) => {
  const dialogRef = useRef<HTMLDivElement>(null);
  const overlayRef = useRef<HTMLDivElement>(null);
  const titleId = useId();
  const t = useTranslation("modals.share");
  const [linkCopied, setLinkCopied] = useState(false);

  useCreateModalA11y(props.isOpen, props.onClose, dialogRef);

  useEffect(() => {
    if (!props.isOpen) {
      setLinkCopied(false);
    }
  }, [props.isOpen]);

  const onCopyLinkClick = useCallback(async () => {
    try {
      const result = await props.onCopyLink();
      if (result !== false) {
        setLinkCopied(true);
      }
    } catch {
      setLinkCopied(false);
    }
  }, [props.onCopyLink]);

  return (
    <ShareView
      {...props}
      dialogRef={dialogRef}
      overlayRef={overlayRef}
      titleId={titleId}
      title={t("title")}
      description={t("description")}
      copyLinkLabel={t("copyLink")}
      copiedLabel={t("copied")}
      copiedLive={t("copiedLive")}
      linkCopied={linkCopied}
      onCopyLinkClick={onCopyLinkClick}
      signalLabel={t("signal")}
      slackLabel={t("slack")}
      discordLabel={t("discord")}
      emailLabel={t("email")}
      doneLabel={t("done")}
      closeDialogAriaLabel={t("closeDialogAriaLabel")}
      moreOptionsAriaLabel={t("moreOptionsAriaLabel")}
    />
  );
});

ShareContainer.displayName = "Share";

export default ShareContainer;