feat(form): add loading state and replace custom switch component
This commit introduces a loading state for form submissions and replaces the custom switch component with a third-party library for improved user experience and maintainability. - Adds `react-switch` as a dependency to replace the custom-built switch component, providing a more robust and feature-rich solution. - Implements a loading indicator on form submission buttons and in the confirmation modal by utilizing the `useIsMutating` hook from TanStack Query. This provides clear visual feedback to the user during asynchronous operations. - Creates a reusable `FormFooter` component to encapsulate the submit and cancel buttons, centralizing the form submission logic and loading state. - Refactors the company create/edit forms to use the new `FormFooter` and `react-switch` components. - Moves the `BreadcrumbItem` type to a shared types file for better code organization.
This commit is contained in:
AmirReza Jamali
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
|
||||
import { Switch } from "@/components/FormElements/switch";
|
||||
import ConfirmationModal from "@/components/ui/ConfirmationModal";
|
||||
import IsVisible from "@/components/ui/IsVisible";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { unixToDate } from "@/utils/shared";
|
||||
import Link from "next/link";
|
||||
import { Skeleton } from "../../../ui/skeleton";
|
||||
import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
|
||||
|
||||
const CompanyCategoriesTable = () => {
|
||||
const {
|
||||
categories,
|
||||
isLoading,
|
||||
pathName,
|
||||
router,
|
||||
currentCategory,
|
||||
isToggling,
|
||||
togglePublished,
|
||||
onConfirmDelete,
|
||||
setCurrentCategory,
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
} = useCompanyCategoriesPresenter();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
|
||||
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
|
||||
<Link href={`${pathName}/create`}>Create category</Link>
|
||||
</button>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
<TableHead colSpan={100}>Row</TableHead>
|
||||
<TableHead colSpan={100}>Title</TableHead>
|
||||
<TableHead colSpan={100}>Description</TableHead>
|
||||
<TableHead colSpan={100}>Created at</TableHead>
|
||||
<TableHead colSpan={100}>Published</TableHead>
|
||||
<TableHead colSpan={100}>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading && <TableSkeleton column={5} />}
|
||||
<TableBody>
|
||||
<IsVisible condition={!categories}>
|
||||
<TableRow>
|
||||
<TableCell colSpan={400} className="text-center">
|
||||
<h6>No category found</h6>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</IsVisible>
|
||||
<IsVisible condition={!!categories}>
|
||||
{categories?.map((category, index) => {
|
||||
return (
|
||||
<TableRow key={category.id}>
|
||||
<TableCell colSpan={100}>{index + 1}</TableCell>
|
||||
<TableCell colSpan={100}>{category.name}</TableCell>
|
||||
<TableCell colSpan={100}>{category.description}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{unixToDate(category.created_at)}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<IsVisible condition={isToggling}>
|
||||
<Skeleton></Skeleton>
|
||||
</IsVisible>
|
||||
<IsVisible condition={!isToggling}>
|
||||
<Switch
|
||||
withIcon
|
||||
onChange={(e) => {
|
||||
togglePublished(category.id);
|
||||
}}
|
||||
checked={category.published}
|
||||
onToggle={(e) => {
|
||||
console.log(e);
|
||||
}}
|
||||
/>
|
||||
</IsVisible>
|
||||
</TableCell>
|
||||
<TableCell className="text-start xl:pr-7.5">
|
||||
<div className="flex items-center justify-start gap-x-3.5">
|
||||
<button
|
||||
className="hover:text-red-500"
|
||||
onClick={() => {
|
||||
setCurrentCategory(category);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Delete Admin </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
router.push(`${pathName}/edit/${category.id}`)
|
||||
}
|
||||
>
|
||||
<span className="sr-only">Edit Category</span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</IsVisible>
|
||||
</TableBody>
|
||||
</Table>
|
||||
{isModalOpen && (
|
||||
<ConfirmationModal
|
||||
isOpen={isModalOpen}
|
||||
title={`Deleting ${currentCategory?.name}`}
|
||||
message={`Are you sure?`}
|
||||
variant={"default"}
|
||||
size={"md"}
|
||||
confirmText={"Delete"}
|
||||
cancelText={"Cancel"}
|
||||
onConfirm={() => {
|
||||
onConfirmDelete();
|
||||
}}
|
||||
onCancel={() => setIsModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyCategoriesTable;
|
||||
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import {
|
||||
useCompanyCategoriesQuery,
|
||||
useDeleteCompanyCategoryQuery,
|
||||
useToggleCompanyCategoryPublished,
|
||||
} from "@/hooks/queries";
|
||||
import { TCompanyCategory } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
const useCompanyCategoriesPresenter = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [currentCategory, setCurrentCategory] = useState<TCompanyCategory>();
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
...apiDefaultParams,
|
||||
});
|
||||
const router = useRouter();
|
||||
const pathName = usePathname();
|
||||
const { data, isLoading, isError } = useCompanyCategoriesQuery(params);
|
||||
const { mutate: deleteCategory } = useDeleteCompanyCategoryQuery(() =>
|
||||
setIsModalOpen(false),
|
||||
);
|
||||
const {mutate:togglePublished,isPending:isToggling} = useToggleCompanyCategoryPublished()
|
||||
const onConfirmDelete = () => {
|
||||
if (!currentCategory) return;
|
||||
deleteCategory(currentCategory?.id);
|
||||
};
|
||||
return {
|
||||
categories: data?.data.categories,
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
isLoading,
|
||||
isError,
|
||||
pathName,
|
||||
router,
|
||||
params,
|
||||
setParams,
|
||||
currentCategory,
|
||||
togglePublished,
|
||||
isToggling,
|
||||
setCurrentCategory,
|
||||
onConfirmDelete,
|
||||
};
|
||||
};
|
||||
|
||||
export default useCompanyCategoriesPresenter;
|
||||
@@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
@@ -10,13 +9,12 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
|
||||
import { TendersSkeleton } from "./Skeleton";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getStatusColor } from "@/utils/shared";
|
||||
import { ExclamationIcon } from "@/assets/icons";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import Page from "../../../app/forms/form-layout/page";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Link from "next/link";
|
||||
const TendersTable = () => {
|
||||
const { allTenders, isPending, router, pathName, setParams } =
|
||||
@@ -27,9 +25,9 @@ const TendersTable = () => {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-start">
|
||||
{/* <TableHead colSpan={100} className="text-start font-extrabold">
|
||||
<TableHead colSpan={100} className="text-start font-extrabold">
|
||||
Row
|
||||
</TableHead> */}
|
||||
</TableHead>
|
||||
<TableHead colSpan={100} className="text-start font-extrabold">
|
||||
Title
|
||||
</TableHead>
|
||||
@@ -49,7 +47,7 @@ const TendersTable = () => {
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
{isPending && <TendersSkeleton />}
|
||||
{isPending && <TableSkeleton column={6} />}
|
||||
<TableBody>
|
||||
{allTenders?.data.tenders?.map((item, index) =>
|
||||
!item ? (
|
||||
@@ -59,9 +57,9 @@ const TendersTable = () => {
|
||||
key={item.id}
|
||||
className="odd:bg-gray-2 dark:odd:bg-gray-7"
|
||||
>
|
||||
{/* <TableCell className="text-start" colSpan={100}>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{index + 1}
|
||||
</TableCell> */}
|
||||
</TableCell>
|
||||
<TableCell className="text-start" colSpan={100}>
|
||||
{item.title}
|
||||
</TableCell>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import { useTendersQuery } from "@/hooks/queries";
|
||||
import useDebounce from "@/hooks/useDebounce";
|
||||
import { TCustomer } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import { useEffect, useState } from "react";
|
||||
import { z } from "zod";
|
||||
const useTenderListPresenter = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
@@ -15,15 +15,13 @@ const useTenderListPresenter = () => {
|
||||
Partial<ConfirmationModalProps>
|
||||
>({});
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
sort: "created_at",
|
||||
...apiDefaultParams,
|
||||
});
|
||||
const router = useRouter();
|
||||
const debouncedSearch = useDebounce(search, 1000);
|
||||
const pathName = usePathname();
|
||||
const { data, error, isPending } = useTendersQuery(params);
|
||||
|
||||
const { ref, inView } = useInView({ threshold: 0.5 });
|
||||
|
||||
useEffect(() => {
|
||||
const result = z.string().safeParse(debouncedSearch);
|
||||
if (result.success) {
|
||||
@@ -36,14 +34,8 @@ const useTenderListPresenter = () => {
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
};
|
||||
// const onConfirmDelete = () => {
|
||||
// if (currentTender) {
|
||||
// deleteTender(currentTender.id);
|
||||
// }
|
||||
// };
|
||||
|
||||
return {
|
||||
ref,
|
||||
currentTender,
|
||||
setCurrentTender,
|
||||
search,
|
||||
|
||||
Reference in New Issue
Block a user