Use server side props to get integration data

pages/integrations.tsx

@@ -1,11 +1,11 @@
 import Head from 'next/head';
+import prisma from '../lib/prisma';
 import Shell from '../components/Shell';
 import { useState } from 'react';
 import { useSession, getSession } from 'next-auth/client';
 
-export default function Home() {
+export default function Home(props) {
     const [session, loading] = useSession();
-    const [integrations, setIntegrations] = useState([]);
     const [showAddModal, setShowAddModal] = useState(false);
 
     if (loading) {
@@ -16,15 +16,6 @@ export default function Home() {
         }
     }
 
-    function getIntegrations() {
-        fetch('/api/integrations')
-            .then((response) => response.json())
-            .then((data) => setIntegrations(data));
-    }
-
-    // TODO: Stop this function from running repeatedly
-    getIntegrations()
-
     function toggleAddModal() {
         setShowAddModal(!showAddModal);
     }
@@ -45,7 +36,7 @@ export default function Home() {
             <Shell heading="Integrations">
                 <div className="bg-white shadow overflow-hidden sm:rounded-lg">
                     <ul className="divide-y divide-gray-200">
-                        {integrations.map((integration) =>
+                        {props.credentials.map((integration) =>
                             <li>
                                 <a href="#" className="block hover:bg-gray-50">
                                     <div className="flex items-center px-4 py-4 sm:px-6">
@@ -95,7 +86,7 @@ export default function Home() {
                             </li>
                         )}
                     </ul>
-                    {integrations.length == 0 &&
+                    {props.credentials.length == 0 &&
                         <div className="bg-white shadow sm:rounded-lg">
                             <div className="flex">
                                 <div className="py-9 pl-8">
@@ -191,4 +182,30 @@ export default function Home() {
             </Shell>
         </div>
     );
+}
+
+export async function getServerSideProps(context) {
+    const session = await getSession(context);
+
+    const user = await prisma.user.findFirst({
+        where: {
+            email: session.user.email,
+        },
+        select: {
+            id: true
+        }
+    });
+
+    const credentials = await prisma.credential.findMany({
+        where: {
+            userId: user.id,
+        },
+        select: {
+            type: true,
+            key: true
+        }
+    });
+    return {
+      props: {credentials}, // will be passed to the page component as props
+    }
 }