Can I use Custom Hook inside class component - reactjs

Question

I have created one universal custom spinner/loader hook for my react application , I want to use that loader inside my component where I used to invoke API calls, the problem is the API calls are written inside the class components and as per the react doc we cannot use hooks inside the class component, most of the API calls written inside the class component.
I just want to know is there anyway to achieve the same, as the loader I have created is class based, but I then created a hook for the usage.
LoaderComponent
import React, {Component} from 'react';
import { Spin } from 'antd';
import 'antd/dist/antd.css';
import { LoadingOutlined } from '#ant-design/icons';
export default class LoaderComponent extends React.PureComponent {
render(){
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
return (
<div className="fp-container">
<Spin indicator={antIcon}className="fp-loader" alt="loading" />;
</div>)
}
}
useLoader
import React from 'react'
import LoaderComponent from '../index'
export const useLoader = () => {
const[initLoad, setInitLoad]=useState(false)
return [ initLoad ? <LoaderComponent /> : null,
() => setInitLoad(true), //Show loader
() => setInitLoad(false) //Hide Loader
]
}
Component
The below is the component where I want to use the loader, there is two API calls implemneted into the same. I have tried to use the same but not suceeded.
import React, { Component } from 'react';
import { Row, Col , notification} from 'antd';
import WaitingForCallComponent from '#components/WaitingForCallComponent';
import { connect } from 'react-redux';
import { SET_AGENT_DETAILS } from '#actions';
import { SET_CONFIG_SERVER, GET_REGISTER_AGENT } from "#Utils/Urls";
import makeRequest from '#Utils/MakeRequest';
import { sessionService } from "redux-react-session";
import socketConnection from '#Hoc/SocketComponent';
import useLoader from '#Hoc/LoaderComponent/hook';
export class WaitingContainer extends Component {
constructor(props) {
super(props);
this.state = {
extensionNo: "",
agentId: "",
genesysId: "",
username: "",
agentStatus:"",
};
}
componentDidMount = () => {
window.history.pushState(null, document.title, window.location.href);
window.addEventListener('popstate', this.callWindow)
sessionService.loadUser().then((currentUser) => {
this.setState({
username: currentUser.name,
agentId: currentUser.params.AgentID,
genesysId: currentUser.params.genesysID,
}
, () => {
this.setConfig();
});
});
};
callWindow =()=>{
window.history.pushState(null, document.title, window.location.href);
}
handleException = (e) => {
notification.error({
message: 'Agent Registration Error',
description: e?.data?.description,
duration: 0
});
this.setState({
spinLoader: false
});
};
available = (extensionNo, agentId, genesysId) => {
makeRequest
.postAuth(GET_REGISTER_AGENT, {
data: {
extensionNo: extensionNo,
agentId: agentId,
reason: 'unknown',
agentStatus: 'ready',
genesysId: genesysId
}
})
.then((response) => {
if (response && response.data && !response.data.error) {
if (response.data.data.phoneStatus) {
this.props.setExtension({
agentStatus: response.data.data.agentStatus??'ready',
agentSessionId: response.data.data.agentSessionId,
extensionNo: extensionNo,
agentId: agentId,
genesysId: genesysId
});
this.setState({
agentStatus:response.data.data.agentStatus??'ready'
})
setTimeout(() => {
sessionService.loadUser().then((currentUser) => {
if (!currentUser.extraDetails) {
currentUser.extraDetails = {};
}
currentUser.extraDetails.agentStatus = response.data.data.agentStatus;
currentUser.extraDetails.agentSessionId = response.data.data.agentSessionId;
currentUser.extraDetails.extensionNo = extensionNo;
sessionService.saveUser(currentUser).then(() => {
socketConnection(this.props);
});
});
}, 1000);
} else {
this.handleException({
data: {
description: 'Please login into softphone extension ' + extensionNo
}
});
}
} else {
this.handleException(response);
}
})
.catch(this.handleException);
};
setConfig = () => {
sessionService.loadUser().then((currentUser) => {
makeRequest
.postAuth(SET_CONFIG_SERVER, {
data: {
username: currentUser?.params?.username,
},
})
.then((response) => {
if (response?.data?.data.extensionNo ?? false) {
this.setState({
extensionNo: response?.data?.data.extensionNo ?? "",
}, () => {
this.available(this.state.extensionNo, this.state.agentId, this.state.genesysId);
notification.success({
type: "success",
message: "Extension Number",
description: "Extension Verified",
});
})
} else {
notification.error({ type: "error", message: "Extension Number Error" });
}
})
.catch(function (event) {
console.error(event);
});
});
};
render() {
return (
<Row>
<Col span="24" className="lgnpges waitingPage">
<WaitingForCallComponent />
{loader}
</Col>
</Row>
);
}
}
export const mapStateToProps = (state) => {
return {
agentStatus: state?.agentDetails?.agentDetails?.agentStatus,
agentSessionId: state?.agentDetails?.agentDetails?.agentSessionId,
extensionNo: state?.agentDetails?.agentDetails?.extensionNo,
agentId: state?.agentDetails?.agentDetails?.agentId,
genesysId: state?.agentDetails?.agentDetails?.genesysId
};
};
export const mapDispatchToProps = (dispatch) => {
return {
setExtension: (value) => dispatch({ type: SET_AGENT_DETAILS, payLoad: value })
};
};
export default connect(mapStateToProps, mapDispatchToProps)(WaitingContainer);
kindly suggest me the way or either is it required to create class based component for loader