fetch allUsers in ProjectController, combined in project viewmodel,fixed user model checkboxes

client/package-lock.json

@@ -1626,6 +1626,11 @@
         "@types/testing-library__dom": "*"
       }
     },
+    "@types/underscore": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@types/underscore/-/underscore-1.9.4.tgz",
+      "integrity": "sha512-CjHWEMECc2/UxOZh0kpiz3lEyX2Px3rQS9HzD20lxMvx571ivOBQKeLnqEjxUY0BMgp6WJWo/pQLRBwMW5v4WQ=="
+    },
     "@types/yargs": {
       "version": "13.0.8",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
@@ -12539,6 +12544,11 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
       "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw=="
     },
+    "underscore": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.2.tgz",
+      "integrity": "sha512-D39qtimx0c1fI3ya1Lnhk3E9nONswSKhnffBI0gME9C99fYOkNi04xs8K6pePLhvl1frbDemkaBQ5ikWllR2HQ=="
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

client/package.json

@@ -11,12 +11,14 @@
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/react-router-dom": "^5.1.3",
+    "@types/underscore": "^1.9.4",
     "history": "^4.10.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.1",
-    "typescript": "^3.7.5"
+    "typescript": "^3.7.5",
+    "underscore": "^1.9.2"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/VM/ProjectVM.ts

@@ -12,17 +12,19 @@ export default class ProjectVM {
   public value: number;
   public tickets: Ticket[];
   public users: User[];
+  public allUsers: User[];
   public ticketsTotalCount: number;
   public ticketsDone: number;
   public remainingDays: number;
   public files: AppFile[];
   public activities: Activity[];
 
-  public constructor(project: Project) {
+  public constructor(project: Project, allUsers: User[]) {
     this.id = project.id;
     this.title = project.title;
     this.description = project.description;
     this.users = project.users;
+    this.allUsers = allUsers;
     this.value = project.progression;
     this.tickets = project.tickets;
     this.ticketsTotalCount =

client/src/components/UsersModal.tsx

@@ -8,16 +8,22 @@ import { get, put } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { UsersModalEntry } from "./UsersModalEntry";
 import { useParams } from "react-router-dom";
+import _ from "underscore";
 
 interface IProps {
   show: boolean;
   handleClose: () => void;
   users: User[];
+  allUsers: User[];
 }
 
-export const UsersModal: FC<IProps> = ({ show, handleClose, users }) => {
+export const UsersModal: FC<IProps> = ({
+  show,
+  handleClose,
+  users,
+  allUsers
+}) => {
   const [filterText, setFilterText] = useState<string>("");
-  const [allUsers, setAllUsers] = useState<User[]>([]);
   const [members, setMembers] = useState<User[]>(users);
   const { id } = useParams();
 
@@ -39,29 +45,6 @@ export const UsersModal: FC<IProps> = ({ show, handleClose, users }) => {
     console.log(response);
   };
 
-  async function httpGet(): Promise<void> {
-    try {
-      const response: HttpResponse<User> = await get<User>(
-        `${Constants.usersURI}`
-      );
-      if (response.parsedBody !== undefined) {
-        setAllUsers((response.parsedBody as unknown) as User[]);
-      }
-    } catch (ex) {
-      // setHasError(true);
-      // setError(ex);
-    }
-  }
-
-  useEffect(() => {
-    // if (id !== undefined) {
-    httpGet();
-    // } else {
-    // setHasError(true);
-    // setError("Bad Request");
-    // }
-  }, []);
-
   return (
     <Modal show={show} handleClose={handleClose}>
       <div className="row valign-wrapper blue">

client/src/components/UsersModalEntry.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { User } from "../types/User";
+import _ from "underscore";
 
 interface IProps {
   setMembers: React.Dispatch<React.SetStateAction<User[]>>;
@@ -8,6 +9,10 @@ interface IProps {
 }
 
 export const UsersModalEntry: FC<IProps> = ({ user, setMembers, members }) => {
+  console.log(members);
+  const match: (id: string) => boolean = (id: string) => {
+    return Boolean(members.find(m => m.id === id));
+  };
   return (
     <div className="row">
       <label htmlFor={user.id}>
@@ -15,11 +20,11 @@ export const UsersModalEntry: FC<IProps> = ({ user, setMembers, members }) => {
           id={user.id}
           name={user.fullName}
           type="checkbox"
-          defaultChecked={members.includes(user)}
+          defaultChecked={match(user.id)}
           onChange={() => {
-            !members.includes(user)
+            !match(user.id)
               ? setMembers([...members, user])
-              : setMembers(members.filter(p => p !== user));
+              : setMembers(members.filter(p => p.id !== user.id));
           }}
         />
         <span>

client/src/controllers/ProjectController.tsx

@@ -8,15 +8,17 @@ import { HttpResponse } from "../types/HttpResponse";
 import { Preloader } from "../components/Preloader";
 import { Constants } from "../utils/Constants";
 import { get } from "../utils/http";
+import { User } from "../types/User";
 
 export const ProjectController: FC = () => {
   const [project, setProject] = useState<Project>({} as Project);
+  const [allUsers, setAllUsers] = useState<User[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
   const [error, setError] = useState("");
   const { id } = useParams();
 
-  async function httpGet(id: string): Promise<void> {
+  async function httpGetProjects(id: string): Promise<void> {
     try {
       const response: HttpResponse<Project> = await get<Project>(
         `${Constants.projectsURI}/${id}`
@@ -31,9 +33,24 @@ export const ProjectController: FC = () => {
     }
   }
 
+  async function httpGetAllUsers(): Promise<void> {
+    try {
+      const response: HttpResponse<User> = await get<User>(
+        `${Constants.usersURI}`
+      );
+      if (response.parsedBody !== undefined) {
+        setAllUsers((response.parsedBody as unknown) as User[]);
+      }
+    } catch (ex) {
+      // setHasError(true);
+      // setError(ex);
+    }
+  }
+
   useEffect(() => {
     if (id !== undefined) {
-      httpGet(id);
+      httpGetProjects(id);
+      httpGetAllUsers();
     } else {
       setHasError(true);
       setError("Bad Request");
@@ -43,6 +60,6 @@ export const ProjectController: FC = () => {
   if (hasError) {
     return <ErrorController error={error} />;
   }
-  const viewModel = new ProjectVM(project);
+  const viewModel = new ProjectVM(project, allUsers);
   return isLoading ? <Preloader /> : <ProjectPage viewModel={viewModel} />;
 };

client/src/pages/ProjectPage.tsx

@@ -16,6 +16,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
     title,
     description,
     users,
+    allUsers,
     value,
     tickets,
     ticketsDone,
@@ -43,6 +44,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           <UsersModal
             show={showModal}
             users={users}
+            allUsers={allUsers}
             handleClose={() => setShowModal(false)}
           />
         </div>