From 4bd47773f1682513352e0529da59f121d9e8dd22 Mon Sep 17 00:00:00 2001 From: Tomi Salo <54830004+Eezi@users.noreply.github.com> Date: Tue, 30 Apr 2024 10:59:16 +0300 Subject: [PATCH] refactor: class converts to function (#6878) * Converted the ValidIndicatorCompoent * Converted the ReviewActionComponent * Converted the IDVerifierComponent component --- .../components/form/ReviewActionComponent.tsx | 350 +++++++++--------- .../src/views/CorrectionForm/IDVerifier.tsx | 287 +++++++------- .../src/InputField/ValidIndicator.tsx | 70 ++-- 3 files changed, 339 insertions(+), 368 deletions(-) diff --git a/packages/client/src/components/form/ReviewActionComponent.tsx b/packages/client/src/components/form/ReviewActionComponent.tsx index 3eb0236941..b8e3884150 100644 --- a/packages/client/src/components/form/ReviewActionComponent.tsx +++ b/packages/client/src/components/form/ReviewActionComponent.tsx @@ -10,14 +10,14 @@ */ import { PrimaryButton, TertiaryButton } from '@opencrvs/components/lib/buttons' import { injectIntl, WrappedComponentProps as IntlShapeProps } from 'react-intl' -import { Upload, Check, Cross } from '@opencrvs/components/lib/icons' +import { Upload } from '@opencrvs/components/lib/icons' import { IDeclaration, SUBMISSION_STATUS } from '@client/declarations' import { messages } from '@client/i18n/messages/views/review' import { buttonMessages } from '@client/i18n/messages' import { ResponsiveModal } from '@opencrvs/components/lib/ResponsiveModal' import { SubmissionAction } from '@client/forms' import styled from 'styled-components' -import * as React from 'react' +import React, { useState } from 'react' import { Button } from '@opencrvs/components/lib/Button' import { Icon } from '@opencrvs/components/lib/Icon' @@ -293,191 +293,181 @@ const ACTION_TO_CONTENT_MAP_SKELETON: ( } }) -interface IReviewActionState { - showSubmitModal: boolean -} -class ReviewActionComponent extends React.Component< - IReviewActionProps & IntlShapeProps, - IReviewActionState -> { - state = { showSubmitModal: false } - toggleSubmitModalOpen = () => { - this.setState((prevState) => ({ - showSubmitModal: !prevState.showSubmitModal - })) +const ReviewActionComponent = ({ + id, + declarationToBeValidated, + declarationToBeRegistered, + alreadyRejectedDeclaration, + completeDeclaration, + totalFileSizeExceeded, + declaration, + submitDeclarationAction, + draftDeclaration, + rejectDeclarationAction, + intl, + hasErrorsOnFields +}: IReviewActionProps & IntlShapeProps) => { + const [showSubmitModal, setShowSubmitModal] = useState(false) + + const toggleSubmitModalOpen = () => { + setShowSubmitModal(!showSubmitModal) } - render() { - const { - id, - declarationToBeValidated, - declarationToBeRegistered, - alreadyRejectedDeclaration, - completeDeclaration, - totalFileSizeExceeded, - declaration, - submitDeclarationAction, - draftDeclaration, - rejectDeclarationAction, - intl, - hasErrorsOnFields - } = this.props - const ACTION_TO_CONTENT_MAP = ACTION_TO_CONTENT_MAP_SKELETON( - window.config.INFORMANT_NOTIFICATION_DELIVERY_METHOD, - !!hasErrorsOnFields - ) + const ACTION_TO_CONTENT_MAP = ACTION_TO_CONTENT_MAP_SKELETON( + window.config.INFORMANT_NOTIFICATION_DELIVERY_METHOD, + !!hasErrorsOnFields + ) - const background = !completeDeclaration - ? 'error' - : draftDeclaration - ? 'success' - : '' - const action = declarationToBeRegistered - ? ACTION.DECLARATION_TO_BE_REGISTERED - : declarationToBeValidated - ? ACTION.DECLARATION_TO_BE_VALIDATED - : ACTION.DECLARATION_TO_BE_DECLARED + const background = !completeDeclaration + ? 'error' + : draftDeclaration + ? 'success' + : '' + const action = declarationToBeRegistered + ? ACTION.DECLARATION_TO_BE_REGISTERED + : declarationToBeValidated + ? ACTION.DECLARATION_TO_BE_VALIDATED + : ACTION.DECLARATION_TO_BE_DECLARED - const actionContent = - (ACTION_TO_CONTENT_MAP[action].draftStatus[ + const actionContent = + (ACTION_TO_CONTENT_MAP[action].draftStatus[ + String(draftDeclaration || alreadyRejectedDeclaration) + ] && + ACTION_TO_CONTENT_MAP[action].draftStatus[ String(draftDeclaration || alreadyRejectedDeclaration) - ] && - ACTION_TO_CONTENT_MAP[action].draftStatus[ - String(draftDeclaration || alreadyRejectedDeclaration) - ].completionStatus[String(completeDeclaration)]) || - null - return !actionContent ? null : ( - - - - - {intl.formatMessage( - actionContent.title.message, - actionContent.title.payload - )} - - - {intl.formatMessage(actionContent.description.message, { - ...actionContent.description.payload, - eventType: declaration.event - })} - - - {declarationToBeRegistered ? ( - - ) : declarationToBeValidated ? ( - - ) : ( - - )} + ].completionStatus[String(completeDeclaration)]) || + null + return !actionContent ? null : ( + + + + + {intl.formatMessage( + actionContent.title.message, + actionContent.title.payload + )} + + + {intl.formatMessage(actionContent.description.message, { + ...actionContent.description.payload, + eventType: declaration.event + })} + + + {declarationToBeRegistered ? ( + + ) : declarationToBeValidated ? ( + + ) : ( + + )} - {rejectDeclarationAction && !alreadyRejectedDeclaration && ( - - )} - - - {actionContent.modal && ( - + + {intl.formatMessage(buttonMessages.reject)} + + )} + + + {actionContent.modal && ( + { + toggleSubmitModalOpen() + if (document.documentElement) { + document.documentElement.scrollTop = 0 + } + }} + > + {intl.formatMessage(buttonMessages.cancel)} + , + + draftDeclaration + ? submitDeclarationAction( + declaration, + SUBMISSION_STATUS.READY_TO_SUBMIT, + SubmissionAction.SUBMIT_FOR_REVIEW + ) + : declarationToBeRegistered + ? submitDeclarationAction( + declaration, + SUBMISSION_STATUS.READY_TO_REGISTER, + SubmissionAction.REGISTER_DECLARATION + ) + : submitDeclarationAction( + declaration, + SUBMISSION_STATUS.READY_TO_APPROVE, + SubmissionAction.APPROVE_DECLARATION + ) + } + > + {declarationToBeRegistered + ? intl.formatMessage(buttonMessages.register) + : declarationToBeValidated + ? intl.formatMessage(buttonMessages.send) + : intl.formatMessage(buttonMessages.send)} + + ]} + show={showSubmitModal} + handleClose={toggleSubmitModalOpen} + > + {actionContent.modal.description && + intl.formatMessage(actionContent.modal.description.message, { + ...actionContent.modal.description.payload, event: declaration.event })} - responsive={false} - autoHeight={true} - actions={[ - { - this.toggleSubmitModalOpen() - if (document.documentElement) { - document.documentElement.scrollTop = 0 - } - }} - > - {intl.formatMessage(buttonMessages.cancel)} - , - - draftDeclaration - ? submitDeclarationAction( - declaration, - SUBMISSION_STATUS.READY_TO_SUBMIT, - SubmissionAction.SUBMIT_FOR_REVIEW - ) - : declarationToBeRegistered - ? submitDeclarationAction( - declaration, - SUBMISSION_STATUS.READY_TO_REGISTER, - SubmissionAction.REGISTER_DECLARATION - ) - : submitDeclarationAction( - declaration, - SUBMISSION_STATUS.READY_TO_APPROVE, - SubmissionAction.APPROVE_DECLARATION - ) - } - > - {declarationToBeRegistered - ? intl.formatMessage(buttonMessages.register) - : declarationToBeValidated - ? intl.formatMessage(buttonMessages.send) - : intl.formatMessage(buttonMessages.send)} - - ]} - show={this.state.showSubmitModal} - handleClose={this.toggleSubmitModalOpen} - > - {actionContent.modal.description && - intl.formatMessage(actionContent.modal.description.message, { - ...actionContent.modal.description.payload, - event: declaration.event - })} - - )} - - ) - } + + )} + + ) } export const ReviewAction = injectIntl(ReviewActionComponent) diff --git a/packages/client/src/views/CorrectionForm/IDVerifier.tsx b/packages/client/src/views/CorrectionForm/IDVerifier.tsx index 594329afe4..ebcaf30bcb 100644 --- a/packages/client/src/views/CorrectionForm/IDVerifier.tsx +++ b/packages/client/src/views/CorrectionForm/IDVerifier.tsx @@ -8,7 +8,7 @@ * * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS. */ -import * as React from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { SuccessButton, @@ -81,160 +81,147 @@ const UnderLayBackground = styled.div` } ` -interface IIDVerifierState { - showPrompt: boolean -} - -class IDVerifierComponent extends React.Component< - IIDVerifierProps & IntlShapeProps, - IIDVerifierState -> { - state = { showPrompt: false } - - togglePrompt = () => { - this.setState((prevState) => ({ showPrompt: !prevState.showPrompt })) +const IDVerifierComponent = ({ + correctorInformation, + intl, + actionProps, + id, + title +}: IIDVerifierProps & IntlShapeProps) => { + const [showPrompt, setShowPrompt] = useState(false) + + const togglePrompt = () => { + setShowPrompt(!showPrompt) } - renderLabelValue = () => { - const { correctorInformation, intl } = this.props - - return ( - <> - {correctorInformation && correctorInformation.iD && ( - - )} - {correctorInformation && correctorInformation.firstNames && ( - - )} - - {correctorInformation && correctorInformation.familyName && ( - + const renderLabelValue = () => ( + <> + {correctorInformation && correctorInformation.iD && ( + + )} + {correctorInformation && correctorInformation.firstNames && ( + + )} + + {correctorInformation && correctorInformation.familyName && ( + + )} + + { + + } + + {correctorInformation?.age && ( + + )} + + {correctorInformation && correctorInformation.nationality && ( + + )} + + ) + + const { positiveAction, negativeAction } = actionProps + + const positiveActionButton = ( + } + align={ICON_ALIGNMENT.LEFT} + > + {positiveAction.label} + + ) + + const negativeActionButton = ( + } + align={ICON_ALIGNMENT.LEFT} + > + {negativeAction.label} + + ) + + return ( +
+ + {correctorInformation && ( + + + {renderLabelValue()} + )} - - { - - } - - {correctorInformation?.age && ( - + + - )} - - ) - } - - render() { - const { positiveAction, negativeAction } = this.props.actionProps - const { showPrompt } = this.state - const { correctorInformation, intl, id } = this.props - - const positiveActionButton = ( - } - align={ICON_ALIGNMENT.LEFT} + contentHeight={96} + handleClose={togglePrompt} + actions={[ + + {intl.formatMessage(certificateMessages.idCheckDialogCancel)} + , + { + actionProps.negativeAction.handler() + togglePrompt() + }} + > + {intl.formatMessage(certificateMessages.idCheckDialogConfirm)} + + ]} > - {positiveAction.label} - - ) - - const negativeActionButton = ( - } - align={ICON_ALIGNMENT.LEFT} - > - {negativeAction.label} - - ) - - return ( -
- - {correctorInformation && ( - - - {this.renderLabelValue()} - - )} - - - {intl.formatMessage(certificateMessages.idCheckDialogCancel)} - , - { - this.props.actionProps.negativeAction.handler() - this.togglePrompt() - }} - > - {intl.formatMessage(certificateMessages.idCheckDialogConfirm)} - - ]} - > - {intl.formatMessage( - certificateMessages.correctorIDCheckDialogDescription - )} - -
- ) - } + {intl.formatMessage( + certificateMessages.correctorIDCheckDialogDescription + )} + +
+ ) } export const IDVerifier = injectIntl(IDVerifierComponent) diff --git a/packages/components/src/InputField/ValidIndicator.tsx b/packages/components/src/InputField/ValidIndicator.tsx index 6991ba5751..d44f800572 100644 --- a/packages/components/src/InputField/ValidIndicator.tsx +++ b/packages/components/src/InputField/ValidIndicator.tsx @@ -23,43 +23,37 @@ interface IProps { theme: ITheme } -class ValidIndicatorComponent extends React.Component { - render() { - const { theme } = this.props - - return ( - - - 893F2164-9EDF-40D3-A792-B756B66B4205 - Created with sketchtool. - - - - - - - -  Valid - - ) - } -} +const ValidIndicatorComponent = ({ theme }: IProps) => ( + + + 893F2164-9EDF-40D3-A792-B756B66B4205 + Created with sketchtool. + + + + + + + +  Valid + +) export const ValidIndicator = withTheme(ValidIndicatorComponent)