Hotfix/bug fixes

.github/workflows/github-actions-demo.yml

@@ -29,6 +29,7 @@ jobs:
           echo AWS_ACCESS_KEY=${{ secrets.AWS_ACCESS_KEY }} >> .dev.env
           echo AWS_SECRET_ACCESS_KEY=${{ secrets.AWS_SECRET_ACCESS_KEY }} >> .dev.env
           echo AWS_S3_REGION=${{ secrets.AWS_S3_REGION }} >> .dev.env
+          echo AWS_S3_BUCKET=${{ secrets.AWS_S3_BUCKET }} >> .dev.env
           cat .dev.env
       - name: 🎧 Install modules
         working-directory: ./server

client/package.json

@@ -20,6 +20,7 @@
     "country-code-lookup": "^0.0.20",
     "dotenv": "^16.0.1",
     "formik": "^2.2.9",
+    "formik-mui": "^5.0.0-alpha.0",
     "framer-motion": "^10.12.10",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
@@ -33,6 +34,7 @@
     "react-hot-toast": "^2.4.1",
     "react-loader-spinner": "^5.3.4",
     "react-loading-skeleton": "^3.1.0",
+    "react-particles": "^2.10.1",
     "react-query": "^3.39.2",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
@@ -43,6 +45,7 @@
     "redux": "^4.2.0",
     "socket.io-client": "^4.6.1",
     "styled-components": "^5.3.5",
+    "tsparticles": "^2.10.1",
     "uuidv4": "^5.0.1",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"

client/src/api/hooks/auth/useLogoutUser.js

@@ -3,7 +3,9 @@ import { useDispatch } from 'react-redux'
 
 import http from '../../../http'
 import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+import { infoToaster } from '../../../shared/components/Toasters/Info.toaster'
 import { userAuth } from '../../../store/reducers/UserAuth'
+import { socket } from '../../sockets/notifications.socket'
 
 const { api } = http
 
@@ -22,6 +24,10 @@ export const useLogoutUser = () => {
       localStorage.removeItem('token')
       dispatch(userAuth.actions.authUserLogout())
 
+      socket.disconnect()
+      socket.offAnyOutgoing()
+      socket.offAny()
+
       // remove user data
       queryClient.setQueryData('checkAuth', () => {
         return null
@@ -30,6 +36,8 @@ export const useLogoutUser = () => {
       queryClient.setQueryData('getTeamById', () => {
         return null
       })
+
+      infoToaster('Successful logout. See you soon!', 'top-center', 2500)
     },
     onError: (error) => {
       // set error message

client/src/components/CreateTeam/CreateTeam.js

@@ -21,12 +21,7 @@ import InviteMembersForm from '../RegistrationPipeline/components/RegistrationFo
 function CreateTeam() {
   const { mutate: updateAvatar, isLoading: isAvatarUpdating } = useUpdateAvatar('teams')
 
-  const {
-    mutate: createTeam,
-    isLoading: isCreatingTeam,
-    isError: isCreatingTeamError,
-    error,
-  } = useCreateTeam()
+  const { mutate: createTeam, isLoading: isCreatingTeam } = useCreateTeam()
 
   const { data: user, isLoading: isUserLoading } = useCheckAuth()
 
@@ -77,36 +72,43 @@ function CreateTeam() {
       members: membersModified.members,
     }
 
-    createTeam(teamData, {
-      onSuccess: (data) => {
-        if (formData.file) {
-          updateAvatar(
-            { teamID: data._id, image: formData.file.split(',')[1] },
-            {
-              onSuccess: (updatedTeam) => {
-                dispatch(setIsFinishRegistrationStarted(false))
-                dispatch(setStep(1))
-                navigate(`/team/${updatedTeam.data._id}`)
+    try {
+      createTeam(teamData, {
+        onSuccess: (data) => {
+          if (formData.file) {
+            updateAvatar(
+              { teamID: data._id, image: formData.file.split(',')[1] },
+              {
+                onSuccess: (updatedTeam) => {
+                  dispatch(setIsFinishRegistrationStarted(false))
+                  dispatch(setStep(1))
+                  navigate(`/team/${updatedTeam.data._id}`)
+                },
+                onError: (error) => {
+                  errorToaster(error)
+                },
               },
-            },
-          )
-        }
-      },
-    })
-  }
-
-  if (isCreatingTeamError && !isCreatingTeam) {
-    errorToaster(error)
+            )
+          }
+        },
+        onError: (error) => {
+          errorToaster(error)
+        },
+      })
+    } catch (e) {
+      /* empty */
+    }
   }
 
   return (
     <>
-      {(isUserLoading || isCreatingTeam || isAvatarUpdating) && <Loader />}
+      {isUserLoading && <Loader />}
       <MultiStepRegistration
         steps={steps}
         validationSchema={createTeamValidation}
         initialValues={initialValues}
         submitForm={submitForm}
+        isFinishingRegistration={isCreatingTeam || isAvatarUpdating}
       />
     </>
   )

client/src/components/Profile/components/ProfileInfo/ProfileInfo.styles.js

@@ -15,6 +15,7 @@ export const AvatarWrapper = styled.div`
 export const AvatarImg = styled.img`
   display: block;
   border-radius: 50%;
+  object-fit: cover;
   width: 100px;
   height: 100px;
   user-select: none;

client/src/components/Profile/components/ResumeInfo/EditingComponents/EditingComponentProfile.jsx

@@ -32,19 +32,12 @@ function EditingComponentProfile() {
       </ResumePartBox>
       {isActive === 'general' && (
         <>
-          <CustomInput
-            label="Full name"
-            name="fullName"
-            type="text"
-            placeholder="Full name"
-            value={values.fullName}
-          />
+          <CustomInput label="Full name" name="fullName" type="text" placeholder="Full name" />
           <CustomSelectAutocomplete
             label="Сountry"
             name="country"
             options={countries}
             placeholder="Select country"
-            value={values.country}
           />
           <CustomInput
             shouldFormatDate={true}
@@ -62,14 +55,12 @@ function EditingComponentProfile() {
             name="concentration"
             options={concentrationOptions}
             placeholder="Select country"
-            value={values.concentration}
           />
           <CustomSelectAutocomplete
             label="Experience"
             name="experience"
             options={userExperienceOptions}
             placeholder="Select experience"
-            value={values.experience}
           />
         </>
       )}

client/src/components/Profile/components/ResumeInfo/EducationWork/EducationWork.jsx

@@ -27,7 +27,9 @@ const EducationWork = ({ showingUser, setIsEditing, userStatus }) => {
               </Text>
               <Text fontSize="14px" fontWeight="400" color="#8F9094">
                 {university?.addmissionDate?.split('-')[0]} -{' '}
-                {university?.graduationDate?.split('-')[0]}
+                {university?.addmissionDate && !university?.graduationDate
+                  ? 'Present'
+                  : university?.graduationDate?.split('-')[0]}
               </Text>
             </FlexWrapper>
           ))
@@ -55,7 +57,8 @@ const EducationWork = ({ showingUser, setIsEditing, userStatus }) => {
                 {job.title} - {job.company}
               </Text>
               <Text fontSize="14px" fontWeight="400" color="#8F9094">
-                {job.startDate.split('-')[0]} - {job.endDate.split('-')[0]}
+                {job?.startDate?.split('-')[0]} -{' '}
+                {job?.startDate && !job?.endDate ? 'Present' : job?.endDate?.split('-')[0]}
               </Text>
             </FlexWrapper>
           ))

client/src/components/RegistrationPipeline/components/InitialPart/InitialPart.jsx

@@ -19,6 +19,7 @@ import {
   MiddleTextContainer,
   TopText,
 } from './InitialPart.styles'
+import { ParticlesContainer } from './ParticlesContainer'
 
 function InitialPart() {
   const dispatch = useDispatch()
@@ -44,16 +45,11 @@ function InitialPart() {
     <>
       <Container>
         <CardContainer>
-          <div>
-            <TopText>Welcome to the family ❤️</TopText>
-          </div>
           <MiddleTextContainer>
-            <TopText fontWeight="400" fontSize="17px" margin="45px 0 0 0">
-              Please, fill the form to complete the registration.
-            </TopText>
-            <TopText fontWeight="400" fontSize="17px" margin="33px 0 0 0">
-              It will take approximately 5 minutes but will help us better understand your skills
-              and what are you looking for here.
+            <TopText margin="0 0 8px 0">Welcome to our family ❤️</TopText>
+            <TopText fontWeight="400" fontSize="17px">
+              Please fill out the registration form so we can learn more about your skills and what
+              you're looking for here. It'll only take about 5 minutes.
             </TopText>
           </MiddleTextContainer>
           <ContinueButton
@@ -67,6 +63,7 @@ function InitialPart() {
           </ContinueButton>
         </CardContainer>
       </Container>
+      <ParticlesContainer />
     </>
   )
 }

client/src/components/RegistrationPipeline/components/InitialPart/InitialPart.styles.js

@@ -7,50 +7,45 @@ export const CardContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 770px;
-  height: 470px;
+  max-width: 470px;
+  width: 100%;
+  min-height: 350px;
   background: ${BLACK.cardContainer};
-  border-radius: 25px;
-  margin-bottom: 78px;
-  box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.1);
+  border-radius: 15px;
+  padding: 32px;
+  gap: 24px;
 `
 
 export const Container = styled.div`
   display: flex;
-  flex-direction: row;
-  gap: 50px;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  min-height: 100dvh;
   width: 100%;
-  background: ${BLACK.background};
+  /* background: ${BLACK.background}; */
+  padding: 20px;
 `
 
 export const ContinueButton = styled.button`
   font-weight: 600;
   font-size: 16px;
-  margin-top: 80px;
   border: none;
-  width: 271px;
-  height: 50px;
+  width: 100%;
+  height: 40px;
+  padding: 0px 16px;
   color: ${WHITE.main};
-  background: ${GREEN.button};
-  border-radius: 5px;
+  background: #46a11b;
+  border-radius: 10px;
 
   &:hover {
     cursor: pointer;
-    transition: 0.3s ease-in-out;
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
   }
 `
 
 export const MiddleTextContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: 550px;
   width: 100%;
 `
 

client/src/components/RegistrationPipeline/components/InitialPart/ParticlesContainer.jsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useMemo } from 'react'
+import { Particles } from 'react-particles'
+import { loadFull } from 'tsparticles'
+
+export function ParticlesContainer() {
+  const particlesInit = useCallback(async (engine) => {
+    console.log(engine)
+    // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+    // starting from v2 you can add only the features you need reducing the bundle size
+    await loadFull(engine)
+  }, [])
+
+  const particlesLoaded = useCallback(async (container) => {
+    await console.log(container)
+  }, [])
+
+  // using useMemo is not mandatory, but it's recommended since this value can be memoized if static
+  const options = useMemo(() => {
+    // using an empty options object will load the default options, which are static particles with no background and 3px radius, opacity 100%, white color
+    // all options can be found here: https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html
+    return {
+      fullScreen: {
+        enable: true,
+        zIndex: -1,
+      },
+      name: 'Nyan Cat 2',
+      particles: {
+        number: {
+          value: 100,
+          density: {
+            enable: false,
+          },
+        },
+        color: {
+          value: '#ffffff',
+        },
+        shape: {
+          type: 'star',
+          options: {
+            star: {
+              sides: 5,
+            },
+          },
+        },
+        opacity: {
+          value: 0.5,
+        },
+        size: {
+          value: {
+            min: 1,
+            max: 4,
+          },
+        },
+        move: {
+          enable: true,
+          speed: 6,
+          direction: 'left',
+          straight: true,
+        },
+      },
+      interactivity: {
+        events: {
+          onClick: {
+            enable: true,
+            mode: 'repulse',
+          },
+        },
+        modes: {
+          repulse: {
+            distance: 200,
+            duration: 0.4,
+          },
+        },
+      },
+      background: {
+        color: '#26292B',
+        image: "url('https://vincentgarreau.com/particles.js/assets/img/kbLd9vb_new.gif')",
+        position: '-60% 5%',
+        repeat: 'no-repeat',
+        size: '60%',
+      },
+    }
+  }, [])
+
+  return (
+    <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={options} />
+  )
+}