BacPacNet · bacpactech · May 4, 2024 · Apr 30, 2024 · May 1, 2024 · May 2, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,14 +21,13 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prettier": "npx prettier . --check",
+    "prettier-write": "prettier . --write",
     "chromatic": "chromatic --exit-zero-on-changes",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@apollo/client": "^3.10.0-rc.0",
-    "@apollo/experimental-nextjs-app-support": "^0.9.2",
-    "@apollo/server": "^4.9.5",
     "@as-integrations/next": "^2.0.2",
+    "@tanstack/react-query": "^5.32.0",
     "@tsparticles/engine": "^3.3.0",
     "@tsparticles/react": "^3.0.0",
     "@types/node": "^20.10.5",
@@ -37,6 +36,7 @@
     "aos": "^2.3.4",
     "apollo-datasource-mongodb": "^0.6.0",
     "autoprefixer": "10.4.16",
+    "axios": "^1.6.8",
     "cors": "^2.8.5",
     "cross-fetch": "^4.0.0",
     "dotenv": "^16.3.1",
@@ -73,6 +73,7 @@
     "@storybook/nextjs": "^7.4.4",
     "@storybook/react": "^7.4.4",
     "@storybook/testing-library": "^0.2.1",
+    "@tanstack/eslint-plugin-query": "^5.28.11",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/aos": "^3.0.7",

diff --git a/src/__tests__/home.test.tsx b/src/__tests__/home.test.tsx
@@ -1,16 +1,16 @@
-import '@testing-library/jest-dom'
+// import '@testing-library/jest-dom'
 
-import SearchBar from '@/components/SearchBar'
-import { render } from '@testing-library/react'
+// import SearchBar from '@/components/SearchBar'
+// import { render } from '@testing-library/react'
 
-it('renders a search box', () => {
-  const mockData = [
-    { id: '1', name: 'College 1', score: '85', address: '...', collegePage: '...' },
-    { id: '2', name: 'College 2', score: '70', address: '...', collegePage: '...' },
-  ]
-  const { getByPlaceholderText } = render(<SearchBar data={mockData} loading={false} />)
+// it('renders a search box', () => {
+//   const mockData = [
+//     { id: '1', name: 'College 1', score: '85', address: '...', collegePage: '...' },
+//     { id: '2', name: 'College 2', score: '70', address: '...', collegePage: '...' },
+//   ]
+//   const { getByPlaceholderText } = render(<SearchBar data={mockData} loading={false} />)
 
-  const subject = getByPlaceholderText('Search institute')
+//   const subject = getByPlaceholderText('Search institute')
 
-  expect(subject).toBeInTheDocument()
-})
+//   expect(subject).toBeInTheDocument()
+// })
diff --git a/src/app/api/graphql/route.ts b/src/app/api/graphql/route.ts
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import './globals.css'
 import { Inter } from 'next/font/google'
 import type { Metadata } from 'next'
 import Navbar from '../components/Navbar/Navbar'
-import { ApolloWrapper } from '@/lib/apollo-provider'
+import { ReactQueryClientProvider } from '@/utils/Provider'
 
 type FontClassName = string
 
@@ -35,7 +35,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en">
       <body className={inter.className}>
         <Navbar />
-        <ApolloWrapper>{children}</ApolloWrapper>
+        <ReactQueryClientProvider>{children}</ReactQueryClientProvider>
       </body>
     </html>
   )

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -8,14 +8,11 @@ import SearchBar from '../components/SearchBar'
 import Section2 from '../components/Section-2/Section2'
 import Section3 from '../components/Section-3/Section3'
 import Sections from '../components/Sections/Sections'
-import { query } from '../queries/queries'
 import { motion } from 'framer-motion'
 import StarIcon from '../assets/stars.svg'
 import Image from 'next/image'
-import { useQuery } from '@apollo/experimental-nextjs-app-support/ssr'
 import DiscordIcon from '@assets/discord.svg'
 export default function Home() {
-  const { data, loading } = useQuery(query)
   const [searchOpen, setSearchOpen] = useState(false)
 
   const LANDING_PAGE_TEXT = ' Search universities worldwide and become part of their online communities'.split(' ')
@@ -42,7 +39,7 @@ export default function Home() {
               </motion.span>
             ))}
           </div>
-          <SearchBar data={(data as any)?.universityList} loading={loading} />
+          <SearchBar />
           <div className="flex flex-col items-center my-4">
             <div className="flex items-center mt-4  md:mt-16 gap-2">
               <div>

diff --git a/src/client.ts b/src/client.ts
diff --git a/src/components/CollegeResult.tsx b/src/components/CollegeResult.tsx
@@ -13,10 +13,10 @@ interface CollegeProps {
 const CollegeResult: React.FC<CollegeProps> = (props) => {
   return (
     <div className="college-result">
-      <Link href={{ pathname: '/college', query: { id: props.info.id } }} className="h-10 flex justify-center align-middle">
-        <div className="no w-1/6 flex justify-center align-middle text-black">{props.serialNo + 1}</div>
-        <div className="name w-4/5 flex justify-center align-middle text-black">{props.info.name}</div>
-        <div className="score w-1/6 flex justify-center align-middle text-black">{props.info.score}</div>
+      <Link href={{ pathname: '/college', query: { id: props?.info?.id } }} className="h-10 flex justify-center align-middle">
+        <div className="no w-1/6 flex justify-center align-middle text-black">{props?.serialNo + 1}</div>
+        <div className="name w-4/5 flex justify-center align-middle text-black">{props?.info?.name}</div>
+        <div className="score w-1/6 flex justify-center align-middle text-black">{props?.info?.score}</div>
       </Link>
     </div>
   )

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -3,9 +3,9 @@ import './SearchBar.css'
 import Image from 'next/image'
 import CollegeResult from '@components/CollegeResult'
 import SearchHistoryBox from '@components/SearchHistoryBox/SearchHistoryBox'
-import searchAlgorithm from '@/utils/searchAlgorithm'
 import searchIcon from '../assets/search-icon.svg'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useUniversitySearch } from '@/services/universitySearch'
 
 // search bar
 interface FilteredCollege {
@@ -16,27 +16,38 @@ interface FilteredCollege {
   country?: string
   collegePage?: string
 }
-interface SearchBarProps {
-  data: FilteredCollege[]
-  loading: boolean
-}
+// interface SearchBarProps {
+//   data: FilteredCollege[]
+//   loading: boolean
+// }
 interface College {
   id: string
   name: string
   score: string
 }
-const SearchBar: React.FC<SearchBarProps> = ({ data, loading }) => {
+const SearchBar = () => {
   const [open, setIsOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('')
   const [filterData, setFilterData] = useState<FilteredCollege[]>([])
   const [searchHistoryShown, setSearchHistoryShown] = useState(true)
 
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const { isLoading, data } = useUniversitySearch(searchTerm)
+  // console.log(data)
+
+  useEffect(() => {
+    if (data) {
+      setFilterData(data?.result)
+    }
+  }, [data])
+
+  const handleSearch = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const input = e.target.value.trim().toLowerCase()
-    const filterData = searchAlgorithm(input, data).sort((a, b) => +b.score - +a.score)
+    // const filterData = searchAlgorithm(input, data).sort((a, b) => +b.score - +a.score)
+    setSearchTerm(input)
     setIsOpen(input.length !== 0)
-    setFilterData(filterData)
     setSearchHistoryShown(false)
   }
+
   function handleSearchHistory() {
     if (!open) {
       // Only update history if the input is not already open
@@ -61,11 +72,17 @@ const SearchBar: React.FC<SearchBarProps> = ({ data, loading }) => {
       setSearchHistoryShown(false)
     }
   }
-  let searchResults: JSX.Element[] = filterData?.map((item, index) =>
-    searchHistoryShown ? <SearchHistoryBox info={item} serialNo={index} key={index} /> : <CollegeResult info={item} serialNo={index} key={index} />
-  )
-  if (!loading && searchResults.length === 0) searchResults = [<div key="no-results">No results found</div>]
-  if (loading) searchResults = [<div key="loading">Loading....</div>]
+  let searchResults: JSX.Element[] = Array.isArray(filterData)
+    ? filterData?.map((item, index) =>
+        searchHistoryShown ? (
+          <SearchHistoryBox info={item} serialNo={index} key={index} />
+        ) : (
+          <CollegeResult info={item} serialNo={index} key={index} />
+        )
+      )
+    : []
+  if (!isLoading && searchResults?.length === 0) searchResults = [<div key="no-results">No results found</div>]
+  if (isLoading) searchResults = [<div key="loading">Loading....</div>]
   return (
     <div className="w-full text-center relative mt-2 h-12 rounded-3xl">
       <div className="relative mt-2 rounded-md shadow-sm">

diff --git a/src/graphql/queries.ts b/src/graphql/queries.ts
diff --git a/src/graphql/resolvers.ts b/src/graphql/resolvers.ts
diff --git a/src/graphql/schema.ts b/src/graphql/schema.ts