Merge pull request #145 from apuc/registration

Registration

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 
 import { apiRequest } from "@api/request";
 
+import { useNotification } from "@hooks/useNotification";
+
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
@@ -18,6 +20,23 @@ export const ModalRegistration = ({ active, setActive }) => {
     password: "",
   });
 
+  const validateEmail = (email) => {
+    // регулярное выражение для проверки email
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    // возвращаем true, если email проходит проверку, и false, если нет
+    return re.test(email);
+  };
+
+  const resetInputsValue = () => {
+    setInputsValue({
+      userName: "",
+      email: "",
+      password: "",
+    });
+  };
+
+  const { showNotification } = useNotification();
   const submitHandler = () => {
     apiRequest("/register/sign-up", {
       method: "POST",
@@ -26,8 +45,14 @@ export const ModalRegistration = ({ active, setActive }) => {
         email: inputsValue.email,
         password: inputsValue.password,
       },
-    }).then((data) => {
+    }).then(() => {
-      console.log(data);
+      setActive(false);
+      resetInputsValue();
+      showNotification({
+        show: true,
+        text: "Аккаунт успешно создан",
+        type: "success",
+      });
     });
   };
   return (
@@ -84,9 +109,14 @@ export const ModalRegistration = ({ active, setActive }) => {
         </div>
         <div className="button-box">
           <BaseButton
-            onClick={() => submitHandler()}
+            onClick={(e) => {
+              e.preventDefault();
+              submitHandler();
+            }}
             styles={
-              inputsValue.userName && inputsValue.email && inputsValue.password
+              inputsValue.userName &&
+              validateEmail(inputsValue.email) &&
+              inputsValue.password
                 ? "button-box__submit"
                 : "button-box__submit disable"
             }

src/components/Navigation/Navigation.jsx

@@ -73,8 +73,15 @@ export const Navigation = () => {
     if (localStorage.getItem("role_status") === "18") {
       return;
     }
+    if (Object.keys(profileInfo).length) {
+      return;
+    }
     apiRequest(`/user/me`).then((profileInfo) =>
-      dispatch(setProfileInfo(profileInfo.userCard))
+      dispatch(
+        setProfileInfo(
+          profileInfo.userCard ? profileInfo.userCard : profileInfo
+        )
+      )
     );
   }, [dispatch]);
 
@@ -93,12 +100,12 @@ export const Navigation = () => {
 
         <div className="profileHeader__personalInfo">
           <h3 className="profileHeader__personalInfoName">
-            {user === "developer" ? profileInfo?.fio : ""}
+            {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
           </h3>
           <NavLink end to={"/profile"}>
             <img
               src={
-                profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok
+                profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
               }
               className="profileHeader__personalInfoAvatar"
               alt="avatar"

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -22,6 +22,8 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
+import avatarMok from "assets/images/avatarMok.png";
+
 import { ProfileCalendarComponent } from "./ProfileCalendarComponent";
 import "./profileCalendar.scss";
 
@@ -94,12 +96,15 @@ export const ProfileCalendar = () => {
         <div className="summary__info">
           <div className="summary__person">
             <img
-              src={urlForLocal(profileInfo.photo)}
+              src={
+                profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
+              }
               className="summary__avatar"
               alt="avatar"
             />
             <p className="summary__name">
-              {profileInfo.fio}, {profileInfo.specification} разработчик
+              {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
+              {profileInfo.specification} разработчик
             </p>
           </div>
           <Link to="/report">

src/components/ProfileHeader/ProfileHeader.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { NavLink, useNavigate } from "react-router-dom";
 
-import { auth, setProfileInfo } from "@redux/outstaffingSlice";
+import { auth, getProfileInfo, setProfileInfo } from "@redux/outstaffingSlice";
 import { getRole } from "@redux/roleSlice";
 
 import { apiRequest } from "@api/request";
@@ -14,7 +14,7 @@ import "./profileHeader.scss";
 export const ProfileHeader = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
-
+  const profileInfo = useSelector(getProfileInfo);
   const userRole = useSelector(getRole);
   const [user] = useState(
     localStorage.getItem("role_status") === "18" ? "partner" : "developer"
@@ -26,8 +26,15 @@ export const ProfileHeader = () => {
     if (localStorage.getItem("role_status") === "18") {
       return;
     }
+    if (Object.keys(profileInfo).length) {
+      return;
+    }
     apiRequest(`/user/me`).then((profileInfo) => {
-      dispatch(setProfileInfo(profileInfo.userCard));
+      dispatch(
+        setProfileInfo(
+          profileInfo.userCard ? profileInfo.userCard : profileInfo
+        )
+      );
     });
   }, [dispatch]);
 

src/pages/Profile/Profile.js

@@ -103,7 +103,7 @@ export const Profile = () => {
           {user === "developer" ? (
             <span>
               <p>Добрый день,&nbsp;</p>
-              {profileInfo.fio}
+              {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
             </span>
           ) : (
             "ООО НДВ Консалтинг"
@@ -113,7 +113,7 @@ export const Profile = () => {
           <div className="summary__person">
             <img
               src={
-                profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok
+                profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
               }
               className="summary__avatar"
               alt="avatar"
@@ -121,7 +121,8 @@ export const Profile = () => {
             <p className="summary__name">
               {user === "developer" ? (
                 <span>
-                  {profileInfo.fio}, {profileInfo.specification} разработчик
+                  {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
+                  {profileInfo?.specification} разработчик
                 </span>
               ) : (
                 "ООО НДВ Консалтинг"

src/pages/Summary/Summary.js

@@ -16,6 +16,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import rightArrow from "assets/icons/arrows/arrowRight.svg";
 import arrow from "assets/icons/arrows/left-arrow.png";
 import gitImgItem from "assets/icons/gitItemImg.svg";
+import avatarMok from "assets/images/avatarMok.png";
 
 import "./summary.scss";
 
@@ -56,12 +57,17 @@ export const Summary = () => {
           <div className={openGit ? "summary__info openGit" : "summary__info"}>
             <div className="summary__person">
               <img
-                src={urlForLocal(profileInfo.photo)}
+                src={
+                  profileInfo?.photo
+                    ? urlForLocal(profileInfo.photo)
+                    : avatarMok
+                }
                 className="summary__avatar"
                 alt="avatar"
               />
               <p className="summary__name">
-                {profileInfo.fio}, {profileInfo.specification} разработчик
+                {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
+                {profileInfo.specification} разработчик
               </p>
             </div>
             {!openGit && (