src/components/AdminPanelComponents/AdminActionsComponent.tsx - master - SOFG1/hasida

src/components/AdminPanelComponents/AdminActionsComponent.tsx
110 строк3 KB
Eddy
initial commit
22 июл 2024, 17:14
22 июл 2024, 17:14b43c0d0
import React, {useCallback, useState} from "react";
import styled from "styled-components";
import {BanIcon, EmailIcon, InfoCircleIcon, ReloadIcon, TrashIcon} from "../../UI/SVG";
import {
    useAdminBlockProfileMutation,
    useAdminDeleteProfileMutation, useAdminProfileQuery,
} from "../../api/admin";
import {removeFeedData} from "../../store/home";
import {useDispatch} from "react-redux";

const StyledWrapper = styled.div`
  position: absolute;
  bottom: -36px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 11px;
  align-items: center;

  a {
    svg {
      height: 25px;
      width: 25px;
    }
  }
`;

const StyledBtn = styled.button`
  display: flex;
  justify-content: center;
  border: 0;
  padding: 0;
  align-items: center;
  border-radius: 50%;
  transition: 150ms;
  cursor: pointer;

  &:hover {
    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.12);
  }
`;

const SmallBtn = styled(StyledBtn)`
  a, svg {
    height: 25px;
    width: 25px;
  }
`;


const HugeBtn = styled(StyledBtn)`
  border: none;
  cursor: auto;

  &:hover {
    box-shadow: none;
  }

  svg {
    width: 72px;
    height: 72px;
    fill: #303D45;
  }
`;

interface IProps {
    userId: number;
    setUserId: ((id: number) => void) | undefined;
    email: string;
    data: any
}

const AdminActionsComponent = React.memo(({userId, setUserId, email, data}: IProps) => {
    const dispatch = useDispatch();
    const [setDeleteProfile] = useAdminDeleteProfileMutation();
    const [setBlockProfile] = useAdminBlockProfileMutation();
    const {refetch: refetchAllData} = useAdminProfileQuery(userId);

    const banProfileHandler = useCallback(() => {
        setBlockProfile(userId).then(() => {
            refetchAllData()
        });
    }, []);

    const deleteProfileHandler = useCallback(() => {
        setDeleteProfile(userId).then(() => {
            setUserId && setUserId(-1);
            dispatch(removeFeedData());
        })
    }, []);

    return (
        <>
            <StyledWrapper>
                <a href={`mailto:${email}`}>
                    <EmailIcon/>
                </a>
                <StyledBtn onClick={banProfileHandler}>
                    <BanIcon fill={!!data?.is_active ? "#2A9B9F" : "#f35b5b"}/>
                </StyledBtn>
                <HugeBtn> <InfoCircleIcon stroke="#FFF"/> </HugeBtn>
                <StyledBtn onClick={deleteProfileHandler}> <TrashIcon/> </StyledBtn>
                <SmallBtn onClick={refetchAllData}> <ReloadIcon/> </SmallBtn>
            </StyledWrapper>
        </>
    );
});

export default AdminActionsComponent;