From 1e29f598f8dc07cee18362b97d34965c6fb4653f Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 16 Nov 2023 19:51:54 +0300
Subject: [PATCH] apps/web: add form-context to provide pageUrlParams

---
 apps/web/app/ius/[slug]/page.tsx              | 29 ++++++++-----------
 apps/web/components/Form/Buttons.tsx          |  8 ++---
 apps/web/components/Form/Elements.tsx         |  2 --
 apps/web/components/Form/Header.tsx           | 18 ++++++++----
 .../components/Form/context/form-context.tsx  | 16 ++++++++++
 apps/web/components/Form/index.ts             |  3 --
 apps/web/components/Form/index.tsx            | 21 ++++++++++++++
 apps/web/components/Form/types.ts             |  2 ++
 8 files changed, 68 insertions(+), 31 deletions(-)
 create mode 100644 apps/web/components/Form/context/form-context.tsx
 delete mode 100644 apps/web/components/Form/index.ts
 create mode 100644 apps/web/components/Form/index.tsx

diff --git a/apps/web/app/ius/[slug]/page.tsx b/apps/web/app/ius/[slug]/page.tsx
index 3e433b6..5584f2e 100644
--- a/apps/web/app/ius/[slug]/page.tsx
+++ b/apps/web/app/ius/[slug]/page.tsx
@@ -1,10 +1,10 @@
 import * as apiIUS from '@/api/ius/query';
-import * as Form from '@/components/Form';
+import { Form } from '@/components/Form';
 import type { PageProps } from '@/types/page';
 import { withError } from '@/utils/error';
 import { getPageUrlParams, makeCreateUrl } from '@/utils/url';
 import type { Metadata } from 'next';
-import { Background, Divider } from 'ui';
+import { Background } from 'ui';
 
 export async function generateMetadata(pageProps: PageProps): Promise<Metadata> {
   const pageUrlParams = getPageUrlParams(pageProps);
@@ -28,22 +28,17 @@ export default async function Page(pageProps: PageProps) {
       const pageUrlParams = getPageUrlParams(pageProps);
       const createUrl = makeCreateUrl(pageUrlParams);
 
-      return Promise.all([
-        apiIUS.getData({ createUrl }),
-        apiIUS.getMetaData({ createUrl }),
-        apiIUS.getConfig({ createUrl }),
-      ]).then(([data, metaData, { title }]) => {
-        const props = { data, metaData, pageUrlParams };
+      return Promise.all([apiIUS.getData({ createUrl }), apiIUS.getMetaData({ createUrl })]).then(
+        ([data, metaData]) => {
+          const props = { data, metaData, pageUrlParams };
 
-        return (
-          <Background>
-            <Form.Header {...props} url={'/ius' + createUrl('/conditions')} title={title} />
-            <Form.Elements {...props} />
-            <Divider />
-            <Form.Buttons {...props} />
-          </Background>
-        );
-      });
+          return (
+            <Background>
+              <Form {...props} />
+            </Background>
+          );
+        }
+      );
     },
   });
 }
diff --git a/apps/web/components/Form/Buttons.tsx b/apps/web/components/Form/Buttons.tsx
index c3ddfcf..3a99b3e 100644
--- a/apps/web/components/Form/Buttons.tsx
+++ b/apps/web/components/Form/Buttons.tsx
@@ -1,12 +1,12 @@
-'use client';
+import { FormContext } from './context/form-context';
 import * as apiIus from '@/api/ius/query';
 import { useFormStore } from '@/store/ius/form';
-import { makeCreateUrl, type PageUrlParams } from '@/utils/url';
+import { useContext } from 'react';
 import { Button } from 'ui';
 
-export function Buttons({ pageUrlParams }: { readonly pageUrlParams: PageUrlParams }) {
+export function Buttons() {
   const { reset, setValidation, values } = useFormStore();
-  const createUrl = makeCreateUrl(pageUrlParams);
+  const { createUrl } = useContext(FormContext);
 
   return (
     <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-3">
diff --git a/apps/web/components/Form/Elements.tsx b/apps/web/components/Form/Elements.tsx
index fe62728..4bc8010 100644
--- a/apps/web/components/Form/Elements.tsx
+++ b/apps/web/components/Form/Elements.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { Props } from './types';
 import { mapFieldTypeElement } from '@/config/elements';
 import { useFormStore } from '@/store/ius/form';
diff --git a/apps/web/components/Form/Header.tsx b/apps/web/components/Form/Header.tsx
index a3ff3a5..c377b51 100644
--- a/apps/web/components/Form/Header.tsx
+++ b/apps/web/components/Form/Header.tsx
@@ -1,15 +1,23 @@
 /* eslint-disable react/forbid-component-props */
-import type { Props } from './types';
+import { FormContext } from './context/form-context';
+import * as apiIUS from '@/api/ius/query';
 import Link from 'next/link';
+import { useContext } from 'react';
 import { Heading } from 'ui';
 
-export function Header({ title, url }: Props & { readonly title: string; readonly url: string }) {
-  return (
+export function Header() {
+  const { createUrl } = useContext(FormContext);
+
+  return apiIUS.getConfig({ createUrl }).then(({ title }) => (
     <div className="flex justify-between">
       <Heading size={2}>{title}</Heading>
-      <Link href={url} className="text-primary-600 text-sm font-medium hover:underline" prefetch>
+      <Link
+        href={'/ius' + createUrl('/conditions')}
+        className="text-primary-600 text-sm font-medium hover:underline"
+        prefetch
+      >
         Посмотреть условия
       </Link>
     </div>
-  );
+  ));
 }
diff --git a/apps/web/components/Form/context/form-context.tsx b/apps/web/components/Form/context/form-context.tsx
new file mode 100644
index 0000000..e1c1cd6
--- /dev/null
+++ b/apps/web/components/Form/context/form-context.tsx
@@ -0,0 +1,16 @@
+import type { CreateUrl, PageUrlParams } from '@/utils/url';
+import type { PropsWithChildren } from 'react';
+import { createContext, useMemo } from 'react';
+
+type ContextType = {
+  readonly createUrl: CreateUrl;
+  readonly pageUrlParams: PageUrlParams | undefined;
+};
+
+export const FormContext = createContext<ContextType>({} as ContextType);
+
+export function FormContextProvider({ children, ...initialData }: PropsWithChildren & ContextType) {
+  const value = useMemo(() => initialData, [initialData]);
+
+  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
+}
diff --git a/apps/web/components/Form/index.ts b/apps/web/components/Form/index.ts
deleted file mode 100644
index 0ba8dd2..0000000
--- a/apps/web/components/Form/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './Buttons';
-export * from './Elements';
-export * from './Header';
diff --git a/apps/web/components/Form/index.tsx b/apps/web/components/Form/index.tsx
new file mode 100644
index 0000000..4bd4c4b
--- /dev/null
+++ b/apps/web/components/Form/index.tsx
@@ -0,0 +1,21 @@
+'use client';
+import { Buttons } from './Buttons';
+import { FormContextProvider } from './context/form-context';
+import { Elements } from './Elements';
+import { Header } from './Header';
+import type { Props } from './types';
+import { makeCreateUrl } from '@/utils/url';
+import { Divider } from 'ui';
+
+export function Form(props: Props) {
+  const { pageUrlParams } = props;
+
+  return (
+    <FormContextProvider pageUrlParams={pageUrlParams} createUrl={makeCreateUrl(pageUrlParams)}>
+      <Header />
+      <Elements {...props} />
+      <Divider />
+      <Buttons />
+    </FormContextProvider>
+  );
+}
diff --git a/apps/web/components/Form/types.ts b/apps/web/components/Form/types.ts
index 9587826..6d719f0 100644
--- a/apps/web/components/Form/types.ts
+++ b/apps/web/components/Form/types.ts
@@ -1,6 +1,8 @@
 import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
+import type { PageUrlParams } from '@/utils/url';
 
 export type Props = {
   readonly data: ResponseGetData;
   readonly metaData: ResponseMetaData;
+  readonly pageUrlParams: PageUrlParams;
 };