function TopicareaListing()

in frontend/src/containers/TopicareaListing.tsx [18:173]
134 lines of code
10 McCabe index (conditional complexity)

function TopicareaListing(props: Props) {
  const history = useHistory<LocationState>();

  const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);

  const [filter, setFilter] = useState("");
  const [selected, setSelected] = useState<TopicArea | undefined>(undefined);

  const { settings } = useSettings();

  const { t } = useTranslation();

  const createTopicArea = () => {
    history.push("/admin/settings/topicarea/create");
  };

  const onEdit = () => {
    if (selected) {
      history.push(`/admin/settings/topicarea/${selected.id}/edit`);
    }
  };

  const onSearch = (query: string) => {
    setFilter(query);
  };

  const onSelect = (selectedTopicArea: Array<TopicArea>) => {
    if (selectedTopicArea.length > 0) {
      setSelected(selectedTopicArea[0]);
    }
  };

  const closeDeleteModal = () => {
    setIsOpenDeleteModal(false);
  };

  const onDeleteTopicArea = () => {
    setIsOpenDeleteModal(true);
  };

  const deleteTopicArea = async () => {
    closeDeleteModal();

    if (selected) {
      await BackendService.deleteTopicArea(selected.id);

      history.replace("/admin/settings/topicarea", {
        alert: {
          type: "success",
          message: t("SettingsTopicAreaNameSuccessfullyDeleted", {
            name: `${selected.name}`,
            topicAreaName: `${settings.topicAreaLabels.singular.toLowerCase()}`,
          }),
        },
      });

      await props.reloadTopicAreas();
    }
  };

  const filterTopicAreas = (topicAreas: Array<TopicArea>): Array<TopicArea> => {
    return topicAreas.filter((topicarea) => {
      const name = topicarea.name.toLowerCase().trim();
      const dashboardCount = topicarea.dashboardCount.toString().trim();
      const createdBy = topicarea.createdBy.toLowerCase().trim();
      const query = filter.toLowerCase();
      return (
        name.includes(query) ||
        dashboardCount.includes(query) ||
        createdBy.includes(query)
      );
    });
  };

  const sortTopicareas = (topicAreas: Array<TopicArea>): Array<TopicArea> => {
    return [...topicAreas].sort((a, b) => {
      return a.name > b.name ? -1 : 1;
    });
  };

  return (
    <>
      <Modal
        isOpen={isOpenDeleteModal}
        closeModal={closeDeleteModal}
        title={`${t("Delete")} "${
          selected?.name
        }" ${settings.topicAreaLabels.singular.toLowerCase()}?`}
        message={`${t(
          "SureDelete"
        )} ${settings.topicAreaLabels.singular.toLowerCase()}?`}
        buttonType="Delete"
        buttonAction={deleteTopicArea}
      />

      <h3 id="section-heading-h3">{`${settings.topicAreaLabels.plural} (${props.topicareas.length})`}</h3>
      <div className="grid-row margin-y-3">
        <div className="tablet:grid-col-4 padding-top-1px">
          <Search id="search" onSubmit={onSearch} size="small" />
        </div>
        <div className="tablet:grid-col-8 text-right">
          <span
            className="text-underline"
            data-for="delete"
            data-tip=""
            data-border={true}
          >
            <span>
              <Button
                variant="outline"
                disabled={!selected || selected.dashboardCount > 0}
                onClick={() => onDeleteTopicArea()}
              >
                {t("Delete")}
              </Button>
            </span>
          </span>
          {selected && selected.dashboardCount > 0 && (
            <Tooltip
              id="delete"
              place="bottom"
              effect="solid"
              offset={{ bottom: 8 }}
              getContent={() => (
                <div className="font-sans-sm">
                  <p className="margin-y-0">
                    {`${t(
                      "CanDelete"
                    )} ${settings.topicAreaLabels.plural.toLocaleLowerCase()} ` +
                      `${t("ZeroDashboards")}`}
                  </p>
                </div>
              )}
            />
          )}
          <span>
            <Button variant="outline" disabled={!selected} onClick={onEdit}>
              {t("Edit")}
            </Button>
          </span>
          <span>
            <Button testid={"createtopicarea"} onClick={createTopicArea}>
              {`${t(
                "CreateNew"
              )} ${settings.topicAreaLabels.singular.toLowerCase()}`}
            </Button>
          </span>
        </div>
      </div>
      <TopicareasTable
        topicAreas={sortTopicareas(filterTopicAreas(props.topicareas))}
        onSelect={onSelect}
      />
    </>
  );
}