From 13f827b853af8395172d09c1d2f75f9cd06f658b Mon Sep 17 00:00:00 2001 From: Ludwig Date: Mon, 28 Mar 2022 20:18:30 +0200 Subject: [PATCH 1/2] Creating change status methods --- src/api/issues/mockIssuesStatusAPI.ts | 45 ++++++++++++ src/api/makeFetchRequest.ts | 2 +- src/mockData/mockIssues.tsx | 11 +++ src/views/IssueDetails/IssueDetails.tsx | 94 +++++++++++++++++++++++-- src/views/Projects/Projects.tsx | 3 +- 5 files changed, 146 insertions(+), 9 deletions(-) create mode 100644 src/api/issues/mockIssuesStatusAPI.ts diff --git a/src/api/issues/mockIssuesStatusAPI.ts b/src/api/issues/mockIssuesStatusAPI.ts new file mode 100644 index 0000000..1c0922e --- /dev/null +++ b/src/api/issues/mockIssuesStatusAPI.ts @@ -0,0 +1,45 @@ +import { mockBoardStatus, mockStatus } from "../../mockData/mockBoardStatus"; +import { mockIssues } from "../../mockData/mockIssues"; + +interface DataObject { + [key: string]: any; +} + +function sleep(ms = 1000) { + return new Promise((resolve) => { + setTimeout(resolve, ms); + }); +} + +const MockIssuesStatusAPI = { + getIssueStatusById: async function (IssueStatusId: any) { + await sleep(); + console.log("Fetching board status... response.status:", 200); + console.log("Fetching status... response.status:", 200); + const boardStatus = mockBoardStatus; + const status = mockStatus; + + const IssueStatusFilteredById = mockIssues.filter((el) => { + return el.id == IssueStatusId; + }); + + const issueString = mockStatus.data.filter((el) => { + return el.id == IssueStatusFilteredById[0].statusId; + }); + console.log(issueString[0].code); + + return issueString[0].code; + }, + getStatuses: async function () { + await sleep(); + + const issueStatusInString = mockStatus.data.map((el) => { + return el.code; + }); + console.log(issueStatusInString); + + return [...issueStatusInString]; + }, +}; + +export default MockIssuesStatusAPI; diff --git a/src/api/makeFetchRequest.ts b/src/api/makeFetchRequest.ts index 4920844..b2e8480 100644 --- a/src/api/makeFetchRequest.ts +++ b/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; diff --git a/src/mockData/mockIssues.tsx b/src/mockData/mockIssues.tsx index fabb307..03d2ad9 100644 --- a/src/mockData/mockIssues.tsx +++ b/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", diff --git a/src/views/IssueDetails/IssueDetails.tsx b/src/views/IssueDetails/IssueDetails.tsx index 79fc188..4fcd705 100644 --- a/src/views/IssueDetails/IssueDetails.tsx +++ b/src/views/IssueDetails/IssueDetails.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; import Grid from "@mui/material/Grid"; @@ -15,16 +15,96 @@ import { TextNormal, TextOutlined, } from "./IssueDetails.style"; +import { useParams } from "react-router-dom"; +import makeRequest from "../../api/makeFetchRequest"; + +import MockIssuesStatusAPI from "../../api/issues/mockIssuesStatusAPI"; + +let FetchDataAPI: any; + +async function importApiModule() { + if (localStorage["USE_MOCK"] === "true") { + const module = await import("../../api/issues/mockIssuesStatusAPI"); + FetchDataAPI = module.default; + } else { + const module = await import("../../api/requestsApi"); + FetchDataAPI = module.default; + } +} export const IssueDetails = () => { const { t } = useTranslation(); - const issueStatus = [t("ToDo"), t("InProgress"), t("Done")]; - const [status, setStatus] = useState(t("ToDo")); - const handleSelect = (e: any) => { - setStatus(e.target.value); + const [currentStatus, setCurrentStatus] = useState(""); + const [statusesApi, setStatusesApi] = useState([]); + const [statuses, setStatuses] = useState([]); + + const { boardId, issueId } = useParams(); + + const handleSelect = async (e: any) => { + if (localStorage["USE_MOCK"] === "true") { + setCurrentStatus(e.target.value); + } else { + 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); + } }; + useEffect(() => { + async function fetchStatus() { + 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); + } + fetchStatus(); + }, []); + return ( { pageTitle='The Best Issue' interactiveElement={