ConceptPortal-public/rsconcept/frontend/src/features/ai/pages/prompt-templates-page/prompt-templates-page.tsx
Ivan e00b8da6ee
Some checks are pending
Frontend CI / build (22.x) (push) Waiting to run
Frontend CI / notify-failure (push) Blocked by required conditions
F: Improve navigation tracking and loaders. Fix store utilization
2025-07-25 10:54:50 +03:00

59 lines
2.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { ErrorBoundary } from 'react-error-boundary';
import { isAxiosError } from 'axios';
import { z } from 'zod';
import { useBlockNavigation } from '@/app';
import { routes } from '@/app/urls';
import { RequireAuth } from '@/features/auth/components/require-auth';
import { TextURL } from '@/components/control';
import { type ErrorData } from '@/components/info-error';
import { useQueryStrings } from '@/hooks/use-query-strings';
import { useModificationStore } from '@/stores/modification';
import { PromptTabID, TemplatesTabs } from './templates-tabs';
const paramsSchema = z.strictObject({
tab: z.preprocess(v => (v ? Number(v) : undefined), z.enum(PromptTabID).default(PromptTabID.LIST)),
active: z.preprocess(v => (v ? Number(v) : undefined), z.number().nullable().default(null))
});
export function PromptTemplatesPage() {
const query = useQueryStrings();
const urlData = paramsSchema.parse({
tab: query.get('tab'),
active: query.get('active')
});
const isModified = useModificationStore(state => state.isModified);
useBlockNavigation(isModified);
return (
<ErrorBoundary
FallbackComponent={({ error }) => <ProcessError error={error as ErrorData} itemID={urlData.active} />}
>
<RequireAuth>
<TemplatesTabs activeID={urlData.active} tab={urlData.tab} />
</RequireAuth>
</ErrorBoundary>
);
}
// ====== Internals =========
function ProcessError({ error, itemID }: { error: ErrorData; itemID?: number | null }): React.ReactElement | null {
if (isAxiosError(error) && error.response) {
if (error.response.status === 404) {
return (
<div className='flex flex-col items-center p-2 mx-auto'>
<p>{`Шаблон запроса с указанным идентификатором ${itemID} отсутствует`}</p>
<div className='flex justify-center'>
<TextURL text='Список шаблонов' href={`/${routes.prompt_templates}`} />
</div>
</div>
);
}
}
throw error as Error;
}