From e23919f194a37a9cd42456257565bd99536f51a0 Mon Sep 17 00:00:00 2001 From: Sam Arbid Date: Mon, 8 Jul 2024 14:37:13 +0200 Subject: [PATCH] editor: refactor set char count action * refactor action * disable submit button when it's < 1 char --- .../js/invenio_requests/request/Request.js | 5 ---- .../TimelineCommentEditor.js | 5 ++-- .../timelineCommentEditor/state/actions.js | 30 ++++++++----------- 3 files changed, 16 insertions(+), 24 deletions(-) diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/request/Request.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/request/Request.js index 7d32db0e..37331fef 100644 --- a/invenio_requests/assets/semantic-ui/js/invenio_requests/request/Request.js +++ b/invenio_requests/assets/semantic-ui/js/invenio_requests/request/Request.js @@ -1,6 +1,5 @@ // This file is part of InvenioRequests // Copyright (C) 2022 CERN. -// Copyright (C) 2024 KTH Royal Institute of Technology. // // Invenio RDM Records is free software; you can redistribute it and/or modify it // under the terms of the MIT License; see LICENSE file for more details. @@ -24,7 +23,6 @@ export class Request extends Component { request, userAvatar, permissions, - commentContentMaxLength, updateRequestAfterAction, } = this.props; @@ -39,7 +37,6 @@ export class Request extends Component { request={request} userAvatar={userAvatar} permissions={permissions} - commentContentMaxLength={commentContentMaxLength} /> @@ -52,13 +49,11 @@ Request.propTypes = { initRequest: PropTypes.func.isRequired, updateRequestAfterAction: PropTypes.func.isRequired, userAvatar: PropTypes.string, - commentContentMaxLength: PropTypes.number.isRequired, permissions: PropTypes.object.isRequired, }; Request.defaultProps = { userAvatar: "", - commentContentMaxLength: 0, }; export default Overridable.component("InvenioRequests.Request", Request); diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js index 5b2dd3b1..04c0abed 100644 --- a/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js +++ b/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js @@ -23,6 +23,7 @@ const TimelineCommentEditor = ({ charCount, commentContentMaxLength, }) => { + const isSubmitDisabled = () => isLoading || (charCount === 0) || (charCount >= commentContentMaxLength) return (
{error && {error}} @@ -46,7 +47,7 @@ const TimelineCommentEditor = ({ icon="send" size="medium" content={i18next.t("Comment")} - disabled={isLoading || charCount >= commentContentMaxLength} + disabled={isSubmitDisabled()} loading={isLoading} onClick={() => submitComment(commentContent, "html")} /> @@ -72,7 +73,7 @@ TimelineCommentEditor.defaultProps = { error: "", userAvatar: "", charCount: 0, - commentContentMaxLength: 25000, + commentContentMaxLength: 0, }; export default TimelineCommentEditor; diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/actions.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/actions.js index fcb310b6..612ba84d 100644 --- a/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/actions.js +++ b/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/actions.js @@ -14,6 +14,7 @@ import { } from "../../timeline/state/actions"; import _cloneDeep from "lodash/cloneDeep"; import { i18next } from "@translations/invenio_requests/i18next"; + export const IS_LOADING = "eventEditor/IS_LOADING"; export const HAS_ERROR = "eventEditor/HAS_ERROR"; export const SUCCESS = "eventEditor/SUCCESS"; @@ -27,27 +28,22 @@ export const setEventContent = (content) => { type: SETTING_CONTENT, payload: content, }); - const commentContentMaxLength = config.commentContentMaxLength || 25000; + + const commentContentMaxLength = config.commentContentMaxLength; const charCount = content.length; - dispatch({ - type: SET_CHAR_COUNT, - payload: charCount, - }); - if (charCount >= commentContentMaxLength) { - dispatch({ - type: HAS_ERROR, - payload: i18next.t("Character count exceeds the maximum allowed limit."), - }); - } else { - dispatch({ - type: HAS_ERROR, - payload: null, - }); - } + const errorMessage = i18next.t("Character count exceeds the maximum allowed limit."); + + const validateContentLength = (charCount, maxLength, errorMessage) => { + return charCount >= maxLength ? errorMessage : null; + }; + + const error = validateContentLength(charCount, commentContentMaxLength, errorMessage); + + dispatch({ type: SET_CHAR_COUNT, payload: charCount }); + dispatch({ type: HAS_ERROR, payload: error }); }; }; - export const submitComment = (content, format) => { return async (dispatch, getState, config) => { const { timeline: timelineState } = getState();