From 42befb9e2f7555ff847ab20fba5f923e542bd553 Mon Sep 17 00:00:00 2001
From: "Puzio, Wojciech" <wpuzio@estee.com>
Date: Mon, 15 Jan 2024 18:11:31 +0100
Subject: [PATCH] feat(future) server fetch for; (Error: Server Functions
 cannot be called during initial render. This would create a fetch waterfall.
 Try to use a Server Component to pass data to Client Components instead.

---
 src/app/actions.ts                     | 15 ++++++++++
 src/app/api/auth/[...nextauth]/auth.ts |  2 +-
 src/app/page.tsx                       |  4 +++
 src/providers/axios-server.ts          | 41 ++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/app/actions.ts
 create mode 100644 src/providers/axios-server.ts

diff --git a/src/app/actions.ts b/src/app/actions.ts
new file mode 100644
index 0000000..c91aec0
--- /dev/null
+++ b/src/app/actions.ts
@@ -0,0 +1,15 @@
+'use server';
+
+import { DataResponse } from '@/page';
+import ApiServerClient from '@/providers/axios-server';
+
+export async function fetchData() {
+  const res = (await ApiServerClient)
+    .get<DataResponse>('/v1/products')
+    .then((response) => {
+      return response.data.data;
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}
diff --git a/src/app/api/auth/[...nextauth]/auth.ts b/src/app/api/auth/[...nextauth]/auth.ts
index 5de33c4..8476800 100644
--- a/src/app/api/auth/[...nextauth]/auth.ts
+++ b/src/app/api/auth/[...nextauth]/auth.ts
@@ -4,5 +4,5 @@ import { authConfig } from './auth.config';
 
 export const {
   handlers: { GET, POST },
-  auth: middleware,
+  auth,
 } = NextAuth(authConfig);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 30d1c28..e207390 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { useEffect, useState } from 'react';
 
+// import { fetchData } from '@/actions';
 import ProductCard from '@/components/ProductCard/ProductCard';
 import ApiClient from '@/providers/axios-client';
 
@@ -46,6 +47,9 @@ export default function Home() {
     return <div>Error: {error}</div>;
   }
 
+  // Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
+  // console.log(fetchData());
+
   return (
     <main className="container mx-auto py-8">
       <div className="grid md:grid-cols-3 gap-12">
diff --git a/src/providers/axios-server.ts b/src/providers/axios-server.ts
new file mode 100644
index 0000000..1e5bd81
--- /dev/null
+++ b/src/providers/axios-server.ts
@@ -0,0 +1,41 @@
+import axios from 'axios';
+
+import { getSession } from 'next-auth/react';
+
+import { auth } from '@/api/auth/[...nextauth]/auth';
+
+const baseURL = process.env.NEXT_PUBLIC_BACKEND_API_URL || 'http://127.0.0.1:8000';
+
+const ApiServerClient = async () => {
+  const defaultOptions = {
+    baseURL: baseURL + `/api`,
+  };
+
+  const test = await auth();
+  console.log('test', test);
+
+  const instance = axios.create(defaultOptions);
+
+  // instance.interceptors.request.use(async (request) => {
+  //   const session = await getSession();
+  //   if (session) {
+  //     request.headers.Authorization = `Bearer ${session?.user.access_token}`;
+  //     request.headers.Accept = 'application/json';
+  //   }
+  //   return request;
+  // });
+
+  instance.interceptors.response.use(
+    (response) => {
+      return response;
+    },
+    (error) => {
+      console.log('error', error);
+      return Promise.reject(error);
+    },
+  );
+
+  return instance;
+};
+
+export default ApiServerClient();