KER-422: Hearing Map bugs

src/App.jsx

@@ -1,14 +1,12 @@
-/* eslint-disable react/no-unused-prop-types */
 /* eslint-disable react/forbid-prop-types */
-/* eslint-disable camelcase */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, IntlProvider } from 'react-intl';
 import Helmet from 'react-helmet';
 import classNames from 'classnames';
 import { useApiTokens } from 'hds-react';
-import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 
 import messages from './i18n';
 import Header from './components/Header/Header';
@@ -29,7 +27,6 @@ import Toast from './components/Toast';
 
 function App({ language, isHighContrast, history, ...props }) {
   const { user, dispatchSetOidcUser, dispatchEnrichUser } = props;
-  const [ searchParams ] = useSearchParams();
   const { fullscreen } = useParams();
   const location = useLocation();
   const [locale, setLocale] = useState(language);
@@ -49,13 +46,6 @@ function App({ language, isHighContrast, history, ...props }) {
     };
   }, [language]);
 
-  useEffect(() => {
-    const lang = searchParams.get('lang')
-    if (lang) {
-      setLocale(lang);
-    }
-  }, [searchParams, locale]);
-
   useEffect(() => {
     if (!user && authenticated) {
       try {
@@ -83,7 +73,7 @@ function App({ language, isHighContrast, history, ...props }) {
 
   let header = null;
   if (!fullscreen && !headless) {
-    header = <Header slim={location.pathname !== '/'} history={history} />;
+    header = <Header slim={location.pathname !== '/'} history={history} locale={locale} setLocale={setLocale} />;
   }
   const mainContainerId = 'main-container';
   return (

src/actions/index.js

@@ -47,8 +47,8 @@ export function getResponseJSON(response) {
 }
 
 export const requestErrorHandler = (
-   dispatch,
-   localizationKey = undefined
+  dispatch,
+  localizationKey = undefined
 ) => (err) => {
   Sentry.captureException(err);
   let payload;
@@ -307,10 +307,14 @@ export function fetchAllSectionComments(hearingSlug, sectionId, ordering = '-n_v
 }
 
 export function postSectionComment(hearingSlug, sectionId, commentData = {}) {
+  // eslint-disable-next-line sonarjs/cognitive-complexity
   return (dispatch) => {
     const fetchAction = createAction("postingComment")({ hearingSlug, sectionId });
+
     dispatch(fetchAction);
+
     const url = (`/v1/hearing/${hearingSlug}/sections/${sectionId}/comments/`);
+
     let params = {
       content: commentData.text ? commentData.text : "",
       plugin_data: commentData.pluginData ? commentData.pluginData : null,
@@ -321,10 +325,13 @@ export function postSectionComment(hearingSlug, sectionId, commentData = {}) {
       answers: commentData.answers ? commentData.answers : [],
       pinned: commentData.pinned ? commentData.pinned : false,
       map_comment_text: commentData.mapCommentText ? commentData.mapCommentText : "",
+      organization: commentData.organization ?? undefined
     };
+
     if (commentData.authorName) {
       params = Object.assign(params, { author_name: commentData.authorName });
     }
+
     if (commentData.comment) {
       params = { ...params, comment: commentData.comment };
     }
@@ -342,7 +349,7 @@ export function postSectionComment(hearingSlug, sectionId, commentData = {}) {
       createLocalizedAlert("commentReceived");
     }).catch((err) => {
       requestErrorHandler(dispatch, "loginToComment")(err);
-  });
+    });
   };
 }
 

src/components/BaseCommentForm.jsx

@@ -68,28 +68,8 @@ const BaseCommentForm = ({
   onPostComment,
   onChangeAnswers,
 }) => {
-
   const dispatch = useDispatch();
 
-  const defaultState = useMemo(() => ({
-    commentText: '',
-    nickname: defaultNickname,
-    imageTooBig: false,
-    images: [],
-    pinned: false,
-    showAlert: true,
-    hideName: false,
-    geojson: {},
-    mapCommentText: '',
-    commentRequiredError: false,
-    commentOrAnswerRequiredError: false,
-  }), [defaultNickname]);
-
-  const [formData, setFormData] = useState({
-    ...defaultState,
-    collapsed: true,
-  });
-
   /**
    * Determines whether the logged in user is admin or not.
    * The array in users with key adminOrganizations should be of length > 0
@@ -99,6 +79,29 @@ const BaseCommentForm = ({
     [loggedIn, user],
   );
 
+  const defaultState = useMemo(
+    () => ({
+      commentText: '',
+      nickname: defaultNickname,
+      imageTooBig: false,
+      images: [],
+      pinned: false,
+      showAlert: true,
+      hideName: false,
+      geojson: {},
+      mapCommentText: '',
+      commentRequiredError: false,
+      commentOrAnswerRequiredError: false,
+      organization: isUserAdmin ? user.adminOrganizations[0] : undefined,
+    }),
+    [defaultNickname, isUserAdmin, user?.adminOrganizations],
+  );
+
+  const [formData, setFormData] = useState({
+    ...defaultState,
+    collapsed: true,
+  });
+
   const hasQuestions = useMemo(() => hasAnyQuestions(section), [section]);
 
   const userAnsweredAllQuestions = useMemo(
@@ -125,7 +128,11 @@ const BaseCommentForm = ({
         onOverrideCollapse();
       }
     } else {
-      dispatch(addToast(createLocalizedNotificationPayload(NOTIFICATION_TYPES.error, getSectionCommentingErrorMessage(section))));
+      dispatch(
+        addToast(
+          createLocalizedNotificationPayload(NOTIFICATION_TYPES.error, getSectionCommentingErrorMessage(section)),
+        ),
+      );
     }
   }, [canComment, defaultState, formData, onOverrideCollapse, section, dispatch]);
 
@@ -193,7 +200,7 @@ const BaseCommentForm = ({
     const pluginComment = getPluginComment();
     let pluginData = getPluginData();
 
-    const { nickname, commentText, geojson, images, pinned, mapCommentText, imageTooBig } = formData;
+    const { nickname, commentText, geojson, images, pinned, mapCommentText, imageTooBig, organization } = formData;
 
     const data = {
       nickname: nickname === '' ? nicknamePlaceholder : nickname,
@@ -203,6 +210,7 @@ const BaseCommentForm = ({
       pinned,
       mapCommentText,
       label: null,
+      organization,
     };
 
     // plugin comment will override comment fields, if provided
@@ -239,19 +247,20 @@ const BaseCommentForm = ({
 
     // make sure empty comments are not added when not intended
     if (isEmptyCommentAllowed(section, hasAnyAnswers(answers)) && !data.commentText.trim()) {
-      data.setCommentText = config.emptyCommentString;
+      data.commentText = config.emptyCommentString;
     }
 
-    onPostComment(
-      data.commentText,
-      data.nickname,
+    onPostComment({
+      text: data.commentText,
+      authorName: data.nickname,
       pluginData,
-      data.geojson,
-      data.label,
-      data.images,
-      data.pinned,
-      data.mapCommentText,
-    );
+      geojson: data.geojson,
+      label: data.label,
+      images: data.images,
+      pinned: data.pinned,
+      mapCommentText: data.mapCommentText,
+      organization: data.organization ?? undefined,
+    });
 
     setFormData({
       ...formData,
@@ -350,34 +359,30 @@ const BaseCommentForm = ({
   /**
    * For admins, there is slightly different form.
    */
-  const renderFormForAdmin = () => {
-    const organization = isUserAdmin && user.adminOrganizations[0];
-
-    return (
-      <>
-        <TextInput
-          label={<FormattedMessage id='nickname' />}
-          hideLabel
-          id='nickname'
-          placeholder={nicknamePlaceholder}
-          value={formData.nickname}
-          onChange={handleNicknameChange}
-          maxLength={32}
-          disabled
-        />
-        <TextInput
-          label={<FormattedMessage id='organization' />}
-          hideLabel
-          id='organization'
-          placeholder={intl.formatMessage({ id: 'organization' })}
-          value={organization || ''}
-          onChange={() => {}}
-          maxLength={32}
-          disabled
-        />
-      </>
-    );
-  };
+  const renderFormForAdmin = () => (
+    <>
+      <TextInput
+        label={<FormattedMessage id='nickname' />}
+        hideLabel
+        id='nickname'
+        placeholder={nicknamePlaceholder}
+        value={formData.nickname}
+        onChange={handleNicknameChange}
+        maxLength={32}
+        disabled
+      />
+      <TextInput
+        label={<FormattedMessage id='organization' />}
+        hideLabel
+        id='organization'
+        placeholder={intl.formatMessage({ id: 'organization' })}
+        value={formData.organization}
+        onChange={() => {}}
+        maxLength={32}
+        disabled
+      />
+    </>
+  );
 
   /**
    * If an admin type of user is posting comment, the form is slightly different.

src/components/DeleteModal.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Button, Dialog } from 'hds-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
-const DeleteModal = ({ isOpen, intl, close, onDeleteComment }) => {
+const DeleteModal = ({ isOpen, commentSectionId, commentId, refreshUser, intl, close, onDeleteComment }) => {
   const titleId = 'delete-modal-title';
   const descriptionId = 'delete-modal-description';
 
@@ -30,7 +30,7 @@ const DeleteModal = ({ isOpen, intl, close, onDeleteComment }) => {
         <Button
           className='kerrokantasi-btn danger'
           onClick={() => {
-            onDeleteComment();
+            onDeleteComment(commentSectionId, commentId, refreshUser);
             close();
           }}
         >
@@ -46,6 +46,9 @@ DeleteModal.propTypes = {
   intl: PropTypes.object,
   close: PropTypes.func,
   onDeleteComment: PropTypes.func,
+  commentSectionId: PropTypes.string,
+  commentId: PropTypes.string,
+  refreshUser: PropTypes.bool,
 };
 
 export default injectIntl(DeleteModal);