editor: refactor component logic to redux actions

invenio_requests/assets/semantic-ui/js/invenio_requests/InvenioRequestsApp.js

@@ -22,9 +22,9 @@ export class InvenioRequestsApp extends Component {
   constructor(props) {
     super(props);
     const {
+      request,
       requestsApi,
       requestEventsApi,
-      request,
       defaultQueryParams,
       commentContentMaxLength,
     } = this.props;
@@ -59,11 +59,11 @@ export class InvenioRequestsApp extends Component {
 
 InvenioRequestsApp.propTypes = {
   requestsApi: PropTypes.object,
-  requestEventsApi: PropTypes.object,
   overriddenCmps: PropTypes.object,
+  requestEventsApi: PropTypes.object,
   request: PropTypes.object.isRequired,
-  userAvatar: PropTypes.string.isRequired,
   defaultQueryParams: PropTypes.object,
+  userAvatar: PropTypes.string.isRequired,
   permissions: PropTypes.object.isRequired,
   commentContentMaxLength: PropTypes.number.isRequired,
 };

invenio_requests/assets/semantic-ui/js/invenio_requests/request/Request.js

@@ -22,10 +22,10 @@ export class Request extends Component {
   render() {
     const {
       request,
-      updateRequestAfterAction,
       userAvatar,
       permissions,
       commentContentMaxLength,
+      updateRequestAfterAction,
     } = this.props;
 
     return (

invenio_requests/assets/semantic-ui/js/invenio_requests/requestsAppInit.js

@@ -30,7 +30,7 @@ import {
   LabelTypeGuestAccess,
   LabelTypeUserAccess,
   LabelTypeCommunityManageRecord,
-  LabelTypeCommunitySubcommunity,
+  LabelTypeCommunitySubcommunity
 } from "./contrib";
 import {
   AcceptStatus,

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js

@@ -1,17 +1,17 @@
 // 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.
 
 import { RichEditor } from "react-invenio-forms";
-import React, { useState } from "react";
+import React from "react";
 import { SaveButton } from "../components/Buttons";
 import { Container, Message } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { i18next } from "@translations/invenio_requests/i18next";
 import { RequestEventAvatarContainer } from "../components/RequestsFeed";
-import { useSelector } from "react-redux";
 
 const TimelineCommentEditor = ({
   isLoading,
@@ -20,30 +20,19 @@ const TimelineCommentEditor = ({
   error,
   submitComment,
   userAvatar,
+  charCount,
+  commentContentMaxLength,
 }) => {
-  const [charCount, setCharCount] = useState(0);
-  const [localError, setLocalError] = useState("");
-  const commentContentMaxLength =
-    useSelector((state) => state.timeline.commentContentMaxLength) || 25000;
   const handleInit = (editor) => {
     editor.on("input", () => {
-      // Using 'wordcount' plugin didn't give the real character count as it ignores HTML tags:
-      // const charCount = editor.plugins.wordcount.body.getCharacterCount();
-      // Instead, we use getContent to include HTML tags in the count:
-      // If wordcount is redundant, we can remove it, though it might still be useful for plain text analysis.
-      const charCount = editor.getContent().length;
-      setCharCount(charCount);
-      if (charCount > commentContentMaxLength) {
-        setLocalError(i18next.t("Character count exceeds the maximum allowed limit."));
-      } else {
-        setLocalError("");
-      }
+      const content = editor.getContent();
+      setCommentContent(content);
     });
   };
 
   return (
     <div className="timeline-comment-editor-container">
-      {(error || localError) && <Message negative>{error || localError}</Message>}
+      {error && <Message negative>{error}</Message>}
       <div className="flex">
         <RequestEventAvatarContainer
           src={userAvatar}
@@ -67,7 +56,7 @@ const TimelineCommentEditor = ({
           icon="send"
           size="medium"
           content={i18next.t("Comment")}
-          disabled={isLoading || charCount > commentContentMaxLength}
+          disabled={isLoading || charCount >= commentContentMaxLength}
           loading={isLoading}
           onClick={() => submitComment(commentContent, "html")}
         />
@@ -83,13 +72,17 @@ TimelineCommentEditor.propTypes = {
   error: PropTypes.string,
   submitComment: PropTypes.func.isRequired,
   userAvatar: PropTypes.string,
+  charCount: PropTypes.number,
+  commentContentMaxLength: PropTypes.number,
 };
 
 TimelineCommentEditor.defaultProps = {
   commentContent: "",
   isLoading: false,
   error: "",
   userAvatar: "",
+  charCount: 0,
+  commentContentMaxLength: 25000,
 };
 
 export default TimelineCommentEditor;

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/index.js

@@ -18,7 +18,8 @@ const mapStateToProps = (state) => ({
   isLoading: state.timelineCommentEditor.isLoading,
   error: state.timelineCommentEditor.error,
   commentContent: state.timelineCommentEditor.commentContent,
-  commentContentMaxLength: state.timelineCommentEditor,
+  charCount: state.timelineCommentEditor.charCount,
+  commentContentMaxLength: state.timeline.commentContentMaxLength,
 });
 
 export const TimelineCommentEditor = connect(

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/actions.js

@@ -1,5 +1,6 @@
 // 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.
@@ -12,21 +13,41 @@ import {
   SUCCESS as TIMELINE_SUCCESS,
 } 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";
 export const SETTING_CONTENT = "eventEditor/SETTING_CONTENT";
+export const SET_CHAR_COUNT = "eventEditor/SET_CHAR_COUNT";
+export const CLEAR_ERROR = "eventEditor/CLEAR_ERROR";
 
 export const setEventContent = (content) => {
   return async (dispatch, getState, config) => {
     dispatch({
       type: SETTING_CONTENT,
       payload: content,
     });
+    const commentContentMaxLength = config.commentContentMaxLength || 25000;
+    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,
+      });
+    }
   };
 };
 
+
 export const submitComment = (content, format) => {
   return async (dispatch, getState, config) => {
     const { timeline: timelineState } = getState();
@@ -44,7 +65,6 @@ export const submitComment = (content, format) => {
       That includes the pagination logic e.g. changing pages if the current page size is exceeded by a new comment. */
 
       const response = await config.requestsApi.submitComment(payload);
-
       const currentPage = timelineState.page;
       const currentSize = timelineState.size;
       const currentCommentsLength = timelineState.data.hits.hits.length;

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/reducer.js

@@ -1,15 +1,17 @@
 // 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.
 
-import { IS_LOADING, HAS_ERROR, SUCCESS, SETTING_CONTENT } from "./actions";
+import { IS_LOADING, HAS_ERROR, SUCCESS, SETTING_CONTENT, SET_CHAR_COUNT } from "./actions";
 
 const initial_state = {
   error: null,
   isLoading: false,
   commentContent: "",
+  charCount: 0,
 };
 
 export const commentEditorReducer = (state = initial_state, action) => {
@@ -27,6 +29,8 @@ export const commentEditorReducer = (state = initial_state, action) => {
         error: null,
         commentContent: "",
       };
+    case SET_CHAR_COUNT:
+      return { ...state, charCount: action.payload };
     default:
       return state;
   }