feat(frontend): alone delete (db2e1757) · Commits · Jakub Uhlárik / Pcbuilder

frontend/src/App.tsx

+2 −0

Original line number	Diff line number	Diff line
		@@ -19,6 +19,7 @@ import { MemoryParts } from './pages/Parts/MemoryParts.tsx';
		import { NotFoundPage } from './pages/NotFoundPage.tsx';
		import { Summary } from './pages/Summary/Summary.tsx';
		import { AdminPage } from './pages/AdminPage.tsx';
		import { DeletePart } from './pages/DeletePart.tsx';

		function App() {
		return (
		@@ -34,6 +35,7 @@ function App() {
		<Route path="admin" element={<AdminPage />}>
		<Route path="add/config" element={<AddConfig />} />
		<Route path="add/part" element={<AddPart />} />
		<Route path="delete/part" element={<DeletePart />} />
		</Route>
		<Route path="parts" element={<Parts />} />
		<Route path="parts/processor" element={<ProcessorParts />} />

frontend/src/components/AdminComponent/AdminComonent.tsx

+1 −1

Original line number	Diff line number	Diff line
		@@ -38,7 +38,7 @@ export function AdminComponent({ name, image }: AdminComponentInput) {
		<Button
		variant="contained"
		component={Link}
		to={`/presets`}
		to={name === 'Part' ? '/admin/delete/part' : `/presets`}
		className="manage__buttons--item"
		>
		<IconButton>

frontend/src/components/Deletetable.tsx

0 → 100644

+28 −0

Original line number	Diff line number	Diff line
		import { useDelete } from '../hooks/deleteHook';
		import { useGetParts } from '../hooks/getPartsHooks';
		import { SellablePart, SellablePartName } from '../types/SellableParts';
		import { PartTable } from './PartTable/PartTable.tsx';

		export function DeleteTable<T extends SellablePart>({
		name,
		getFn,
		deleteFn,
		}: {
		name: SellablePartName;
		getFn: () => Promise<T[]>;
		deleteFn: (arg0: string) => Promise<void>;
		}) {
		const getHook = useGetParts<T>([name], getFn);
		const deleteHook = useDelete([name], deleteFn);
		return (
		<PartTable<T>
		addPart={() => {
		console.log('Function not implemented.');
		}}
		functionality="delete"
		name={name}
		{...getHook}
		{...deleteHook}
		/>
		);
		}

frontend/src/components/PartTable/PartTable.tsx

+37 −26

Original line number	Diff line number	Diff line
		@@ -34,7 +34,7 @@ import { ErrorView } from '../ErrorView.tsx';

		export type PartTableInput<T> = {
		name: SellablePartName;
		data: T[];
		data: T[] \| undefined;
		addPart: (arg0: T) => void;
		deleteFn: (id: string) => void;
		deleteLoading: boolean;
		@@ -43,6 +43,7 @@ export type PartTableInput<T> = {
		isError: boolean;
		error: ApiError \| null;
		isLoading: boolean;
		functionality: 'delete' \| 'all';
		};

		export function PartTable<T extends SellablePart>({
		@@ -56,6 +57,7 @@ export function PartTable<T extends SellablePart>({
		isError: isErrorGet,
		error: loadError,
		isLoading: loadingGet,
		functionality = 'all',
		}: PartTableInput<T>) {
		const navigate = useNavigate();
		const setOrdering = useSetRecoilState(sortingAtom);
		@@ -107,16 +109,17 @@ export function PartTable<T extends SellablePart>({
		)}

		<h1 className="parts__title">Choose {name}</h1>
		{loadingGet ? (
		{loadingGet \|\| data === undefined ? (
		<RotatingLines />
		) : (
		<TableContainer className="parts__container">
		{filters}
		{functionality !== 'delete' ? filters : ''}
		<Table className="container__table">
		<TableHead>
		<TableRow>
		<TableCell>
		Name
		{functionality !== 'delete' && (
		<IconButton onClick={handleSortName}>
		{nameOrder === 'desc' ? (
		<KeyboardArrowUpIcon />
		@@ -124,9 +127,11 @@ export function PartTable<T extends SellablePart>({
		<KeyboardArrowDownIcon />
		)}
		</IconButton>
		)}
		</TableCell>
		<TableCell>
		Price
		{functionality !== 'delete' && (
		<IconButton onClick={handleSortPrice}>
		{priceOrder === 'desc' ? (
		<KeyboardArrowUpIcon />
		@@ -134,6 +139,7 @@ export function PartTable<T extends SellablePart>({
		<KeyboardArrowDownIcon />
		)}
		</IconButton>
		)}
		</TableCell>
		<TableCell></TableCell>
		</TableRow>
		@@ -153,6 +159,7 @@ export function PartTable<T extends SellablePart>({
		</TableCell>
		<TableCell>{priceToString(oneRow.price)}</TableCell>
		<TableCell>
		{functionality !== 'delete' ? (
		<Button
		variant="contained"
		onClick={() => {
		@@ -162,6 +169,10 @@ export function PartTable<T extends SellablePart>({
		>
		Add
		</Button>
		) : (
		''
		)}

		{admin ? (
		<Button
		variant="contained"

frontend/src/hooks/getPartsHooks.ts

0 → 100644

+14 −0

Original line number	Diff line number	Diff line
		import { useQuery } from 'react-query';
		import { ApiError } from '../types/Error';
		import { SellablePart } from '../types/SellableParts';

		export function useGetParts<T extends SellablePart>(
		query: string[],
		getParts: () => Promise<T[]>
		) {
		const { isLoading, isError, error, data } = useQuery<T[], ApiError>(
		query,
		() => getParts()
		);
		return { isLoading, isError, error, data };
		}