Get members details from client side api

pbteja1998 · pbteja1998 · commit 613aa3b78552 · 2021-02-18T18:30:42.000+05:30
diff --git a/src/components/members/Member.tsx b/src/components/members/Member.tsx
@@ -43,7 +43,9 @@ export default function Member({ user }: { user: User }) {
     <li className="col-span-1 flex flex-col text-center bg-white rounded-lg shadow divide-y divide-gray-200">
       <div className="flex-1 flex flex-col p-8">
         <Avatar src={user.image} className="w-32 h-32 mx-auto" />
-        <h3 className="mt-6 text-gray-900 text-sm font-medium">{user.name}</h3>
+        <h3 className="mt-6 text-gray-900 text-sm font-medium">
+          {user.account?.firstName ?? user.name}
+        </h3>
         <dl className="mt-1 flex-grow flex flex-col justify-between">
           <dt className="sr-only">Bio</dt>
           <dd className="text-gray-500 text-sm">
diff --git a/src/pages/api/fauna/members.tsx b/src/pages/api/fauna/members.tsx
@@ -0,0 +1,43 @@
+import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
+
+import faunadb from 'faunadb'
+import { User } from 'src/pages/members'
+const q = faunadb.query
+const isProduction = process.env.NODE_ENV === 'production'
+const client = new faunadb.Client({
+  secret: process.env.FAUNADB_SECRET ?? 'secret',
+  scheme: isProduction ? 'https' : 'http',
+  domain: isProduction ? 'db.fauna.com' : 'localhost',
+  ...(isProduction ? {} : { port: 8443 }),
+})
+
+const FaunaCreateHandler: NextApiHandler = async (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => {
+  try {
+    const response: any = await client.query(
+      q.Map(q.Paginate(q.Documents(q.Collection('users'))), (userRef) => {
+        const user = q.Get(userRef)
+        return {
+          id: q.Select(['ref', 'id'], user),
+          name: q.Select(['data', 'name'], user, null),
+          username: q.Select(['data', 'username'], user, null),
+          image: q.Select(['data', 'image'], user, null),
+          account: {
+            firstName: q.Select(['data', 'account', 'firstName'], user, ''),
+          },
+          socials: q.Select(['data', 'socials'], user, {}),
+        }
+      })
+    )
+    const users: User[] = response.data
+
+    res.status(200).json({ users })
+  } catch (error) {
+    console.error({ msg: error.message })
+    res.status(500).json({ message: error.message })
+  }
+}
+
+export default FaunaCreateHandler
diff --git a/src/pages/members.tsx b/src/pages/members.tsx
@@ -3,6 +3,7 @@ import { PaddedLayout } from 'src/layouts'
 import { InferGetServerSidePropsType } from 'next'
 
 import faunadb from 'faunadb'
+import { useQuery } from 'react-query'
 const q = faunadb.query
 const isProduction = process.env.NODE_ENV === 'production'
 const client = new faunadb.Client({
@@ -12,12 +13,24 @@ const client = new faunadb.Client({
   ...(isProduction ? {} : { port: 8443 }),
 })
 
-export default function MembersPage({
-  users,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function MembersPage() {
+  const { isLoading, isError, data } = useQuery('/api/fauna/members', () =>
+    fetch(`/api/fauna/members`).then((res) => {
+      if (!res.ok) {
+        throw new Error('Something went wrong!!')
+      }
+      return res.json()
+    })
+  )
+  if (isLoading) {
+    return <p>loading...</p>
+  }
+  if (isError) {
+    return <p>Something went wrong!!!</p>
+  }
   return (
     <>
-      <Members users={users} />
+      <Members users={data.users} />
     </>
   )
 }
