Below is my HomePage Class Component. I am getting some typescript error.
import * as React from "react";
import { Dispatch, AnyAction } from 'redux';
import { connect } from 'react-redux';
import { Link, RouteComponentProps } from 'react-router-dom';
import isEqual from "lodash/isEqual";
import "./HomePage.scss";
import "../assets/styles.scss";
import { resourceTypeEnum } from '../config/constants';
import ResourceStocks from "./ResourceStocks";
import SimcardStocks from "./SimcardStocks";
import MsisdnStocks from "./MsisdnStocks";
import DeviceStocks from './DeviceStocks';
import { ConsulState } from "../consul/consul.types";
import { consulInit } from "../consul/consul.data";
import { HomePageActions, resourceStocksDataType, stocksFilterValuesType, lifecycleStatusesTypes, stocksDetailsTypes, resourceFilterValuesTypes, searchableFieldValuesTypes } from './HomePage.actions';
import { AppState } from '../store';
const classnames = require("classnames");
interface HomePageStateProps {
activeResourceType?: string;
}
interface HomePageProps {
resourceStocks: resourceStocksDataType,
stocksFilterValues: stocksFilterValuesType,
lifecycleStatuses: lifecycleStatusesTypes,
stocksDetails: stocksDetailsTypes;
resourceFilterValues: resourceFilterValuesTypes;
searchableFieldFilterValues: searchableFieldValuesTypes;
isLoading: boolean;
match: {
params: {
resourceType: string,
stockId: string
}
};
history: RouteComponentProps["history"];
consulDetails: ConsulState
}
interface HomePageActionProps {
actions: {
getResourceStocks: (resourceType: string, stockID: string, stockName: string, SKU: string, currentPage: string) => void;
getStocksFilterValues: (resourceType: string) => void,
getLifecycleStatus: (resourceType: string) => void,
getResourceFilterValues: (resourceType: string, stockID: string) => void,
getSearchableFieldVFilterValues: (resourceType: string) => void,
}
}
type Props = HomePageStateProps & HomePageActionProps & HomePageProps;
class HomePage extends React.Component<Props, HomePageStateProps> {
constructor(props: Props, context: any) {
super(props, context);
this.state = {
activeResourceType: this.props.match && this.props.match.params && this.props.match.params.resourceType ? this.props.match.params.resourceType : 'sim-cards',
};
}
handleOnCickResourceType = (resourceType: string) => {
this.setState({
activeResourceType: resourceType,
});
this.props.history && this.props.history.push(`/home/${resourceType}`)
};
static getDerivedStateFromProps(nextProps: Props, prevState: HomePageStateProps) {
const { match : { params : { resourceType } } = { params : { resourceType: resourceTypeEnum.SIM_CARDS }} } = nextProps;
if (!isEqual(resourceType, prevState.activeResourceType)) {
return { ...prevState, activeResourceType: resourceType }
}
}
getStocksAndFilterValues = (resourceType: string) => {
this.props.actions.getResourceStocks(resourceType,'All', 'All', 'All', '');
this.props.actions.getStocksFilterValues(resourceType);
}
getStockDetailsPageData = (resourceType: string, stockId: string) => {
this.props.actions.getLifecycleStatus(resourceType);
this.props.actions.getResourceFilterValues(resourceType, stockId);
this.props.actions.getSearchableFieldVFilterValues(resourceType);
}
fetchResourceStocks = () => {
this.props.actions.getResourceStocks(this.state.activeResourceType,'All', 'All', 'All', '')
}
render() {
const { consulDetails: { details } = { details: consulInit }, match: { params : { stockId }} = { params: { stockId: ""}} } = this.props;
return (
<React.Fragment>
<div className="w-app-body" id="w-app-body">
<nav className="w-nav-secondary">
<ul>
{
details.resourceStockAndSearchConfig && details.resourceStockAndSearchConfig.enableSimCards && details.resourceStockAndSearchConfig.enableSimCards &&
<li
className={classnames({
active:
resourceTypeEnum.SIM_CARDS === this.state.activeResourceType,
})}
>
<a
href="javascript:;"
onClick={() =>
this.handleOnCickResourceType(
resourceTypeEnum.SIM_CARDS
)
}
id='sim-cards-tab-in-resource-tab'
>
SIM Cards
</a>
</li>
}
{
details.resourceStockAndSearchConfig && details.resourceStockAndSearchConfig.enableMsisdns && details.resourceStockAndSearchConfig.enableMsisdns &&
<li
className={classnames({
active:
resourceTypeEnum.MSISDNS === this.state.activeResourceType,
})}
>
<a
href="javascript:;"
onClick={() =>
this.handleOnCickResourceType(
resourceTypeEnum.MSISDNS
)
}
id='Msisdns-tab-in-resource-tab'
>
MSISDNs
</a>
</li>
}
{
details.resourceStockAndSearchConfig && details.resourceStockAndSearchConfig.enableDevices && details.resourceStockAndSearchConfig.enableDevices &&
<li
className={classnames({
active:
resourceTypeEnum.DEVICES === this.state.activeResourceType,
})}
>
<a
href="javascript:;"
onClick={() =>
this.handleOnCickResourceType(
resourceTypeEnum.DEVICES
)
}
id='Devices-tab-in-resource-tab'
>
Devices
</a>
</li>
}
</ul>
</nav>
{/* <ResourceStocks
getStocksAndFilterValues={(resourceType: string) => this.getStocksAndFilterValues(resourceType)}
getStockDetailsPageData={(resourceType: string, stockId: string) => this.getStockDetailsPageData(resourceType, stockId)}
stockIdIfAvailable={this.props.match.params.stockId}
stockDetailsIfAvailable={this.props.selectedStockDetails}
setSelectedStockDetails={(stockDetails: object) => this.props.actions.setSelectedStockDetails(stockDetails)}
history={this.props.history}
resourceStocks={this.props.resourceStocks}
stocksFilterValues={this.props.stocksFilterValues}
lifecycleStatuses={this.props.lifecycleStatuses}
resourceFilterValues={this.props.resourceFilterValues}
searchableFieldFilterValues={this.props.searchableFieldFilterValues}
activeResourceType={this.state.activeResourceType}
stocksDetails={this.props.stocksDetails}
fetchResourceStocks={this.fetchResourceStocks}
/> */}
{(() => {
switch (this.state.activeResourceType) {
case resourceTypeEnum.SIM_CARDS:
return <SimcardStocks
getStocksAndFilterValues = {(resourceType: string) => this.getStocksAndFilterValues(resourceType)}
getStockDetailsPageData = {(resourceType: string, stockId: string) => this.getStockDetailsPageData(resourceType, stockId)}
stockIdIfAvailable = {stockId}
history = {this.props.history}
resourceStocks = {this.props.resourceStocks}
stocksFilterValues = {this.props.stocksFilterValues}
lifecycleStatuses = {this.props.lifecycleStatuses}
resourceFilterValues = {this.props.resourceFilterValues}
searchableFieldFilterValues = {this.props.searchableFieldFilterValues}
activeResourceType = {this.state.activeResourceType}
stocksDetails = {this.props.stocksDetails}
fetchResourceStocks = {this.fetchResourceStocks}
/>;
case resourceTypeEnum.MSISDNS:
return <MsisdnStocks
getStocksAndFilterValues = {(resourceType: string) => this.getStocksAndFilterValues(resourceType)}
getStockDetailsPageData = {(resourceType: string, stockId: string) => this.getStockDetailsPageData(resourceType, stockId)}
stockIdIfAvailable = {stockId}
history = {this.props.history}
resourceStocks = {this.props.resourceStocks}
stocksFilterValues = {this.props.stocksFilterValues}
lifecycleStatuses = {this.props.lifecycleStatuses}
activeResourceType = {this.state.activeResourceType}
stocksDetails = {this.props.stocksDetails}
resourceFilterValues = {this.props.resourceFilterValues}
searchableFieldFilterValues = {this.props.searchableFieldFilterValues}
fetchResourceStocks = {this.fetchResourceStocks}
/>;
case resourceTypeEnum.DEVICES:
return <DeviceStocks
getStocksAndFilterValues = {(resourceType: string) => this.getStocksAndFilterValues(resourceType)}
getStockDetailsPageData = {(resourceType: string, stockId: string) => this.getStockDetailsPageData(resourceType, stockId)}
stockIdIfAvailable = {stockId}
history = {this.props.history}
resourceStocks = {this.props.resourceStocks}
stocksFilterValues = {this.props.stocksFilterValues}
lifecycleStatuses = {this.props.lifecycleStatuses}
activeResourceType = {this.state.activeResourceType}
stocksDetails = {this.props.stocksDetails}
resourceFilterValues = {this.props.resourceFilterValues}
searchableFieldFilterValues = {this.props.searchableFieldFilterValues}
fetchResourceStocks = {this.fetchResourceStocks}
/>;
}
})()}
<div className={classnames({"overlay": true, "show-spinner": !this.props.isLoading})}>
<i className="fa fa-spinner fa-pulse fa-4x"></i>
</div>
</div>
</React.Fragment>
);
}
}
const mapsStateToProps = (state: AppState) => {
return {
resourceStocks: state.homePage.resourceStocks,
stocksFilterValues: state.homePage.stocksFilterValues,
lifecycleStatuses: state.homePage.lifecycleStatuses,
stocksDetails: state.homePage.stocksDetails,
resourceFilterValues: state.homePage.resourceFilterValues,
searchableFieldFilterValues: state.homePage.searchableFieldFilterValues,
isLoading: state.homePage.isLoading,
consulDetails: state.consul,
};
}
const mapDispatchToProps = (dispatch: Dispatch<AnyAction>): HomePageActionProps => {
return {
actions: {
getResourceStocks: (resourceType: string, stockID: string, stockName: string, SKU: string, currentPage: string) => {
dispatch(HomePageActions.getResourceStocks(resourceType, stockID, stockName, SKU, currentPage))
},
getStocksFilterValues: (resourceType: string) => {
dispatch(HomePageActions.getStockFilterValues(resourceType));
},
getLifecycleStatus: (resourceType: string) => {
dispatch(HomePageActions.getLifecycleStatus(resourceType))
},
getResourceFilterValues: (resourceType: string, stockID: string) => {
dispatch(HomePageActions.getResourceFilterValues(resourceType, stockID))
},
getSearchableFieldVFilterValues: (resourceType: string) => {
dispatch(HomePageActions.getSearchableFieldVFilterValues(resourceType))
},
},
};
};
export default connect(mapsStateToProps, mapDispatchToProps)(HomePage)
export default connect(mapsStateToProps, mapDispatchToProps)(HomePage)
i am getting error here
Argument of type ‘typeof HomePage’ is not assignable to parameter of
type ‘ComponentType’. Type ‘typeof HomePage’ is not
assignable to type ‘ComponentClass<never, any>’.
The types returned by ‘getDerivedStateFromProps(…)’ are incompatible between these types.
Type ‘{ activeResourceType: string; } | undefined’ is not assignable to type ‘Partial | null’.
Type ‘undefined’ is not assignable to type ‘Partial |
any suggestion on how to fix this error and why i am getting this error.