usersModal allow to edit project members. BUG discovered: user tracking problem. Added headers to httpRequests

Scripts/apiQueries.sh

@@ -1 +1,2 @@
 curl --insecure https://localhost:5001/api/v1/
+curl --insecure https://localhost:5001/api/v1/projects/1/ | json_pp > Scripts/response.http

Scripts/response.http

@@ -0,0 +1,47 @@
+{
+   "activities" : [],
+   "plannedEnding" : "0001-01-01T00:00:00",
+   "id" : 1,
+   "title" : "Secret Project",
+   "createdAt" : "2020-02-24T10:34:18.428046",
+   "users" : [
+      {
+         "firstName" : "Thomas",
+         "phone" : "0198237645",
+         "lastName" : "Price",
+         "created_at" : "2020-02-25T09:42:54.462374",
+         "presentation" : "New Team?!",
+         "email" : "tp@mail.com",
+         "picture" : null,
+         "activities" : [],
+         "id" : "357727fd-5262-4522-b8a3-38271d43de84",
+         "fullName" : "Thomas Price",
+         "assignments" : [
+            {
+               "project" : {
+                  "assignments" : [],
+                  "createdAt" : "2020-02-24T10:34:18.428046",
+                  "title" : "Secret Project",
+                  "id" : 1,
+                  "plannedEnding" : "2020-02-17T15:51:02.787373",
+                  "activities" : [],
+                  "description" : "Shhttt  Don't tell anyone",
+                  "status" : 1,
+                  "files" : [],
+                  "tickets" : [],
+                  "progression" : 0,
+                  "manager" : null
+               },
+               "userId" : "357727fd-5262-4522-b8a3-38271d43de84",
+               "projectId" : 1
+            }
+         ]
+      }
+   ],
+   "manager" : null,
+   "progression" : 0,
+   "tickets" : [],
+   "files" : [],
+   "status" : "ToDo",
+   "description" : "Shhttt  Don't tell anyone"
+}

client/src/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, CSSProperties } from "react";
+import React, { FC, CSSProperties } from "react";
 
 interface IProps {
   handleClose: () => void;
@@ -11,14 +11,6 @@ export const Modal: FC<IProps> = ({ handleClose, show, children }) => {
   return (
     <div className="modal" style={showHideStyle}>
       <div className="modal-content">{children}</div>
-      <div className="modal-footer">
-        <button
-          type="submit"
-          className="modal-close waves-effect waves-green btn"
-        >
-          Done
-        </button>
-      </div>
     </div>
   );
 };

client/src/components/UsersModal.tsx

@@ -1,12 +1,13 @@
-import React, { FC, useState, ChangeEvent, useEffect } from "react";
+import React, { FC, useState, ChangeEvent, useEffect, FormEvent } from "react";
 import { Modal } from "./Modal";
 import { AvatarList } from "./AvatarList";
 import { User } from "../types/User";
 import { FilterBar } from "./FilterBar";
 import { HttpResponse } from "../types/HttpResponse";
-import { get } from "../utils/http";
+import { get, put } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { UsersModalEntry } from "./UsersModalEntry";
+import { useParams } from "react-router-dom";
 
 interface IProps {
   show: boolean;
@@ -17,13 +18,27 @@ interface IProps {
 export const UsersModal: FC<IProps> = ({ show, handleClose, users }) => {
   const [filterText, setFilterText] = useState<string>("");
   const [allUsers, setAllUsers] = useState<User[]>([]);
-  const [isChecked, setIsChecked] = useState(true);
+  const [members, setMembers] = useState<User[]>(users);
+  const { id } = useParams();
+
   const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
     e: ChangeEvent<HTMLInputElement>
   ) => {
     setFilterText(e.target.value);
   };
 
+  const handleSubmit: (event: FormEvent<HTMLFormElement>) => void = async (
+    e: FormEvent
+  ) => {
+    e.preventDefault();
+
+    const response: HttpResponse<User[]> = await put<User[]>(
+      `${Constants.projectsURI}/${id}/members`,
+      members
+    );
+    console.log(response);
+  };
+
   async function httpGet(): Promise<void> {
     try {
       const response: HttpResponse<User> = await get<User>(
@@ -70,22 +85,26 @@ export const UsersModal: FC<IProps> = ({ show, handleClose, users }) => {
           handleChange={handleChange}
         />
       </div>
-      {/* <div className="code">{allUsers}</div> */}
+
-      <form>
+      <form onSubmit={handleSubmit}>
         <ul>
           {allUsers.map((u: User) => (
             <li key={u.id}>
-              {console.log(isChecked)}
               <UsersModalEntry
                 user={u}
-                isChecked={isChecked}
+                members={members}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                setMembers={setMembers}
-                  setIsChecked(!isChecked);
-                }}
               />
             </li>
           ))}
         </ul>
+        <div className="modal-footer">
+          <input
+            type="submit"
+            className="modal-close waves-effect waves-green btn"
+            value="Done"
+          />
+        </div>
       </form>
     </Modal>
   );

client/src/components/UsersModalEntry.tsx

@@ -1,31 +1,38 @@
-import React, { FC, ChangeEvent } from "react";
+import React, { FC } from "react";
 import { User } from "../types/User";
 
 interface IProps {
-  isChecked: boolean;
+  setMembers: React.Dispatch<React.SetStateAction<User[]>>;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  members: User[];
   user: User;
 }
 
-export const UsersModalEntry: FC<IProps> = ({ user, isChecked, onChange }) => {
+export const UsersModalEntry: FC<IProps> = ({ user, setMembers, members }) => {
   return (
     <div className="row">
-      <input
+      <label htmlFor={user.id}>
-        id={user.id}
+        <input
-        type="checkbox"
+          id={user.id}
-        onChange={onChange}
+          name={user.fullName}
-        checked={isChecked}
+          type="checkbox"
-      />
+          defaultChecked={members.includes(user)}
-      <span>
+          onChange={() => {
-        {user.fullName}
+            !members.includes(user)
-        <img
+              ? setMembers([...members, user])
-          className="circle"
+              : setMembers(members.filter(p => p !== user));
-          src={user.picture}
+          }}
-          width="32vh"
-          height="32vh"
-          alt={user.fullName}
         />
-      </span>
+        <span>
+          {user.fullName}
+          <img
+            className="circle"
+            src={user.picture}
+            width="32vh"
+            height="32vh"
+            alt={user.fullName}
+          />
+        </span>
+      </label>
     </div>
   );
 };

client/src/utils/http.ts

@@ -13,7 +13,7 @@ export async function http<T>(request: RequestInfo): Promise<HttpResponse<T>> {
 
 export async function get<T>(
   path: string,
-  args: RequestInit = { method: "get" }
+  args: RequestInit = { method: "get", headers: headers }
 ): Promise<HttpResponse<T>> {
   return await http<T>(new Request(path, args));
 }
@@ -21,7 +21,11 @@ export async function get<T>(
 export async function post<T>(
   path: string,
   body: any,
-  args: RequestInit = { method: "post", body: JSON.stringify(body) }
+  args: RequestInit = {
+    method: "post",
+    headers: headers,
+    body: JSON.stringify(body)
+  }
 ): Promise<HttpResponse<T>> {
   return await http<T>(new Request(path, args));
 }
@@ -29,7 +33,16 @@ export async function post<T>(
 export async function put<T>(
   path: string,
   body: any,
-  args: RequestInit = { method: "put", body: JSON.stringify(body) }
+  args: RequestInit = {
+    method: "put",
+    headers: headers,
+    body: JSON.stringify(body)
+  }
 ): Promise<HttpResponse<T>> {
   return await http<T>(new Request(path, args));
 }
+
+const headers: Headers = new Headers({
+  Accept: "application/json",
+  "Content-Type": "application/json"
+});