paw-gui/src/pages/new-home/components/ClearNodeDialog/index.tsx

import { FormInstance } from "antd";

import { FormDialog } from "@/components/FormDialog";
import { useDispatch, useSelector } from "react-redux";

import "./index.scss";
import { EllipsisTooltip } from "@/components/Encapsulation";
import NotFailNodeIcon from "@/assets/svg/common/not-fail-node.svg?react";
import NotWarningNodeIcon from "@/assets/svg/common/not-warning-node.svg?react";
import { NODEDIALOGTYPE } from "../../index";
import { cn, getUrl } from "@/lib/utils";
import eventBus, { eventTypes } from "@/utils/eventBus";

import { AppDispatch, RootState } from "@/store";
import { removeMaliciousNodeList, removeNodeDownList } from "@/store/web3Slice";
import { countryCodeMap } from "@/data";

export interface DialogConfig {
  title: string;
  desc: string;
  successText: string;
}

export const ProxyItem: React.FC<{ proxyInfo: any; clasName?: string }> = (
  props
) => {
  const {  code, exit = false } = props.proxyInfo;
  return (
    <div
      className={cn(
        "w-[251px] flex p-3  rounded-lg group text-[#111322] cursor-pointer",
        exit && "hover:bg-[#EFF6FF]",
        props.clasName
      )}
    >
      <div className="flex-1 flex items-center justify-end w-full h-7">
        <div className="flex-1 flex space-x-3 items-center">
          <div className="w-[27px] h-[20px] proxy-item-flag  rounded-sm overflow-hidden">
            <img
              className={cn("w-full h-full object-cover rounded-sm")}
              src={getUrl(`image/res/flag3/${code.toLowerCase()}.svg`)}
            />
          </div>
          <EllipsisTooltip
            className="text-lg flex-1 font-semibold"
            text={countryCodeMap[code]}
          />
        </div>
      </div>
    </div>
  );
};

export const ClearNodeDialog = ({
  open,
  setOpen,
  successHandle,
  dialogLoading,
  form,
  type,
  canSubmit,
}: {
  open: boolean;
  setOpen: (open: boolean) => void;
  successHandle: () => void;
  dialogLoading: boolean;
  canSubmit: boolean;
  form: FormInstance;
  type: DialogConfig;
}) => {
  const dispatch = useDispatch<AppDispatch>();
  const { maliciousNodeList, nodeDownList } = useSelector(
    (state: RootState) => state.web3Reducer
  );
  const [isClear, setIsClear] = useState(false);
  const showDialog = (open: boolean) => {
    setOpen(open);
  };
  const onSuccessHandle = () => {
    successHandle();
    setIsClear(true);
    if (type.title === NODEDIALOGTYPE.ClearFailNode.title) {
      nodeDownList.forEach((item) => {
        dispatch(removeNodeDownList(item.name));
        eventBus.emit(eventTypes.NODE_REMOVE, item.name);
      });
    } else if (type.title === NODEDIALOGTYPE.ClearWargingNode.title) {
      maliciousNodeList.forEach((item) => {
        dispatch(removeMaliciousNodeList(item.name));
        eventBus.emit(eventTypes.NODE_REMOVE, item.name);
      });
    }
    // showDialog(false);
  };

  const proxyList = useMemo(() => {
    if (type.title === NODEDIALOGTYPE.ClearFailNode.title) {
      return nodeDownList;
    } else {
      return maliciousNodeList;
    }
  }, [nodeDownList, maliciousNodeList, type.title]);

  useEffect(() => {
    if (!open) {
      setIsClear(false);
    }
  }, [open]);

  return (
    <FormDialog
      open={open}
      openChange={showDialog}
      title={type.title}
      describe={type.desc}
      successText={type.successText}
      successHandle={onSuccessHandle}
      submitLoading={dialogLoading}
      form={form}
      contentClass="w-[834px] flex flex-col max-h-[calc(100vh-100px)] overflow-y-hidden "
      successStyle={
        canSubmit
          ? "bg-[#dc2626] hover:bg-[#dc2626] active:bg-[#dc2626]"
          : "opacity-50"
      }
    >
      <div className="flex flex-wrap gap-3">
        {proxyList.length > 0 ? (
          proxyList
            .filter((item: any) => item?.name)
            .map((item: any) => {
              return <ProxyItem proxyInfo={item} key={item?.name} />;
            })
        ) : (
          <div className="w-full h-[382px] flex flex-col items-center justify-center">
            {type.title === NODEDIALOGTYPE.ClearFailNode.title ? (
              <NotFailNodeIcon />
            ) : (
              <NotWarningNodeIcon />
            )}

            <div className="text-lg font-medium text-zinc-950 leading-relaxed mt-5">
              {type.title === NODEDIALOGTYPE.ClearFailNode.title
                ? "暂无掉线节点"
                : "暂无恶意节点"}
            </div>
          </div>
        )}
      </div>
    </FormDialog>
  );
};