RelatedPuzzleGroup.tsx

import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCallback, useEffect, useRef, useState } from "react";
import styled from "styled-components";
import type { TagType } from "../../lib/models/Tags";
import type { PuzzleGroup } from "../../lib/puzzle-sort-and-group";
import { useHuntPuzzleListCollapseGroup } from "../hooks/persisted-state";
import RelatedPuzzleList from "./RelatedPuzzleList";
import Tag from "./Tag";

export const PuzzleGroupDiv = styled.div`
  &:not(:last-child) {
    margin-bottom: 16px;
  }
`;

const PuzzleGroupHeader = styled.div`
  display: block;

  &:hover {
    cursor: pointer;
  }

  min-height: 32px;
`;

const PuzzleListWrapper = styled.div`
  padding-left: 1.25em;
`;

const NoSharedTagLabel = styled.div`
  display: inline-flex;
  align-items: center;
  line-height: 24px;
  margin: 2px 4px 2px 0;
  padding: 0 6px;
  border-radius: 4px;
  background-color: transparent;
  color: #808080;
`;

const RelatedPuzzleGroup = ({
  huntId,
  group,
  noSharedTagLabel = "(no tag)",
  allTags,
  bookmarked,
  includeCount,
  canUpdate,
  suppressedTagIds,
  trackPersistentExpand,
}: {
  huntId: string;
  group: PuzzleGroup;
  // noSharedTagLabel is used to label the group only if sharedTag is undefined.
  noSharedTagLabel?: string;
  bookmarked: Set<string>;
  allTags: TagType[];
  includeCount?: boolean;
  canUpdate: boolean;
  suppressedTagIds: string[];
  trackPersistentExpand: boolean;
}) => {
  const [persistentCollapsed, setPersistentCollapsed] =
    useHuntPuzzleListCollapseGroup(
      huntId,
      suppressedTagIds.join("-") || noSharedTagLabel,
    );
  const [nonPersistentCollapsed, setNonPersistentCollapsed] = useState(false);
  const lastTrackPersistentExpand = useRef(trackPersistentExpand);
  useEffect(() => {
    if (trackPersistentExpand !== lastTrackPersistentExpand.current) {
      lastTrackPersistentExpand.current = trackPersistentExpand;
      setNonPersistentCollapsed(false);
    }
  }, [trackPersistentExpand]);
  const toggleCollapse = useCallback(() => {
    if (trackPersistentExpand) {
      setPersistentCollapsed((prevCollapsed) => !prevCollapsed);
    } else {
      setNonPersistentCollapsed((prevCollapsed) => !prevCollapsed);
    }
  }, [setPersistentCollapsed, trackPersistentExpand]);
  const collapsed = trackPersistentExpand
    ? persistentCollapsed
    : nonPersistentCollapsed;

  const { puzzles: relatedPuzzles, sharedTags } = group;

  const puzzlePlural = relatedPuzzles.length === 1 ? "puzzle" : "puzzles";
  const countString = `(${relatedPuzzles.length} other ${puzzlePlural})`;
  const allSuppressedTagIds = [
    ...suppressedTagIds,
    ...sharedTags.map((tag) => tag._id),
  ];
  return (
    <PuzzleGroupDiv>
      <PuzzleGroupHeader
        data-group-name={sharedTags.map((tag) => tag.name).join("&")}
        onClick={toggleCollapse}
      >
        <FontAwesomeIcon
          fixedWidth
          icon={collapsed ? faCaretRight : faCaretDown}
        />
        {sharedTags.length ? (
          sharedTags.map((sharedTag) => (
            <Tag
              tag={sharedTag}
              key={sharedTag._id}
              linkToSearch={false}
              popoverRelated={false}
            />
          ))
        ) : (
          <NoSharedTagLabel>{noSharedTagLabel}</NoSharedTagLabel>
        )}
        {includeCount && <span>{countString}</span>}
      </PuzzleGroupHeader>
      {collapsed ? null : (
        <PuzzleListWrapper>
          <RelatedPuzzleList
            relatedPuzzles={relatedPuzzles}
            bookmarked={bookmarked}
            allTags={allTags}
            canUpdate={canUpdate}
            sharedTags={sharedTags}
            suppressedTagIds={allSuppressedTagIds}
          />
          {group.subgroups.map((subgroup) => {
            const subgroupSuppressedTagIds = [...allSuppressedTagIds];
            subgroupSuppressedTagIds.push(
              ...subgroup.sharedTags.map((tag) => tag._id),
            );
            return (
              <RelatedPuzzleGroup
                key={
                  subgroup.sharedTags.map((t) => t._id).join("-") || "ungrouped"
                }
                huntId={huntId}
                group={subgroup}
                noSharedTagLabel={noSharedTagLabel}
                bookmarked={bookmarked}
                allTags={allTags}
                includeCount={includeCount}
                canUpdate={canUpdate}
                suppressedTagIds={subgroupSuppressedTagIds}
                trackPersistentExpand={trackPersistentExpand}
              />
            );
          })}
        </PuzzleListWrapper>
      )}
    </PuzzleGroupDiv>
  );
};

export default RelatedPuzzleGroup;