Refactor cases pane's component and UI
This commit is contained in:
Takeshi Kimata
@@ -0,0 +1,56 @@
|
|||||||
|
"use client";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import TestCaseTable from "./TestCaseTable";
|
||||||
|
import { fetchCases, createCase, deleteCase, deleteCases } from "./caseControl";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
projectId: string;
|
||||||
|
folderId: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function CasesPane({ projectId, folderId }: Props) {
|
||||||
|
const [cases, setCases] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchDataEffect() {
|
||||||
|
try {
|
||||||
|
const data = await fetchCases(folderId);
|
||||||
|
setCases(data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error in effect:", error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchDataEffect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCreateCase = async (folderId: string) => {
|
||||||
|
const newCase = await createCase(folderId);
|
||||||
|
const updateCases = [...cases];
|
||||||
|
updateCases.push(newCase);
|
||||||
|
setCases(updateCases);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteCase = async (caseId: number) => {
|
||||||
|
await deleteCase(caseId);
|
||||||
|
const data = await fetchCases(folderId);
|
||||||
|
setCases(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteCases = async (deleteCaseIds: string[]) => {
|
||||||
|
await deleteCases(deleteCaseIds);
|
||||||
|
const data = await fetchCases(folderId);
|
||||||
|
setCases(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TestCaseTable
|
||||||
|
projectId={projectId}
|
||||||
|
cases={cases}
|
||||||
|
onCreateCase={() => handleCreateCase(folderId)}
|
||||||
|
onDeleteCase={handleDeleteCase}
|
||||||
|
onDeleteCases={handleDeleteCases}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -44,7 +44,7 @@ type Case = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
projectId: boolean;
|
projectId: string;
|
||||||
cases: Case[];
|
cases: Case[];
|
||||||
onCreateCase: () => void;
|
onCreateCase: () => void;
|
||||||
onDeleteCase: (caseId: number) => void;
|
onDeleteCase: (caseId: number) => void;
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import Config from "@/config/config";
|
||||||
|
const apiServer = Config.apiServer;
|
||||||
|
|
||||||
|
async function fetchCases(folderId: string) {
|
||||||
|
const url = `${apiServer}/cases?folderId=${folderId}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching data:", error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createCase(folderId: string) {
|
||||||
|
const newCase = {
|
||||||
|
title: "untitled case",
|
||||||
|
state: 0,
|
||||||
|
priority: 2,
|
||||||
|
type: 0,
|
||||||
|
automationStatus: 0,
|
||||||
|
description: "",
|
||||||
|
template: 0,
|
||||||
|
preConditions: "",
|
||||||
|
expectedResults: "",
|
||||||
|
folderId: folderId,
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchOptions = {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(newCase),
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = `${apiServer}/cases`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, fetchOptions);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error creating case:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteCase(caseId: number) {
|
||||||
|
const fetchOptions = {
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = `${apiServer}/cases/${caseId}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, fetchOptions);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting case:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteCases(deleteCases: string[]) {
|
||||||
|
const fetchOptions = {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ caseIds: deleteCases }),
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = `${apiServer}/cases/bulkdelete`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, fetchOptions);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting cases:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { fetchCases, createCase, deleteCase, deleteCases };
|
||||||
@@ -1,165 +1,13 @@
|
|||||||
"use client";
|
import CasesPane from "./CasesPane";
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import Config from "@/config/config";
|
|
||||||
const apiServer = Config.apiServer;
|
|
||||||
import TestCaseTable from "./test-case-table";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* fetch folder records
|
|
||||||
*
|
|
||||||
* @param {string} url - API endpoint url
|
|
||||||
* @returns {Promise<Array>} - project record array
|
|
||||||
* @throws {Error}
|
|
||||||
*/
|
|
||||||
async function fetchCases(url) {
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching data:", error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchCreateCase(folderId: string) {
|
|
||||||
const newCase = {
|
|
||||||
title: "untitled case",
|
|
||||||
state: 0,
|
|
||||||
priority: 2,
|
|
||||||
type: 0,
|
|
||||||
automationStatus: 0,
|
|
||||||
description: "",
|
|
||||||
template: 0,
|
|
||||||
preConditions: "",
|
|
||||||
expectedResults: "",
|
|
||||||
folderId: folderId,
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchOptions = {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(newCase),
|
|
||||||
};
|
|
||||||
|
|
||||||
const url = `${apiServer}/cases`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, fetchOptions);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
||||||
}
|
|
||||||
const data = await response.json();
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error creating case:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchDeleteCase(caseId: number) {
|
|
||||||
const fetchOptions = {
|
|
||||||
method: "DELETE",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const url = `${apiServer}/cases/${caseId}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, fetchOptions);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error deleting case:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchDeleteCases(deleteCases: string[]) {
|
|
||||||
const fetchOptions = {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ caseIds: deleteCases }),
|
|
||||||
};
|
|
||||||
|
|
||||||
const url = `${apiServer}/cases/bulkdelete`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, fetchOptions);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error deleting cases:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Page({
|
export default function Page({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
params: { projectId: string; folderId: string };
|
params: { projectId: string; folderId: string };
|
||||||
}) {
|
}) {
|
||||||
const [cases, setCases] = useState([]);
|
|
||||||
const url = `${apiServer}/cases?folderId=${params.folderId}`;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchDataEffect() {
|
|
||||||
try {
|
|
||||||
const data = await fetchCases(url);
|
|
||||||
setCases(data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error in effect:", error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchDataEffect();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleCreateCase = async (folderId: string) => {
|
|
||||||
const newCase = await fetchCreateCase(folderId);
|
|
||||||
const updateCases = [...cases];
|
|
||||||
updateCases.push(newCase);
|
|
||||||
setCases(updateCases);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteCase = async (caseId: number) => {
|
|
||||||
await fetchDeleteCase(caseId);
|
|
||||||
const data = await fetchCases(url);
|
|
||||||
setCases(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteCases = async (deleteCases: string[]) => {
|
|
||||||
await fetchDeleteCases(deleteCases);
|
|
||||||
const data = await fetchCases(url);
|
|
||||||
setCases(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TestCaseTable
|
<CasesPane projectId={params.projectId} folderId={params.folderId} />
|
||||||
projectId={params.projectId}
|
|
||||||
cases={cases}
|
|
||||||
onCreateCase={() => handleCreateCase(params.folderId)}
|
|
||||||
onDeleteCase={handleDeleteCase}
|
|
||||||
onDeleteCases={handleDeleteCases}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user