Skip to content

Commit

Permalink
Improve record loader, improve toasters and thunk promise resolution
Browse files Browse the repository at this point in the history
  • Loading branch information
@Loupeznik
Loupeznik committed Feb 3, 2024
1 parent d3dfeca commit d0059b8
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 115 deletions.
199 changes: 101 additions & 98 deletions src/components/DomainList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,114 +17,117 @@ export const DomainList = (props: DomainListProps) => {
const canShowDomain = (type: string | undefined): boolean =>
props.isDomainExpanded && props.domain !== undefined && allowedRecordTypes.some(x => x == type);

const renderTableContents = () => {
const renderLoader = () => {
return (
<>
{props.subdomains?.map(function (subdomain, index) {
return (
<tr className="border-b border-opacity-20 dark:border-gray-700 dark:bg-gray-900" key={index}>
<td className="p-3">
<p>{subdomain.ID}</p>
</td>
<td className="p-3">
<p>
{subdomain.name}
{canShowDomain(subdomain.rdtype) ? '.' + props.domain : ''}
</p>
</td>
<td className="p-3">
<p>{subdomain.ttl}</p>
</td>
<td className="p-3">
<p>{subdomain.rdtype}</p>
</td>
<td className="p-3 max-w-sm truncate">
<p>{subdomain.rdata}</p>
</td>
<td className="p-3">
<p>{subdomain.changed_date}</p>
</td>
<td className="p-3">
<p>{subdomain.author_comment}</p>
</td>
<td className="p-3">
<div className="flex flex-row text-lg justify-center">
<FiEdit
className="mx-1 hover:text-yellow-600 cursor-pointer"
onClick={() => props.handleEditRecord(subdomain)}
/>
<FiTrash2
className="mx-1 hover:text-red-600 cursor-pointer"
onClick={() => props.handleDeleteRecord(subdomain.name!, Number(subdomain.ID))}
/>
<div className="flex items-center justify-center">
<div className="flex items-center justify-center">
<Radio colors={['#ffffff', '#ffffff', '#ffffff']} height={80} width={80} />
</div>
</div>
);
};

const renderTable = () => {
return (
<div className="overflow-x-auto rounded-lg">
<table className="min-w-full text-xs">
<thead className="dark:bg-gray-700">
<tr>
<th className="p-3">Record ID</th>
<th className="p-3">
<div className="flex flex-row justify-center place-items-center">
Name
{!props.isDomainExpanded ? (
<FiMaximize2
className="ml-2 cursor-pointer hover:text-yellow-200"
onClick={() => props.setIsDomainExpanded(true)}
title="Show domain name"
/>
) : (
<FiMinimize2
className="ml-2 cursor-pointer hover:text-red-200"
onClick={() => props.setIsDomainExpanded(false)}
title="Hide domain name"
/>
)}
</div>
</td>
</th>
<th className="p-3">TTL</th>
<th className="p-3">Record Type</th>
<th className="p-3">Data</th>
<th className="p-3">Updated at</th>
<th className="p-3">Comment</th>
<th className="p-3">Actions</th>
</tr>
);
})}
{props.subdomains?.length === 0 && (
<tr className="border-b border-opacity-20 dark:border-gray-700 dark:bg-gray-900">
{Array.from({ length: 8 }).map((_, index) => (
<td key={index} className="p-3">
<p>-</p>
</td>
))}
</tr>
)}
</>
</thead>
<tbody>
{props.subdomains?.map(function (subdomain, index) {
return (
<tr
className="border-b border-opacity-20 dark:border-gray-700 dark:bg-gray-900"
key={index}
>
<td className="p-3">
<p>{subdomain.ID}</p>
</td>
<td className="p-3">
<p>
{subdomain.name}
{canShowDomain(subdomain.rdtype) ? '.' + props.domain : ''}
</p>
</td>
<td className="p-3">
<p>{subdomain.ttl}</p>
</td>
<td className="p-3">
<p>{subdomain.rdtype}</p>
</td>
<td className="p-3 max-w-sm truncate">
<p>{subdomain.rdata}</p>
</td>
<td className="p-3">
<p>{subdomain.changed_date}</p>
</td>
<td className="p-3">
<p>{subdomain.author_comment}</p>
</td>
<td className="p-3">
<div className="flex flex-row text-lg justify-center">
<FiEdit
className="mx-1 hover:text-yellow-600 cursor-pointer"
onClick={() => props.handleEditRecord(subdomain)}
/>
<FiTrash2
className="mx-1 hover:text-red-600 cursor-pointer"
onClick={() =>
props.handleDeleteRecord(subdomain.name!, Number(subdomain.ID))
}
/>
</div>
</td>
</tr>
);
})}
{props.subdomains?.length === 0 && (
<tr className="border-b border-opacity-20 dark:border-gray-700 dark:bg-gray-900">
{Array.from({ length: 8 }).map((_, index) => (
<td key={index} className="p-3">
<p>-</p>
</td>
))}
</tr>
)}
</tbody>
</table>
</div>
);
};

return (
<div>
<div className="container p-2 mx-auto sm:p-4 dark:text-gray-100">
<h2 className="mb-4 text-2xl font-semibold leading-tight">Records</h2>
<div className="overflow-x-auto rounded-lg">
<table className="min-w-full text-xs">
<thead className="dark:bg-gray-700">
<tr>
<th className="p-3">Record ID</th>
<th className="p-3">
<div className="flex flex-row justify-center place-items-center">
Name
{!props.isDomainExpanded ? (
<FiMaximize2
className="ml-2 cursor-pointer hover:text-yellow-200"
onClick={() => props.setIsDomainExpanded(true)}
title="Show domain name"
/>
) : (
<FiMinimize2
className="ml-2 cursor-pointer hover:text-red-200"
onClick={() => props.setIsDomainExpanded(false)}
title="Hide domain name"
/>
)}
</div>
</th>
<th className="p-3">TTL</th>
<th className="p-3">Record Type</th>
<th className="p-3">Data</th>
<th className="p-3">Updated at</th>
<th className="p-3">Comment</th>
<th className="p-3">Actions</th>
</tr>
</thead>
<tbody>
{!props.isLoading ? (
renderTableContents()
) : (
<tr className="border-b border-opacity-20 dark:border-gray-700 dark:bg-gray-900 ">
{Array.from({ length: 8 }).map((_, index) => (
<td key={index} className="p-3">
<Radio wrapperClass="h-6 w-6 mx-auto" height={20} width={20} />
</td>
))}
</tr>
)}
</tbody>
</table>
</div>
{props.isLoading ? renderLoader() : renderTable()}
</div>
</div>
);
Expand Down
2 changes: 0 additions & 2 deletions src/redux/slices/domainSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,9 @@ export const domainSlice = createSlice({
state.shouldFetchRecords = true;
})
.addCase(updateRecord.pending, state => {
console.log('pending');
state.isLoading = true;
})
.addCase(updateRecord.rejected, state => {
console.log('rejected');
state.isLoading = false;
state.error = 'Failed to update subdomain';
})
Expand Down
13 changes: 10 additions & 3 deletions src/redux/thunks/records/addRecord.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,16 @@ const typePrefix = 'domain/addRecord';
export const addRecord = createAsyncThunk(
typePrefix,
async (params: { domain: string; subdomain: models_SaveRowRequest }) => {
await DomainService.postV1DomainRecord(params.subdomain, params.domain).then(
_ => toast.success('Record added successfully!'),
(error: ApiError) => toast.error(`Failed to create record: ${error.body['error']}`) && Promise.reject(),
await toast.promise(
DomainService.postV1DomainRecord(params.subdomain, params.domain).then(
_ => Promise.resolve(),
(error: ApiError) => Promise.reject(`Failed to create record: ${error.body['error']}`),
),
{
loading: 'Adding record...',
success: 'Record added successfully!',
error: (error: string) => error,
},
);
},
);
18 changes: 10 additions & 8 deletions src/redux/thunks/records/deleteRecord.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const typePrefix = 'domain/deleteRecord';
export const deleteRecord = createAsyncThunk(
typePrefix,
async (params: { domain: string; request: models_DeleteRowRequestV2; id: number }) => {
await DomainService.deleteV2DomainRecord(params.request, params.domain, params.id).then(
onFulfilled => {
toast.success(`Record deleted successfully`);
},
onRejected => {
const exception = onRejected as ApiError;
toast.error(`Failed to delete record: ${(exception.body as models_ErrorResponse).error}`);
return Promise.reject();
await toast.promise(
DomainService.deleteV2DomainRecord(params.request, params.domain, params.id).then(
_ => Promise.resolve(),
(error: ApiError) =>
Promise.reject(`Failed to delete record: ${(error.body as models_ErrorResponse).error}`),
),
{
loading: 'Deleting record...',
success: 'Record deleted successfully!',
error: (error: string) => error,
},
);

Expand Down
14 changes: 10 additions & 4 deletions src/redux/thunks/records/updateRecord.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,16 @@ const typePrefix = 'domain/updateRecord';
export const updateRecord = createAsyncThunk(
typePrefix,
async (params: { domain: string; subdomain: models_SaveRowRequestV2; id: number }) => {
console.log(params);
await DomainService.putV2DomainRecord(params.subdomain, params.domain, params.id).then(
_ => toast.success('Record updated successfully!'),
(error: ApiError) => toast.error(`Failed to update record: ${error.body['error']}`) && Promise.reject(),
await toast.promise(
DomainService.putV2DomainRecord(params.subdomain, params.domain, params.id).then(
_ => Promise.resolve(),
(error: ApiError) => Promise.reject(`Failed to update record: ${error.body['error']}`),
),
{
loading: 'Updating record...',
success: 'Record updated successfully!',
error: (error: string) => error,
},
);
},
);

0 comments on commit d0059b8

Please sign in to comment.