Merge pull request #105 from intive/P2022-1714-change-issue-status

P2022 1714 change issue status

src/api/issues/mockIssuesStatusAPI.ts

@@ -0,0 +1,35 @@
+import { mockStatus } from "../../mockData/mockBoardStatus";
+import { mockIssues } from "../../mockData/mockIssues";
+
+function sleep(ms = 1000) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+const MockIssuesStatusAPI = {
+  getIssueStatusById: async function (IssueStatusId: any) {
+    await sleep();
+
+    const IssueStatusFilteredById = mockIssues.filter((el) => {
+      return el.id == IssueStatusId;
+    });
+
+    const issueString = mockStatus.data.filter((el) => {
+      return el.id == IssueStatusFilteredById[0].statusId;
+    });
+
+    return issueString[0].code;
+  },
+  getStatuses: async function () {
+    await sleep();
+
+    const issueStatusInString = mockStatus.data.map((el) => {
+      return el.code;
+    });
+
+    return [...issueStatusInString];
+  },
+};
+
+export default MockIssuesStatusAPI;

src/api/makeFetchRequest.ts

@@ -1,6 +1,6 @@
 import { TOKEN_KEY } from "src/contexts/authentication";
 
-type METHOD = "GET" | "POST" | "PUT" | "PATH" | "DELETE";
+type METHOD = "GET" | "POST" | "PUT" | "PATH" | "DELETE" | "PATCH";
 
 async function makeRequest(url: string, method: METHOD, body?: any) {
   const jsonBody = body ? JSON.stringify(body) : undefined;

src/mockData/mockIssues.tsx

@@ -1,3 +1,14 @@
+export interface IssueType {
+  alias: string;
+  name: string;
+  description: string;
+  projectId: number;
+  boardId: number;
+  statusId: number;
+  id: number;
+  isActive: boolean;
+}
+
 export const mockIssues = [
   {
     alias: "mock issue 1",

src/views/IssueDetails/IssueDetails.tsx

@@ -16,6 +16,10 @@ import {
   TextOutlined,
 } from "./IssueDetails.style";
 import { useParams } from "react-router-dom";
+
+import makeRequest from "../../api/makeFetchRequest";
+
+import MockIssuesStatusAPI from "../../api/issues/mockIssuesStatusAPI";
 import { API_ISSUE } from "../../api/contsans";
 
 let FetchDataAPI: any;
@@ -24,7 +28,6 @@ async function importApiModule() {
   if (localStorage["USE_MOCK"] === "true") {
     const module = await import("../../api/issue/mockIssueDetails");
     FetchDataAPI = module.default;
-    console.log(FetchDataAPI);
   } else {
     const module = await import("../../api/requestsApi");
     FetchDataAPI = module.default;
@@ -34,20 +37,43 @@ async function importApiModule() {
 export const IssueDetails = () => {
   const { t } = useTranslation();
 
-  const issueStatus = [t("ToDo"), t("InProgress"), t("Done")];
-  const [status, setStatus] = useState<string>(t("ToDo"));
-
-  const { issueId, projectName } = useParams();
   const [issueTitle, setIssueTitle] = useState("");
   const [issueDescription, setIssueDescription] = useState("");
   const [assigneeName, setAssigneeName] = useState("");
   const reporterName = "Joe Doe";
   const linkedIssues = "Apples & Oranges";
   const [state, setState] = useState({});
 
-  function handleSelect(e: any) {
-    setStatus(e.target.value);
-  }
+  const [currentStatus, setCurrentStatus] = useState<string>("");
+  const [statusesApi, setStatusesApi] = useState<any[]>([]);
+  const [statuses, setStatuses] = useState<string[]>([]);
+
+  const { boardId, issueId, projectName } = useParams();
+
+  const handleSelect = async (e: any) => {
+    if (localStorage["USE_MOCK"] === "false") {
+      const newStatusId = statusesApi.filter(
+        (el) => el.iStatus === e.target.value
+      );
+
+      const patchData = async () => {
+        const body = {
+          statusId: {
+            data: newStatusId[0].statusId,
+          },
+        };
+        const response = await makeRequest(
+          `https://patronageapi.herokuapp.com/api/issue/${issueId}`,
+          "PATCH",
+          body
+        );
+        const addedData = await response.json();
+        return addedData;
+      };
+      await patchData();
+    }
+    setCurrentStatus(e.target.value);
+  };
 
   const fetchIssueDetails = useCallback(async () => {
     await importApiModule();
@@ -58,7 +84,40 @@ export const IssueDetails = () => {
     });
   }, []);
 
+  const fetchStatus = async () => {
+    if (localStorage["USE_MOCK"] === "true") {
+      const issueStatus = await MockIssuesStatusAPI.getIssueStatusById(issueId);
+
+      setCurrentStatus(issueStatus);
+      const availableStatuses = await MockIssuesStatusAPI.getStatuses();
+      setStatuses(availableStatuses);
+      return;
+    }
+    await importApiModule();
+    const boardStatus = await FetchDataAPI.getBoardStatusById(boardId);
+    const statusesFromApi = boardStatus[0].map((el: any) => ({
+      statusId: el.statusId,
+      iStatus: el.status.code,
+    }));
+
+    setStatusesApi(statusesFromApi);
+
+    const statusesInString = statusesFromApi.map((el: any) => el.iStatus);
+    setStatuses(statusesInString);
+
+    const issueStatusId = await FetchDataAPI.getData(
+      `https://patronageapi.herokuapp.com/api/issue/${issueId}`
+    );
+
+    const issueStatusString = await FetchDataAPI.getData(
+      `https://patronageapi.herokuapp.com/api/status/id?id=${issueStatusId.data.statusId}`
+    );
+
+    setCurrentStatus(issueStatusString.data.code);
+  };
+
   useEffect(() => {
+    fetchStatus();
     fetchIssueDetails();
     return () => {
       setState({});
@@ -72,8 +131,8 @@ export const IssueDetails = () => {
         pageTitle={issueTitle}
         interactiveElement={
           <Select
-            options={issueStatus}
-            value={status}
+            options={statuses}
+            value={currentStatus}
             handleSelect={handleSelect}
           />
         }

src/views/Projects/Projects.tsx

@@ -76,8 +76,9 @@ export const Projects = () => {
     await importApiModule();
     await FetchDataAPI.getData(API_GET_PROJECTS_LIST).then((res: any) => {
       if (localStorage["USE_MOCK"] === "true") {
+        console.log(res.data);
         setUseMock(true);
-        setProjects(res);
+        setProjects(res.data);
       } else {
         setProjects(res.data);
       }