Featue Header component implemented as functional component with React Hooks.
@@ -43,23 +43,9 @@ interface HeaderProps {
switchFieldsFilter: (status: StatusType) => any;
}
-interface HeaderState {
- showFilter: boolean;
-}
-
-class HeaderBase extends React.Component<HeaderProps, HeaderState> {
+const HeaderBase = ({ testCase, actionsFilter, fieldsFilter, nextTestCaseHandler, prevTestCaseHandler, backToListHandler, switchActionsFilter, switchFieldsFilter }: HeaderProps) => {
- constructor(props) {
- super(props);
-
- this.state = {
- showFilter: false
- }
- }
-
- render() {
- const { testCase, actionsFilter, fieldsFilter, nextTestCaseHandler, prevTestCaseHandler, backToListHandler, switchActionsFilter, switchFieldsFilter } = this.props,
- { showFilter } = this.state;
+ const [ showFilter, setShowFilter ] = React.useState(false);
const {
name,
@@ -75,23 +61,9 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
"header",
status.status
),
- mainClass = createSelector(
- "header-main",
- status.status
- ),
infoClass = createSelector(
"header__info",
showFilter ? "filter-enabled" : null
- ),
- prevButtonClass = createSelector(
- "header-main-name-icon",
- "left",
- prevTestCaseHandler ? "enabled" : "disabled"
- ),
- nextButtonClass = createSelector(
- "header-main-name-icon",
- "right",
- nextTestCaseHandler ? "enabled" : "disabled"
);
const period = getSecondsPeriod(startTime, finishTime);
@@ -117,7 +89,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
<div className="header-button__icon right"/>
</div>
</div>
- <div className="header-button header-main__contol-button" onClick={() => this.switchFilter()}>
+ <div className="header-button header-main__contol-button" onClick={() => setShowFilter(!showFilter)}>
<div className="header-button__icon filter" />
<div className="header-button__title">{showFilter ? "Hide filter" : "Show filter"}</div>
</div>
@@ -156,13 +128,6 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
);
}
- private switchFilter() {
- this.setState({
- showFilter: !this.state.showFilter
- })
- }
-}
-
export const Header = connect(
(state: AppState) => ({
testCase: state.selected.testCase,
