editing and deleting of comments

oarepo · Nov 23, 2024 · 33a3b31 · 33a3b31
1 parent 5b7fe9a
commit 33a3b31
Show file tree

Hide file tree

Showing 13 changed files with 343 additions and 40 deletions.
diff --git a/...ui/theme/assets/semantic-ui/js/oarepo_requests_ui/common/components/CommentSubmitForm.jsx b/...ui/theme/assets/semantic-ui/js/oarepo_requests_ui/common/components/CommentSubmitForm.jsx
@@ -51,9 +51,10 @@ export const CommentSubmitForm = ({ commentSubmitMutation }) => {
         <Button
           size="tiny"
           floated="right"
-          color="blue"
+          primary
           icon="send"
           type="button"
+          labelPosition="left"
           loading={isLoading}
           disabled={isLoading}
           content={i18next.t("Leave comment")}

diff --git a/.../theme/assets/semantic-ui/js/oarepo_requests_ui/common/components/RequestCommentInput.jsx b/.../theme/assets/semantic-ui/js/oarepo_requests_ui/common/components/RequestCommentInput.jsx
@@ -13,7 +13,13 @@ export const RequestCommentInput = ({ fieldPath, label }) => {
       <RichInputField
         fieldPath={fieldPath}
         label={
-          <FieldLabel htmlFor={fieldPath} label={label} className="rel-mb-25" />
+          label ? (
+            <FieldLabel
+              htmlFor={fieldPath}
+              label={label}
+              className="rel-mb-25"
+            />
+          ) : null
         }
         optimized="true"
         placeholder={i18next.t("Your comment here...")}
@@ -24,7 +30,7 @@ export const RequestCommentInput = ({ fieldPath, label }) => {
             optimized
             editorConfig={{
               auto_focus: true,
-              min_height: 130,
+              min_height: 100,
               toolbar:
                 "blocks | bold italic | bullist numlist | outdent indent | undo redo",
             }}

diff --git a/...ets/semantic-ui/js/oarepo_requests_ui/common/components/RequestModalContentAndActions.jsx b/...ets/semantic-ui/js/oarepo_requests_ui/common/components/RequestModalContentAndActions.jsx
@@ -12,8 +12,7 @@ import { useFormikContext } from "formik";
 import { mapLinksToActions } from "@js/oarepo_requests_common";
 import PropTypes from "prop-types";
 import { useQuery, useIsMutating } from "@tanstack/react-query";
-// TODO: remove when /configs starts using vnd zenodo accept header
-import { http } from "react-invenio-forms";
+import { httpApplicationJson } from "@js/oarepo_ui";
 
 export const RequestModalContentAndActions = ({
   request,
@@ -33,7 +32,9 @@ export const RequestModalContentAndActions = ({
   } = useQuery(
     ["applicableCustomFields", requestType?.type_id || request?.type],
     () =>
-      http.get(`/requests/configs/${requestType?.type_id || request?.type}`),
+      httpApplicationJson.get(
+        `/requests/configs/${requestType?.type_id || request?.type}`
+      ),
     {
       enabled: !!(requestType?.type_id || request?.type),
       refetchOnWindowFocus: false,

diff --git a/...requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/common/components/Timeline.jsx b/...requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/common/components/Timeline.jsx
@@ -3,7 +3,7 @@ import { i18next } from "@translations/oarepo_requests_ui/i18next";
 import { Message, Feed, Dimmer, Loader, Pagination } from "semantic-ui-react";
 import { CommentSubmitForm, TimelineEvent } from "@js/oarepo_requests_common";
 import PropTypes from "prop-types";
-import { http } from "react-invenio-forms";
+import { httpApplicationJson } from "@js/oarepo_ui";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { OverridableContext, overrideStore } from "react-overridable";
 
@@ -17,7 +17,7 @@ export const Timeline = ({ request, timelinePageSize }) => {
     ["requestEvents", request.id, page],
     () =>
       // q=!(type:T) to eliminate system created events
-      http.get(
+      httpApplicationJson.get(
         `${request.links?.timeline}?q=!(type:T)&page=${page}&size=${timelinePageSize}&sort=newest&expand=1`
       ),
     {
@@ -30,7 +30,8 @@ export const Timeline = ({ request, timelinePageSize }) => {
   );
 
   const commentSubmitMutation = useMutation(
-    (values) => http.post(request.links?.comments + "?expand=1", values),
+    (values) =>
+      httpApplicationJson.post(request.links?.comments + "?expand=1", values),
     {
       onSuccess: (response) => {
         if (response.status === 201) {
@@ -39,9 +40,9 @@ export const Timeline = ({ request, timelinePageSize }) => {
             (oldData) => {
               if (!oldData) return;
               // a bit ugly, but it is a limitation of react query when data you recieve is nested
-              const newData = [...oldData.data.hits.hits];
+              const newHits = [...oldData.data.hits.hits];
               if (oldData.data.hits.total + 1 > timelinePageSize) {
-                newData.pop();
+                newHits.pop();
               }
               return {
                 ...oldData,
@@ -50,7 +51,7 @@ export const Timeline = ({ request, timelinePageSize }) => {
                   hits: {
                     ...oldData.data.hits,
                     total: oldData.data.hits.total + 1,
-                    hits: [response.data, ...newData],
+                    hits: [response.data, ...newHits],
                   },
                 },
               };
@@ -89,7 +90,13 @@ export const Timeline = ({ request, timelinePageSize }) => {
         {events?.length > 0 && (
           <Feed>
             {events.map((event) => (
-              <TimelineEvent key={event.id} event={event} />
+              <TimelineEvent
+                key={event.id}
+                event={event}
+                // necessary for query invalidation and setting state of the request events query
+                requestId={request.id}
+                page={page}
+              />
             ))}
           </Feed>
         )}

diff --git a/.../theme/assets/semantic-ui/js/oarepo_requests_ui/common/components/TimelineActionEvent.jsx b/.../theme/assets/semantic-ui/js/oarepo_requests_ui/common/components/TimelineActionEvent.jsx
@@ -23,8 +23,8 @@ export const TimelineActionEvent = ({ event }) => {
             <div className="flex align-items-center justify-center">
               <Icon
                 className="requests action-event-icon"
-                name={eventIcon.name}
-                color={eventIcon.color}
+                name={eventIcon?.name}
+                color={eventIcon?.color}
               />
             </div>
             <div className="requests action-event-avatar inline-block">
@@ -35,7 +35,7 @@ export const TimelineActionEvent = ({ event }) => {
             </div>
             <b className="ml-5">{creatorLabel}</b>
             <Feed.Date>
-              {feedMessage} {toRelativeTime(event.created, i18next.language)}
+              {feedMessage} {toRelativeTime(event.updated, i18next.language)}
             </Feed.Date>
           </Feed.Summary>
         </Feed.Content>