From d06836d4f7fc5745e97079ea67a731317b44eba7 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Tue, 25 Feb 2020 09:52:57 +0100 Subject: [PATCH] usersModal allow to edit project members. BUG discovered: user tracking problem. Added headers to httpRequests --- Scripts/apiQueries.sh | 3 +- Scripts/response.http | 47 +++++++++++++++++++++++ client/src/components/Modal.tsx | 10 +---- client/src/components/UsersModal.tsx | 39 ++++++++++++++----- client/src/components/UsersModalEntry.tsx | 45 +++++++++++++--------- client/src/utils/http.ts | 19 +++++++-- 6 files changed, 121 insertions(+), 42 deletions(-) create mode 100644 Scripts/response.http diff --git a/Scripts/apiQueries.sh b/Scripts/apiQueries.sh index 08cee4e..b904838 100755 --- a/Scripts/apiQueries.sh +++ b/Scripts/apiQueries.sh @@ -1 +1,2 @@ -curl --insecure https://localhost:5001/api/v1/ \ No newline at end of file +curl --insecure https://localhost:5001/api/v1/ +curl --insecure https://localhost:5001/api/v1/projects/1/ | json_pp > Scripts/response.http \ No newline at end of file diff --git a/Scripts/response.http b/Scripts/response.http new file mode 100644 index 0000000..7223cd0 --- /dev/null +++ b/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" +} diff --git a/client/src/components/Modal.tsx b/client/src/components/Modal.tsx index 73595e6..b28367f 100644 --- a/client/src/components/Modal.tsx +++ b/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 = ({ handleClose, show, children }) => { return (
{children}
-
- -
); }; diff --git a/client/src/components/UsersModal.tsx b/client/src/components/UsersModal.tsx index efe671f..8a0f581 100644 --- a/client/src/components/UsersModal.tsx +++ b/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 = ({ show, handleClose, users }) => { const [filterText, setFilterText] = useState(""); const [allUsers, setAllUsers] = useState([]); - const [isChecked, setIsChecked] = useState(true); + const [members, setMembers] = useState(users); + const { id } = useParams(); + const handleChange: (e: ChangeEvent) => void = ( e: ChangeEvent ) => { setFilterText(e.target.value); }; + const handleSubmit: (event: FormEvent) => void = async ( + e: FormEvent + ) => { + e.preventDefault(); + + const response: HttpResponse = await put( + `${Constants.projectsURI}/${id}/members`, + members + ); + console.log(response); + }; + async function httpGet(): Promise { try { const response: HttpResponse = await get( @@ -70,22 +85,26 @@ export const UsersModal: FC = ({ show, handleClose, users }) => { handleChange={handleChange} /> - {/*
{allUsers}
*/} -
+ +
    {allUsers.map((u: User) => (
  • - {console.log(isChecked)} ) => { - setIsChecked(!isChecked); - }} + members={members} + setMembers={setMembers} />
    • ))}
+
+ +
); diff --git a/client/src/components/UsersModalEntry.tsx b/client/src/components/UsersModalEntry.tsx index f6821ab..9b1f0be 100644 --- a/client/src/components/UsersModalEntry.tsx +++ b/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; - onChange: (e: ChangeEvent) => void; + setMembers: React.Dispatch>; + members: User[]; user: User; } -export const UsersModalEntry: FC = ({ user, isChecked, onChange }) => { +export const UsersModalEntry: FC = ({ user, setMembers, members }) => { return (
- - - {user.fullName} - {user.fullName} + { + !members.includes(user) + ? setMembers([...members, user]) + : setMembers(members.filter(p => p !== user)); + }} /> - + + {user.fullName} + {user.fullName} + +
); }; diff --git a/client/src/utils/http.ts b/client/src/utils/http.ts index 2ba9a2d..4e44925 100644 --- a/client/src/utils/http.ts +++ b/client/src/utils/http.ts @@ -13,7 +13,7 @@ export async function http(request: RequestInfo): Promise> { export async function get( path: string, - args: RequestInit = { method: "get" } + args: RequestInit = { method: "get", headers: headers } ): Promise> { return await http(new Request(path, args)); } @@ -21,7 +21,11 @@ export async function get( export async function post( path: string, body: any, - args: RequestInit = { method: "post", body: JSON.stringify(body) } + args: RequestInit = { + method: "post", + headers: headers, + body: JSON.stringify(body) + } ): Promise> { return await http(new Request(path, args)); } @@ -29,7 +33,16 @@ export async function post( export async function put( path: string, body: any, - args: RequestInit = { method: "put", body: JSON.stringify(body) } + args: RequestInit = { + method: "put", + headers: headers, + body: JSON.stringify(body) + } ): Promise> { return await http(new Request(path, args)); } + +const headers: Headers = new Headers({ + Accept: "application/json", + "Content-Type": "application/json" +});