From 2f9093c29f70da0be5fb47a23b59fbdf7f1dd91e Mon Sep 17 00:00:00 2001
From: leolab1337 <61798137+leolab1337@users.noreply.github.com>
Date: Sat, 31 Aug 2024 11:45:17 +0300
Subject: [PATCH] Refactor `withPageData` HOC for clarity and type safety

Enhanced the docstrings for `withPageData` to provide clearer explanations and consistent formatting. Updated type annotations and added a comprehensive example to illustrate usage.
---
 .../shared/lib/hocs/withPageData/index.tsx    | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend-next-migration/src/shared/lib/hocs/withPageData/index.tsx b/frontend-next-migration/src/shared/lib/hocs/withPageData/index.tsx
index 2d84dc4f8..a0760bb0e 100644
--- a/frontend-next-migration/src/shared/lib/hocs/withPageData/index.tsx
+++ b/frontend-next-migration/src/shared/lib/hocs/withPageData/index.tsx
@@ -1,33 +1,39 @@
 import {ComponentType} from "react";
 
 /**
- * Higher-order component to fetch page data based on language parameter and pass it to the wrapped component.
+ * Higher-Order Component (HOC) to fetch and provide page data based on language.
  *
- * @template PageProps - Props used by the wrapped component
- * @param PageComponent - The React component to wrap and provide data to
- * @param getPage - Function that fetches the page data given a language string
- *
- * @returns A component that fetches data and renders the wrapped component with both fetched data and original props
+ * @template PageProps - The type of props the page component expects.
+ * @param {ComponentType<PageProps>} PageComponent - The component to wrap.
+ * @param {(lng: string) => Promise<{ page: PageProps }>} getPage - The function to fetch page data based on language.
+ * @returns {ComponentType<DefaultAppRouterProps>} - The wrapped component with fetched data.
  *
  * @example
+ * // Define a page component
+ * const MyPage: React.FC<{ content: string }> = ({ content }) => (
+ *   <div>{content}</div>
+ * );
  *
- *  // Assume MyPageComponent is a React component and fetchPageData is a function that returns a promise
- *  // resolving to page data
- *
- *  const MyPageWithData = withPageData(MyPageComponent, fetchPageData);
+ * // Define a function to fetch page data
+ * const fetchPage = async (lng: string) => {
+ *   const response = await fetch(`/api/page?lang=${lng}`);
+ *   const data = await response.json();
+ *   return { page: data };
+ * };
  *
- *  // Usage in a React application
- *  <MyPageWithData params={{ lng: 'en' }} someOtherProp="value" />
+ * // Wrap the page component with the HOC
+ * const MyPageWithData = withPageData(MyPage, fetchPage);
  *
+ * // Now MyPageWithData can be used within a routing context
  */
 export function withPageData<PageProps>(
     PageComponent: ComponentType<PageProps>,
     getPage: (lng: string) => Promise<{ page: PageProps }>
-) {
-    return async function PageWithHOC(props: DefaultAppRouterProps & PageProps) {
+): ComponentType<DefaultAppRouterProps> {
+    return async function PageWithHOC(props: DefaultAppRouterProps) {
         const {params} = props;
         const data = await getPage(params.lng);
 
         return <PageComponent {...data.page} {...props} />;
     };
-}
\ No newline at end of file
+}