adilallo
131 lines
3.9 KiB
TypeScript
131 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { use, useEffect, useState } from "react";
|
|
import HeaderLockup from "../../../components/type/HeaderLockup";
|
|
import { TemplateReviewCard } from "../../../components/cards/TemplateReviewCard";
|
|
import { useTranslation } from "../../../contexts/MessagesContext";
|
|
import { useMediaQuery } from "../../../hooks/useMediaQuery";
|
|
import {
|
|
fetchTemplateBySlug,
|
|
type RuleTemplateDto,
|
|
} from "../../../../lib/create/fetchTemplates";
|
|
import messages from "../../../../messages/en/index";
|
|
import Alert from "../../../components/modals/Alert";
|
|
|
|
interface PageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
/**
|
|
* Template review: same responsive grid and RuleCard chrome as final-review;
|
|
* copy from Figma 22142-898702 (intro + dynamic card from API).
|
|
*/
|
|
export default function ReviewTemplatePage({ params }: PageProps) {
|
|
const { slug: rawSlug } = use(params);
|
|
const slug = decodeURIComponent(rawSlug);
|
|
const t = useTranslation("create.templateReview");
|
|
|
|
const [template, setTemplate] = useState<RuleTemplateDto | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
const isMdOrLarger = useMediaQuery("(min-width: 640px)");
|
|
|
|
useEffect(() => {
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect -- match final-review: defer breakpoint until mount
|
|
setIsMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
void (async () => {
|
|
if (!cancelled) {
|
|
setLoading(true);
|
|
setError(null);
|
|
}
|
|
const result = await fetchTemplateBySlug(slug);
|
|
if (cancelled) return;
|
|
if (result === null) {
|
|
setError(messages.create.templateReview.errors.notFound);
|
|
setTemplate(null);
|
|
} else if ("error" in result) {
|
|
setError(result.error);
|
|
setTemplate(null);
|
|
} else {
|
|
setTemplate(result);
|
|
setError(null);
|
|
}
|
|
setLoading(false);
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [slug]);
|
|
|
|
const showDesktopLayout = !isMounted || isMdOrLarger;
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex w-full max-w-[1280px] shrink-0 items-center justify-center px-5 py-16 md:px-12">
|
|
<p className="text-[var(--color-content-default-secondary,#a3a3a3)]">
|
|
{t("loading")}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !template) {
|
|
return (
|
|
<div className="flex w-full max-w-[640px] shrink-0 flex-col gap-4 px-5 py-8 md:px-12">
|
|
<Alert
|
|
type="banner"
|
|
status="danger"
|
|
title={t("errors.loadFailed")}
|
|
description={error ?? t("errors.notFound")}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (showDesktopLayout) {
|
|
return (
|
|
<div className="w-full max-w-[1280px] shrink-0 px-5 md:px-12">
|
|
<div className="flex w-full flex-col gap-4 min-w-0 sm:grid sm:grid-cols-2 sm:gap-[var(--measures-spacing-1200,48px)]">
|
|
<div className="min-w-0 flex flex-col justify-center">
|
|
<HeaderLockup
|
|
title={t("intro.title")}
|
|
description={t("intro.description")}
|
|
justification="left"
|
|
size="L"
|
|
/>
|
|
</div>
|
|
<div className="min-w-0 w-full flex flex-col items-stretch">
|
|
<TemplateReviewCard
|
|
template={template}
|
|
ruleCardClassName="rounded-[24px] !max-w-full !w-full min-w-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="w-full flex flex-col items-center px-5 min-w-0">
|
|
<div className="flex flex-col gap-4 w-full max-w-[639px]">
|
|
<HeaderLockup
|
|
title={t("intro.title")}
|
|
description={t("intro.description")}
|
|
justification="left"
|
|
size="M"
|
|
/>
|
|
<TemplateReviewCard
|
|
template={template}
|
|
ruleCardClassName="w-full rounded-[12px] p-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|