Add my tasks screen for user portal

public/locales/en.json

@@ -528,7 +528,8 @@
     "joinedOrganizations": "Joined Organizations",
     "createdOrganizations": "Created Organizations",
     "search": "Search",
-    "nothingToShow": "Nothing to show here."
+    "nothingToShow": "Nothing to show here.",
+    "selectOrganization": "Select Organization"
   },
   "userSidebar": {
     "yourOrganizations": "Your Organizations",
@@ -594,5 +595,21 @@
     "creator": "Creator",
     "alreadyRegistered": "Already registered",
     "register": "Register"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "Your assigned tasks",
+    "nothingToShow": "Nothing to show here."
+  },
+  "userTaskCard": {
+    "description": "Description",
+    "deadline": "Deadline",
+    "created": "Created",
+    "assignees": "Assignees",
+    "completed": "Completed",
+    "incomplete": "Incomplete",
+    "taskCompleted": "The task has been completed",
+    "taskNotCompleted": "The task has not been completed yet",
+    "event": "Event",
+    "organization": "Organization"
   }
 }

public/locales/fr.json

@@ -521,7 +521,8 @@
     "joinedOrganizations": "Organisations jointes",
     "createdOrganizations": "Organisations créées",
     "search": "Recherche",
-    "nothingToShow": "Rien à montrer ici."
+    "nothingToShow": "Rien à montrer ici.",
+    "selectOrganization": "Sélectionnez une organisation"
   },
   "userSidebar": {
     "yourOrganizations": "Vos organisations",
@@ -587,5 +588,21 @@
     "creator": "Créatrice",
     "alreadyRegistered": "Déjà enregistré",
     "register": "Registre"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "Vos tâches assignées",
+    "nothingToShow": "Rien à montrer ici."
+  },
+  "userTaskCard": {
+    "description": "Description",
+    "deadline": "Date limite",
+    "created": "Créé",
+    "assignees": "Destinataires",
+    "completed": "Complété",
+    "incomplete": "Incomplète",
+    "taskCompleted": "La tâche est terminée",
+    "taskNotCompleted": "La tâche n'est pas encore terminée",
+    "event": "Événement",
+    "organization": "Organisation"
   }
 }

public/locales/hi.json

@@ -522,7 +522,8 @@
     "joinedOrganizations": "संगठन शामिल हुए",
     "createdOrganizations": "संगठन बनाये गये",
     "search": "खोज",
-    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है."
+    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है.",
+    "selectOrganization": "संगठन का चयन करें"
   },
   "userSidebar": {
     "yourOrganizations": "आपके संगठन",
@@ -588,5 +589,21 @@
     "creator": "निर्माता",
     "alreadyRegistered": "पहले से ही पंजीकृत",
     "register": "पंजीकरण करवाना"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "आपके असाइन किए गए कार्य",
+    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है."
+  },
+  "userTaskCard": {
+    "description": "विवरण",
+    "deadline": "अंतिम तारीख",
+    "created": "बनाया",
+    "assignees": "असाइनी",
+    "completed": "पुरा",
+    "incomplete": "अधूरा",
+    "taskCompleted": "काम पूरा हो गया",
+    "taskNotCompleted": "कार्य अभी तक पूरा नहीं हुआ है",
+    "event": "आयोजन",
+    "organization": "संगठन"
   }
 }

public/locales/sp.json

@@ -522,7 +522,8 @@
     "joinedOrganizations": "Organizaciones unidas",
     "createdOrganizations": "Organizaciones creadas",
     "search": "Buscar",
-    "nothingToShow": "Nada que mostrar aquí."
+    "nothingToShow": "Nada que mostrar aquí.",
+    "selectOrganization": "Seleccionar organización"
   },
   "userSidebar": {
     "yourOrganizations": "Tus Organizaciones",
@@ -588,5 +589,21 @@
     "creator": "Creadora",
     "alreadyRegistered": "Ya registrado",
     "register": "Registro"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "Tus tareas asignadas",
+    "nothingToShow": "No hay nada que mostrar aquí."
+  },
+  "userTaskCard": {
+    "description": "Descripción",
+    "deadline": "Fecha límite",
+    "created": "Creado",
+    "assignees": "Cesionarias",
+    "completed": "Terminada",
+    "incomplete": "Incompleta",
+    "taskCompleted": "La tarea ha sido completada",
+    "taskNotCompleted": "La tarea aún no se ha completado",
+    "event": "Evento",
+    "organization": "Organización"
   }
 }

public/locales/zh.json

@@ -522,7 +522,8 @@
     "joinedOrganizations": "加入組織",
     "createdOrganizations": "創建的組織",
     "search": "搜索",
-    "nothingToShow": "這裡沒有什麼可展示的。"
+    "nothingToShow": "這裡沒有什麼可展示的。",
+    "selectOrganization": "選擇組織"
   },
   "userSidebar": {
     "yourOrganizations": "您的組織",
@@ -588,5 +589,21 @@
     "creator": "創作者",
     "alreadyRegistered": "已經註冊",
     "register": "登記"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "您指派的任務",
+    "nothingToShow": "這裡沒有什麼可顯示的。"
+  },
+  "userTaskCard": {
+    "description": "描述",
+    "deadline": "最後期限",
+    "created": "已創建",
+    "assignees": "受讓人",
+    "completed": "完全的",
+    "incomplete": "不完整",
+    "taskCompleted": "任務已完成",
+    "taskNotCompleted": "任務還沒完成",
+    "event": "事件",
+    "organization": "組織"
   }
 }

src/App.tsx

@@ -31,6 +31,7 @@ import People from 'screens/UserPortal/People/People';
 import Settings from 'screens/UserPortal/Settings/Settings';
 import Donate from 'screens/UserPortal/Donate/Donate';
 import Events from 'screens/UserPortal/Events/Events';
+import Tasks from 'screens/UserPortal/Tasks/Tasks';
 
 function app(): JSX.Element {
   /*const { updatePluginLinks, updateInstalled } = bindActionCreators(
@@ -125,6 +126,7 @@ function app(): JSX.Element {
         <SecuredRouteForUser path="/user/settings" component={Settings} />
         <SecuredRouteForUser path="/user/donate" component={Donate} />
         <SecuredRouteForUser path="/user/events" component={Events} />
+        <SecuredRouteForUser path="/user/tasks" component={Tasks} />
 
         <Route exact path="*" component={PageNotFound} />
       </Switch>

src/GraphQl/Queries/Queries.ts

@@ -663,3 +663,39 @@ export const ORGANIZATION_EVENTS_CONNECTION = gql`
     }
   }
 `;
+
+export const USER_TASKS_LIST = gql`
+  query User($id: ID!) {
+    user(id: $id) {
+      _id
+      assignedTasks {
+        _id
+        title
+        description
+        deadline
+        volunteers {
+          _id
+          firstName
+          lastName
+          email
+        }
+        createdAt
+        completed
+        event {
+          _id
+          title
+          organization {
+            _id
+            name
+            image
+          }
+        }
+        creator {
+          _id
+          firstName
+          lastName
+        }
+      }
+    }
+  }
+`;

src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx

@@ -27,7 +27,7 @@ let props = {
   description: 'organizationDescription',
 };
 
-describe('Testing Organization Card Component [User Portal]', () => {
+describe('Testing OrganizationCard Component [User Portal]', () => {
   test('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>

src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx

@@ -81,34 +81,49 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
             <Offcanvas.Title>Talawa</Offcanvas.Title>
           </Offcanvas.Header>
           <Offcanvas.Body>
-            <Nav className="me-auto flex-grow-1 pe-3" variant="dark">
+            <Nav className="me-auto flex-grow-1 pe-3 pt-1" variant="dark">
               <Nav.Link
                 active={props.currentPage === 'home'}
-                onClick={(): void => history.push(homeLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(homeLink)
+                }
               >
                 {t('home')}
               </Nav.Link>
               <Nav.Link
                 active={props.currentPage === 'events'}
-                onClick={(): void => history.push(eventsLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(eventsLink)
+                }
               >
                 {t('events')}
               </Nav.Link>
               <Nav.Link
                 active={props.currentPage === 'people'}
-                onClick={(): void => history.push(peopleLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(peopleLink)
+                }
               >
                 {t('people')}
               </Nav.Link>
               <Nav.Link
                 active={props.currentPage === 'chat'}
-                onClick={(): void => history.push(chatLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(chatLink)
+                }
               >
                 {t('chat')}
               </Nav.Link>
               <Nav.Link
                 active={props.currentPage === 'donate'}
-                onClick={(): void => history.push(donationLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(donationLink)
+                }
               >
                 {t('donate')}
               </Nav.Link>
@@ -167,7 +182,11 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
                       {t('settings')}
                     </Link>
                   </Dropdown.Item>
-                  <Dropdown.Item>{t('myTasks')}</Dropdown.Item>
+                  <Dropdown.Item>
+                    <Link to="/user/tasks" className={styles.link}>
+                      {t('myTasks')}
+                    </Link>
+                  </Dropdown.Item>
                   <Dropdown.Item
                     onClick={handleLogout}
                     data-testid={`logoutBtn`}

src/components/UserPortal/PeopleCard/PeopleCard.test.tsx

@@ -27,7 +27,7 @@ let props = {
   email: '[email protected]',
 };
 
-describe('Testing Organization Card Component [User Portal]', () => {
+describe('Testing PeopleCard Component [User Portal]', () => {
   test('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>

src/components/UserPortal/TaskCard/TaskCard.module.css

@@ -0,0 +1,41 @@
+.mainContainer {
+  width: 100%;
+  padding: 15px;
+  cursor: pointer;
+  border-radius: 10px;
+  /* box-shadow: 2px 2px 8px 0px #c8c8c8; */
+  overflow: hidden;
+  background-color: rgba(50, 187, 107, 0.15);
+}
+
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+}
+
+.cardDetail {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin: 5px;
+}
+
+.fillPrimary {
+  fill: var(--bs-primary) !important;
+}
+
+.badge {
+  display: flex;
+  width: fit-content;
+  background-color: var(--bs-secondary) !important;
+  justify-content: center;
+  align-items: center;
+}
+
+.fitContent {
+  width: fit-content;
+}
+
+.marginTop {
+  margin-top: 10px;
+}