added mongodb

package.json

@@ -21,6 +21,7 @@
     "@fontsource/rambla": "^5.0.8",
     "@fontsource/roboto-slab": "^5.0.18",
     "framer-motion": "^10.16.16",
+    "mongodb": "^6.5.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",

src/app/lib/mongodb.tsx

@@ -0,0 +1,39 @@
+import { MongoClient, ServerApiVersion } from 'mongodb'
+
+if (!process.env.MONGODB_URI) {
+  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
+}
+
+const uri = process.env.MONGODB_URI
+const options = {
+  serverApi: {
+    version: ServerApiVersion.v1,
+    strict: true,
+    deprecationErrors: true,
+  },
+}
+
+let client
+let clientPromise: Promise<MongoClient>
+
+if (process.env.NODE_ENV === 'development') {
+  // In development mode, use a global variable so that the value
+  // is preserved across module reloads caused by HMR (Hot Module Replacement).
+  let globalWithMongo = global as typeof globalThis & {
+    _mongoClientPromise?: Promise<MongoClient>
+  }
+
+  if (!globalWithMongo._mongoClientPromise) {
+    client = new MongoClient(uri, options)
+    globalWithMongo._mongoClientPromise = client.connect()
+  }
+  clientPromise = globalWithMongo._mongoClientPromise
+} else {
+  // In production mode, it's best to not use a global variable.
+  client = new MongoClient(uri, options)
+  clientPromise = client.connect()
+}
+
+// Export a module-scoped MongoClient promise. By doing this in a
+// separate module, the client can be shared across functions.
+export default clientPromise

src/app/team/[id]/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next'
-import React from 'react'
+import React, { cache } from 'react'
 import {
   Box,
   Breadcrumb,
@@ -10,7 +10,8 @@ import {
   Image,
   Text,
 } from '@chakra-ui/react'
-import teamData from '../team.json'
+import clientPromise from '@/app/lib/mongodb'
+import { getTeam } from '../page'
 
 type MetadataProps = {
   params: { id: string }
@@ -21,10 +22,9 @@ export async function generateMetadata({
 }: MetadataProps): // parent: ResolvingMetadata
 Promise<Metadata> {
   const id = params.id
+  const teamData = await getTeam()
 
-  const teamMember = teamData.find(
-    (teamMember: { id: string; name: string }) => teamMember.id === id
-  )
+  const teamMember = teamData?.find((teamMember) => teamMember.id === id)
 
   if (!teamMember) {
     return {
@@ -39,14 +39,27 @@ Promise<Metadata> {
   }
 }
 
+const getTeamMember = cache(async (id: string) => {
+  try {
+    const client = await clientPromise
+    const db = client.db('ray-prod')
+    const teamMember = await db.collection('team').findOne({ id: id })
+    return teamMember
+  } catch (err) {
+    console.error(err)
+  }
+})
+
 // export async function generateStaticParams() {
 //   return [{ id: '1' }, { id: '2' }, { id: '3' }]
 // }
 
-export default function TeamMember({ params }: { params: { id: string } }) {
-  const teamMember = teamData.find(
-    (teamMember: { id: string; name: string }) => teamMember.id === params.id
-  )
+export default async function TeamMember({
+  params,
+}: {
+  params: { id: string }
+}) {
+  const teamMember = await getTeamMember(params.id)
 
   return (
     <>

src/app/team/components/__tests__/TeamCard.test.tsx

@@ -3,15 +3,33 @@ import TeamCard from '../TeamCard'
 
 describe('Team Card', () => {
   it('should render the member img', () => {
-    render(<TeamCard name='Spencer Rafada' position='Software Engineer' />)
+    render(
+      <TeamCard
+        id='spencer-rafada'
+        name='Spencer Rafada'
+        position='Software Engineer'
+      />
+    )
     expect(screen.getByTestId('team-card-img')).toBeInTheDocument()
   })
   it('should render the member name', () => {
-    render(<TeamCard name='Spencer Rafada' position='Software Engineer' />)
+    render(
+      <TeamCard
+        id='spencer-rafada'
+        name='Spencer Rafada'
+        position='Software Engineer'
+      />
+    )
     expect(screen.getByTestId('team-card-name')).toBeInTheDocument()
   })
   it('should render the member position', () => {
-    render(<TeamCard name='Spencer Rafada' position='Software Engineer' />)
+    render(
+      <TeamCard
+        id='spencer-rafada'
+        name='Spencer Rafada'
+        position='Software Engineer'
+      />
+    )
     expect(screen.getByTestId('team-card-position')).toBeInTheDocument()
   })
 })

src/app/team/page.tsx

@@ -1,15 +1,27 @@
 import { Metadata } from 'next'
-import React from 'react'
+import React, { cache } from 'react'
 import TeamCard from './components/TeamCard'
-import teamData from './team.json'
 import { Flex, Heading } from '@chakra-ui/react'
+import clientPromise from '../lib/mongodb'
 
 export const metadata: Metadata = {
   title: 'Team',
   description: 'Team Page',
 }
 
-export default function Team() {
+export const getTeam = cache(async () => {
+  try {
+    const client = await clientPromise
+    const db = client.db('ray-prod')
+    const team = await db.collection('team').find({}).toArray()
+    return team
+  } catch (err) {
+    console.error(err)
+  }
+})
+
+export default async function Team() {
+  const teamData = await getTeam()
   return (
     <>
       <Flex p={{ base: 8, md: 16 }} direction='column' gap={{ base: 4, md: 6 }}>
@@ -23,7 +35,7 @@ export default function Team() {
           Team
         </Heading>
         <Flex data-testid='team-page-cards' wrap='wrap' justify='center'>
-          {teamData.map((teamMember) => {
+          {teamData?.map((teamMember) => {
             return (
               <TeamCard
                 key={teamMember.id}