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 Table from "../Components/Api/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/Api/DeleteModel";
import { useSelector } from "react-redux";
import { ForUs } from "../Config";
import EditDeviceModel from "../Components/Api/EditDeviceModel";
import SingleEntry from "../Components/Api/SingleEntry";
import { MdAdd } from "react-icons/md";
import { HiUpload } from "react-icons/hi";
import { toast } from "react-toastify";
import ViewModel from "../Components/Api/ViewModel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { BsSearch } from "react-icons/bs";
import { BiPaperPlane } from "react-icons/bi";
import moment from "moment";
import { Field, Form, Formik } from "formik";
// import MenuItem from "@mui/material/MenuItem";
// import Select from "@mui/material/Select";
const Api = () => {
const user = useSelector((state) => state.UserReducer.user);
const { type } = useParams();
const [activeTab, setActiveTab] = useState(1);
const [data, setData] = useState([]);
const [searchType, setSearchType] = useState("SENDER_ID");
const [searchValue, setSearchValue] = useState("");
const [filteredData, setFilteredData] = useState([]);
const [openUploadModel, setOpenUploadModel] = useState(false);
const [openViewModel, setOpenViewModel] = useState(false);
const [openDeleteModel, setOpenDeleteModel] = useState(false);
const [openEditModel, setOpenEditModel] = useState(false);
const [deviceId, setDeviceId] = useState("");
const [selectedItem, setSelectedItem] = useState(null);
const [gotInitialResp, setGotInitialResp] = useState(false);
const [editDevice, setEditDevice] = useState(false);
const [startDate, setStartDate] = useState(
moment(new Date()).subtract(7, "days").format("YYYY-MM-DD")
);
const [endDate, setEndDate] = useState(
moment(new Date()).format("YYYY-MM-DD")
);
useEffect(() => {
if (type == "sms") setActiveTab(1);
else if (type == "voice") setActiveTab(2);
else setActiveTab(3);
}, [type]);
// ----- Getting Initial Data ------
const getCampaignsFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/getQuickMessages`,
values,
Config.AxiosConfig
);
const getCampaignsSuccess = (data) => {
setData(data?.data || []);
setGotInitialResp(true);
};
const getCampaignsError = (data) => {
setGotInitialResp(true);
};
const {
isLoading,
isError,
mutate: getCampaignsMutate,
} = useMutation(getCampaignsFunction, {
onSuccess: getCampaignsSuccess,
onError: getCampaignsError,
});
useEffect(() => {
const handler = setTimeout(() => {
getCampaignsMutate({
searchValue: searchValue,
searchType: searchType,
type: activeTab,
startDate,
endDate,
});
}, 500);
return () => {
clearTimeout(handler);
};
}, [searchValue, startDate, endDate]);
const initialValues = {
startDate: moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
endDate: moment(new Date()).format("YYYY-MM-DD"),
};
const ChangeHandler = (e) => {
setSearchValue(e.target.value);
};
const navigate = useNavigate();
const { id } = useParams();
useEffect(() => {
const tempData = data;
if (activeTab == 1) setFilteredData(tempData?.sms);
else if (activeTab == 2) setFilteredData(tempData?.voice);
else setFilteredData(tempData?.email);
}, [activeTab, data]);
const changeActiveTab = (type) => {
setActiveTab(type);
setSearchValue("");
};
const submitHandler = (values) => {
setStartDate(moment(values.startDate).format("YYYY-MM-DD"));
setEndDate(moment(values.endDate).format("YYYY-MM-DD"));
};
return (
Apis
{activeTab != 2 && (
)}
{/*
*/}
{/* */}
{/*
*/}
{/* changeActiveTab(1)}>
SMS
changeActiveTab(3)}>
Email
changeActiveTab(2)}>
Voice
*/}
{/* */}
{/*
*/}