Merge pull request #39 from fga-eps-mds/bugfix-99-mentoria

Bugfix 99 mentoria
fga-eps-mds · Nov 21, 2020 · 7f123b7 · 7f123b7
2 parents a61ba49 + ae33cae
commit 7f123b7
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 77 deletions.
diff --git a/src/services/mentorsService.js b/src/services/mentorsService.js
@@ -18,7 +18,7 @@ const assignLearner = createAsyncThunk('mentor/assignLearner', async (values, {
     toast.success(`${response.data.learner.name} é sua nova aprendiz!`);
     return response.data;
   } catch (error) {
-    toast.dark('Nenhuma aprendiz disponivel no momento', { toastId: "customId", autoClose: false })
+    toast.dark('Nenhuma aprendiz disponível no momento. Você receberá uma assim que houver disponíveis!')
     return rejectWithValue(error.response.data.isAvailable)
   }
 });
@@ -39,6 +39,8 @@ const unassignLearner = createAsyncThunk('mentor/unassignLearner', async (learne
 const changeAvailability = createAsyncThunk('mentor/changeAvailability', async (values, { rejectWithValue }) => {
   try {
     const response = await api.patch(`${MENTOR_ENDPOINT}/availability`)
+    if (response.data) toast.success('Você optou por ficar disponível');
+    else toast.success('Você optou por ficar indisponível')
     return response.data
   } catch (error) {
     return rejectWithValue(null)

diff --git a/src/views/Dashboard/index.js b/src/views/Dashboard/index.js
@@ -190,7 +190,11 @@ function Dashboard({
             }}
         >
           <p>Agora que você terminou o tutorial, foi promovida a mentora!</p>
-          <p>Se você quiser, pode ficar disponível a uma aprendiz na página de mentoria.</p>
+          <p>Você também foi desassociada do seu/sua mentor(a), e não poderá mais solicitar mentores,
+            pois você já é uma mentora.
+          </p>
+          <p>No entanto, como mentora você pode solicitar aprendizes, e ajuda-los assim como foi ajudada,
+            se você quiser, pode ficar disponível a um aprendiz na página de mentoria.</p>
         </Modal>
       </div>
   );

diff --git a/src/views/Mentorship/components/Learner/index.js b/src/views/Mentorship/components/Learner/index.js
@@ -1,14 +1,15 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { loading, fetchingMentor, selectMentor, selectMentorRequest }  from '../../../../slices/learnerSlice';
-import { assignMentor, cancelMentorRequest, unassignMentor, getMentor  } from '../../../../services/learnersService';
+import { loading, fetchingMentor, selectMentor, selectMentorRequest } from '../../../../slices/learnerSlice';
+import { assignMentor, cancelMentorRequest, unassignMentor, getMentor } from '../../../../services/learnersService';
 import Card from '../../../../components/Card';
 import Button from '../../../../components/Button';
 import Modal from '../../../../components/Modal';
 import Loader from '../../../../components/Loader';
 import { toggleModalVisible, toggleChatOpen } from '../../../../slices/modalSlice';
 import MotionDiv from '../../../../UI/animation/MotionDiv';
+import './style.scss'
 
 /* eslint-disable no-shadow */
 function Learner({ loading, fetchingMentor, mentor, getMentor, assignMentor, unassignMentor, mentorRequest, cancelMentorRequest, toggleModalVisible, toggleChatOpen }) {
@@ -23,51 +24,57 @@ function Learner({ loading, fetchingMentor, mentor, getMentor, assignMentor, una
 
   return (
     <div className="learner">
-      <MotionDiv className="learner__content">
-        {mentor ? (
+      {mentor && <div className="mentor__header">
+        <span className="mentor__header-title">Clique em seu mentor para conversar</span>
+      </div>}
+      {mentor ? (
         <>
-          {fetchingMentor && <Loader big />}
-          <Card
-            title= {mentor.gender === 'Female' ? 'Sua Mentora' : 'Seu Mentor'}
-            icon
-            mainContent={`${mentor?.name} ${mentor?.lastname}`}
-            secondaryContent={mentor?.email}
-            selectCard={() => {
-              toggleChatOpen(true)
-            }}
-            deleteActionMessage='Desvincular'
-            deleteAction={() => {
-              toggleModalVisible()
-            }}
-          />
+          <MotionDiv className="learner__content">
+            {fetchingMentor && <Loader big />}
+            <Card
+              title={mentor.gender === 'Female' ? 'Sua Mentora' : 'Seu Mentor'}
+              icon
+              mainContent={`${mentor?.name} ${mentor?.lastname}`}
+              secondaryContent={mentor?.email}
+              selectCard={() => {
+                toggleChatOpen(true)
+              }}
+              deleteActionMessage='Desvincular'
+              deleteAction={() => {
+                toggleModalVisible()
+              }}
+            />
+            </MotionDiv>
+            <Modal
+              title={`Desvincular ${mentor.name}`}
+              confirmMessage='desvincular'
+              closeMessage='cancelar'
+              onClose={() => toggleModalVisible()}
+              onConfirm={() => unassign()}
+            >
+              <p>Que pena que essa relação não deu certo.</p>
+              <p>Ao se desvincular de um monitor não podemos garantir que haverá outro monitor disponível.</p>
+              <p>Você tem certeza que deseja fazer isso?</p>
+            </Modal>
+
         </>
-        ) : (
+      ) : (
           <>
-            {fetchingMentor && <Loader big />}
-            {!fetchingMentor && <h4>Você não está vinculada a nenhum mentor no momento.</h4>}
-            {mentorRequest && <p>Você será vinculada a um de nossos mentores assim que houver algum disponível.</p>}
-            {mentorRequest ?
-              <Button onClick={() => cancelMentorRequest()} shadow error>Cancelar solicitação</Button>
-              :
-              <Button onClick={() => assignMentor()} shadow disabled={mentorRequest}>
-                Solicitar mentoria
-              </Button>
-            }
-            {loading && <Loader>Procurando mentor</Loader>}
+            <MotionDiv className='noMentorContent'>
+              {fetchingMentor && <Loader big />}
+              {!fetchingMentor && <p>Você não está vinculada a nenhum(a) mentor(a) no momento.</p>}
+              {mentorRequest && <p>Será designado a você um(a) mentor(a) assim que disponível.</p>}
+              {mentorRequest ?
+                <Button onClick={() => cancelMentorRequest()} shadow error>Cancelar solicitação</Button>
+                :
+                <Button onClick={() => assignMentor()} shadow disabled={mentorRequest}>
+                  Solicitar mentor
+                </Button>
+              }
+              {loading && <Loader>Procurando mentor</Loader>}
+            </MotionDiv>
           </>
         )}
-      </MotionDiv>
-      <Modal
-        title={`Desvincular ${mentor?.name}`}
-        confirmMessage='desvincular'
-        closeMessage='cancelar'
-        onClose={() => toggleModalVisible()}
-        onConfirm={() => unassign()}
-      >
-        <p>Que pena que essa relação não deu certo.</p>
-        <p>Ao se desvincular de um monitor não podemos garantir que haverá outro monitor disponível.</p>
-        <p>Você tem certeza que deseja fazer isso?</p>
-      </Modal>
     </div>
   );
 }

diff --git a/src/views/Mentorship/components/Learner/style.scss b/src/views/Mentorship/components/Learner/style.scss
@@ -0,0 +1,65 @@
+.learner {
+  width: 100%;
+  font-family: Overpass, sans-serif;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    color: var(--text-color);
+    border-bottom: 1px solid var(--border-color);
+
+    &-title {
+      font-weight: 500;
+      font-size: 1.25rem;
+    }
+  }
+
+  .noMentorContent{
+    left: 0;
+    position: relative;
+  }
+
+  &__content {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+
+    .custom-card {
+      flex-basis: 30%;
+
+      @media(max-width: 600px) {
+        flex-basis: 100%;
+      }
+    }
+
+    h3 {
+      color: var(--text-color);
+      font-weight: 600;
+    }
+  }
+
+  &__action {
+    display:  flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 1rem 0;
+    margin: 0 auto;
+    text-align: center;
+
+    @media(max-width: 600px) {
+      width: 100%;
+    }
+
+    button {
+      width: 15rem;
+      margin-bottom: 1.5rem;
+    }
+
+    p {
+      font-weight: 600;
+    }
+  }
+}
diff --git a/src/views/Mentorship/components/Mentor/index.js b/src/views/Mentorship/components/Mentor/index.js
@@ -28,10 +28,10 @@ import MotionDiv from '../../../../UI/animation/MotionDiv';
 /* eslint-disable no-shadow */
 function Mentor({
   getLearners,
-  assignLearner,
   unassignLearner,
   isAvailable,
   changeAvailability,
+  assignLearner,
   removeLearner,
   learnersList,
   loading,
@@ -58,40 +58,32 @@ function Mentor({
       {currentUser.isValidated ? (
         <>
           <div className="mentor__header">
-            <span className="mentor__header-title">Clique em uma aprendiz para conversar</span>
-            <Button
-              shadow
-              small
-              error={isAvailable}
-              success={!isAvailable}
-              onClick={() => changeAvailability()}
-            >
-              {isAvailable ? 'Ficar indisponível' : 'Aceitar novas aprendizes'}
-            </Button>
-
+            <span className="mentor__header-title">Clique em um aprendiz para conversar</span>
           </div>
           <MotionDiv className="mentor__content">
             {learnersList.length ? (
               <>
                 {fetchingLearners && <Loader big />}
                 {learnersList.map((learner) => (
-                  <Card
-                    key={learner._id}
-                    title={`${learner.name} ${learner.lastname}`}
-                    icon
-                    mainContent={learner.email}
-                    selectCard={() => {
-                      setCurrentChat(learner)
-                      toggleChatOpen(true)
-                    }}
-                    deleteActionMessage="Desvincular"
-                    deleteAction={() => {
-                      setLearnerToRemoval(learner);
-                      toggleModalVisible();
-                    }}
-                    defaultChecked
-                    secondaryContent={`Módulos concluídos: ${learner.completedModules.length}`}
-                  />
+                  <>
+                    <Card
+                      key={learner._id}
+                      title={`${learner.name} ${learner.lastname}`}
+                      icon
+                      mainContent={learner.email}
+                      selectCard={() => {
+                        setCurrentChat(learner)
+                        toggleChatOpen(true)
+                      }}
+                      deleteActionMessage="Desvincular"
+                      deleteAction={() => {
+                        setLearnerToRemoval(learner);
+                        toggleModalVisible();
+                      }}
+                      defaultChecked
+                      secondaryContent={`Módulos concluídos: ${learner.completedModules.length}`}
+                    />
+                  </>
                 ))}
               </>
             ) : (
@@ -117,8 +109,17 @@ function Mentor({
           </Modal>
 
           <div className="mentor__action">
-            <Button shadow onClick={assignLearner}>
-              Solicitar aprendiz
+            <Button
+              shadow
+              small
+              error={isAvailable}
+              success={!isAvailable}
+              onClick={() => {
+                if (isAvailable) changeAvailability();
+                else assignLearner();
+              }}
+            >
+              {isAvailable ? 'Ficar indisponível' : 'Aceitar novos aprendizes'}
             </Button>
             {loading && <Loader> Procurando aprendiz </Loader>}
           </div>
@@ -128,8 +129,8 @@ function Mentor({
         {currentUser.gender === 'Female' ? 'Você ainda não foi validada como monitora. ' : 'Você ainda não foi validado como monitor. '}
         Faça a sua <Link to='/avaliacao'>avaliação</Link> e
         tenha acesso a todas as funcionalidades de mentoria.
-        </span>
-      )}
+          </span>
+        )}
     </div>
   );
 }