rubix-admin-panel/src/Pages/Banners/BannerCommunity/BannerCommunity.jsx

import React, { useRef, useState } from "react";
import {
  Avatar,
  Box,
  Link,
  Tag,
  Text,
  WrapItem,
  Tooltip,
  Divider,
  Stack,
  HStack,
  Input,
  Button,
  Select,
  Image,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Switch,
  Portal,
  useDisclosure,
  AlertDialog,
  AlertDialogOverlay,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogCloseButton,
  AlertDialogBody,
  AlertDialogFooter,
  useToast,
  Skeleton,
  VStack,
} from "@chakra-ui/react";
import { GrAdd } from "react-icons/gr";
import { AddIcon, ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons";
import DataTable from "../../../Components/DataTable/DataTable";
import CommunityBanner from "../../../Components/CommunityBanner";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { v4 as uuidv4 } from "uuid";
import { Link as RouterLink } from "react-router-dom";
import {
  useDeleteCommunityBannerMutation,
  useDeleteCommunityMutation,
  useGetCommunityBannerQuery,
  useGetCommunityByIdQuery,
  useGetCommunityQuery,
  useUpdateCommunityBannerStatusMutation,
  useUpdateCommunityStatusMutation,
} from "../../../Services/api.service";
import { HiDotsVertical } from "react-icons/hi";
import TimeCalculator from "../../../Components/Functions/TimeCalculator";
import { formatDate } from "../../../Components/Functions/UTCConvertor";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import WebButton from "../../../Components/WebButton";
import CommunityCardDisplay from "../../Community/CommunityCardDisplay";
import CommunityBannerCard from "../../Community/CommunityBannerCard";
import Header from "../../../Components/Header";

const BannerCommunity = () => {
  // ====================================================[Hooks]===================================================================
  const toast = useToast();
  const [deleteAlert, setDeleteAlert] = useState(false);
  const [actionId, setActionId] = useState(null);
  const [deleteIsLoading, setDeleteIsLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const community = useGetCommunityQuery();
  const communityBanner = useGetCommunityBannerQuery();
  const [deleteCommunityBanner] = useDeleteCommunityBannerMutation();
  const [updateCommunityBannerStatus] =
    useUpdateCommunityBannerStatusMutation();

  // ====================================================[Functions]===================================================================
  const handleDelete = async (bannerId) => {
    try {
      // Trigger the mutation
      setDeleteIsLoading(true);
      await deleteCommunityBanner(bannerId)
        .then((response) => {
          // Handle the response here
          console.log("Mutation response:", response?.data?.statusCode);
          console.log("Mutation response:", response?.data?.message);

          if (response?.data?.statusCode === 200) {
            setDeleteIsLoading(false);
            setDeleteAlert(false);
            toast({
              title: response?.data?.message,
              status: "success",
              duration: 1000,
              isClosable: true,
            });
          }
        })
        .catch((error) => {
          console.error("Error creating community:", error);
          setDeleteIsLoading(false);
          setDeleteAlert(false);
        });
    } catch (error) {
      // Handle errors
      console.error("Error deleting community:", error);
    }
  };

  const handleUpdateStatus = async (id) => {
    console.log(id);

    try {
      // Trigger the mutation
      await updateCommunityBannerStatus({ id })
        .then((response) => {
          console.log(response?.data);
          if (response?.data?.statusCode === 200) {
            console.log("toasted");
            toast({
              title: response?.data?.message,
              status: "success",
              isClosable: true,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    } catch (error) {
      // Handle errors
      console.error("Error updating community status:", error);
    }
  };

  // ====================================================[Table Filter]================================================================
  const filteredData = communityBanner?.data?.data?.rows?.filter((item) => {
    // Filter by name (case insensitive)
    const name = item.Heading;
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name.toLowerCase().includes(searchLower);

    return nameMatches;
  });

  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Banner image",
    "Heading",
    "Sub heading",
    "Button title",
    "Active",
    "Created At",
  ];

  const extractedArray = filteredData?.map((item, index) => {
    return {
      "Banner image": (
        <Image
          w={150}
          h={14}
          rounded={4}
          objectFit="cover"
          src={`https://rubix.betadelivery.com/${item.banner_image}`}
          alt="Dan Abramov"
        />
      ),
      Heading: (
        <Tooltip
          className="rounded-2 web-text-xsmall"
          width={"fit-content"}
          placement="top"
          hasArrow
          label={item?.Heading}
          bg="blue.200"
        >
          <Box display={"flex"} alignItems={"center"} w={180}>
            <Text as={"span"} isTruncated={true}>
              {item?.Heading}
            </Text>
          </Box>
        </Tooltip>
      ),
      "Sub heading": (
        <Tooltip
          className="rounded-2 web-text-xsmall"
          width={"fit-content"}
          placement="top"
          hasArrow
          label={item?.sub_heading}
          bg="blue.200"
        >
          <Box display={"flex"} alignItems={"center"} w={180}>
            <Text as={"span"} isTruncated={true}>
              {item?.sub_heading}
            </Text>
          </Box>
        </Tooltip>
      ),
      "Button title": item?.CTO_button_title,
      Active: (
        <Switch
          size={"sm"}
          colorScheme="teal"
          onChange={() => handleUpdateStatus(item.id)}
          isChecked={item.status}
        />
      ),
      "Created At": (
        <span className="d-flex justify-content-between align-items-center">
          <Text as={"span"} color={"teal.600"} className=" fw-bold">
            {formatDate(item?.createdAt)}
          </Text>
          <Menu>
            <MenuButton className="link p-1 rounded-1">
              <HiDotsVertical className="rubix-text-dark fs-6" />
            </MenuButton>
            <Portal>
              <MenuList minWidth="80px">
                <RouterLink to={`/banner/banner-community/edit/${item.id}`}>
                  <MenuItem className="web-text-medium">Edit</MenuItem>
                </RouterLink>
                <RouterLink to={`/banner/banner-community/view/${item.id}`}>
                  <MenuItem className="web-text-medium">View</MenuItem>
                </RouterLink>
                <MenuItem
                  onClick={() => {
                    setActionId(item.id);
                    setDeleteAlert(true);
                  }}
                  className="web-text-medium"
                >
                  Delete
                </MenuItem>
              </MenuList>
            </Portal>
          </Menu>
        </span>
      ),
    };
  });

  return (
    <Box
      {...OPACITY_ON_LOAD}
      overflowY={"scroll"}
      paddingBottom={50}
      height={"100vh"}
    >



      <Header
      title={"Community banner"}
      btnTitle={'Create banner'}
      link={'/banner/banner-community/add-banner'}
      />
      {/* ====================================================[ Top bar ]================================================================ */}

      {/* <Divider /> */}

      <Box pt={4}>
        {/* <HStack>
          <Text color={"teal.800"} className="web-text-large fw-bold">
            Community Banners
          </Text>
        </HStack> */}
        <HStack
          display={"flex"}
          justifyContent={"space-between"}
          ps={1}
          pe={1}
          pb={4}
          spacing="24px"
        >
          <Input
            type="search"
            width={300}
            rounded="md"
            placeholder="Search..."
            size="sm"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          <HStack>
            <Select
              className="pointer"
              width={300}
              rounded="md"
              size="sm"
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
            >
              <option value="all">All</option>
              <option value="active">Active</option>
              <option value="inactive">Inactive</option>
            </Select>
          </HStack>
        </HStack>
      </Box>

      {/* ====================================================[ Table ]================================================================ */}
      <DataTable
        emptyMessage={"We don't have any banner of this heading"}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        isLoading={community?.isLoading}
      />
      {/* ====================================================[ Alert ]================================================================ */}
      <CustomAlertDialog
        onClose={() => setDeleteAlert(false)}
        isOpen={deleteAlert}
        alertHandler={() => handleDelete(actionId)}
        message={"Are you sure you want to delete member?"}
        isLoading={deleteIsLoading}
      />
    </Box>
  );
};

export default BannerCommunity;