Merge pull request #103 from intive/P2022-1722_issue_details

integration showing issue details with API

src/api/contsans.tsx

@@ -15,3 +15,4 @@ export const API_ADD_NEW_STATUS =
   "https://patronageapi.herokuapp.com/api/status?code=";
 export const API_GET_STATUSES_LIST =
   "https://patronageapi.herokuapp.com/api/status";
+export const API_ISSUE = "https://patronageapi.herokuapp.com/api/issue/";

src/api/issue/mockIssueDetails.tsx

@@ -0,0 +1,18 @@
+import { mockIssues } from "../../mockData/mockIssues";
+
+function sleep(ms = 1000) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+const mockIssueDetails = mockIssues[0];
+
+const MockIssueDetailsAPI = {
+  getData: async function (url: string) {
+    await sleep();
+    return { data: mockIssueDetails };
+  },
+};
+
+export default MockIssueDetailsAPI;

src/mockData/mockIssues.tsx

@@ -8,6 +8,7 @@ export const mockIssues = [
     statusId: 1,
     id: 0,
     isActive: true,
+    assignUserId: "Han Solo",
   },
   {
     alias: "mock issue 2",

src/views/Board/Board.tsx

@@ -47,6 +47,7 @@ export const Board = () => {
   const [boardNumberAlert, setBoardNumberAlert] = useState(false);
   const [boardNameAlert, setBoardNameAlert] = useState(false);
   const { boardId, projectName, projectId, board } = useParams();
+  const [state, setState] = useState({});
 
   useEffect(() => {
     async function fetchStatus() {
@@ -86,6 +87,9 @@ export const Board = () => {
       setFilteredIssues(filterIssuesByStatusId());
     }
     fetchIssues();
+    return () => {
+      setState({});
+    };
   }, []);
 
   const handleAddNewColumn = (inputValue: string) => {

src/views/IssueDetails/IssueDetails.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import Grid from "@mui/material/Grid";
@@ -15,21 +15,61 @@ import {
   TextNormal,
   TextOutlined,
 } from "./IssueDetails.style";
+import { useParams } from "react-router-dom";
+import { API_ISSUE } from "../../api/contsans";
+
+let FetchDataAPI: any;
+
+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;
+  }
+}
 
 export const IssueDetails = () => {
   const { t } = useTranslation();
+
   const issueStatus = [t("ToDo"), t("InProgress"), t("Done")];
   const [status, setStatus] = useState<string>(t("ToDo"));
 
-  const handleSelect = (e: any) => {
+  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 fetchIssueDetails = useCallback(async () => {
+    await importApiModule();
+    FetchDataAPI.getData(API_ISSUE.concat(issueId!)).then((res: any) => {
+      setIssueTitle(res.data.name);
+      setIssueDescription(res.data.description);
+      setAssigneeName(res.data.assignUserId);
+    });
+  }, []);
+
+  useEffect(() => {
+    fetchIssueDetails();
+    return () => {
+      setState({});
+    };
+  }, []);
 
   return (
     <StyledPageWrapper>
       <PageHeader
         returnLink='Return to Awesome project'
-        pageTitle='The Best Issue'
+        pageTitle={issueTitle}
         interactiveElement={
           <Select
             options={issueStatus}
@@ -42,32 +82,26 @@ export const IssueDetails = () => {
         <Grid container spacing={4}>
           <Grid item xs={8}>
             <Section>
-              <IssueTitle>{t("dialogCreateProjectTitle")}</IssueTitle>
+              <IssueTitle>{projectName}</IssueTitle>
               <Box>
                 <Label>{t("labelDescription")}</Label>
-                <TextNormal>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
-                  iusto nostrum voluptatibus fugiat ducimus delectus officia
-                  aspernatur adipisci quibusdam consectetur, facere aut!
-                  Aspernatur quaerat dolorem repellat tempora possimus quas
-                  soluta!
-                </TextNormal>
+                <TextNormal>{issueDescription}</TextNormal>
               </Box>
               <Box>
                 <Label>{t("labelLinkedIssues")}</Label>
-                <TextOutlined>Apples & Oranges</TextOutlined>
+                <TextOutlined>{linkedIssues}</TextOutlined>
               </Box>
             </Section>
           </Grid>
           <Grid item xs={4}>
             <Section>
               <Box>
                 <Label>{t("labelAssignee")}</Label>
-                <TextOutlined>Han Solo</TextOutlined>
+                <TextOutlined>{assigneeName}</TextOutlined>
               </Box>
               <Box>
                 <Label>{t("labelReporter")}</Label>
-                <TextOutlined>Joe Doe</TextOutlined>
+                <TextOutlined>{reporterName}</TextOutlined>
               </Box>
             </Section>
           </Grid>