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 (
|
||||
<>
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<CreateCompany editMode defaultValues={data.data} id={id} />
|
||||
<CreateCompany editMode defaultValues={data?.data} id={id} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ export const unixToDate = ({
|
||||
unix: number;
|
||||
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) => {
|
||||
return moment.default(ms).format("YYYY/MM/DD");
|
||||
|
||||
Reference in New Issue
Block a user