Fix/contacts - Исправление раздела "Контакты"

src/app/store/index.ts

@@ -1,8 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 
 import { userModel } from 'entities/user/model';
+import { contactsModel } from 'entities/contacts/model';
 import { createRequestModel } from 'features/create-request/model/create-request';
 import { usersApi } from 'services/user-api';
+import { contactsApi } from 'services/contacts-api';
 import { tasksApi } from 'services/tasks-api';
 import { authAdminApi } from 'services/auth-admin-api';
 import { categoriesApi } from 'services/categories-api';
@@ -16,9 +18,11 @@ export const store = configureStore({
   reducer: {
     error: errorModel.reducer,
     user: userModel.reducer,
+    contacts: contactsModel.reducer,
     createRequest: createRequestModel.reducer,
     system: systemSliceReducer,
     [usersApi.reducerPath]: usersApi.reducer,
+    [contactsApi.reducerPath]: contactsApi.reducer,
     [tasksApi.reducerPath]: tasksApi.reducer,
     [userTasksApi.reducerPath]: userTasksApi.reducer,
     [authAdminApi.reducerPath]: authAdminApi.reducer,
@@ -29,6 +33,7 @@ export const store = configureStore({
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware()
       .concat(usersApi.middleware)
+      .concat(contactsApi.middleware)
       .concat(tasksApi.middleware)
       .concat(authAdminApi.middleware)
       .concat(categoriesApi.middleware)

src/entities/contacts/model/contacts.ts

@@ -0,0 +1,20 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { TContacts } from '../types';
+
+const initialState: TContacts = {
+  email: null,
+  socialNetwork: null,
+};
+
+export const contactsModel = createSlice({
+  name: 'contacts',
+  initialState,
+  reducers: {
+    setContacts: (state, { payload }: PayloadAction<TContacts | null>) => {
+      state.email = payload?.email;
+      state.socialNetwork = payload?.socialNetwork;
+    },
+  },
+});
+
+export const { setContacts } = contactsModel.actions;

src/entities/contacts/model/index.ts

@@ -0,0 +1 @@
+export * from './contacts';

src/entities/contacts/types.ts

@@ -0,0 +1,4 @@
+export type TContacts = {
+  email: string | null | undefined;
+  socialNetwork: string | null | undefined;
+};

src/pages/contacts/contacts.tsx

@@ -1,36 +1,86 @@
-import React, { ChangeEvent, SyntheticEvent } from 'react';
+import { ChangeEvent, SyntheticEvent, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { Icon } from 'shared/ui/icons';
-import { SmartHeader } from 'shared/ui/smart-header';
-
 import styles from './styles.module.css';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { SmartHeader } from '../../shared/ui/smart-header';
+import { Icon } from '../../shared/ui/icons';
 import { Button } from '../../shared/ui/button';
-import usePermission from 'shared/hooks/use-permission';
-import { UserRole, UserStatus } from 'shared/types/common.types';
+import usePermission from '../../shared/hooks/use-permission';
+import { UserRole, UserStatus } from '../../shared/types/common.types';
+import {
+  useGetContactsQuery,
+  useUpdateContactsMutation,
+} from '../../services/contacts-api';
+import { setContacts } from '../../entities/contacts/model';
+import { TContacts } from '../../entities/contacts/types';
 
 export function ContactsPage() {
-  const roleChecker = usePermission([UserStatus.VERIFIED], UserRole.ADMIN);
+  const isEditAllowed = usePermission([UserStatus.VERIFIED], UserRole.ADMIN);
 
-  const [userData, setUserData] = React.useState({
-    userEmail: 'www@yandex.ru',
-    userVKLink: 'https://vk.com/me2help',
+  const [contactsData, setContactsData] = useState<TContacts>({
+    email: null,
+    socialNetwork: null,
   });
 
-  const [enableEdit, setEnableEdit] = React.useState(false);
+  const [editingInput, setEditingInput] = useState<
+    'email' | 'socialNetwork' | null
+  >(null);
+
+  const dispatch = useAppDispatch();
+  const { email, socialNetwork } = useAppSelector((state) => state.contacts);
+  const [updateContacts, { isLoading }] = useUpdateContactsMutation();
+  const getContactsResult = useGetContactsQuery();
 
-  const onSubmit = (e: SyntheticEvent) => {
+  useEffect(() => {
+    if (getContactsResult.data) {
+      dispatch(setContacts(getContactsResult.data));
+      setContactsData({
+        email: email,
+        socialNetwork: socialNetwork,
+      });
+    }
+  }, [getContactsResult, email, socialNetwork]);
+
+  const onSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
-    setEnableEdit(false);
-    console.log(
-      `Данные email:${userData.userEmail} и  VK:${userData.userVKLink} отправлены на сервер`
-    );
+    if (isEditAllowed) {
+      try {
+        const resultAction = await updateContacts(contactsData);
+        if ('data' in resultAction) {
+          dispatch(setContacts(resultAction.data));
+        } else {
+          console.error('Ошибка при сохранении данных:', resultAction.error);
+        }
+        setEditingInput(null);
+        setContactsData({
+          email: email,
+          socialNetwork: socialNetwork,
+        });
+      } catch (error) {
+        console.error('Ошибка при сохранении данных:', error);
+      }
+    } else {
+      setEditingInput(null);
+      setContactsData({
+        email: email,
+        socialNetwork: socialNetwork,
+      });
+      console.log(
+        'Изменение контактых данных не доступно для текущего пользователя'
+      );
+    }
+  };
+
+  const emailHandler = () => {
+    setEditingInput('email');
   };
-  const handleEnableEdit = () => {
-    setEnableEdit(true);
+
+  const socialNetworkHandler = () => {
+    setEditingInput('socialNetwork');
   };
 
   const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setUserData({ ...userData, [e.target.name]: e.target.value });
+    setContactsData({ ...contactsData, [e.target.name]: e.target.value });
   };
 
   return (
@@ -39,38 +89,59 @@ export function ContactsPage() {
         text="Контакты"
         icon={<Icon color="blue" icon="ContactsIcon" size="54" />}
       />
-      <form onSubmit={onSubmit}>
+      <form className={styles.form} onSubmit={onSubmit}>
         <div className={styles.container}>
           <div className={styles.element_box}>
             <h2
               className={classNames(
                 'text',
                 'text_size_large',
                 'text_type_regular',
+                'm-0',
                 styles.title
               )}
             >
               Эл. почта
             </h2>
             <input
               type="text"
-              className={styles.input}
+              className={`${styles.input} ${
+                editingInput === 'email'
+                  ? styles.input_mode_edit
+                  : styles.input_mode_link
+              }`}
               onChange={onChange}
-              name="userEmail"
-              defaultValue={userData.userEmail}
-              readOnly={!enableEdit}
+              name="email"
+              value={contactsData.email || ''}
+              readOnly={editingInput !== 'email'}
               onClick={(e) => {
-                if (!enableEdit) {
+                if (editingInput !== 'email') {
                   e.preventDefault();
-                  window.location.href = `mailto:${userData.userEmail}`;
+                  window.location.href = `mailto:${contactsData.email}`;
                 }
               }}
             />
           </div>
-          {roleChecker && (
-            <div onClick={handleEnableEdit} className={styles.edit_box}>
+          {isEditAllowed && (
+            <div
+              onClick={emailHandler}
+              className={
+                editingInput === 'email'
+                  ? styles.edit_box_hidden
+                  : styles.edit_box
+              }
+            >
               <Icon color="blue" icon="EditIcon" />
-              <p className={styles.edit_text}>Изменить данные</p>
+              <p
+                className={classNames(
+                  'text',
+                  'text_size_small',
+                  'text_type_regular',
+                  'm-0'
+                )}
+              >
+                Изменить данные
+              </p>
             </div>
           )}
         </div>
@@ -81,38 +152,59 @@ export function ContactsPage() {
                 'text',
                 'text_size_large',
                 'text_type_regular',
+                'm-0',
                 styles.title
               )}
             >
               Страница VK
             </h2>
             <input
               type="text"
-              className={styles.input}
+              className={`${styles.input} ${
+                editingInput === 'socialNetwork'
+                  ? styles.input_mode_edit
+                  : styles.input_mode_link
+              }`}
               onChange={onChange}
-              name="userVKLink"
-              defaultValue={userData.userVKLink}
-              readOnly={!enableEdit}
+              name="socialNetwork"
+              value={contactsData.socialNetwork || ''}
+              readOnly={editingInput !== 'socialNetwork'}
               onClick={(e) => {
-                if (!enableEdit) {
+                if (editingInput !== 'socialNetwork') {
                   e.preventDefault();
-                  window.location.href = `${userData.userVKLink}`;
+                  window.location.href = `${contactsData.socialNetwork}`;
                 }
               }}
             />
           </div>
-          {roleChecker && (
-            <div onClick={handleEnableEdit} className={styles.edit_box}>
+          {isEditAllowed && (
+            <div
+              onClick={socialNetworkHandler}
+              className={
+                editingInput === 'socialNetwork'
+                  ? styles.edit_box_hidden
+                  : styles.edit_box
+              }
+            >
               <Icon color="blue" icon="EditIcon" />
-              <p className={styles.edit_text}>Изменить данные</p>
+              <p
+                className={classNames(
+                  'text',
+                  'text_size_small',
+                  'text_type_regular',
+                  'm-0'
+                )}
+              >
+                Изменить данные
+              </p>
             </div>
           )}
         </div>
-        {roleChecker && (
+        {isEditAllowed && (
           <Button
             buttonType="primary"
             label="Сохранить"
-            disabled={!enableEdit}
+            disabled={editingInput === null}
             type="submit"
           />
         )}