React Function: TypeError: Object(...) is not a function

Question

I am having some issues updating my team's code in order to app the inactivity function. But when trying to do that I getting an Error message on my console

TypeError: Object(...) is not a function

If anyone knows or has an idea of what the problem really is please let me know.

Here is the console

Here is the code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as Actions from '../actions';
import NeedContainer from './NeedContainer';
import ProfilContainer  from './ProfilContainer';
import DealContainer from './DealContainer';
import AmountContainer from './AmountContainer';
import DurationContainer from './DurationContainer';
import MonthlyContainer from './MonthlyContainer';
import ContributionContainer from './ContributionContainer';
import FeesContainer from './FeesContainer';
import createActivityDetector from 'activity-detector'
import { useState, useEffect } from 'react';

function useIdle(time) {
  const [isIdle, setIsIdle] = useState(false)
  useEffect(() => {
    const activityDetector = createActivityDetector(time)
    activityDetector.on('idle', () => setIsIdle(true))
    activityDetector.on('active', () => setIsIdle(true))
    return () => activityDetector.stop()
  }, [])
  return isIdle;
}

class SimulatorContainer extends Component {
  render() {
    const isIdle = useIdle({timeToIdle:1000})
    if (! this.props.ready)
    return (<div className="wf-loading">Loading ...</div>);
    return (
      <div className={this.props.className}>
        <NeedContainer />
        <ProfilContainer />
        <AmountContainer />
        <ContributionContainer />
        <DurationContainer />
        <MonthlyContainer />
        <DealContainer />
        <FeesContainer />
      </div>
    );
  }
}


const mapStateToProps = state => {
  return {
    ready:state.simulator.ready,
    interest:state.simulator.interest,
  }
}

const mapDispatchToProps = dispatch => {
  return {

    isReady: (ready) => {
      dispatch(Actions.isReady(ready));
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SimulatorContainer)

Answer 1

class useIdle extends Component() {
constructor() {
  super(props)
  this.state = {
    isIdle: false
  }
}
componentDidMount() {
    this.activityDetector = createActivityDetector(time)
    this.activityDetector.on('idle', () => this.setState({isIdle: true}))
    this.activityDetector.on('active', () => this.setState({isIdle: true}))
}

componentWillUnmount() {
this.activityDetector.stop()
}

render(){
  return this.state.isIdle;
 }
}