Merge pull request #49 from exortme1ster/hotfix/bugs

Hotfix/bugs
nmashchenko · Jul 10, 2023 · 7f106b3 · 7f106b3
2 parents 757c7aa + 3f773b1
commit 7f106b3
Show file tree

Hide file tree

Showing 74 changed files with 1,243 additions and 776 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -10,6 +10,32 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .svgLoader {
+        animation: spin 0.5s linear infinite;
+        margin: auto;
+      }
+
+      .divLoader {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+        background: #26292B;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    </style>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -30,7 +56,13 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root">
+      <div class="divLoader">
+        <svg class="svgLoader" viewBox="0 0 100 100" width="10em" height="10em">
+          <path stroke="none" d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#46A11B" transform="rotate(179.719 50 51)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 51;360 50 51" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></path>
+        </svg>
+      </div>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/client/src/api/hooks/team/useGetByTag.js b/client/src/api/hooks/team/useGetByTag.js
@@ -15,9 +15,9 @@ export const useGetByTag = () => {
     mutationKey: 'getTeamByTag',
     onSuccess: async (response) => {
       if (response?.data) {
-        errorToaster('TAG is already taken by another team, please change it!')
+        errorToaster('TAG is already taken by another team, please change it!', 'top-center')
       } else {
-        successToaster('Tag is available!')
+        successToaster('Tag is available!', 'top-center')
       }
     },
   })

diff --git a/client/src/api/hooks/team/useInviteUser.js b/client/src/api/hooks/team/useInviteUser.js
@@ -12,8 +12,6 @@ export const useInviteUser = () => {
   const inviteUser = async (details) => {
     const { email, teamid, from_user_id } = details
 
-    console.log(details)
-
     const response = await api.post('/teams/invite', {
       email,
       teamid: teamid,

diff --git a/client/src/api/hooks/team/useJoinTeam.js b/client/src/api/hooks/team/useJoinTeam.js
@@ -6,7 +6,7 @@ import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
 
 const { api } = http
 
-export const useJoinTeam = () => {
+export const useJoinTeam = (successHandler) => {
   const queryClient = useQueryClient()
   const navigate = useNavigate()
 
@@ -19,8 +19,12 @@ export const useJoinTeam = () => {
   return useMutation(joinTeam, {
     mutationKey: 'joinTeam',
     onSuccess: async (data) => {
-      await queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
-      await queryClient.invalidateQueries('getTeamById', { refetchInactive: true })
+      queryClient.invalidateQueries('getTeamById', { refetchInactive: true })
+      queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
+
+      if (successHandler) {
+        successHandler()
+      }
       navigate(`/team/${data._id}`)
     },
     onError: (error) => {

diff --git a/client/src/api/hooks/team/useLeaveTeam.js b/client/src/api/hooks/team/useLeaveTeam.js
@@ -19,6 +19,7 @@ export const useLeave = () => {
   return useMutation(leaveTeam, {
     mutationKey: 'leaveTeam',
     onSuccess: () => {
+      queryClient.invalidateQueries('getTeamById', { refetchInactive: true })
       queryClient.invalidateQueries('checkAuth')
       navigate(`/teams`)
     },

diff --git a/client/src/api/hooks/team/useRemoveMember.js b/client/src/api/hooks/team/useRemoveMember.js
@@ -8,7 +8,7 @@ const { api } = http
 
 // refetch data
 
-export const useRemoveMember = () => {
+export const useRemoveMember = (successHandler) => {
   const queryClient = useQueryClient()
   const removeMember = async (details) => {
     const response = await api.put(`/teams/remove-member`, details)
@@ -20,6 +20,9 @@ export const useRemoveMember = () => {
     mutationKey: 'removeMember',
     onSuccess: async () => {
       await queryClient.invalidateQueries('getTeamById') // useQuery key
+      if (successHandler) {
+        successHandler()
+      }
     },
     onError: (error) => {
       errorToaster(error)

diff --git a/client/src/api/hooks/team/useTransferLeader.js b/client/src/api/hooks/team/useTransferLeader.js
@@ -6,7 +6,7 @@ import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
 
 const { api } = http
 
-export const useTransferLeader = () => {
+export const useTransferLeader = (successHandler) => {
   const queryClient = useQueryClient()
   const transferLeader = async (details) => {
     const response = await api.put(`/teams/leader/transfer`, details)
@@ -17,6 +17,10 @@ export const useTransferLeader = () => {
   return useMutation(transferLeader, {
     mutationKey: 'transferLeader',
     onSuccess: async () => {
+      if (successHandler) {
+        successHandler()
+      }
+
       await queryClient.invalidateQueries('getTeamById')
       await queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
     },

diff --git a/client/src/api/hooks/team/useUpdateTeam.js b/client/src/api/hooks/team/useUpdateTeam.js
@@ -5,7 +5,7 @@ import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
 
 const { api } = http
 
-export const useUpdateTeam = () => {
+export const useUpdateTeam = (successHandler) => {
   const queryClient = useQueryClient()
   const updateTeam = async (details) => {
     const response = await api.put(`/teams/update-team`, details)
@@ -16,6 +16,10 @@ export const useUpdateTeam = () => {
   return useMutation(updateTeam, {
     mutationKey: 'updateTeam',
     onSuccess: () => {
+      if (successHandler) {
+        successHandler()
+      }
+
       queryClient.invalidateQueries('getTeamById')
     },
     onError: (error) => {

diff --git a/client/src/api/hooks/user/useGetUserById.js b/client/src/api/hooks/user/useGetUserById.js
@@ -2,8 +2,6 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'
 import { useNavigate } from 'react-router-dom'
 
 import http from '../../../http'
-import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
-import { successToaster } from '../../../shared/components/Toasters/Success.toaster'
 
 const { api } = http
 

diff --git a/client/src/api/hooks/user/useValidateUsername.js b/client/src/api/hooks/user/useValidateUsername.js
@@ -14,11 +14,10 @@ export const useValidateUsername = () => {
   return useMutation(validateUsername, {
     mutationKey: 'validateUsername',
     onSuccess: async (response) => {
-      console.log(response)
       if (response?.data) {
-        errorToaster('Username is already taken by another user, please change it!')
+        errorToaster('Username is already taken by another user, please change it!', 'top-center')
       } else {
-        successToaster('Username is available!')
+        successToaster('Username is available!', 'top-center')
       }
     },
   })

diff --git a/client/src/assets/Shared/Crowns/Crown.js b/client/src/assets/Shared/Crowns/Crown.js
@@ -0,0 +1,32 @@
+function Crown() {
+  return (
+    <svg
+      viewBox="-6.24 -6.24 36.48 36.48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"
+      stroke="#ffffff"
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0">
+        <path
+          transform="translate(-6.24, -6.24), scale(2.28)"
+          fill="#46A11B"
+          d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33z"
+          strokeWidth="0"
+        ></path>
+      </g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        {' '}
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M21.8382 11.1263L21.609 13.5616C21.2313 17.5742 21.0425 19.5805 19.8599 20.7902C18.6773 22 16.9048 22 13.3599 22H10.6401C7.09517 22 5.32271 22 4.14009 20.7902C2.95748 19.5805 2.76865 17.5742 2.391 13.5616L2.16181 11.1263C1.9818 9.2137 1.8918 8.25739 2.21899 7.86207C2.39598 7.64823 2.63666 7.5172 2.89399 7.4946C3.36968 7.45282 3.96708 8.1329 5.16187 9.49307C5.77977 10.1965 6.08872 10.5482 6.43337 10.6027C6.62434 10.6328 6.81892 10.6018 6.99526 10.5131C7.31351 10.3529 7.5257 9.91812 7.95007 9.04852L10.1869 4.46486C10.9888 2.82162 11.3898 2 12 2C12.6102 2 13.0112 2.82162 13.8131 4.46485L16.0499 9.04851C16.4743 9.91812 16.6865 10.3529 17.0047 10.5131C17.1811 10.6018 17.3757 10.6328 17.5666 10.6027C17.9113 10.5482 18.2202 10.1965 18.8381 9.49307C20.0329 8.1329 20.6303 7.45282 21.106 7.4946C21.3633 7.5172 21.604 7.64823 21.781 7.86207C22.1082 8.25739 22.0182 9.2137 21.8382 11.1263ZM12.9524 12.699L12.8541 12.5227C12.4741 11.841 12.2841 11.5002 12 11.5002C11.7159 11.5002 11.5259 11.841 11.1459 12.5227L11.0476 12.699C10.9397 12.8927 10.8857 12.9896 10.8015 13.0535C10.7173 13.1174 10.6125 13.1411 10.4028 13.1886L10.2119 13.2318C9.47396 13.3987 9.10501 13.4822 9.01723 13.7645C8.92945 14.0468 9.18097 14.3409 9.68403 14.9291L9.81418 15.0813C9.95713 15.2485 10.0286 15.3321 10.0608 15.4355C10.0929 15.5389 10.0821 15.6504 10.0605 15.8734L10.0408 16.0765C9.96476 16.8613 9.92674 17.2538 10.1565 17.4282C10.3864 17.6027 10.7318 17.4436 11.4227 17.1255L11.6014 17.0432C11.7978 16.9528 11.8959 16.9076 12 16.9076C12.1041 16.9076 12.2022 16.9528 12.3986 17.0432L12.5773 17.1255C13.2682 17.4436 13.6136 17.6027 13.8435 17.4282C14.0733 17.2538 14.0352 16.8613 13.9592 16.0765L13.9395 15.8734C13.9179 15.6504 13.9071 15.5389 13.9392 15.4355C13.9714 15.3321 14.0429 15.2485 14.1858 15.0813L14.316 14.9291C14.819 14.3409 15.0706 14.0468 14.9828 13.7645C14.895 13.4822 14.526 13.3987 13.7881 13.2318L13.5972 13.1886C13.3875 13.1411 13.2827 13.1174 13.1985 13.0535C13.1143 12.9896 13.0603 12.8927 12.9524 12.699Z"
+          fill="#ffffff"
+        ></path>{' '}
+      </g>
+    </svg>
+  )
+}
+
+export default Crown
diff --git a/client/src/assets/Shared/Crowns/SCrownRight.js b/client/src/assets/Shared/Crowns/SCrownRight.js
diff --git a/client/src/assets/Shared/Slider.js b/client/src/assets/Shared/Slider.js
@@ -1,21 +1,20 @@
-function SiteLogo() {
+function Slider() {
   return (
-    <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M24 30.9584C23.6548 30.9584 23.375 30.6786 23.375 30.3334L23.375 18.6667C23.375 18.3215 23.6548 18.0417 24 18.0417C24.3452 18.0417 24.625 18.3215 24.625 18.6667L24.625 30.3334C24.625 30.6786 24.3452 30.9584 24 30.9584Z"
+        d="M10 16.4584C9.65482 16.4584 9.375 16.1786 9.375 15.8334L9.375 4.16671C9.375 3.82153 9.65482 3.54171 10 3.54171C10.3452 3.54171 10.625 3.82153 10.625 4.16671L10.625 15.8334C10.625 16.1786 10.3452 16.4584 10 16.4584Z"
         fill="white"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.7248 24.9419C17.4807 24.6979 17.4807 24.3021 17.7248 24.0581L23.5581 18.2247C23.8022 17.9806 24.1979 17.9806 24.442 18.2247L30.2754 24.0581C30.5194 24.3021 30.5194 24.6979 30.2754 24.9419C30.0313 25.186 29.6356 25.186 29.3915 24.9419L24.0001 19.5505L18.6087 24.9419C18.3646 25.186 17.9689 25.186 17.7248 24.9419Z"
+        d="M3.72481 10.4419C3.48073 10.1979 3.48073 9.80214 3.72481 9.55806L9.55814 3.72472C9.80222 3.48065 10.1979 3.48065 10.442 3.72472L16.2754 9.55806C16.5194 9.80214 16.5194 10.1979 16.2754 10.4419C16.0313 10.686 15.6356 10.686 15.3915 10.4419L10.0001 5.05055L4.60869 10.4419C4.36461 10.686 3.96888 10.686 3.72481 10.4419Z"
         fill="white"
       />
-      <rect x="1" y="1.5" width="46" height="46" rx="9" stroke="#46A11B" strokeWidth="2" />
     </svg>
   )
 }
 
-export default SiteLogo
+export default Slider
diff --git a/client/src/components/CreateTeam/CreateTeam.js b/client/src/components/CreateTeam/CreateTeam.js
@@ -41,7 +41,7 @@ function CreateTeam() {
       component: (
         <AvatarForm
           text="You can upload an image to represent your team on the platform, or select one of our default options. The avatar can be changed at any time."
-          defaultAvatars={defaultTeamAvatars}
+          type="team"
         />
       ),
       name: 'Add team avatar',
@@ -85,14 +85,14 @@ function CreateTeam() {
                   navigate(`/team/${updatedTeam.data._id}`)
                 },
                 onError: (error) => {
-                  errorToaster(error)
+                  errorToaster(error, 'top-center')
                 },
               },
             )
           }
         },
         onError: (error) => {
-          errorToaster(error)
+          errorToaster(error, 'top-center')
         },
       })
     } catch (e) {

diff --git a/client/src/components/Profile/Profile.jsx b/client/src/components/Profile/Profile.jsx
@@ -10,8 +10,6 @@ import PlatformLogo from '../../assets/Platform/TeameightsLogo'
 import { useGetScreenWidth } from '../../hooks/useGetScreenWidth'
 import { usePrompt } from '../../hooks/usePrompt'
 import { editProfileValidation } from '../../schemas'
-import Loader from '../../shared/components/Loader/Loader'
-import ModalComponent from '../../shared/components/Modal/Modal'
 import { formatDateString } from '../../utils/convertStringToDate'
 import Page404Form from '../Forms/Page404Form/Page404Form'
 
@@ -119,7 +117,6 @@ const Profile = () => {
       onSubmit={handleSubmit}
     >
       {({ values, errors, dirty }) => {
-        console.log(errors)
         usePrompt('You have unsaved changes. Do you want to discard them?', dirty)
 
         return (
@@ -129,7 +126,6 @@ const Profile = () => {
                 <PlatformLogo />
               </LogoWrapper>
               <ProfileWrapper>
-                {!showingUser && <Loader paddingLeft={width > 768 ? '88px' : '0'} />}
                 <ProfileContainer>
                   <ProfileInfo
                     showingUser={showingUser}

diff --git a/client/src/components/Profile/Profile.styles.js b/client/src/components/Profile/Profile.styles.js
@@ -8,11 +8,12 @@ export const ProfileForm = styled(Form)`
   background: #26292b;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: start;
   align-items: center;
 
   @media (max-width: 768px) {
     padding-left: 0;
+    justify-content: start;
   }
 `
 
@@ -23,6 +24,12 @@ export const ProfileWrapper = styled.div`
   align-items: center;
   position: relative;
   width: 100%;
+  min-height: calc(100dvh - 135px);
+  padding-bottom: 48px;
+
+  @media (max-width: 768px) {
+    min-height: calc(100dvh - 107px);
+  }
 `
 
 export const ProfileContainer = styled.div`
@@ -38,11 +45,10 @@ export const ProfileContainer = styled.div`
   @media (max-width: 1024px) {
     flex-direction: column;
     align-items: center;
-    margin: 114px 0 24px 0;
   }
 
   @media (max-width: 768px) {
-    margin: 96px 0 24px 0;
+    margin: 0;
   }
 `
 
@@ -66,10 +72,14 @@ export const ProfileSection = styled.div`
 `
 
 export const LogoWrapper = styled.div`
-  position: absolute;
-  top: 48px;
+  height: 135px;
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  width: 100%;
+  padding-bottom: 48px;
 
   @media (max-width: 768px) {
-    top: 32px;
+    height: 107px;
   }
 `