plebdevs/src/components/feeds/messages/CommunityMessage.js

import React, { useState, useEffect } from 'react';
import { Card } from 'primereact/card';
import { Avatar } from 'primereact/avatar';
import { Tag } from 'primereact/tag';
import { Panel } from 'primereact/panel';
import GenericButton from '@/components/buttons/GenericButton';
import { highlightText } from '@/utils/text';
import { useSession } from 'next-auth/react';
import NostrIcon from '../../../../public/images/nostr.png';
import Image from 'next/image';
import { nip19 } from 'nostr-tools';
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';

const StackerNewsIconComponent = () => (
  <svg
    width="16"
    height="16"
    className="mr-2"
    viewBox="0 0 256 256"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill="#facc15"
      fillRule="evenodd"
      d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z"
    />
    <path
      fill="#facc15"
      fillRule="evenodd"
      d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z"
    />
  </svg>
);

const headerTemplate = (options, windowWidth, platform, id) => {
  return (
    <div className="flex flex-row justify-between items-end my-2">
      <GenericButton
        label={windowWidth > 768 ? `View ${platform === 'nostr' ? 'on' : 'in'} ${platform}` : null}
        icon="pi pi-external-link"
        outlined
        size="small"
        onClick={() => window.open(getPlatformLink(platform, id), '_blank')}
        tooltip={
          windowWidth < 768 ? `View ${platform === 'nostr' ? 'on' : 'in'} ${platform}` : null
        }
        tooltipOptions={{ position: 'left' }}
      />
      <GenericButton
        outlined
        severity="primary"
        size="small"
        className="py-0"
        onClick={options.onTogglerClick}
        icon={options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'}
        tooltip={windowWidth <= 768 ? null : 'comments'}
        tooltipOptions={{ position: 'left' }}
      />
    </div>
  );
};

const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
  const [npub, setNpub] = useState(null);
  const [nsec, setNsec] = useState(null);
  const [collapsed, setCollapsed] = useState(true);
  const { data: session } = useSession();

  useEffect(() => {
    if (session?.user?.pubkey || session?.user?.privkey) {
      let privkeyBuffer;
      if (session.user.privkey) {
        privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
        setNsec(nip19.nsecEncode(privkeyBuffer));
      } else {
        setNpub(nip19.npubEncode(session.user.pubkey));
      }
    }
  }, [session]);

  const header = (
    <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
      <div className="flex flex-row items-center">
        <Avatar
          image={message.avatar ? message.avatar : null}
          icon={message.avatar ? null : 'pi pi-user'}
          shape="circle"
          size="large"
          className="border-2 border-blue-400"
        />
        <p className="pl-4 font-bold text-xl text-white">
          {message?.pubkey ? message?.pubkey.slice(0, 12) + '...' : message.author}
        </p>
      </div>
      <div className="flex flex-col items-start justify-between">
        <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
          <Tag
            value={message.channel}
            severity="primary"
            className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0"
          />
          <Tag
            icon={getPlatformIcon(platform)}
            value={platform}
            className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1"
          />
        </div>
      </div>
    </div>
  );

  const footer = (
    <div className="w-full flex flex-col justify-between items-start">
      {platform === 'nostr' ? (
        <p className="rounded-lg text-sm text-gray-300">
          {new Date(message.timestamp).toLocaleString()}
        </p>
      ) : null}
      <div className="w-full flex flex-row justify-between items-end">
        {platform === 'nostr' ? (
          <Panel
            headerTemplate={() =>
              headerTemplate(
                { onTogglerClick: () => setCollapsed(!collapsed) },
                windowWidth,
                platform,
                message.id
              )
            }
            toggleable
            collapsed={collapsed}
            onToggle={e => setCollapsed(e.value)}
            className="w-full"
            pt={{
              content: {
                className: 'p-4 py-0',
              },
            }}
          >
            <div className="max-w-[100vw]">
              {nsec || npub ? (
                <ZapThreadsWrapper
                  anchor={nip19.noteEncode(message.id)}
                  user={nsec || npub}
                  relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
                />
              ) : (
                <ZapThreadsWrapper
                  anchor={nip19.noteEncode(message.id)}
                  relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
                />
              )}
            </div>
          </Panel>
        ) : (
          <div className="w-full flex flex-row justify-between items-end">
            <GenericButton
              label={windowWidth > 768 ? `View in ${platform}` : null}
              icon="pi pi-external-link"
              outlined
              size="small"
              onClick={() => window.open(getPlatformLink(platform, message.id), '_blank')}
              tooltip={windowWidth < 768 ? `View in ${platform}` : null}
              tooltipOptions={{ position: 'left' }}
            />
            {platform !== 'nostr' ? (
              <p className="rounded-lg text-sm text-gray-300">
                {new Date(message.timestamp).toLocaleString()}
              </p>
            ) : (
              <div></div>
            )}
          </div>
        )}
      </div>
    </div>
  );

  return (
    <Card
      header={header}
      footer={footer}
      className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
      pt={{
        footer: {
          className: 'mt-0 pt-0',
        },
        content: {
          className: 'mt-0 pt-0',
        },
      }}
    >
      <p className="m-0 text-lg text-gray-200 break-words">
        {searchQuery ? highlightText(message.content, searchQuery) : message.content}
      </p>
    </Card>
  );
};

const getPlatformLink = (platform, id) => {
  switch (platform) {
    case 'discord':
      return 'https://discord.gg/t8DCMcq39d';
    case 'stackernews':
      return `https://stacker.news/items/${id}`;
    case 'nostr':
      return `https://nostr.band/${nip19.noteEncode(id)}`;
    default:
      return '#';
  }
};

const getPlatformIcon = platform => {
  switch (platform) {
    case 'stackernews':
      return <StackerNewsIconComponent />;
    case 'nostr':
      return <Image src={NostrIcon} alt="Nostr" width={16} height={16} className="mr-1" />;
    default:
      return `pi pi-${platform}`;
  }
};

export default CommunityMessage;