BI-46: Fetch University Data from MongoDB

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

@@ -15,8 +15,14 @@
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
+    "@apollo/client": "^3.8.8",
+    "@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",
     "mongodb": "^6.1.0",

src/__tests__/home.test.js

@@ -1,8 +1,9 @@
-import { render, screen } from '@testing-library/react'
-import Home from '../app/page.js'
-import SearchBar from '@/components/SearchBar.js'
 import '@testing-library/jest-dom'
 
+import { render, screen } from '@testing-library/react'
+
+import SearchBar from '../components/SearchBar'
+
 it('renders a search box', () => {
   const { getByPlaceholderText } = render(<SearchBar />)
 

src/__tests__/query.test.js

@@ -0,0 +1,57 @@
+import '@testing-library/jest-dom'
+
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+
+import fetch from 'cross-fetch'
+import { gql } from '@apollo/client'
+
+const query = gql`
+  query getUniversityList {
+    universityList {
+      id
+      name
+      score
+      country
+      city
+    }
+  }
+`
+
+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 () => {
+  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 () => {
+  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

@@ -1,40 +1,62 @@
-import { startServerAndCreateNextHandler } from '@as-integrations/next'
-import { ApolloServer } from '@apollo/server'
 import { ApolloServerPluginLandingPageLocalDefault, ApolloServerPluginLandingPageProductionDefault } from '@apollo/server/plugin/landingPage/default'
-import { gql } from 'graphql-tag'
+
+import { ApolloServer } from '@apollo/server'
 import { MongoClient } from 'mongodb'
+import { gql } from 'graphql-tag'
+import { startServerAndCreateNextHandler } from '@as-integrations/next'
 
 // The connection string for mongodb connection.
-const uri = process.env.MONGODB_URI || ''
+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 })
-    return university.name
+    const universityList = await universities.findOne({ id })
+    return universityList.name
   } catch (error) {
     console.log(error)
   }
 }
+async function getUniversityList() {
+  try {
+    const database = client.db('bacpac')
+    const universities = database.collection('universities')
+    const universityList = await universities.find().toArray()
+    return universityList
+  } catch (error) {
+    console.log('this is error from get all unversity list side', error)
+  }
+}
 
 const resolvers = {
   Query: {
     university_name: async (_, args) => {
       return await getUniversityName(args.id)
     },
+    universityList: () => {
+      return getUniversityList()
+    },
   },
 }
 
 const typeDefs = gql`
   type Query {
     university_name(id: ID!): String
+    universityList: [universityInfo]
+  }
+  type universityInfo {
+    id: String
+    name: String
+    score: String
+    country: String
+    city: String
   }
 `
 
 let plugins = []
-const graphQLref = process.env.GRAPHQL_REF || ''
+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 = [
@@ -52,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/components/CollegeResult.js

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+
 function CollegeResult(props) {
   return (
     <div className="mb-3.5">

src/app/page.js

@@ -1,42 +1,44 @@
 'use client'
 
-import { AiOutlineSearch } from 'react-icons/ai'
+import { useEffect, useState } from 'react'
+
 import { BsStars } from 'react-icons/bs'
-import CollegeResult from './components/CollegeResult'
 import Footer from './components/Footer/Footer'
 import Image from 'next/image'
 import Link from 'next/link'
 import Navbar from './components/Navbar/Navbar'
+import SearchBar from '../components/SearchBar'
 import bacpacTitle from '../assets/bacpacTitle.png'
 import bookImgLogo from '../assets/bookimg.png'
+import client from '../client'
 import discord from '../assets/discordLog.png'
-import universityData from '../../data/university_data'
-import { useState } from 'react'
-import SearchBar from '../components/SearchBar'
+import { query } from '../queries/queries'
 
 export default function Home() {
-  const [open, setOpen] = useState(false)
-  const [searchData, setSearchData] = useState([])
-  function handleSearch(e) {
-    let input = e.target.value.toLowerCase()
-    const filterData = universityData
-      .filter((item) => {
-        let collegeName = item.name.toLowerCase()
-        let collegeAddress = item.address.toLowerCase()
-        return collegeName.includes(input) || collegeAddress.includes(input)
-      })
-      .sort((a, b) => b.score - a.score)
-    setOpen(input.length !== 0)
-    setSearchData(filterData)
+  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.log('Error fetching data:', error)
+    } finally {
+      setLoading(false)
+    }
   }
+  useEffect(() => {
+    fetchData()
+  }, [])
   return (
     <div className="home">
       <Navbar />
       <main className="flex h-full w-full flex-col items-center justify-start max-h-full bg-[#ffffff]">
         <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

@@ -0,0 +1,12 @@
+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, fetch }),
+  cache: new InMemoryCache(),
+})
+
+export default client

src/components/SearchBar.js

@@ -1,22 +1,20 @@
-import { useState } from 'react'
 import { AiOutlineSearch } from 'react-icons/ai'
 import CollegeResult from '../app/components/CollegeResult'
-import searchAlgorithm from '@/utils/searchAlgorithm'
-const SearchBar = ({ data }) => {
+import searchAlgorithm from '../utils/searchAlgorithm'
+import { useState } from 'react'
+
+const SearchBar = ({ data, loading }) => {
   const [open, setOpen] = useState(false)
   const [filterData, setFilterData] = useState([])
-
   const handleSearch = (e) => {
     let input = e.target.value.trim().toLowerCase()
-    const filterData = searchAlgorithm(input)
+    const filterData = searchAlgorithm(input, data).sort((a, b) => b.score - a.score)
     setOpen(input.length !== 0)
     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
+    }
+  }
+`

src/utils/searchAlgorithm.js

@@ -1,7 +1,10 @@
 import { matchSorter } from 'match-sorter'
-import colleges from '../../data/university_data.json'
 
-const searchAlgorithm = (input) => {
-  return matchSorter(colleges, input, { keys: ['name', 'address'] })
+const searchAlgorithm = (input, data) => {
+  if (input && data) {
+    return matchSorter(data, input, { keys: ['name', 'country', 'city'] })
+  } else {
+    return []
+  }
 }
 export default searchAlgorithm