Refactoring

actions/shares/shares.ts

@@ -4,12 +4,9 @@ import {
   IApiResponseShares,
   IFinancialInstrument,
   IPagination,
-  IApiResponseShareItem,
   IInstrument,
 } from '@/typing';
 
-// todo need fix type and docs
-
 /**
  * Fetches the list of shares from the API.
  *
@@ -18,7 +15,10 @@ import {
  *
  * @async
  * @function getStocks
- * @returns {Promise<Object>} A promise that resolves to an object containing the response data.
+ * @param {IPagination} pagination - An object containing pagination parameters.
+ * @param {number} pagination.page - The page number to fetch.
+ * @param {number} pagination.pageSize - The number of items to return per page.
+ * @returns {Promise<IApiResponseShares>} A promise that resolves to an object containing the response data.
  * @throws {Error} Throws an error if the request fails.
  */
 export const getStocks = async (
@@ -40,35 +40,71 @@ export const getStocks = async (
   };
 };
 
-export const getStockByTicker = async (ticker: string): Promise<any> => {
+/**
+ * Fetches a stock by its ticker symbol.
+ *
+ * This function makes a GET request to the `/sharesByTicker` endpoint of the API
+ * defined by the `API_BASE_URL` and returns the response data.
+ *
+ * @async
+ * @function getStockByTicker
+ * @param {string} ticker - The ticker symbol of the stock to fetch.
+ * @returns {Promise<{ data: IInstrument }>} A promise that resolves to an object containing the response data.
+ * @throws {Error} Throws an error if the request fails.
+ */
+export const getStockByTicker = async (
+  ticker: string,
+): Promise<{ data: any }> => {
   const { data } = await axios.get<{
     data: IInstrument;
   }>(`${API_BASE_URL}/sharesByTicker`, {
     params: { ticker },
   });
-  return {
-    data,
-  };
+  return { data };
 };
 
-export const getLastPriceByTicker = async (ticker: string): Promise<any> => {
+/**
+ * Fetches the latest price for a stock by its ticker symbol.
+ *
+ * This function makes a GET request to the `/lastPriceByTicker` endpoint of the API
+ * defined by the `API_BASE_URL` and returns the response data.
+ *
+ * @async
+ * @function getLastPriceByTicker
+ * @param {string} ticker - The ticker symbol of the stock to fetch the latest price for.
+ * @returns {Promise<{ data: IInstrument }>} A promise that resolves to an object containing the response data.
+ * @throws {Error} Throws an error if the request fails.
+ */
+export const getLastPriceByTicker = async (
+  ticker: string,
+): Promise<{ data: any }> => {
   const { data } = await axios.get<{
     data: IInstrument;
   }>(`${API_BASE_URL}/lastPriceByTicker`, {
     params: { ticker },
   });
-  return {
-    data,
-  };
+  return { data };
 };
 
-export const getCandlesByTicker = async (ticker: string): Promise<any> => {
+/**
+ * Fetches the candlestick data for a stock by its ticker symbol.
+ *
+ * This function makes a GET request to the `/candlesByTicker` endpoint of the API
+ * defined by the `API_BASE_URL` and returns the response data.
+ *
+ * @async
+ * @function getCandlesByTicker
+ * @param {string} ticker - The ticker symbol of the stock to fetch the candlestick data for.
+ * @returns {Promise<{ data: IInstrument }>} A promise that resolves to an object containing the response data.
+ * @throws {Error} Throws an error if the request fails.
+ */
+export const getCandlesByTicker = async (
+  ticker: string,
+): Promise<{ data: any }> => {
   const { data } = await axios.get<{
     data: IInstrument;
   }>(`${API_BASE_URL}/candlesByTicker`, {
     params: { ticker },
   });
-  return {
-    data,
-  };
+  return { data };
 };

app/[slug]/page.tsx

@@ -55,31 +55,26 @@ const PageStock = async ({ params }: Props) => {
     const dataLastPrice = lastPriceData?.data;
     const dataCandlesByTicker = candlesData?.data;
 
+    const renderContent = (data: any, Component: React.FC<any>, props: any) =>
+      data ? <Component {...props} /> : <span>Not data</span>;
+
     return (
       <div className={styles.page}>
         <div className={styles.main}>
           <div className={styles.intro}>
-            {stockData?.data ? (
-              <StockIntro data={stockData?.data} />
-            ) : (
-              <span>Not data</span>
-            )}
+            {renderContent(dataIntro, StockIntro, { data: dataIntro })}
           </div>
-          {candlesData?.data ? (
-            <Candles
-              currency={stockData?.data?.currency}
-              data={candlesData?.data}
-            />
-          ) : (
-            <span>Not data</span>
-          )}
+          {renderContent(dataCandlesByTicker, Candles, {
+            currency: dataIntro?.currency,
+            data: dataCandlesByTicker,
+          })}
         </div>
         <div className={styles.side}>
-          {lastPriceData?.data && candlesData?.data ? (
+          {dataLastPrice && dataCandlesByTicker ? (
             <BuyStock
-              candlesData={candlesData?.data}
-              currency={stockData?.data?.currency}
-              data={lastPriceData?.data}
+              candlesData={dataCandlesByTicker}
+              currency={dataIntro?.currency}
+              data={dataLastPrice}
             />
           ) : (
             <span>Not data</span>

app/layout.tsx

@@ -12,11 +12,7 @@ const roboto = Open_Sans({
   subsets: ['latin'],
 });
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <html lang="en" className={roboto.className}>
       <body className={styles.layout}>
@@ -32,7 +28,9 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
 
 export const viewport: Viewport = {
   colorScheme: 'light dark',