diff --git a/apps/web/api/ius/query.ts b/apps/web/api/ius/query.ts index 1453f78..aa49f35 100644 --- a/apps/web/api/ius/query.ts +++ b/apps/web/api/ius/query.ts @@ -4,8 +4,10 @@ import wretch from 'wretch'; const api = wretch(urls.URL_UIS).errorType('json'); -export async function getData(params: t.Request) { - const url = `/${params.slug}?${new URLSearchParams(params.searchParams)}`; +type CreateUrl = (path: string) => string; + +export async function getData(createUrl: CreateUrl) { + const url = createUrl(''); return api .get(url) @@ -13,8 +15,8 @@ export async function getData(params: t.Request) { .then((res) => res); } -export async function getMetaData(params: t.Request) { - const url = `/${params.slug}/meta?${new URLSearchParams(params.searchParams)}`; +export async function getMetaData(createUrl: CreateUrl) { + const url = createUrl('/meta'); return api .get(url) @@ -22,8 +24,8 @@ export async function getMetaData(params: t.Request) { .then((res) => res); } -export async function getConfig(params: t.Request) { - const url = `/${params.slug}/config`; +export async function getConfig(createUrl: CreateUrl) { + const url = createUrl('/config'); return api .get(url) @@ -31,8 +33,8 @@ export async function getConfig(params: t.Request) { .then((res) => res); } -export async function getConditions(params: t.Request) { - const url = `/${params.slug}/conditions?${new URLSearchParams(params.searchParams)}`; +export async function getConditions(createUrl: CreateUrl) { + const url = createUrl('/conditions'); return api .get(url) diff --git a/apps/web/app/ius/[slug]/conditions/page.tsx b/apps/web/app/ius/[slug]/conditions/page.tsx index 90359d0..76bf231 100644 --- a/apps/web/app/ius/[slug]/conditions/page.tsx +++ b/apps/web/app/ius/[slug]/conditions/page.tsx @@ -1,14 +1,18 @@ +/* eslint-disable react/forbid-component-props */ import * as apiIUS from '@/api/ius/query'; import { Conditions } from '@/components/Conditions'; +import { makeCreateUrl } from '@/utils/url'; import type { Metadata } from 'next'; +import { Background } from 'ui'; type Props = { params: { slug: string }; - searchParams: { [key: string]: string | string[] | undefined }; + searchParams: string | string[][] | Record; }; export async function generateMetadata({ params, searchParams }: Props): Promise { - const { title } = await apiIUS.getConfig({ searchParams, ...params }); + const createUrl = makeCreateUrl(`/${params.slug}`, searchParams); + const { title } = await apiIUS.getConfig(createUrl); const text = `Условия: ${title} | Эволюция`; return { @@ -22,7 +26,12 @@ export async function generateMetadata({ params, searchParams }: Props): Promise } export default async function Page({ params, searchParams }: Props) { - const conditions = await apiIUS.getConditions({ searchParams, ...params }); + const createUrl = makeCreateUrl(`/${params.slug}`, searchParams); + const conditions = await apiIUS.getConditions(createUrl); - return ; + return ( + + + + ); } diff --git a/apps/web/app/ius/[slug]/page.tsx b/apps/web/app/ius/[slug]/page.tsx index 371696f..83c9c5c 100644 --- a/apps/web/app/ius/[slug]/page.tsx +++ b/apps/web/app/ius/[slug]/page.tsx @@ -1,14 +1,17 @@ import * as apiIUS from '@/api/ius/query'; -import { Form } from '@/components/Form'; +import { FormButtons, FormElements, FormHeader } from '@/components/Form'; +import { makeCreateUrl } from '@/utils/url'; import type { Metadata } from 'next'; +import { Background, Divider } from 'ui'; type Props = { params: { slug: string }; - searchParams: { [key: string]: string | string[] | undefined }; + searchParams: string | string[][] | Record; }; export async function generateMetadata({ params, searchParams }: Props): Promise { - const { title } = await apiIUS.getConfig({ searchParams, ...params }); + const createUrl = makeCreateUrl(`/${params.slug}`, searchParams); + const { title } = await apiIUS.getConfig(createUrl); const text = `${title} | Эволюция`; return { @@ -22,9 +25,20 @@ export async function generateMetadata({ params, searchParams }: Props): Promise } export default async function Page({ params, searchParams }: Props) { - const data = await apiIUS.getData({ searchParams, ...params }); - const metaData = await apiIUS.getMetaData({ searchParams, ...params }); - const { title } = await apiIUS.getConfig({ searchParams, ...params }); + const createUrl = makeCreateUrl(`/${params.slug}`, searchParams); - return
; + const data = await apiIUS.getData(createUrl); + const metaData = await apiIUS.getMetaData(createUrl); + const { title } = await apiIUS.getConfig(createUrl); + + const props = { data, metaData, title }; + + return ( + + + + + + + ); } diff --git a/apps/web/components/Conditions.tsx b/apps/web/components/Conditions.tsx index 523d066..c6bdcb4 100644 --- a/apps/web/components/Conditions.tsx +++ b/apps/web/components/Conditions.tsx @@ -1,15 +1,8 @@ /* eslint-disable react/no-danger */ -/* eslint-disable react/forbid-component-props */ -import { Background } from 'ui'; - type Props = { readonly html: string; }; export function Conditions({ html }: Props) { - return ( - -
- - ); + return
; } diff --git a/apps/web/components/Form.tsx b/apps/web/components/Form.tsx index 60b975f..2685bdc 100644 --- a/apps/web/components/Form.tsx +++ b/apps/web/components/Form.tsx @@ -1,6 +1,10 @@ +/* eslint-disable react/forbid-component-props */ +/* eslint-disable react/no-unused-prop-types */ +'use client'; import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types'; import { mapFieldTypeElement } from '@/config/elements'; -import { Background, Button, Divider, ElementContainer, Heading } from 'ui'; +import Link from 'next/link'; +import { Button, ElementContainer, Heading } from 'ui'; type Props = { readonly data: ResponseGetData; @@ -8,42 +12,54 @@ type Props = { readonly title: string; }; -export function Form({ data, metaData, title }: Props) { +export function FormHeader({ title, url }: Props & { readonly url: string }) { return ( - +
{title} -
- {Object.keys(metaData).map((name) => { - const { fieldType, label, max, min = 0, visible, ...props } = metaData[name]; - - if (!visible) return false; - - const Element = mapFieldTypeElement[fieldType]; - - return ( - - - - ); - })} -
- -
- - - -
- + + Посмотреть условия + +
+ ); +} + +export function FormButtons() { + return ( +
+ + + +
+ ); +} + +export function FormElements({ data, metaData }: Props) { + return ( +
+ {Object.keys(metaData).map((name) => { + const { fieldType, label, max, min = 0, visible, ...props } = metaData[name]; + + if (!visible) return false; + + const Element = mapFieldTypeElement[fieldType]; + + return ( + + + + ); + })} +
); } diff --git a/apps/web/utils/url.ts b/apps/web/utils/url.ts new file mode 100644 index 0000000..3da9a40 --- /dev/null +++ b/apps/web/utils/url.ts @@ -0,0 +1,10 @@ +export function makeCreateUrl( + path: string, + searchParams?: string | string[][] | Record +) { + return function (route: string) { + if (searchParams) return `${path}${route}?${new URLSearchParams(searchParams)}`; + + return path + route; + }; +}