Move prisma out of page

.env

@@ -1 +1,2 @@
 DATABASE_URL=postgresql://postgres:hackme@localhost:5432/frasier-gifs?schema=public
+API_URL=https://dev.fergl.ie:3000

app/page.tsx

@@ -5,26 +5,8 @@ import client from '@lib/prismadb';
 import { GifContainer } from '@components';
 
 async function getGifs() {
-  const results = await client.gif.findMany({
-    take: 12,
-    include: {
-      _count: {
-        select: {
-          upVotes: true,
-          downVotes: true,
-        },
-      },
-    },
-    orderBy: {
-      upVotes: {
-        _count: 'desc',
-      },
-    },
-  });
-  const gifs = await Promise.all(
-    results.map(async (gif): Promise<Gif> => mapGif(gif))
-  );
-  return gifs;
+  const gifs = await fetch(`${process.env.API_URL}/api/gifs`);
+  return await gifs.json();
 }
 
 const HomePage = async () => {

components/widgets/login/SocialLogin.tsx

@@ -37,7 +37,7 @@ const SocialLogin = () => {
   const handleProviderAuth = async (provider: string) => {
     logger.debug('signin', 'handleProviderAuth', provider);
     const res = await signIn(provider, {
-      callbackUrl: `https://dev.fergl.ie:3000`,
+      callbackUrl: `${process.env.API_URL}`,
     });
     logger.debug('signin', 'handleProviderAuth_res', res);
     if (res?.ok) {

lib/mapping/gif.ts

@@ -15,7 +15,7 @@ export const mapGif = (
     upVotes: gif._count.upVotes,
     downVotes: gif._count.downVotes,
     hasVoted: false,
-    fixedEmbedCode: `<iframe title="${gif.title}" width="800" height="600" frameBorder="0" src="https://dev.fergl.ie:3000/share/${gif.slug}">`,
-    responsiveEmbedCode: `<iframe title="${gif.title}" width="800" height="600" frameBorder="0" src="https://dev.fergl.ie:3000/share/${gif.slug}">`,
+    fixedEmbedCode: `<iframe title="${gif.title}" width="800" height="600" frameBorder="0" src="${process.env.API_URL}/share/${gif.slug}">`,
+    responsiveEmbedCode: `<iframe title="${gif.title}" width="800" height="600" frameBorder="0" src="${process.env.API_URL}/share/${gif.slug}">`,
   };
 };

pages/api/gifs/index.ts

@@ -0,0 +1,34 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Gif } from '@models';
+import { mapGif } from '@lib/mapping/gif';
+import client from '@lib/prismadb';
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== 'GET') {
+    res.setHeader('Allow', 'GET');
+    return res.status(405).json({
+      data: null,
+      error: 'Method Not Allowed',
+    });
+  }
+  const results = await client.gif.findMany({
+    take: 12,
+    include: {
+      _count: {
+        select: {
+          upVotes: true,
+          downVotes: true,
+        },
+      },
+    },
+    orderBy: {
+      upVotes: {
+        _count: 'desc',
+      },
+    },
+  });
+  const gifs = await Promise.all(
+    results.map(async (gif: Gif): Promise<Gif> => mapGif(gif))
+  );
+  return res.status(200).json(gifs);
+};
+export default handler;