I am working on an internal software for my company, and my supervisor wants a clean up the the sharp transition that usually occurs with react-router. What I found was react-transition-group. I added it to my project, and attempted to copy what was done via http://reactcommunity.org/react-transition-group/with-react-router but when I did, I got the following error: "var Component: JSX.Element" :: "JSX element type 'Component' does not have any construct or call signatures.ts(2604)"
Currently, I have been looking to updates for both react or typescript, attempted to change name from 'Component' in case it was an issue of overlap.
import * as React from 'react';
import {
Container,
Button
} from 'reactstrap'
import NavMenu from './components/nav/NavMenu'
import { Route, BrowserRouter as Router } from 'react-router-dom'
import Home from './components/pages/Home'
import AccountInfo from './components/pages/AccountInfo/AccountInfo'
import LeaveRequests from './components/pages/LeaveRequests/LeaveRequests'
import PersonnelView from './components/pages/PersonnelViews/PersonnelView'
import { IAppState } from './interfaces/state/state'
import { Summary401k } from './components/pages/HR/401PreTaxCash/401kSummary'
// eslint-disable-next-line
import authStore from './stores/AuthStore'
import { CashBalanceSummary } from './components/pages/HR/401PreTaxCash/CashBalanceSummary';
import { MarketPlaceCoverage } from './components/pages/HR/HealthBenefits/MarketPlaceCoverage';
import { PreTaxSummary } from './components/pages/HR/HealthBenefits/PreTaxSummary';
import { UHCPrescription } from './components/pages/HR/HealthBenefits/UHCPrescription';
import { DiscriminationPolicy } from './components/pages/HR/OnboardingDocuments/DiscriminationPolicy';
import { EmployeeHandbook } from './components/pages/HR/OnboardingDocuments/EmployeeHandbook';
import { Holidays } from './components/pages/HR/OnboardingDocuments/Holidays';
import { RemoteWork } from './components/pages/HR/OnboardingDocuments/RemoteWork';
import { SensitiveInformation } from './components/pages/HR/OnboardingDocuments/SensitiveInformation';
import { VacationLeavePolicy } from './components/pages/HR/OnboardingDocuments/VacationLeavePolicy';
import { Timekeeping } from './components/pages/HR/Timekeeping/Timekeeping';
import { TimekeepingLeave } from './components/pages/HR/Timekeeping/TimekeepingLeave';
import { UHCMedical } from './components/pages/HR/HealthBenefits/UHCMedical';
import HRHome from './components/pages/HR/HrHome';
import { CSSTransition } from 'react-transition-group';
export default class App extends React.Component<{}, IAppState> {
private _logout: any;
constructor(props: {}) {
super(props)
this.state = {
AuthState: {
isLoggedIn: false,
jwtToken: "",
pId: -1
},
logout: false
}
}
render() {
const routes = [
{ path: '/', name: 'Home', Component: <Home authCallback={this.authCallback} isLoggedIn={this.state.AuthState.isLoggedIn} authenticatedFunction={this.authenticatedFunction} unauthenticatedFunction={this.unauthenticatedFunction} /> },
{ path: '/account', name: 'Account Info', Component: <AccountInfo jwtToken={this.state.AuthState.jwtToken} pId={this.state.AuthState.pId} /> },
{ path: '/personnel', name: 'Personnel', Component: <PersonnelView jwtToken={this.state.AuthState.jwtToken} /> },
{ path: '/hrhome', name: 'HR Home', Component: <HRHome /> },
{ path: '/401ksummary', name: '401(k) Summary', Component: <Summary401k /> },
{ path: '/cashbalancesummary', name: 'Cash Balance Summary', Component: <CashBalanceSummary /> },
{ path: '/marketplacecoverage', name: 'Marketplace Coverage', Component: <MarketPlaceCoverage /> },
{ path: '/pretaxsummary', name: 'Pre-Tax Summary', Component: <PreTaxSummary /> },
{ path: '/uhcmedical', name: 'UHC Medical', Component: <UHCMedical /> },
{ path: '/uhcprescription', name: 'UHC Prescription', Component: <UHCPrescription /> },
{ path: '/discriminationpolicy', name: 'Discrimination Policy', Component: <DiscriminationPolicy /> },
{ path: '/employeehandbook', name: 'Employee Handbook', Component: <EmployeeHandbook /> },
{ path: '/holidays', name: 'Holidays', Component: <Holidays /> },
{ path: '/remotework', name: 'Remote Work', Component: <RemoteWork /> },
{ path: '/sensitiveinformation', name: 'Sensitive Information', Component: <SensitiveInformation /> },
{ path: '/vacationleavepolicy', name: 'Vacation Leave Policy', Component: <VacationLeavePolicy /> },
{ path: '/timekeeping', name: 'Timekeeping', Component: <Timekeeping /> },
{ path: '/timekeepingleave', name: 'Timekeeping Leave', Component: <TimekeepingLeave /> }
]
return (
<Router>
<NavMenu logout={this._logout} isLoggedIn= {this.state.AuthState.isLoggedIn} />
<Container>
{
routes.map(({ path, Component }) => (
<Route key={path} exact path={path}>
{
({ match }) => {
if (!Component) return null
return (
<CSSTransition
in={match != null}
timeout={300}
classNames="page"
unmountOnExit
>
<Component />
</CSSTransition>
)
}
}
</Route>
))
}
</Container>
<Route exact path="/leaverequests" component={() => <LeaveRequests pId={this.state.AuthState.pId} jwtToken={this.state.AuthState.jwtToken} />} />
</Router>
);
}
authCallback = async (receivedAccountInfo: any) => {
if (!this.state.AuthState.isLoggedIn) {
if (this.state.AuthState.pId < 0) {
this.setState({
AuthState: {
isLoggedIn: false,
jwtToken: "",
pId: 0
}
})
/*
* Store Logout
authStore.logout()
*/
}
const url = `${process.env.REACT_APP_API_URL}/api/personnel/id/${receivedAccountInfo.account.userName}`
const response = await fetch(url, {
headers: new Headers({
'Authorization': 'Bearer ' + receivedAccountInfo.jwtIdToken
})
})
const id = await response.json()
this.setState({
AuthState: {
isLoggedIn: true,
jwtToken: receivedAccountInfo.jwtIdToken,
pId: id
}
})
/*
* Store Login
authStore.startLogin(receivedAccountInfo.jwtIdToken)
await authStore.fetchLogin(`api/personnel/id/${receivedAccountInfo.account.userName}`)
console.log(authStore.getState())
*/
}
}
unauthenticatedFunction = (loginFunction: any) => {
return (
<Button color="primary" onClick={loginFunction}>Login</Button>
)
}
authenticatedFunction = (logout: any) => {
this._logout = logout
return (
<Button color="primary" onClick={logout}></Button>
)
}
}
