PK ! A7��n import React, { useState, useEffect } from "react";
import tw from "tailwind-styled-components";
import { Link, useParams, useNavigate } from "react-router-dom";
import Images from "../Images";
import { useMutation, useQuery } from "react-query";
import axios from "axios";
import Config from "../Config";
import Loading from "../Components/Loading";
import AdminTable from "../Components/Contacts/Table";
import {
Page,
BoxContainer,
BoxTitle,
Underline,
ErrorText,
} from "../Components/Styles/PageStyles";
import NotFoundModel from "../Components/NotFoundModel";
import {
SmallBtn,
Label,
FieldWrapper,
InputGroup,
} from "../Components/Styles/InputStyles";
import DeleteModel from "../Components/Contacts/DeleteModel";
import { useSelector } from "react-redux";
import { ForUs } from "../Config";
import EditDeviceModel from "../Components/Contacts/EditDeviceModel";
import SingleEntry from "../Components/Contacts/SingleEntry";
import { MdAdd } from "react-icons/md";
import { HiUpload } from "react-icons/hi";
import { ToastContainer, toast } from "react-toastify";
import RenameModel from "../Components/Contacts/RenameModel";
import moment from "moment";
import { Field, Form, Formik } from "formik";
const Contacts = () => {
const user = useSelector((state) => state.UserReducer.user);
const [openUploadModel, setOpenUploadModel] = useState(false);
const [openDeleteModel, setOpenDeleteModel] = useState(false);
const [deviceId, setDeviceId] = useState("");
const [renameModel, setRenameModel] = useState(false);
const [deleteModel, setDeleteModel] = useState(false);
const [editDevice, setEditDevice] = useState(false);
const [gotInitialResp, setGotInitialResp] = useState(false);
const navigate = useNavigate();
// ----- Getting Initial Data ------
// const fetchFunction = async () =>
// await axios.get(
// `${Config.nodeApiUrl}/customer/getContactGroups`,
// Config.AxiosConfig
// );
// const { isLoading, error, data, refetch, isRefetching } = useQuery(
// "getContactGroups",
// fetchFunction
// );
const [data, setData] = useState([]);
const [startDate, setStartDate] = useState(
moment(new Date()).subtract(300, "days").format("YYYY-MM-DD")
);
const [endDate, setEndDate] = useState(
moment(new Date()).format("YYYY-MM-DD")
);
const fetchFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/getContactGroups`,
values,
Config.AxiosConfig
);
const getFetchSuccess = (data) => {
setData(data?.data || []);
setGotInitialResp(true);
};
// console.log(data);
const getFetchError = (data) => {
setGotInitialResp(true);
};
const {
isLoading,
isError,
mutate: functionMutate,
} = useMutation(fetchFunction, {
onSuccess: getFetchSuccess,
onError: getFetchError,
});
useEffect(() => {
const handler = setTimeout(() => {
functionMutate({
startDate,
endDate,
});
}, 500);
return () => {
clearTimeout(handler);
};
}, [startDate, endDate]);
const initialValues = {
startDate: moment(new Date()).subtract(300, "days").format("YYYY-MM-DD"),
endDate: moment(new Date()).format("YYYY-MM-DD"),
};
const submitHandler = (values) => {
setStartDate(moment(values.startDate).format("YYYY-MM-DD"));
setEndDate(moment(values.endDate).format("YYYY-MM-DD"));
};
// ------ Delete device ------
const deleteDeviceHandler = async (id) =>
await axios.post(
Config.DeleteDeviceApi,
{ deviceId: id, status: 0 },
Config.AxiosConfig
);
const onDeleteDeviceSuccess = (data) => {
setOpenDeleteModel(false);
setDeviceId("");
// refetch();
functionMutate({
startDate,
endDate,
});
};
const onDeleteDeviceError = (data) => {
setDeviceId("");
};
const { isLoading: deleteDeviceLoading, mutate: deleteDeviceMutate } =
useMutation(deleteDeviceHandler, {
onSuccess: onDeleteDeviceSuccess,
onError: onDeleteDeviceError,
});
//------- Add Single Entry -------
const SingleEntryPostFunction = async (values) => {
const body = new FormData();
body.append("filename", values.filename);
body.append("name", values.name);
return await axios.post(
`${Config.nodeApiUrl}/customer/add-contacts`,
body,
{
headers: {
...Config.AxiosConfig.headers,
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
},
}
);
};
const onSingleEntrySuccess = (data) => {
// refetch();
functionMutate({
startDate,
endDate,
});
setOpenUploadModel(false);
toast.success(data?.data?.msg || "Success");
};
const onSingleEntryError = (data) => {
setOpenUploadModel(false);
toast.error(data?.response?.data?.msg || "An Error Occured");
};
const { isLoading: SingleEntryLoading, mutate: postSingleEntry } =
useMutation(SingleEntryPostFunction, {
onSuccess: onSingleEntrySuccess,
onError: onSingleEntryError,
});
//------- Edit Single Entry -------
const EditSingleEntryFunction = async (values) =>
await axios.post(Config.AdminEditEntryApi, values, Config.AxiosConfig);
const onEditEntrySuccess = (data) => {
// refetch();
functionMutate({
startDate,
endDate,
});
setDeviceId("");
setEditDevice(false);
};
const onEditEntryError = (data) => {
setEditDevice(false);
setDeviceId("");
};
const { isLoading: editEntryLoading, mutate: editSingleEntry } = useMutation(
EditSingleEntryFunction,
{
onSuccess: onEditEntrySuccess,
onError: onEditEntryError,
}
);
//------- Rename Group -------
const renameFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/editGroupName`,
values,
Config.AxiosConfig
);
const renameSuccess = (data) => {
// refetch();
functionMutate({
startDate,
endDate,
});
setDeviceId("");
setRenameModel(false);
};
const renameError = (data) => {
setRenameModel(false);
setDeviceId("");
};
const { isLoading: renameLoading, mutate: renameMutate } = useMutation(
renameFunction,
{
onSuccess: renameSuccess,
onError: renameError,
}
);
//------- Delete Group -------
const deleteFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/removeContactGroup`,
values,
Config.AxiosConfig
);
const deleteSuccess = (data) => {
// refetch();
functionMutate({
startDate,
endDate,
});
setDeviceId("");
setDeleteModel(false);
};
const deleteError = (data) => {
setDeleteModel(false);
setDeviceId("");
};
const { isLoading: deleteLoading, mutate: deleteMutate } = useMutation(
deleteFunction,
{
onSuccess: deleteSuccess,
onError: deleteError,
}
);
//Get HostNames Province api
const getHostNamesFunction = async () =>
await axios.get(Config.GetHostNamesandProvince, Config.AxiosConfig);
const {
data: hostNamesandProvince,
error: hostNamesError,
isLoading: hostNamesLoading,
} = useQuery("GetHostNamesandProvince", getHostNamesFunction);
// end of GetHostNamesandProvince api
return (
{openDeleteModel && (
)}
{renameModel && (
)}
{deleteModel && (
)}
{/* {openUploadModel && (
)} */}
{openUploadModel && (
)}
{editDevice && (
)}
{!isLoading && gotInitialResp && (
)}
{(isLoading || !gotInitialResp) && }
{/* {error && !isLoading && !isRefetching && } */}
{(isError || data?.length == 0) && !isLoading && gotInitialResp && (
)}
);
};
const Uploader = ({ setOpenUploadModel }) => {
return (
);
};
const Filters = ({
initialValues,
submitHandler,
InitialLoading,
user,
setOpenUploadModel,
}) => {
return (
);
};
const TableWrapper = tw.h1`my-10 border rounded-md overflow-auto`;
const Title = tw.h1`text-xl text-gray-800 font-medium`;
const UploadWrapper = tw.div`
w-full flex justify-end space-x-4 items-center `;
const Button = tw.button`
text-white bg-custom-zambia flex items-center !ml-auto space-x-1 justify-center w-40 h-10 text-xs whitespace-nowrap rounded px-6
`;
const FilterContainer = tw.div`
grid grid-cols-2 w-full gap-4 md:flex md:space-x-4 items-end mt-4 md:mt-8 `;
const ApplyBtn = tw.button`${(p) =>
p.$active
? "bg-gray-100"
: ""} border whitespace-nowrap w-40 !mr-auto border-gray-200 flex space-x-1.5 justify-center items-center text-gray-500 rounded-md px-6 cursor-pointer hover:bg-gray-100 h-10 text-sm
`;
export default Contacts;