#991 [admin] manage auto-approval timing for content moderation

FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { Tooltip } from 'antd';
 import useSWR from 'swr';
@@ -12,15 +12,10 @@ const AutoApproveDelay = () => {
         }
     });
     const url = `${process.env.REACT_APP_BASE_API_URL}/api/admin/automoderation/`;
-    const { data, mutate } = useSWR(url, fetcher);
     const [delay, setDelay] = useState('');
     const [error, setError] = useState(null);
-
-    useEffect(() => {
-        if (data && data.auto_moderation_hours) {
-            setDelay(data.auto_moderation_hours);
-        }
-    }, [data]);
+    const { data, mutate } = useSWR(url, fetcher,
+        { onSuccess: (data) => setDelay(data.auto_moderation_hours) });
 
     const handleInputChange = (e) => {
         const value = Number(e.target.value);
@@ -31,22 +26,33 @@ const AutoApproveDelay = () => {
         }
     };
 
+    const handleCancel = () => {
+        setDelay(data?.auto_moderation_hours);
+        setError(null);
+    };
+
     const handleSubmit = () => {
         !error && axios.put(`${process.env.REACT_APP_BASE_API_URL}/api/admin/automoderation/`, { 'auto_moderation_hours': delay })
             .then(() => { toast.success('Зміни успішно застосовано.'); mutate({ ...data, auto_moderation_hours: delay }); })
             .catch(() => toast.error('Не вдалося зберегти зміни, сталася помилка'));
     };
     return (
         <div className={css['autoapprove-section']}>
+            <h3 className={css['autoapprove-section__head']}>Налаштуйте час, після якого зміни будуть автоматично підтверджені у випадку бездіяльності модератора.</h3>
+            <label htmlFor="autoapprove" className={css['autoapprove_label']}>Час до автоматичного підтвердження <br />
+            (години)</label>
             <Tooltip
                 title={'Введіть значення 1-48'}
                 placement="top"
                 pointAtCenter={true}>
-                <input className={css['autoapprove-input']} type="number" step={1} onChange={handleInputChange} value={delay} />
+                <input id="autoapprove" className={css['autoapprove-input']} type="number" step={1} onChange={handleInputChange} value={delay} />
             </Tooltip>
             {error &&
                 <p className={css['error-message']}>{error}</p>}
-            <button className={css['save-button']} onClick={handleSubmit}>Змінити</button>
+            <div className={css['buttons-group']}>
+                <button className={`${css['button']} ${css['cancel-button']}`} onClick={handleCancel}>Скасувати</button>
+                <button className={css['button']} onClick={handleSubmit}>Змінити</button>
+            </div>
         </div>
     );
 

FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.module.css

@@ -5,26 +5,50 @@
     gap: 10px;
 }
 
+.autoapprove-section__head {
+    font-size: 14px;
+    font-weight: normal;
+    margin: 20px 0;
+}
+
+.autoapprove_label {
+    font-size: 14px;
+    margin:  20px 0;
+}
+
+.autoapprove_label::before {
+    content: "*";
+    color: #FA1B1F;
+    padding: 0 2px;
+}
+
 .autoapprove-input {
-    width: 150px;
-    height: 20px;
+    width: 258px;
+    height: 32px;
+    box-sizing: border-box;
+    padding-left: 4px;
+    font-size: 16px;
 }
-.save-button {
+
+.buttons-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 257px;
+    margin-top: 24px;
+}
+
+.button {
     display: flex;
     padding: 5px 15px;
     justify-content: center;
     align-items: center;
     gap: 10px;
-    width: 150px;
-
+    width: 124px;
     border-radius: 4px;
-    border: 1px solid #1F9A7C;
-    background: #1F9A7C;
-
+    background: #B4D27A;
     box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
-
-    /* Button Text */
-    color: #FFF;
+    color: black;
     text-align: center;
     font-feature-settings: 'calt' off;
     text-decoration: none;
@@ -37,6 +61,11 @@
     cursor: pointer;
 }
 
+.cancel-button {
+   background-color: white;
+   border: 1px solid #B4D27A;
+}
+
 .error-message {
     color: rgb(212, 21, 21);
     font-family: var(--font-main);