2025-07-15 20:09:44 +03:00
|
|
|
|
import { ErrorBoundary } from 'react-error-boundary';
|
|
|
|
|
import { isAxiosError } from 'axios';
|
2025-07-14 19:05:50 +03:00
|
|
|
|
import { z } from 'zod';
|
|
|
|
|
|
|
|
|
|
import { useBlockNavigation } from '@/app';
|
2025-07-15 20:09:44 +03:00
|
|
|
|
import { routes } from '@/app/urls';
|
2025-07-14 19:05:50 +03:00
|
|
|
|
import { RequireAuth } from '@/features/auth/components/require-auth';
|
|
|
|
|
|
2025-07-15 20:09:44 +03:00
|
|
|
|
import { TextURL } from '@/components/control';
|
|
|
|
|
import { type ErrorData } from '@/components/info-error';
|
2025-07-14 19:05:50 +03:00
|
|
|
|
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.nativeEnum(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();
|
|
|
|
|
useBlockNavigation(isModified);
|
|
|
|
|
|
|
|
|
|
return (
|
2025-07-15 20:09:44 +03:00
|
|
|
|
<ErrorBoundary
|
|
|
|
|
FallbackComponent={({ error }) => <ProcessError error={error as ErrorData} itemID={urlData.active} />}
|
|
|
|
|
>
|
|
|
|
|
<RequireAuth>
|
|
|
|
|
<TemplatesTabs activeID={urlData.active} tab={urlData.tab} />
|
|
|
|
|
</RequireAuth>
|
|
|
|
|
</ErrorBoundary>
|
2025-07-14 19:05:50 +03:00
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2025-07-15 20:09:44 +03:00
|
|
|
|
// ====== 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;
|
|
|
|
|
}
|