Skip to content

Commit

Permalink
search implemented (#660)
Browse files Browse the repository at this point in the history 
* search implemented

* group fix

* Delete app/backend/src/main/resources/application.properties

---------

Co-authored-by: Ömer Talip Akalın <[email protected]>
  • Loading branch information
@nikodrates @otaliptus
nikodrates and otaliptus authored Dec 25, 2023
1 parent 9662651 commit fda2052
Show file tree
Hide file tree
Showing 7 changed files with 204 additions and 43 deletions.
21 changes: 0 additions & 21 deletions app/backend/src/main/resources/application.properties
View file

This file was deleted.

8 changes: 4 additions & 4 deletions app/frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,16 @@ import { ForumPage } from './pages/ForumPage'
import { PostPage } from './pages/PostPage'
import { NextUIProvider } from '@nextui-org/react'
import { GameForum } from './pages/GameForum'
import { LfgPage } from "./pages/LfgPage";
import Lfg from "./pages/LfgPage/Lfg";
import { LfgPage } from './pages/LfgPage'
import Lfg from './pages/LfgPage/Lfg'
import { AdminPanel } from './pages/AdminPanel'

import Search from './pages/Search/Search'
const App = () => (
<NextUIProvider disableBaseline='true'>
<BrowserRouter>
<Routes>
<Route exact path='/' element={<HomePage />} />
<Route exact path='/search' element={<Search />} />
<Route path='/login' element={<Login />} />
<Route path='/users/:username' element={<ProfilePage />} />
<Route path='/forgot-password' element={<ForgotPassword />} />
Expand All @@ -36,4 +37,3 @@ const App = () => (
)

export default App

38 changes: 37 additions & 1 deletion app/frontend/src/components/navbar/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import logo from '../../gamelounge.png'
import { getAllSearch } from '../../services/searchService.js'
import {getUserInfoBySessionId} from "../../services/userService";
const Navbarx = () => {
const api_url = process.env.REACT_APP_API_URL
Expand Down Expand Up @@ -97,7 +98,31 @@ const Navbarx = () => {
if (isAdmin) {
setIsAdmin(true)
}
}, [])
}, [])
const [searchResults, setSearchResults] = useState([])
const [searchQuery, setSearchQuery] = useState('')
const navigateToSearch = (result) => {
// Use the 'navigate' function from 'react-router-dom' to navigate to the Search component
navigate('/search', { state: { searchData: result } })
}
const handleSearch = async () => {
try {
const response = await getAllSearch(searchQuery)

if (response.status === 200) {
setSearchResults(response.data)
console.log(searchResults)
navigateToSearch(response.data)
}
} catch (error) {
console.error(error)
}
}

const handleInputChange = (e) => {
setSearchQuery(e.target.value)
// Trigger search when the user stops typing for 300 milliseconds
}

useEffect(() => {
const fetchUserInfo = async () => {
Expand Down Expand Up @@ -161,6 +186,12 @@ const Navbarx = () => {
size='sm'
startContent={<SearchIcon size={18} />}
type='search'
onChange={handleInputChange}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleSearch()
}
}}
/>
{isLoggedIn ? (
<Dropdown placement='bottom-end' justify='end'>
Expand Down Expand Up @@ -194,6 +225,11 @@ const Navbarx = () => {
size='sm'
startContent={<SearchIcon size={18} />}
type='search'
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleSearch()
}
}}
/>
</DropdownItem>
) : null}
Expand Down
38 changes: 21 additions & 17 deletions app/frontend/src/pages/HomePage/Group.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import React from 'react';
import React from 'react'

const Group = ({ item }) => {
return (
<div className="card compact bg-neutral-200 text-neutral-800 shadow-xl m-2">
<figure className="px-4 pt-4">
<img src={item.image} alt="Group" className="rounded-lg h-20 w-20 object-cover" />
</figure>
<div className="card-body">
<h2 className="card-title text-neutral-700">{item.header}</h2>
<p className="text-xs">{item.text}</p>
<div className="flex justify-between items-center text-xs">
<span>Players: {item.players}</span>
<button className="btn bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646] btn-sm">Join</button>
</div>
</div>
</div>
);
return (
<div className='card compact bg-neutral-200 text-neutral-800 shadow-xl m-2'>
<figure className='px-4 pt-4'>
<img src={item.profilePicture} alt='Group' className='rounded-lg h-20 w-20 object-cover' />
</figure>
<div className='card-body'>
<h2 className='card-title text-neutral-700'>{item.title}</h2>
<p className='text-xs'>{item.text}</p>
<div className='flex justify-between items-center text-xs'>
<span>
Players: {item.totalMembers}/{item.memberCapacity}
</span>
<button className='btn bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646] btn-sm'>
Join
</button>
</div>
</div>
</div>
)
}

export default Group;
export default Group
127 changes: 127 additions & 0 deletions app/frontend/src/pages/Search/Search.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import Game from '../HomePage/Game'
import Group from '../HomePage/Group'
import Post from '../HomePage/Post'
import Navbarx from '../../components/navbar/Navbar'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
export default function Search() {
const location = useLocation()
const searchData = location.state && location.state.searchData
console.log(searchData)
const [gamesData, setGamesData] = useState([])
const [postData, setPostData] = useState([])
const [groupData, setGroupData] = useState([])

useEffect(() => {
const fetchGames = async () => {
try {
setGamesData(searchData.gameResults)
} catch (error) {
console.log(error)
}
}
const fetchPosts = async () => {
try {
setPostData(searchData.postResults)
} catch (error) {
console.log(error)
}
}
const fetchGroup = async () => {
try {
setGroupData(searchData.lfgResults)
} catch (error) {
console.log(error)
}
}

fetchPosts()
fetchGames()
fetchGroup()
}, [searchData])

// const postData = [
// {
// image: `https://primefaces.org/cdn/primereact/images/product/game-controller.jpg}`,
// header: 'Resident Evil 4 Remake',
// content:
// "Looking for someone to join me in my Resident Evil 4 adventure! Let's team up and face the horrors together.️ #ResidentEvil4 #GamingBuddyWanted",
// date: '29.10.2023 00.00'
// },
// {
// image: 'https://primefaces.org/cdn/primereact/images/product/game-controller.jpg',
// header: 'Fifa',
// content:
// 'FIFA is one of the most popular football simulation games developed by EA Sports. It offers an immersive gaming experience with realistic graphics, player mechanics, and stadiums.',
// date: '29.10.2023 00.00'
// },
// {
// image: `https://primefaces.org/cdn/primereact/images/product/game-controller.jpg}`,
// header: 'The Witcher 3: Wild Hunt',
// content:
// "The Witcher 3 is an unforgettable gaming experience. Its open world, rich storytelling, and captivating characters make it a must-play RPG. If you love epic adventures, this one's a masterpiece.",
// date: '29.10.2023 00.00'
// }
// ]

console.log(postData)

return (
<>
<Navbarx></Navbarx>
<div className='flex flex-row grow bg-neutral-100 justify-center items-center'>
{/* Make elements flex, these will be in a row */}
{/* <div className='w-1/5 flex flex-col gap-4'> */}
{/* Take 1/5 width of the screen, flex elements in a column, add gap between elements */}
{/* </div> */}
<div className='flex flex-col gap-4 ml-12 mr-12'>
{/* Take 4/5 width of the screen, flex elements in a column, add gap between elements */}

<div className='flex flex-row mx-4'>
{/* Flex elements in a row, add margin on the left and right */}
<div className='flex flex-col w-1/3 ml-12 mr-12 pb-8'>
<div className='flex w-full items-center justify-center mt-4'>
<h1>
<b>Games</b>
</h1>
</div>
{/* Take 1/2 width of the screen, flex elements in a column, add margin on the left and right */}
<div>
{gamesData
.filter((game) => game.status === 'APPROVED')
.map((game) => (
<Game key={game.gameId} game={game} />
))}
</div>
</div>
<div className='flex flex-col w-1/3 ml-12 mr-12 pb-8'>
<div className='flex w-full items-center justify-center mt-4'>
<h1>
<b>Groups</b>
</h1>
</div>
{/* Take 1/2 width of the screen, flex elements in a column, add margin on the left and right */}
{groupData.map((item, key) => (
<Group item={item} key={key} />
))}
</div>

<div className='flex flex-col w-1/3 ml-12 mr-12 pb-8'>
<div className='flex w-full items-center justify-center mt-4'>
<h1>
<b>Posts</b>
</h1>
</div>
{postData.map((post) => (
<Post key={post.postId} post={post} />
))}
</div>
</div>
</div>
</div>
<div className='bg-black text-white text-center p-8'>
<p className='text-m'>@2023 Game Lounge, All rights reserved.</p>
</div>
</>
)
}
1 change: 1 addition & 0 deletions app/frontend/src/pages/Search/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as Search } from './Search'
14 changes: 14 additions & 0 deletions app/frontend/src/services/searchService.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import axios from 'axios'

const axiosInstance = axios.create({
baseURL: process.env.REACT_APP_API_URL
})

axiosInstance.defaults.withCredentials = true

export const getAllSearch = (search) => {
const url = `/search/all?query=${search}`
return axiosInstance.get(url, {
withCredentials: true
})
}

0 comments on commit fda2052

Please sign in to comment.