Merge branch 'develop' of github.com:ita-social-projects/Forum into #726

-Handle-Moderation-request-for-the-removed-content

FrontEnd/src/components/basicPage/BasicPage.jsx

@@ -24,6 +24,7 @@ import { RestorePasswordPage } from '../RestorePassword/pages/RestorePasswordPag
 import { RestorePasswordModalPage } from '../RestorePassword/pages/RestorePasswordModalPage';
 import { RestorePasswordSuccessPage } from '../RestorePassword/pages/RestorePasswordSuccessPage';
 import { RestorePasswordFailedPage } from '../RestorePassword/pages/RestorePasswordFailedPage';
+import { ModerationModal } from '../moderation/ModerationModal';
 import ScrollToTopButton from '../ScrollToTopButton/ScrollToTopButton';
 import TermsAndConditions from '../terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent';
 import { useAuth } from '../../hooks';
@@ -161,6 +162,8 @@ function BasicPage() {
           path="/search"
           element={<Search isAuthorized={isAuth} userData={user} />}
         />
+        <Route path="/moderation/:id/:action" element={<ModerationModal />}
+        />
         <Route path="*" element={< ErrorPage404 />} />
       </Routes>)}
       <Footer />

FrontEnd/src/components/moderation/ModerationModal.jsx

@@ -0,0 +1,79 @@
+import axios from 'axios';
+import{ useState, useEffect } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import MainPage from '../landing-page/MainPage';
+import MyModal from '../ProfilePage/UI/MyModal/MyModal';
+import classes from './ModerationModal.module.css';
+
+export function ModerationModal() {
+  const { id, action } = useParams();
+  const [moderationStatus, setModerationStatus] = useState('');
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const [searchParams] = useSearchParams();
+  const banner = searchParams.get('banner');
+  const logo = searchParams.get('logo');
+
+  const data = {
+    action,
+    ...(banner && { banner_approved: banner }),
+    ...(logo && { logo_approved: logo }),
+  };
+
+  const errorMessages = {
+    'There is a new request for moderation. URL is outdated':
+      'Помилка: профіль було повторно оновлено. Існує новіший запит на модерацію. Посилання застаріле.',
+    'The change approval request has been processed. URL is outdated':
+      'Помилка: запит на затвердження змін вже було опрацьовано. Посилання застаріле.',
+  };
+
+  const handleModeration = async () => {
+    try {
+      await axios.patch(
+        `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${id}/images_moderation/`,
+        data
+      );
+      action === 'approve'
+        ? setModerationStatus('Зміни успішно затверджено')
+        : setModerationStatus(
+            'Зміни успішно скасовано. Профіль компанії заблоковано'
+          );
+      setModalVisible(true);
+    } catch (error) {
+      setModerationStatus('Помилка застосування змін');
+      if (error.response && error.response.status === 400) {
+        Object.keys(error.response.data).forEach((key) => {
+          const message = error.response.data[key][0];
+          if (errorMessages[message]) {
+            setModerationStatus(errorMessages[message]);
+          }
+        });
+      }
+      setModalVisible(true);
+    }
+  };
+
+  useEffect(() => {
+    handleModeration();
+  }, []);
+
+  const closeModal = () => {
+    setModalVisible(false);
+  };
+
+  return (
+    <div>
+      <MainPage />
+        <MyModal visible={modalVisible} setVisisble={setModalVisible}>
+            <div className={classes['modal__content']}>{moderationStatus}</div>
+            <div className={classes['modal__footer']}>
+              <div className={classes['button-container']}>
+                <button className={classes['modal__button']} onClick={closeModal}>
+                  Закрити
+                </button>
+              </div>
+            </div>
+        </MyModal>
+    </div>
+  );
+}

FrontEnd/src/components/moderation/ModerationModal.module.css

@@ -0,0 +1,52 @@
+.modal__content {
+    display: flex;
+    padding: 16px 24px;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    background: var(--main-white, #fff);
+    box-shadow: 0px 1px 0px 0px #f0f0f0 inset;
+}
+
+.modal__footer {
+    display: flex;
+    padding: 16px 24px;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    background: var(--main-white, #fff);
+    box-shadow: 0px 1px 0px 0px #f0f0f0 inset;
+}
+
+.button-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.modal__button {
+    display: flex;
+    padding: 5px 15px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 4px;
+    border: 1px solid var(--primary-green-80, #1f9a7c);
+    background: var(--main-white, #fff);
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
+
+    color: var(--primary-green-80, #1f9a7c);
+    text-align: center;
+    font-feature-settings: "calt" off;
+
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: -0.16px;
+    text-decoration: none;
+    cursor: pointer;
+}