diff --git a/src/api/issues/mockIssuesStatusAPI.ts b/src/api/issues/mockIssuesStatusAPI.ts new file mode 100644 index 0000000..c7477bd --- /dev/null +++ b/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; 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 9664253..b317fd4 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 8afb008..61dedb4 100644 --- a/src/views/IssueDetails/IssueDetails.tsx +++ b/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,10 +37,6 @@ async function importApiModule() { export const IssueDetails = () => { const { t } = useTranslation(); - const issueStatus = [t("ToDo"), t("InProgress"), t("Done")]; - const [status, setStatus] = useState(t("ToDo")); - - const { issueId, projectName } = useParams(); const [issueTitle, setIssueTitle] = useState(""); const [issueDescription, setIssueDescription] = useState(""); const [assigneeName, setAssigneeName] = useState(""); @@ -45,9 +44,36 @@ export const IssueDetails = () => { const linkedIssues = "Apples & Oranges"; const [state, setState] = useState({}); - function handleSelect(e: any) { - setStatus(e.target.value); - } + const [currentStatus, setCurrentStatus] = useState(""); + const [statusesApi, setStatusesApi] = useState([]); + const [statuses, setStatuses] = useState([]); + + 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={