Enterprise-CMCS/macpro-mako

View on GitHub
react-app/src/features/package/package-details/index.tsx

Summary

Maintainability
A
1 hr
Test Coverage
F
18%
import { DetailsSection } from "@/components";
import {
  approvedAndAEffectiveDetails,
  descriptionDetails,
  recordDetails,
  submissionDetails,
} from "./hooks";

import { FC, useMemo } from "react";

import { DetailSectionItem } from "./hooks";
import { useGetUser } from "@/api/useGetUser";
import { AppK } from "./appk";
import { cn } from "@/utils";
import { Authority } from "shared-types";
import { ItemResult } from "shared-types/opensearch/main";

export const DetailItemsGrid: FC<{
  displayItems: DetailSectionItem[];
  fullWidth?: boolean;
  containerStyle?: string;
}> = (props) => {
  const { data: user } = useGetUser();
  return (
    <div
      className={cn(
        `${props.fullWidth ? "max-w-xl" : "grid grid-cols-2 gap-6"}`,
        props.containerStyle,
      )}
    >
      {props.displayItems.map(({ label, value, canView }) => {
        return !canView(user) ? null : (
          <div key={label}>
            <h3 style={{ fontWeight: 700 }}>{label}</h3>
            <div style={{ fontWeight: 400 }} className="py-2">
              {value}
            </div>
          </div>
        );
      })}
    </div>
  );
};

type PackageDetailsProps = {
  itemResult: ItemResult;
};

export const PackageDetails = ({ itemResult }: PackageDetailsProps) => {
  const title = useMemo(() => {
    const { _source: source } = itemResult;

    switch (source.authority) {
      case Authority["1915b"]:
      case Authority["1915c"]:
      case undefined: // Some TEs have no authority
        if (source.id === "NOASDFASDFASDF") return "1915(c) Appendix K Package Details";
        if (source.actionType == "Amend" && source.authority === Authority["1915c"])
          return "1915(c) Appendix K Amendment Package Details";
        if (source.actionType == "Extend") return "Temporary Extension Request Details";
    }

    return `${source.authority} Package Details`;
  }, [itemResult]);

  return (
    <DetailsSection id="package_details" title={title}>
      <div className="flex-col gap-4 max-w-2xl">
        <DetailItemsGrid
          displayItems={[
            ...recordDetails(itemResult._source),
            ...approvedAndAEffectiveDetails(itemResult._source),
            ...descriptionDetails(itemResult._source),
          ]}
          containerStyle="py-4"
        />
        <hr className="my-4" />
        <DetailItemsGrid displayItems={submissionDetails(itemResult._source)} />
        <AppK />
      </div>
    </DetailsSection>
  );
};