From 12cd68f39624b0208dfbd815934ee49826c9c2a9 Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Tue, 6 Aug 2024 13:53:45 +0200 Subject: [PATCH 1/4] moderation modal added --- .../components/moderation/ModerationModal.jsx | 77 +++++++++++++++++++ .../moderation/ModerationModal.module.css | 74 ++++++++++++++++++ 2 files changed, 151 insertions(+) create mode 100644 FrontEnd/src/components/moderation/ModerationModal.jsx create mode 100644 FrontEnd/src/components/moderation/ModerationModal.module.css diff --git a/FrontEnd/src/components/moderation/ModerationModal.jsx b/FrontEnd/src/components/moderation/ModerationModal.jsx new file mode 100644 index 000000000..18bd43521 --- /dev/null +++ b/FrontEnd/src/components/moderation/ModerationModal.jsx @@ -0,0 +1,77 @@ +import axios from 'axios'; +import{ useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import MainPage from '../landing-page/MainPage'; +import classes from './ModerationModal.module.css'; + + +export function ModerationModal() { + const { uid, timestamp, action } = useParams(); + const [moderationStatus, setModerationStatus] = useState(''); + const [modalVisible, setModalVisible] = useState(false); + + 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.post( + `${process.env.REACT_APP_BASE_API_URL}/api/profiles/moderation/`, + { + uid: uid, + timestamp: timestamp, + action: action + } + ); + 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 ( +
+ + {modalVisible && ( +
+
+ {moderationStatus} +
+
+
+ +
+
+
+ )} + {modalVisible &&
} +
+ ); + } \ No newline at end of file diff --git a/FrontEnd/src/components/moderation/ModerationModal.module.css b/FrontEnd/src/components/moderation/ModerationModal.module.css new file mode 100644 index 000000000..54902e87b --- /dev/null +++ b/FrontEnd/src/components/moderation/ModerationModal.module.css @@ -0,0 +1,74 @@ +.modal { + position: absolute; + top: 50%; + left: 52%; + transform: translate(-50%, -50%); + width: 610px; + max-width: 90%; + border-radius: 8px; + background: var(--wf-base-white, #fff); + z-index: 999; +} + +.blur-background { + backdrop-filter: blur(3px); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 997; +} + +.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; +} \ No newline at end of file From dd80d3abf379ca8194260f767ab6967958240606 Mon Sep 17 00:00:00 2001 From: Lvyshnevska Date: Tue, 6 Aug 2024 13:54:35 +0200 Subject: [PATCH 2/4] route for moderation added --- FrontEnd/src/components/basicPage/BasicPage.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/FrontEnd/src/components/basicPage/BasicPage.jsx b/FrontEnd/src/components/basicPage/BasicPage.jsx index 9d23dceed..ccddd4481 100644 --- a/FrontEnd/src/components/basicPage/BasicPage.jsx +++ b/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={} /> + } + /> } /> )}