V2 search university

src/app/(withLayout)/layout.tsx

@@ -1,3 +1,4 @@
+import Card from '@/components/atoms/Card'
 import UpcomingEvent from '@/components/molecules/UpcomingEvent'
 import LeftNavbar from '@/components/organisms/LeftNavbar'
 import Recommendations from '@/components/Timeline/Recommendations'
@@ -40,20 +41,30 @@ const recommendations = [
     affilation: '2nd Yr. Undergraduate, Psychology',
     avatar: '/timeline/avatar2.png',
   },
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar2.png',
+  },
 ]
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex gap-8 bg-surface-primary-50">
-      <div className="w-1/5 hidden md:block ">
-        <div className="fixed w-[288px] left-0 z-10 ">
+    <div className="flex gap-8 bg-surface-primary-50 px-4">
+      <div className="w-1/5 hidden lg:block ">
+        <div className="fixed w-1/5 left-0 z-10 ">
           <LeftNavbar />
         </div>
       </div>
-      <div className="lg:w-3/5 md:w-4/5 w-full ">{children}</div>
-      <div className="w-1/5 py-9 px-4 shadow-2xl bg-white hidden lg:block mt-1 h-auto">
-        <UpcomingEvent />
-        <Recommendations people={recommendations} />
+      <div className="lg:w-3/5 w-full ">{children}</div>
+      <div className="w-1/5 hidden lg:block ">
+        <div className="fixed w-1/5 right-0 z-10 overflow-y-auto ">
+          <Card className="h-with-navbar overflow-y-auto px-4">
+            <UpcomingEvent />
+            <Recommendations people={recommendations} />
+          </Card>
+        </div>
       </div>
     </div>
   )

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

@@ -0,0 +1,40 @@
+'use client'
+import Loading from '@/components/atoms/Loading'
+import { useUniversitySearch, useUniversitySearchByName } from '@/services/universitySearch'
+import { UniversityInfo } from '@/types/University'
+import ImagePlaceholder from '@assets/unibuzz-orange.png'
+import { useParams } from 'next/navigation'
+
+import React, { useEffect } from 'react'
+
+export default function UniversityProfile() {
+  const params = useParams()
+  const { id: universityName } = params
+  const { data: university, isLoading: isUniversityLoading } = useUniversitySearchByName(universityName as string)
+  if (isUniversityLoading) return <Loading />
+  return (
+    <div className="p-28 ">
+      <div className="flex gap-16">
+        <div className="flex-1">
+          <div className="flex items-center gap-9 py-4">
+            <div className="flex justify-center items-center p-6 drop-shadow-lg rounded-full bg-white">
+              <img
+                width={46}
+                height={46}
+                src={university?.logos?.[0] || (ImagePlaceholder as unknown as string)}
+                alt="logo"
+                className="max-w-full max-h-40 object-contain"
+              />
+            </div>
+
+            <p className="text-neutral-900 text-lg font-extrabold">{university?.name}</p>
+          </div>
+          <p className={`text-neutral-500 text-xs line-clamp-6`}>{university?.topUniInfo?.about}</p>
+        </div>
+        <div className="flex-1 flex justify-center">
+          <img className="rounded-lg max-w-full  object-contain" src={university?.images[0]} alt="university_image" />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/CollegeResult.tsx

@@ -2,21 +2,14 @@ import './CollegeResult.css'
 
 import Link from 'next/link'
 import ImagePlaceholder from '@assets/unibuzz-orange.png'
+import { UniversityInfo } from '@/types/University'
 
-interface CollegeProps {
-  university: {
-    id: string
-    name: string
-    score: string
-  }
-}
-const CollegeResult: React.FC<CollegeProps> = ({ university }: any) => {
-  console.log(university, 'universityuniversity')
+const CollegeResult = ({ university }: { university: UniversityInfo }) => {
   return (
     <div className="">
-      <Link href={{ pathname: '/college', query: { id: university?.id } }} className="py-2 px-4 flex items-center w-full justify-start">
+      <Link href={{ pathname: `/university/${university?.pathUrl}` }} className="py-2 px-4 flex items-center w-full justify-start">
         <div className="no w-1/6 flex justify-center align-middle text-black">
-          <img width={40} height={40} alt="logo" src={university?.logos[0] || ImagePlaceholder} />
+          <img width={40} height={40} alt="logo" src={university?.logos?.[0] || (ImagePlaceholder as unknown as string)} />
         </div>
         <div className=" w-4/5  text-black">{university?.name}</div>
         {/*<div className="score w-1/6 flex justify-center align-middle text-black">{university?.score}</div>*/}

src/components/SearchBar.tsx

@@ -6,6 +6,7 @@ import SearchHistoryBox from '@components/SearchHistoryBox/SearchHistoryBox'
 import searchIcon from '../assets/search-icon.svg'
 import { useEffect, useState } from 'react'
 import { useUniversitySearch } from '@/services/universitySearch'
+import { UniversityInfo } from '@/types/University'
 
 // search bar
 interface FilteredCollege {
@@ -28,7 +29,7 @@ interface College {
 const SearchBar = () => {
   const [open, setIsOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
-  const [filterData, setFilterData] = useState<FilteredCollege[]>([])
+  const [filterData, setFilterData] = useState<UniversityInfo[]>([])
   const [searchHistoryShown, setSearchHistoryShown] = useState(true)
 
   const { isLoading, data } = useUniversitySearch(searchTerm)
@@ -76,7 +77,6 @@ const SearchBar = () => {
           <SearchHistoryBox info={item} serialNo={index} key={index} />
         ) : (
           <div key={index}>
-            {' '}
             <CollegeResult university={item} />
           </div>
         )

src/components/SearchHistoryBox/SearchHistoryBox.tsx

@@ -2,19 +2,17 @@ import './SearchHistoryBox.css'
 
 import Link from 'next/link'
 import { MdAccessTime } from 'react-icons/md'
+import { UniversityInfo } from '@/types/University'
 
 interface SearchHistoryProps {
   serialNo: number
-  info: {
-    id: string
-    name: string
-    score: string
-  }
+  info: UniversityInfo
 }
 const SearchHistoryBox: React.FC<SearchHistoryProps> = (props) => {
+  console.log(props)
   return (
     <div className="history-box">
-      <Link href={{ pathname: '/college', query: { id: props.info.id } }} className="history-link flex items-center">
+      <Link href={{ pathname: '/college', query: { id: props.info._id } }} className="history-link flex items-center">
         <div className="history-icon">
           <MdAccessTime className="history-icon " />
         </div>

src/components/atoms/LogoNavbar/index.tsx

@@ -7,7 +7,7 @@ import sparkles from '@assets/sparkles.svg'
 import { MENU_LIST } from './constant'
 import LoginButton from '../LoginButton'
 import LoginButtons from '../LoginButtons'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import { useUniStore } from '@/store/store'
 import avatar from '@assets/avatar.svg'
 import { Skeleton } from '@/components/ui/Skeleton'
@@ -23,18 +23,20 @@ import MobileViewNavbar from '@/components/organism/MobileViewNavbar'
 import NotificationBox from '@/components/molecules/Notification'
 import MessageNotification from '@/components/molecules/MessageNotification'
 import { useGetMessageNotification, useGetNotification } from '@/services/notification'
+import useCookie from '@/hooks/useCookie'
 
 interface Props {
   showOnlyLogo?: boolean
 }
 
-const nonPaddingUrls = ['/', '/login', '/register', '/college']
+const nonPaddingUrls = ['/login', '/register', '/university']
 
 export default function LogoNavbar({ showOnlyLogo = false }: Props) {
   const pathname = usePathname()
-  const shouldPadding = nonPaddingUrls.includes(pathname)
-  //  const [cookieValue] = useCookie('uni_user_token')
-  const { userProfileData } = useUniStore()
+  const router = useRouter()
+  const shouldPadding = nonPaddingUrls.some((path) => pathname.includes(path)) || pathname === '/'
+  const { userProfileData, resetUserProfileData } = useUniStore()
+  const [, , deleteCookie] = useCookie('uni_user_token')
   const [isLogin, setIsLogin] = useState<boolean | undefined>(undefined)
   const { data: notificationData } = useGetNotification(3, true)
   const { data: messageNotificationData } = useGetMessageNotification(3, true)
@@ -43,6 +45,13 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
   const isUserLoggedIn = useCallback(() => {
     setIsLogin(!!userProfileData.users_id)
   }, [userProfileData])
+
+  const handleLogout = () => {
+    deleteCookie()
+    resetUserProfileData()
+    router.push('/login')
+  }
+
   useEffect(() => {
     isUserLoggedIn()
   }, [userProfileData, isUserLoggedIn])
@@ -124,7 +133,7 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
                       <p>Feedback</p>
                     </li>
                   </ul>
-                  <ul className="">
+                  <ul onClick={handleLogout} className="">
                     <li className="flex py-2 px-4 gap-2 items-center text-neutral-600 hover:bg-neutral-200 hover:cursor-pointer">
                       <TbLogout />
                       <p>Logout</p>
@@ -138,10 +147,12 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
       case false:
         return (
           <div className="pl-8 gap-4 flex">
-            <LoginButtons variant="border" className="text-xs">
+            <LoginButtons onClick={() => router.push('/register')} variant="border" className="text-xs">
               Sign Up
             </LoginButtons>
-            <LoginButton className="text-xs">Login</LoginButton>
+            <LoginButton onClick={() => router.push('/login')} className="text-xs">
+              Login
+            </LoginButton>
           </div>
         )
       default:
@@ -151,41 +162,43 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
 
   return (
     <div className="w-full h-[68px]">
-      <div
-        className={`${
-          shouldPadding ? 'px-4 lg:px-28' : 'px-4'
-        } w-ful w-full h-[68px]  mx-auto py-3 flex items-center justify-between bg-white fixed top-0`}
-      >
-        <div>
-          <Link className="flex gap-4 center-v" href="/">
-            <Image src={unibuzzLogo} alt="BACPAC LOGO" width={84} height={21} className="h-full cursor-pointer" />
-          </Link>
-        </div>
-        <MobileViewNavbar />
-        {!showOnlyLogo && (
-          <div className="items-center justify-between hidden lg:flex ">
-            <div className="flex gap-16 px-8">
-              {MENU_LIST.map((menu, index) => {
-                if (menu.name === 'UPGRADE') {
+      <div className="fixed w-full top-0 left-0 z-50">
+        <div
+          className={`${
+            shouldPadding ? 'px-4 lg:px-28' : 'px-4'
+          } w-ful w-full h-[68px]  mx-auto py-3 flex items-center justify-between bg-white fixed top-0`}
+        >
+          <div>
+            <Link className="flex gap-4 center-v" href="/">
+              <Image src={unibuzzLogo} alt="BACPAC LOGO" width={84} height={21} className="h-full cursor-pointer" />
+            </Link>
+          </div>
+          <MobileViewNavbar />
+          {!showOnlyLogo && (
+            <div className="items-center justify-between hidden lg:flex ">
+              <div className="flex gap-16 px-8">
+                {MENU_LIST.map((menu, index) => {
+                  if (menu.name === 'UPGRADE') {
+                    return (
+                      <div key={index} className="flex">
+                        <Link className="text-primary-500 text-xs" href={menu.path}>
+                          {menu.name}
+                        </Link>
+                        <Image className="ml-1" src={sparkles} alt="upgrade_icon" width={20} height={20} />
+                      </div>
+                    )
+                  }
                   return (
-                    <div key={index} className="flex">
-                      <Link className="text-primary-500 text-xs" href={menu.path}>
-                        {menu.name}
-                      </Link>
-                      <Image className="ml-1" src={sparkles} alt="upgrade_icon" width={20} height={20} />
-                    </div>
+                    <Link key={index} className="text-neutral-800 text-xs" href={menu.path}>
+                      {menu.name}
+                    </Link>
                   )
-                }
-                return (
-                  <Link key={index} className="text-neutral-800 text-xs" href={menu.path}>
-                    {menu.name}
-                  </Link>
-                )
-              })}
+                })}
+              </div>
+              <div className=" flex border-l-[1px] border-neutral-200">{renderProfile()}</div>
             </div>
-            <div className=" flex border-l-[1px] border-neutral-200">{renderProfile()}</div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     </div>
   )

src/components/molecules/PostContainerPostTypeSelector/index.tsx

@@ -7,15 +7,14 @@ const PostContainerPostTypeSelector = () => {
   const [selectedType, setSelectedType] = useState<string>('RECENT')
 
   return (
-    <div className="flex h-16 bg-white mt-5 rounded-t-2xl border-b-2 border-neutral-200 ">
+    <div className="flex h-16 bg-white rounded-t-2xl border-b-2 border-neutral-200 ">
       {PostType.map((item) => (
         <button
           onClick={() => setSelectedType(item)}
           key={item}
           className={`relative w-28 px-4 py-2 ${selectedType === item ? 'text-[#3A169C]' : 'text-gray-500 text-neutral-400'} font-extrabold `}
         >
           {item}
-          {selectedType === item && <span className="absolute left-1/4 bottom-3 w-14 h-[2px] bg-[#6744FF]"></span>}
         </button>
       ))}
     </div>

src/components/molecules/UniversitySearchBox/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 import CollegeResult from '@/components/CollegeResult'
-import UserListItemSkeleton from '@/components/Connections/UserListItemSkeleton'
 import { Skeleton } from '@/components/ui/Skeleton'
 import { useUniversitySearch } from '@/services/universitySearch'
 import { useState } from 'react'
@@ -36,10 +35,8 @@ export default function UniversitySearchBox() {
         universities.result.length > 0 && (
           <div className="absolute mt-2 w-full bg-white border border-neutral-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
             {universities.result.map((university: any, index: number) => (
-              <div key={university.id} className=" bg-white rounded-lg hover:bg-gray-100 border-b border-neutral-200 last:border-b-0 text-black">
+              <div key={university?.id} className=" bg-white rounded-lg hover:bg-gray-100 border-b border-neutral-200 last:border-b-0 text-black">
                 <CollegeResult university={university} />
-                {/*<h3 className="text-lg font-semibold">{university.name}</h3>
-                <p className="text-sm">{university.country}</p>*/}
               </div>
             ))}
           </div>