admin-dashboard-web/src/Pages/GroupTasks/Overview/index.js

import { Result } from "antd";
import { useContext, useState } from "react";
import GroupTasksViewModal from "./GroupTasksViewModal";
import GroupTypeSelectionModal from "./GroupTypeSelectionModal";
import GroupTaskTableList from "./GroupTasksTableList";
import { Constants, WebSocketContext, hasXYPermission } from "../../../utils";

export default function GroupTasks({ isGroupTasksViewModalOpen }) {
  const [isGroupTypeSelectionModalOpen, setIsGroupTypeSelectionModalOpen] =
    useState(false);
  const [currentCategoryGroup, setCurrentCategoryGroup] = useState([]);
  const [currentSelectedModalGroupType, setCurrentSelectedModalGroupType] =
    useState();
  const webSocketContext = useContext(WebSocketContext);

  const showGroupTypeSelectionModal = (categoryGroup) => {
    setCurrentCategoryGroup(categoryGroup);
    setIsGroupTypeSelectionModalOpen(true);
    setCurrentSelectedModalGroupType(null);
  };

  const filteredCategoryGroups = webSocketContext.CategoryGroups.filter(
    (categoryGroup) =>
      hasXYPermission(
        webSocketContext.User.Permissions,
        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView,
        categoryGroup.category
      )
  );

  return (
    <>
      <h1 style={{ fontWeight: "bold" }}>GROUP TASKS</h1>

      {webSocketContext.CategoryGroups.length === 0 ? (
        <Result status="404" title="No group tasks found" />
      ) : (
        <>
          {filteredCategoryGroups.length > 0 ? (
            <>
              {filteredCategoryGroups.map((categoryGroup) => {
                return (
                  <GroupTaskTableList
                    key={categoryGroup.category}
                    categoryGroup={categoryGroup}
                    showGroupTypeSelectionModal={showGroupTypeSelectionModal}
                    groupTasks={webSocketContext.GroupTasks}
                  />
                );
              })}
            </>
          ) : (
            <Result
              key="result"
              status="403"
              title="You were not assigned to any group tasks"
              subTitle="Please contact an administrator"
            />
          )}
        </>
      )}

      <GroupTypeSelectionModal
        isOpen={isGroupTypeSelectionModalOpen}
        setIsOpen={setIsGroupTypeSelectionModalOpen}
        categoryGroup={currentCategoryGroup}
        currentSelectedModalGroupType={currentSelectedModalGroupType}
        setCurrentSelectedModalGroupType={setCurrentSelectedModalGroupType}
      />

      <GroupTasksViewModal isOpen={isGroupTasksViewModalOpen} />
    </>
  );
}