Yes exactly, I did get the error, however when I tried to call function inside useEffect it was still the same no change.
Please see the full code implementation in the post, here.
import React, { useState, useEffect } from "react";
import axios from "axios";
import {
checkForTimeOut,
totalLeavePortalLink,
getSSOEnvironment,
getCookie
} from "../../Helpers";
import AlertBanner from "../AlertBanner/AlertBanner";
import TotalLeaveEmptyStateCTA from "../TotalLeaveEmptyStateCTA/TotalLeaveEmptyStateCTA";
import Skeleton from "@material-ui/lab/Skeleton";
import NewTaskList from "./NewTaskList";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBellOn } from "@fortawesome/pro-solid-svg-icons";
import { cdnImagePath, task } from "../../imageHelper";
const midBreakpoint = 768;
const NewTaskPage = props => {
const { testing = false, totalLeave = false } = props;
const [isLoading, setIsLoading] = useState(true);
const [isMobile, setIsMobile] = useState(window.innerWidth < midBreakpoint);
const [hasTotalLeave, setHasTotalLeave] = useState(totalLeave);
const [tasks, setTasks] = useState(props.tasks || []);
const [completedTasks, setCompletedTasks] = useState([]);
const [isCompleted, setIsCompleted] = useState(false);
let ssoEnvironment = getSSOEnvironment();
if (process.env.NODE_ENV === "development") {
const MockService = require("../../services/mockService.js");
MockService.default.init(axios);
}
const handleResize = () => {
setIsMobile(window.innerWidth < midBreakpoint);
};
const removeTask = claimId => {
setCompletedTasks(prevCompletedTasks => [...prevCompletedTasks, claimId]);
};
const fetchData = async () => {
const xsrfToken = window.RequestVerificationToken;
const tasksPath =
process.env.REACT_APP_BASE_PATH + "task/outstanding-items/list";
const unumEnterpriseSSOValue = getCookie(
`unumEnterpriseSSO${ssoEnvironment}`
);
const totalLeaveIndicatorPath =
process.env.REACT_APP_BASE_PATH + "Event/TotalLeaveIndicator";
const tasksConfig = {
headers: {
"Content-Type": "application/json",
RequestVerificationToken: xsrfToken
}
};
const totalLeaveConfig = {
headers: {
"Content-Type": "application/json"
}
};
try {
setIsLoading(true);
const tasksResponse = await axios.get(tasksPath, tasksConfig);
if (unumEnterpriseSSOValue) {
const totalLeaveResponse = await axios.get(
totalLeaveIndicatorPath,
totalLeaveConfig
);
if (
checkForTimeOut(tasksResponse) ||
checkForTimeOut(totalLeaveResponse)
)
return;
setHasTotalLeave(totalLeaveResponse.data.hasTotalLeave);
}
setTasks(tasksResponse.data);
} catch (error) {
console.error("Error fetching data:", error);
} finally {
setIsLoading(false);
}
};
const fetchTasks = async () => {
try {
const xsrfToken = window.RequestVerificationToken;
const tasksPath =
process.env.REACT_APP_BASE_PATH + "task/outstanding-items/list";
const tasksConfig = {
headers: {
"Content-Type": "application/json",
RequestVerificationToken: xsrfToken
}
};
setIsLoading(true);
const tasksResponse = await axios.get(tasksPath, tasksConfig);
if (checkForTimeOut(tasksResponse)) {
return;
}
setTasks(tasksResponse.data);
setIsLoading(false);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
let env = process.env.NODE_ENV;
if (env === "production" && !window.location.host.startsWith("services")) {
env = window.location.host
.substring(0, window.location.host.indexOf("services"))
.replace("-", "");
}
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "custom_pageview",
env: env,
app_source: "web",
digital_asset: "unum claims",
journey_name: "b&cc",
page_location: window.location.href,
page_title: "to-do's",
page_referrer: document.referrer
});
if (!testing) {
fetchData();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}
}, []);
useEffect(() => {
if (!testing && isCompleted) {
setIsCompleted(false);
fetchTasks();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}
}, [isCompleted]);
const filteredTasks = tasks
? tasks.filter(item => completedTasks.indexOf(item.ClaimId) === -1)
: [];
return (
<div className="taskPage">
{isLoading ? (
<>"isLoading" </>
) : (
<>
{hasTotalLeave && filteredTasks.length > 0 && (
<div className="alert-banner-wrapper">
<AlertBanner
text={
<>
To view or manage your leave or disability coverage, please
visit the{" "}
<strong>
<a
href={totalLeavePortalLink}
onClick={() => {
window.dataLayer.push({
event: "custom_event",
category: "button",
action: "click",
label: "visit the total leave portal",
attribute1: "to-dos",
attribute2: "undefined",
attribute3: "navigation_click",
attribute4: "undefined"
});
}}
>
Total Leave Portal
</a>
</strong>
</>
}
/>
</div>
)}
<div className="taskPageMain">
<span>
<img src={cdnImagePath(task)} alt="TaskIcon" />
</span>
Tasks
</div>
<div className="taskPageContent">
<div className="taskPageInfoBanner">
<div className="infoIcon">
<FontAwesomeIcon icon={faBellOn} />
</div>
<div className="infoContent">
Please complete the following items to ensure your leave
requests and claims get processed as soon as possible.
</div>
</div>
{filteredTasks.length > 0 ? (
<NewTaskList
tasks={filteredTasks}
isLoading={isLoading}
taskCompleted={removeTask}
setIsCompleted={setIsCompleted}
testing={testing}
setIsLoading={setIsLoading}
/>
) : (
<div>You do not have to-do items to complete right now.</div>
)}
</div>
{!filteredTasks.length && hasTotalLeave && (
<TotalLeaveEmptyStateCTA
className=""
isMobile={isMobile}
type="to-dos"
/>
)}
</>
)}
</div>
);
};
export default NewTaskPage;