Add Event Project and Volunteer Management (#961)

* Add screens for adding and updating event projects

* Add delete operation for event projects and debug update

* Remove yarn.lock

* Begin testing

* Add display of tasks and functionality to add tasks

* Add modal for edit task

* Add UpdateTaskModal

* Add Delete Task Modal and volunteers display

* Add test for DeleteEventProjectModal.tsx

* Add tests for add and update event project modal

* Add screen for managing volunteers

* Add option to assign and remove volunteers

* Add tests for AddTaskModal.tsx

* Add tests for TaskListItem.tsx and DeleteTaskModal.tsx

* Complete testing for all Task Modals

* Add completed display to tasks

* Add tests for event dashboard

* Restructure files

* Add attendee management modal

* Add testing for EventAttendeeModal

* Move to 100% testing and wrapper for attendees modal

* Add basic checkIn functionality for users

* Add testing for CheckIn modals

* Introduce the tag generation into the repository

* Update linting rule and fix errors

* Remove alloted seat and alloted room

* Fix testing

* Correct some tests

* Migrate from attendees to registrants

* Migrate Event Project modals to new design

* Migrate registrants modals and checkin modals to new design with 100% test coverage

* Move task modals to new styles

* Move to 100% test coverage

.eslintignore

@@ -0,0 +1,2 @@
+# Contains the PDF file of the Tag as JSON string, thus does not need to be linted
+src/components/CheckIn/tagTemplate.ts

.eslintrc.json

@@ -27,7 +27,7 @@
   },
 
   // Specify the ESLint plugins tobe used
-  "plugins": ["react", "@typescript-eslint", "react-hooks", "jest"],
+  "plugins": ["react", "@typescript-eslint", "jest"],
   "rules": {
     "react/destructuring-assignment": ["off"],
     "@typescript-eslint/no-explicit-any": ["off"],
@@ -49,7 +49,13 @@
     "@typescript-eslint/array-type": "error",
     "@typescript-eslint/consistent-type-assertions": "error",
     "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/explicit-function-return-type": "error",
+    "@typescript-eslint/explicit-function-return-type": [
+      2,
+      {
+        "allowExpressions": true,
+        "allowTypedFunctionExpressions": true
+      }
+    ],
     "@typescript-eslint/naming-convention": [
       "error",
       // Interfaces must begin with Interface or TestInterface followed by a PascalCase name

.prettierignore

@@ -1,2 +1,4 @@
 node_modules
-.github
+.github
+# Contains the PDF file of the Tag as JSON string, thus does not need to be formatted
+src/components/CheckIn/tagTemplate.ts

package.json

@@ -1,16 +1,19 @@
 {
-  "name": "my-app",
+  "name": "talawa-admin",
   "version": "3.0.0",
   "private": true,
   "type": "module",
   "dependencies": {
     "@apollo/client": "^3.4.0-beta.19",
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/react-testing": "^4.0.0",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.8.3",
-    "@mui/material": "^5.8.3",
+    "@mui/material": "^5.13.3",
+    "@mui/x-data-grid": "^6.8.0",
+    "@mui/x-date-pickers": "^6.6.0",
+    "@pdfme/generator": "^1.2.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -33,6 +36,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "flag-icons": "^6.6.6",
     "graphql": "^15.5.1",
+    "graphql-tag": "^2.12.6",
     "i18next": "^21.8.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-http-backend": "^1.4.1",
@@ -60,7 +64,7 @@
   "scripts": {
     "serve": "react-scripts start",
     "build": "react-scripts build",
-    "test": "cross-env NODE_ENV=test node scripts/test.js --watchAll --coverage",
+    "test": "cross-env NODE_ENV=test node scripts/test.js --env=./scripts/custom-test-env.js --watchAll --coverage",
     "eject": "react-scripts eject",
     "lint:check": "eslint \"**/*.{ts,tsx}\" --max-warnings=0",
     "lint:fix": "eslint \"**/*.{ts,tsx}\" --fix",
@@ -89,6 +93,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
@@ -100,7 +105,6 @@
     "@typescript-eslint/parser": "^5.9.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "cross-env": "^7.0.3",
-    "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.4.5",

scripts/custom-test-env.js

@@ -0,0 +1,17 @@
+import Environment from 'jest-environment-jsdom';
+import { TextEncoder, TextDecoder } from 'util';
+
+/**
+ * A custom environment to set the TextEncoder and TextDecoder variables, that is required by @pdfme during testing.
+ * Providing a polyfill to the environment for the same
+ */
+export default class CustomTestEnvironment extends Environment {
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  async setup() {
+    await super.setup();
+    if (typeof this.global.TextEncoder === 'undefined') {
+      this.global.TextEncoder = TextEncoder;
+      this.global.TextDecoder = TextDecoder;
+    }
+  }
+}

src/App.tsx

@@ -19,6 +19,7 @@ import ForgotPassword from 'screens/ForgotPassword/ForgotPassword';
 import Roles from 'screens/Roles/Roles';
 import Requests from 'screens/Requests/Requests';
 import BlockUser from 'screens/BlockUser/BlockUser';
+import EventDashboard from 'screens/EventDashboard/EventDashboard';
 import MemberDetail from 'screens/MemberDetail/MemberDetail';
 import Loader from 'components/Loader/Loader';
 
@@ -104,6 +105,7 @@ function app(): JSX.Element {
         <SecuredRoute path="/roles" component={Roles} />
         <SecuredRoute path="/requests" component={Requests} />
         <SecuredRoute path="/blockuser" component={BlockUser} />
+        <SecuredRoute path="/event/:eventId" component={EventDashboard} />
         {extraRoutes}
         <Route exact path="/forgotPassword" component={ForgotPassword} />
 

src/GraphQl/Mutations/mutations.ts

@@ -456,3 +456,126 @@ export const UNLIKE_POST = gql`
     }
   }
 `;
+
+export const ADD_EVENT_PROJECT_MUTATION = gql`
+  mutation AddEventProject(
+    $title: String!
+    $description: String!
+    $eventId: ID!
+  ) {
+    createEventProject(
+      data: { title: $title, description: $description, eventId: $eventId }
+    ) {
+      _id
+    }
+  }
+`;
+
+export const UPDATE_EVENT_PROJECT_MUTATION = gql`
+  mutation UpdateEventProject($title: String, $description: String, $id: ID!) {
+    updateEventProject(
+      id: $id
+      data: { title: $title, description: $description }
+    ) {
+      _id
+    }
+  }
+`;
+
+export const DELETE_EVENT_PROJECT_MUTATION = gql`
+  mutation DeleteEventProject($id: ID!) {
+    removeEventProject(id: $id) {
+      _id
+    }
+  }
+`;
+
+export const ADD_EVENT_PROJECT_TASK_MUTATION = gql`
+  mutation AddEventTask(
+    $title: String!
+    $description: String!
+    $projectId: ID!
+    $deadline: DateTime!
+  ) {
+    createTask(
+      eventProjectId: $projectId
+      data: { title: $title, description: $description, deadline: $deadline }
+    ) {
+      _id
+    }
+  }
+`;
+
+export const UPDATE_EVENT_PROJECT_TASK_MUTATION = gql`
+  mutation UpdateEventTask(
+    $title: String!
+    $description: String!
+    $taskId: ID!
+    $deadline: DateTime!
+    $completed: Boolean!
+  ) {
+    updateTask(
+      id: $taskId
+      data: {
+        title: $title
+        description: $description
+        deadline: $deadline
+        completed: $completed
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+export const DELETE_EVENT_TASK_MUTATION = gql`
+  mutation DeleteTask($id: ID!) {
+    removeTask(id: $id) {
+      _id
+    }
+  }
+`;
+
+export const SET_TASK_VOLUNTEERS_MUTATION = gql`
+  mutation SetTaskVolunteers($id: ID!, $volunteers: [ID]!) {
+    setTaskVolunteers(id: $id, volunteers: $volunteers) {
+      _id
+    }
+  }
+`;
+
+export const ADD_EVENT_ATTENDEE = gql`
+  mutation addEventAttendee($userId: ID!, $eventId: ID!) {
+    addEventAttendee(data: { userId: $userId, eventId: $eventId }) {
+      _id
+    }
+  }
+`;
+
+export const REMOVE_EVENT_ATTENDEE = gql`
+  mutation removeEventAttendee($userId: ID!, $eventId: ID!) {
+    removeEventAttendee(data: { userId: $userId, eventId: $eventId }) {
+      _id
+    }
+  }
+`;
+
+export const MARK_CHECKIN = gql`
+  mutation checkIn(
+    $userId: ID!
+    $eventId: ID!
+    $allotedRoom: String
+    $allotedSeat: String
+  ) {
+    checkIn(
+      data: {
+        userId: $userId
+        eventId: $eventId
+        allotedRoom: $allotedRoom
+        allotedSeat: $allotedSeat
+      }
+    ) {
+      _id
+    }
+  }
+`;

src/GraphQl/Queries/Queries.ts

@@ -92,8 +92,84 @@ export const USER_LIST = gql`
   }
 `;
 
-// Query to take the Organization with data
+export const EVENT_DETAILS = gql`
+  query Event($id: ID!) {
+    event(id: $id) {
+      title
+      description
+      startDate
+      endDate
+      startTime
+      endTime
+      allDay
+      location
+      organization {
+        _id
+        members {
+          _id
+          firstName
+          lastName
+        }
+      }
+      attendees {
+        _id
+      }
+      projects {
+        _id
+        title
+        description
+        tasks {
+          _id
+          title
+          description
+          deadline
+          completed
+          volunteers {
+            _id
+            firstName
+            lastName
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const EVENT_ATTENDEES = gql`
+  query Event($id: ID!) {
+    event(id: $id) {
+      attendees {
+        _id
+        firstName
+        lastName
+      }
+    }
+  }
+`;
+
+export const EVENT_CHECKINS = gql`
+  query eventCheckIns($id: ID!) {
+    event(id: $id) {
+      _id
+      attendeesCheckInStatus {
+        _id
+        user {
+          _id
+          firstName
+          lastName
+        }
+        checkIn {
+          _id
+          time
+          allotedRoom
+          allotedSeat
+        }
+      }
+    }
+  }
+`;
 
+// Query to take the Organization with data
 export const ORGANIZATIONS_LIST = gql`
   query Organizations($id: ID!) {
     organizations(id: $id) {

src/components/CheckIn/CheckInModal.module.css

@@ -0,0 +1,43 @@
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}