Merge pull request #54 from UNIwise/MP-2460-API-Projects-Hooks-and-mocks

Mp 2460 api projects and versions hooks and mocks

dashboard/src/api/hooks/useDeleteVersion.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GetVersionsResponse } from '../../interfaces/versions';
+import client from '../client';
+import '../mocks/useDeleteVersion.mock';
+
+const deleteVersion = async (projectId?: string, version?: number) => {
+  const response = await client.delete<GetVersionsResponse>(
+    `/api/v1/projects/${projectId}/versions/${version}`,
+  );
+
+  return response.data;
+};
+
+export const useDeleteVersion = (projectId?: string, version?: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['api', 'projects', projectId, 'versions'],
+        exact: true,
+      },
+        { throwOnError: true });
+    },
+    mutationFn: () => deleteVersion(projectId, version),
+  });
+};
+
+

dashboard/src/api/hooks/useGetProject.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { Project } from '../../interfaces/projects';
+import client from '../client';
+import '../mocks/useGetProject.mock';
+
+const getProject = async (projectId?: string) => {
+  const response = await client.get<Project>(
+    `/api/v1/projects/${projectId}`,
+  );
+
+  return response.data;
+};
+
+export const useGetProject = (projectId?: string) => {
+  return useQuery({
+    queryKey: ['api', 'projects', projectId],
+    queryFn: () => getProject(projectId),
+  });
+};

dashboard/src/api/hooks/useGetProjects.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { GetProjectsResponse } from '../../interfaces/projects';
+import client from '../client';
+import '../mocks/useGetProjects.mock';
+
+const getProjects = async () => {
+  const response = await client.get<GetProjectsResponse>(
+    `/api/v1/projects`,
+  );
+
+  return response.data;
+};
+
+export const useGetProjects = () => {
+  return useQuery({
+    queryKey: ['api', 'projects'],
+    queryFn: () => getProjects(),
+  });
+};

dashboard/src/api/hooks/useGetVersions.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { GetVersionsResponse } from '../../interfaces/versions';
+import client from '../client';
+import '../mocks/useGetVersions.mock';
+
+const getVersions = async (projectId?: string) => {
+  const response = await client.get<GetVersionsResponse>(
+    `/api/v1/projects/${projectId}/versions`,
+  );
+
+  return response.data;
+};
+
+export const useGetVersions = (projectId?: string) => {
+  return useQuery({
+    queryKey: ['api', 'projects', projectId, 'versions'],
+    queryFn: () => getVersions(projectId),
+  });
+};

dashboard/src/api/hooks/usePostVersion.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GetVersionsResponse } from '../../interfaces/versions';
+import client from '../client';
+import '../mocks/useGetVersions.mock';
+
+const postVersion = async (projectId: number) => {
+  const response = await client.post<GetVersionsResponse>(
+    `/api/v1/projects/${projectId}/versions`,
+  );
+
+  return response.data;
+};
+
+export const usePostVersion = (projectId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['api', 'projects', projectId, 'versions'],
+        exact: true,
+      },
+        { throwOnError: true });
+    },
+    mutationFn: () => postVersion(projectId),
+  });
+};
+
+

dashboard/src/api/mocks/useDeleteVersion.mock.ts

@@ -0,0 +1,14 @@
+import { mock } from "../client";
+import { mockedVersionsResponse } from "./useGetVersions.mock";
+
+mock.onDelete(/^\/api\/v1\/projects\/\d+\/versions\/\d+$/).reply((req) => {
+  const versionId = parseInt(req.url!.split("/")[6]);
+
+  const versionIndex = mockedVersionsResponse.versions.findIndex(
+    (version) => version.id === versionId
+  );
+
+  mockedVersionsResponse.versions.splice(versionIndex, 1);
+
+  return [204];
+});

dashboard/src/api/mocks/useGetProject.mock.ts

@@ -0,0 +1,15 @@
+import { mock } from "../client";
+import { mockedProjectsResponse } from "./useGetProjects.mock";
+
+mock.onGet(/^\/api\/v1\/projects\/\d+$/).reply((req) => {
+  const projectId = parseInt(req.url!.split("/")[4]);
+
+  const project = mockedProjectsResponse.projects.find(
+    (project) => project.id === projectId
+  );
+
+  return [
+    200,
+    project
+  ];
+});

dashboard/src/api/mocks/projects.mock.ts → dashboard/src/api/mocks/useGetProjects.mock.ts

@@ -1,6 +1,7 @@
-import { getProjectsResponse } from "../../interfaces/projects";
+import { GetProjectsResponse } from "../../interfaces/projects";
+import { mock } from "../client";
 
-export const mockedProjectsResponse: getProjectsResponse = {
+export const mockedProjectsResponse: GetProjectsResponse = {
   projects: [
     {
       id: 1,
@@ -154,3 +155,5 @@ export const mockedProjectsResponse: getProjectsResponse = {
     },
   ],
 };
+
+mock.onGet(/^\/api\/v1\/projects$/).reply(200, mockedProjectsResponse);

dashboard/src/api/mocks/versions.mock.ts → dashboard/src/api/mocks/useGetVersions.mock.ts

@@ -1,4 +1,5 @@
 import { GetVersionsResponse } from "../../interfaces/versions";
+import { mock } from "../client";
 
 export const mockedVersionsResponse: GetVersionsResponse = {
   versions: [
@@ -129,3 +130,5 @@ export const mockedVersionsResponse: GetVersionsResponse = {
     },
   ],
 };
+
+mock.onGet(/^\/api\/v1\/projects\/\d+\/versions$/).reply(200, mockedVersionsResponse);

dashboard/src/api/mocks/usePostVersion.mock.ts

@@ -0,0 +1,18 @@
+import { Version } from "../../interfaces/versions";
+import { mock } from "../client";
+import { mockedVersionsResponse } from "./useGetVersions.mock";
+
+mock.onPost(/^\/api\/v1\/projects\/\d+\/versions$/).reply((req) => {
+  const request = JSON.parse(req.data);
+
+  const newVersion: Version = {
+    id: Math.floor(Math.random() * 1000),
+    name: request.name,
+    createdAt: new Date().toISOString(),
+  };
+
+  mockedVersionsResponse.versions.push(newVersion);
+
+  return [201, newVersion];
+});
+

dashboard/src/interfaces/projects.ts

@@ -1,4 +1,4 @@
-export interface getProjectsResponse {
+export interface GetProjectsResponse {
   projects: Project[];
 }
 

dashboard/src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 
 import { Box, CssBaseline, CssVarsProvider } from "@mui/joy";
 import { BrowserRouter } from "react-router-dom";
+import { ReactQueryClientProvider } from "./api/client";
 import "./index.css";
 import Routes from "./routes";
 
@@ -29,9 +30,11 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             gap: 1,
           }}
         >
-          <BrowserRouter>
-            <Routes />
-          </BrowserRouter>
+          <ReactQueryClientProvider>
+            <BrowserRouter>
+              <Routes />
+            </BrowserRouter>
+          </ReactQueryClientProvider>
         </Box>
       </Box>
     </CssVarsProvider>

dashboard/src/views/Projects/Versions/components/index.tsx

@@ -1,5 +1,49 @@
-const AddNewVersionModal = () => {
-  return <div>AddNewVersion</div>;
-};
+import { Delete } from "@mui/icons-material";
+import { Button, Typography } from "@mui/joy";
+import { FC } from "react";
+import { useParams } from "react-router-dom";
+import { useDeleteVersion } from "../../../../api/hooks/useDeleteVersion";
+
+
+interface VersionTableRowProps {
+  versionId: number;
+  versionName: string;
+  createdAt: string;
+}
+
+export const VersionTableRow: FC<VersionTableRowProps> = ({
+  versionId,
+  versionName,
+  createdAt,
+}) => {
+  const formatIsoDateToLocaleString = (isoDate: string) => {
+    return new Date(isoDate).toLocaleString();
+  };
+
+  const { projectId } = useParams();
+  const { mutate: deleteVersion } = useDeleteVersion(projectId, versionId);
 
-export default AddNewVersionModal;
+  const createdAtDate = formatIsoDateToLocaleString(createdAt);
+
+  return (
+    <tr>
+      <td style={{ paddingLeft: "1.5rem" }}>
+        <Typography level="body-xs">{versionName}</Typography>
+      </td>
+
+      <td style={{ paddingLeft: "0.5rem" }}>
+        <Typography level="body-xs">{createdAtDate}</Typography>
+      </td>
+
+      <td
+        style={{
+          textAlign: "end",
+          padding: "0.5rem 5rem",
+          verticalAlign: "center",
+        }}
+      >
+        <Button sx={{ mb: "0.5rem", backgroundColor: '#0078ff' }} onClick={() => deleteVersion()}>Delete <Delete /></Button>
+      </td>
+    </tr>
+  );
+};