Bi 46 review 1

next.config.js

@@ -1,4 +1,19 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
+require('dotenv').config();
+const nextConfig = {
+    async headers() {
+        return [
+          {
+            // matching all API routes
+            source: "/api/:path*",
+            headers: [
+              { key: "Access-Control-Allow-Credentials", value: "true" },
+              { key: "Access-Control-Allow-Origin", value: "*" },
+              { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
+              { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
+            ]
+          }
+        ]
+    }
+}
 
 module.exports = nextConfig

package.json

@@ -19,7 +19,9 @@
     "@apollo/server": "^4.9.5",
     "@as-integrations/next": "^2.0.2",
     "autoprefixer": "10.4.16",
+    "cors": "^2.8.5",
     "cross-fetch": "^4.0.0",
+    "dotenv": "^16.3.1",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "match-sorter": "^6.3.1",

src/__tests__/query.test.js

@@ -1,6 +1,8 @@
 import '@testing-library/jest-dom'
 
-import client from '../client'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+
+import fetch from 'cross-fetch'
 import { gql } from '@apollo/client'
 
 const query = gql`
@@ -14,48 +16,42 @@ const query = gql`
     }
   }
 `
-async function fetchData() {
-  try {
-    const result = await client.query({ query })
-    return result
-  } catch (error) {
-    console.error('Error in fetching college data form mongodb:', error)
-  }
-}
+
+let uri = 'https://web-app-client-b69l4yjrq-bacpacs-projects.vercel.app/api/graphql'
+console.log('GraphQL URI in tests:', uri)
+const client = new ApolloClient({
+  link: new HttpLink({ uri, fetch }),
+  cache: new InMemoryCache(),
+})
 // test to check the data is not empty
 test('the data is of college', async () => {
-  try {
-    const result = await fetchData()
-    expect(result?.data).toHaveProperty('universityList')
-    expect(result?.data?.universityList).toBeInstanceOf(Array)
-    expect(result?.data?.universityList?.length).toBeGreaterThan(0)
-  } catch (e) {
-    expect(e.message).toMatch('error')
-  }
+  const result = await client.query({ query })
+
+  expect(result?.data).not.toBeNull()
+  expect(result?.data).toHaveProperty('universityList')
+  expect(result?.data?.universityList).toBeInstanceOf(Array)
+  expect(result?.data?.universityList?.length).toBeGreaterThan(0)
 })
 // test to check the format of data recived by the query
 test('the data has specific properties', async () => {
-  try {
-    const result = await fetchData()
-    result?.data?.universityList?.forEach((college) => {
-      // check for id property
-      expect(college).toHaveProperty('id')
-      expect(college?.id).not.toBeNull()
-      expect(typeof college?.id).toBe('string')
-      // check for name property
-      expect(college).toHaveProperty('name')
-      expect(college?.name).not.toBeNull()
-      expect(typeof college?.name).toBe('string')
-      // check for score property
-      expect(college).toHaveProperty('score')
-      expect(college?.score).not.toBeNull()
-      expect(typeof college?.score).toBe('string')
-      // check for country property
-      expect(college).toHaveProperty('country')
-      expect(college?.country).not.toBeNull()
-      expect(typeof college?.country).toBe('string')
-    })
-  } catch (e) {
-    expect(e.message).toMatch('error')
-  }
+  const result = await client.query({ query })
+
+  result?.data?.universityList?.forEach((college) => {
+    // check for id property
+    expect(college).toHaveProperty('id')
+    expect(college?.id).not.toBeNull()
+    expect(typeof college?.id).toBe('string')
+    // check for name property
+    expect(college).toHaveProperty('name')
+    expect(college?.name).not.toBeNull()
+    expect(typeof college?.name).toBe('string')
+    // check for score property
+    expect(college).toHaveProperty('score')
+    expect(college?.score).not.toBeNull()
+    expect(typeof college?.score).toBe('string')
+    // check for country property
+    expect(college).toHaveProperty('country')
+    expect(college?.country).not.toBeNull()
+    expect(typeof college?.country).toBe('string')
+  })
 })

src/__tests__/searchAlgorithm.test.js

@@ -0,0 +1,25 @@
+import searchAlgorithm from '../utils/searchAlgorithm'
+describe('searchAlgorithm', () => {
+  const colleges = [{ name: 'Massachusetts Institute of Technology (MIT)', country: 'United States', city: 'Cambridge' }]
+  it('returns filtered results when input and data are provided', () => {
+    const input = 'mass'
+
+    const result = searchAlgorithm(input, colleges)
+
+    expect(result).toEqual([{ name: 'Massachusetts Institute of Technology (MIT)', country: 'United States', city: 'Cambridge' }])
+  })
+  it('returns an empty array when either input is not provided', () => {
+    const input = ''
+
+    const result = searchAlgorithm(input, colleges)
+
+    expect(result).toEqual([])
+  })
+  it('returns an empty array when either input doesnot match with the college name,city or country', () => {
+    const input = 'xyw'
+
+    const result = searchAlgorithm(input, colleges)
+
+    expect(result).toEqual([])
+  })
+})

src/app/api/graphql/route.js

@@ -6,16 +6,15 @@ import { gql } from 'graphql-tag'
 import { startServerAndCreateNextHandler } from '@as-integrations/next'
 
 // The connection string for mongodb connection.
-const uri = process.env.MONGODB_URI || 'mongodb+srv://bacpactech:[email protected]'
+const uri = process.env.MONGODB_URI
 const client = new MongoClient(uri)
 
 async function getUniversityName(id) {
   try {
     const database = client.db('bacpac')
     const universities = database.collection('universities')
-    const university = await universities.findOne({ id })
-    console.log('url', uri)
-    return university.name
+    const universityList = await universities.findOne({ id })
+    return universityList.name
   } catch (error) {
     console.log(error)
   }
@@ -24,8 +23,8 @@ async function getUniversityList() {
   try {
     const database = client.db('bacpac')
     const universities = database.collection('universities')
-    const university = await universities.find().toArray()
-    return university
+    const universityList = await universities.find().toArray()
+    return universityList
   } catch (error) {
     console.log('this is error from get all unversity list side', error)
   }
@@ -57,7 +56,7 @@ const typeDefs = gql`
 `
 
 let plugins = []
-const graphQLref = process.env.GRAPHQL_REF || 'bacpac-nbq1vs@current'
+const graphQLref = process.env.GRAPHQL_REF
 //Next.js auto assigns NODE_ENV value as development for 'next dev' command, and production for other commands
 if (process.env.NODE_ENV === 'production') {
   plugins = [
@@ -75,7 +74,6 @@ const server = new ApolloServer({
   typeDefs,
   plugins,
 })
-
 const handler = startServerAndCreateNextHandler(server)
 
 //Exports the handler function to be used as a Next.js API route handler.

src/app/page.js

@@ -12,27 +12,20 @@ import bacpacTitle from '../assets/bacpacTitle.png'
 import bookImgLogo from '../assets/bookimg.png'
 import client from '../client'
 import discord from '../assets/discordLog.png'
-import { gql } from '@apollo/client'
+import { query } from '../queries/queries'
 
-const query = gql`
-  query getUniversityList {
-    universityList {
-      id
-      name
-      score
-      country
-      city
-    }
-  }
-`
 export default function Home() {
   const [universityData, setUniversityData] = useState(null)
+  const [loading, setLoading] = useState(false)
   async function fetchData() {
     try {
+      setLoading(true)
       const result = await client.query({ query })
       setUniversityData(result?.data?.universityList)
     } catch (error) {
-      console.error('Error fetching data:', error)
+      console.log('Error fetching data:', error)
+    } finally {
+      setLoading(false)
     }
   }
   useEffect(() => {
@@ -45,7 +38,7 @@ export default function Home() {
         <div className="text-9xl font-bold  mt-28">
           <Image src={bacpacTitle} alt="BACPAC" className="w-full h-full" />
         </div>
-        <SearchBar data={universityData} />
+        <SearchBar data={universityData} loading={loading} />
         <div className="login-part w-5/12 mt-24 flex flex-col items-center">
           <div className="flex items-center mb-5 w-full justify-center">
             <BsStars className="text-[#6744FF] text-4xl -ml-3 center" />

src/client.js

@@ -2,8 +2,10 @@ import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 
 import fetch from 'cross-fetch'
 
+let uri = '/api/graphql'
+console.log('GraphQL URI in Client:', uri)
 const client = new ApolloClient({
-  link: new HttpLink({ uri: 'http://localhost:3000/api/graphql', fetch }),
+  link: new HttpLink({ uri, fetch }),
   cache: new InMemoryCache(),
 })
 

src/components/SearchBar.js

@@ -3,7 +3,7 @@ import CollegeResult from '../app/components/CollegeResult'
 import searchAlgorithm from '../utils/searchAlgorithm'
 import { useState } from 'react'
 
-const SearchBar = ({ data }) => {
+const SearchBar = ({ data, loading }) => {
   const [open, setOpen] = useState(false)
   const [filterData, setFilterData] = useState([])
   const handleSearch = (e) => {
@@ -13,7 +13,8 @@ const SearchBar = ({ data }) => {
     setFilterData(filterData)
   }
   let searchResults = filterData?.map((item, index) => <CollegeResult info={item} serialNo={index} key={index} />)
-  if (searchResults.length === 0) searchResults = <div>No results found</div>
+  if (!loading && searchResults.length === 0) searchResults = <div>No results found</div>
+  if (loading) searchResults = <div>Loading....</div>
   return (
     <div className="search-box mt-4 w-5/12 h-12 rounded-2xl">
       <div className="search-icon w-12 absolute h-12 flex justify-center items-center">

src/queries/queries.js

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client'
+export const query = gql`
+  query getUniversityList {
+    universityList {
+      id
+      name
+      score
+      country
+      city
+    }
+  }
+`