fix: Prevent edit page crash and correct date formatting
On the company edit page, added optional chaining to the `defaultValues` prop. This prevents a potential runtime error if the company data is undefined when the page loads. Additionally, this commit corrects the `unixToDate` utility function. The previous logic could incorrectly include 'false' in the format string when time was not required. It now uses a ternary operator to conditionally add the time format, ensuring correct output. Minor code formatting adjustments are also included.
This commit is contained in:
@@ -0,0 +1,116 @@
|
|||||||
|
"use client";
|
||||||
|
import Loading from "@/app/loading";
|
||||||
|
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
|
||||||
|
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||||
|
import IsVisible from "@/components/ui/IsVisible";
|
||||||
|
import Status from "@/components/ui/Status";
|
||||||
|
import { useCompanyDetails } from "@/hooks/queries";
|
||||||
|
import { BreadcrumbItem } from "@/types/shared";
|
||||||
|
import { formatPhoneNumber, unixToDate } from "@/utils/shared";
|
||||||
|
import getSymbolFromCurrency from "currency-symbol-map";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { use } from "react";
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CompanyDetailsPage = ({ params }: IProps) => {
|
||||||
|
const { id } = use(params);
|
||||||
|
const breadcrumbItems: BreadcrumbItem[] = [
|
||||||
|
{
|
||||||
|
href: "/",
|
||||||
|
name: "Dashboard",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/companies",
|
||||||
|
name: "Companies",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: `/companies/details/${id}`,
|
||||||
|
name: "Company details",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const { data, isLoading } = useCompanyDetails(id);
|
||||||
|
const router = useRouter();
|
||||||
|
if (isLoading) return <Loading />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Breadcrumb items={breadcrumbItems} />
|
||||||
|
|
||||||
|
<ShowcaseSection
|
||||||
|
title={
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<strong>{data.data.name}</strong>
|
||||||
|
<Status status={data?.data?.status}>{data.data.status}</Status>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-4 gap-4">
|
||||||
|
<ShowcaseSection title={"Currency"}>
|
||||||
|
<strong>
|
||||||
|
{`${data?.data?.currency} ${getSymbolFromCurrency(data?.data.currency ?? "USD")}`}
|
||||||
|
</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Language"}>
|
||||||
|
<strong className="uppercase">{data?.data?.language}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Created At"}>
|
||||||
|
<strong>{unixToDate({ unix: data?.data?.created_at })}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Annual revenue"}>
|
||||||
|
<strong>{data?.data?.annual_revenue}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Email"}>
|
||||||
|
<strong>{data?.data?.email}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Employee count"}>
|
||||||
|
<strong>{data?.data?.employee_count}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Founded Year"}>
|
||||||
|
<strong>{data?.data?.founded_year}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Industry"}>
|
||||||
|
<strong>{data?.data?.industry}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Is Compliant"}>
|
||||||
|
<strong>{data?.data?.is_compliant ? "Yes" : "No"}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Is Verified"}>
|
||||||
|
<strong>{data?.data?.is_verified ? "Yes" : "No"}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Phone"}>
|
||||||
|
<strong>{formatPhoneNumber(data?.data?.phone ?? 0)}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Registration Number"}>
|
||||||
|
<strong>{data?.data?.registration_number}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Tax id"}>
|
||||||
|
<strong>{data?.data?.tax_id}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Type"}>
|
||||||
|
<strong>{data?.data?.type}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<ShowcaseSection title={"Updated at"}>
|
||||||
|
<strong>{unixToDate({ unix: data?.data?.updated_at ?? 0 })}</strong>
|
||||||
|
</ShowcaseSection>
|
||||||
|
<IsVisible condition={!!data.data.website}>
|
||||||
|
<ShowcaseSection title={"Website"}>
|
||||||
|
<Link
|
||||||
|
href={data.data.website}
|
||||||
|
className="font-bold"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{data.data.website}
|
||||||
|
</Link>
|
||||||
|
</ShowcaseSection>
|
||||||
|
</IsVisible>
|
||||||
|
</div>
|
||||||
|
</ShowcaseSection>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CompanyDetailsPage;
|
||||||
@@ -18,7 +18,7 @@ const EditCompanyPage = ({ params }: { params: Promise<{ id: string }> }) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Breadcrumb items={breadcrumbItems} />
|
<Breadcrumb items={breadcrumbItems} />
|
||||||
<CreateCompany editMode defaultValues={data.data} id={id} />
|
<CreateCompany editMode defaultValues={data?.data} id={id} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -128,7 +128,7 @@ export const companyCategoriesService = {
|
|||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
updateCategories: async ({
|
updateCategories: async ({
|
||||||
id,
|
id,
|
||||||
credentials,
|
credentials,
|
||||||
}: {
|
}: {
|
||||||
|
|||||||
+1
-1
@@ -7,7 +7,7 @@ export const unixToDate = ({
|
|||||||
unix: number;
|
unix: number;
|
||||||
hasTime?: boolean;
|
hasTime?: boolean;
|
||||||
}) => {
|
}) => {
|
||||||
return moment.unix(unix).format(`YYYY/MM/DD ${hasTime && "HH:MM"}`);
|
return moment.unix(unix).format(`YYYY/MM/DD ${hasTime ? "HH:MM" : ""}`);
|
||||||
};
|
};
|
||||||
export const msToDate = (ms: number) => {
|
export const msToDate = (ms: number) => {
|
||||||
return moment.default(ms).format("YYYY/MM/DD");
|
return moment.default(ms).format("YYYY/MM/DD");
|
||||||
|
|||||||
Reference in New Issue
Block a user