diff --git a/src/commons/editingOverviewCard/EditingOverviewCard.tsx b/src/commons/editingOverviewCard/EditingOverviewCard.tsx index 93455b7e29..6158efc3c0 100644 --- a/src/commons/editingOverviewCard/EditingOverviewCard.tsx +++ b/src/commons/editingOverviewCard/EditingOverviewCard.tsx @@ -14,7 +14,7 @@ import { } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; import { ItemRenderer, Select } from '@blueprintjs/select'; -import * as React from 'react'; +import React, { useState } from 'react'; import { NavLink } from 'react-router-dom'; import Textarea from 'react-textarea-autosize'; @@ -38,85 +38,57 @@ type StateProps = { assessmentTypes: AssessmentType[]; }; -type State = { - editingOverviewField: string; - fieldValue: any; - showOptionsOverlay: boolean; -}; - -export class EditingOverviewCard extends React.Component { - public constructor(props: EditingOverviewCardProps) { - super(props); - this.state = { - editingOverviewField: '', - fieldValue: '', - showOptionsOverlay: false - }; - } - - public render() { - return ( -
- {this.optionsOverlay()} - {this.makeEditingOverviewCard(this.props.overview)} -
- ); - } +export const EditingOverviewCard: React.FC = props => { + const [editingOverviewField, setEditingOverviewField] = useState(''); + const [fieldValue, setFieldValue] = useState(''); + const [showOptionsOverlay, setShowOptionsOverlay] = useState(false); - private saveEditOverview = (field: keyof AssessmentOverview) => (e: any) => { + const saveEditOverview = (field: keyof AssessmentOverview) => (e: any) => { const overview = { - ...this.props.overview, - [field]: this.state.fieldValue + ...props.overview, + [field]: fieldValue }; - this.setState({ - editingOverviewField: '', - fieldValue: '' - }); + setEditingOverviewField(''); + setFieldValue(''); storeLocalAssessmentOverview(overview); - this.props.updateEditingOverview(overview); + props.updateEditingOverview(overview); }; - private handleEditOverview = () => (e: any) => { - this.setState({ - fieldValue: e.target.value - }); + const handleEditOverview = (e: any) => { + setFieldValue(e.target.value); }; - private toggleEditField = (field: keyof AssessmentOverview) => (e: any) => { - if (this.state.editingOverviewField !== field) { - this.setState({ - editingOverviewField: field, - fieldValue: this.props.overview[field] - }); + const toggleEditField = (field: keyof AssessmentOverview) => (e: any) => { + if (editingOverviewField !== field) { + setEditingOverviewField(field); + setFieldValue(props.overview[field]); } }; - private toggleOptionsOverlay = () => { - this.setState({ - showOptionsOverlay: !this.state.showOptionsOverlay - }); + const toggleOptionsOverlay = () => { + setShowOptionsOverlay(!showOptionsOverlay); }; - private handleExportXml = (e: any) => { + const handleExportXml = (e: any) => { exportXml(); }; - private makeEditingOverviewTextarea = (field: keyof AssessmentOverview) => ( + const makeEditingOverviewTextarea = (field: keyof AssessmentOverview) => (