Sacha GUERIN
5 months ago
committed by
GitHub
GitHub
10 changed files with 271 additions and 12 deletions
@ -0,0 +1,90 @@ |
|||||
|
import {getClient} from "../utils/database.js"; |
||||
|
|
||||
|
export async function search(req, res) { |
||||
|
try { |
||||
|
console.log(req.query); |
||||
|
const query = req.query.q; |
||||
|
const type = req.query.type || 'all'; |
||||
|
const offset = req.query.offset || 0; |
||||
|
const limit = req.query.limit || 20; |
||||
|
const client = await getClient(); |
||||
|
|
||||
|
|
||||
|
if (!query) { |
||||
|
return res.status(400).json({ message: "Query parameter 'q' is required" }); |
||||
|
} |
||||
|
|
||||
|
if (type === 'videos') { |
||||
|
// Search video in database based on the query, video title, tags and author
|
||||
|
const videoNameQuery = `SELECT id FROM videos WHERE title ILIKE $1 OFFSET $3 LIMIT $2`; |
||||
|
const videoNameResult = await client.query(videoNameQuery, [`%${query}%`, limit, offset]); |
||||
|
|
||||
|
// Search video from tags
|
||||
|
const tagQuery = `SELECT id FROM tags WHERE name ILIKE $1 OFFSET $3 LIMIT $2`; |
||||
|
const tagResult = await client.query(tagQuery, [`%${query}%`, limit, offset]); |
||||
|
const tags = tagResult.rows.map(tag => tag.name); |
||||
|
|
||||
|
for (const tag of tags) { |
||||
|
const videoTagQuery = `SELECT id FROM videos WHERE id IN (SELECT video FROM video_tags WHERE tag = (SELECT id FROM tags WHERE name = $1)) OFFSET $3 LIMIT $2`; |
||||
|
const videoTagResult = await client.query(videoTagQuery, [tag, limit, offset]); |
||||
|
videoNameResult.rows.push(...videoTagResult.rows); |
||||
|
} |
||||
|
|
||||
|
// Search video from author
|
||||
|
const authorQuery = `SELECT videos.id FROM videos JOIN channels c ON videos.channel = c.id WHERE c.name ILIKE $1`; |
||||
|
const authorResult = await client.query(authorQuery, [`%${query}%`]); |
||||
|
|
||||
|
for (const author of authorResult.rows) { |
||||
|
if (!videoNameResult.rows.some(video => video.id === author.id)) { |
||||
|
videoNameResult.rows.push(author); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const videos = []; |
||||
|
|
||||
|
for (let video of videoNameResult.rows) { |
||||
|
video = video.id; // Extracting the video ID
|
||||
|
let videoDetails = {}; |
||||
|
|
||||
|
// Fetching video details
|
||||
|
const videoDetailsQuery = `SELECT id, title, description, thumbnail, channel, release_date FROM videos WHERE id = $1`; |
||||
|
const videoDetailsResult = await client.query(videoDetailsQuery, [video]); |
||||
|
if (videoDetailsResult.rows.length === 0) { |
||||
|
continue; // Skip if no video details found
|
||||
|
} |
||||
|
|
||||
|
videoDetails = videoDetailsResult.rows[0]; |
||||
|
// Setting the type
|
||||
|
videoDetails.type = 'video'; |
||||
|
|
||||
|
// Fetching views and likes
|
||||
|
const viewsQuery = `SELECT COUNT(*) AS view_count FROM history WHERE video = $1`; |
||||
|
const viewsResult = await client.query(viewsQuery, [video]); |
||||
|
videoDetails.views = viewsResult.rows[0].view_count; |
||||
|
|
||||
|
// GET CREATOR
|
||||
|
const creatorQuery = `SELECT c.id, c.name, c.owner FROM channels c JOIN videos v ON c.id = v.channel WHERE v.id = $1`; |
||||
|
const creatorResult = await client.query(creatorQuery, [video]); |
||||
|
videoDetails.creator = creatorResult.rows[0]; |
||||
|
|
||||
|
// GET CREATOR PROFILE PICTURE
|
||||
|
const profilePictureQuery = `SELECT picture FROM users WHERE id = $1`; |
||||
|
const profilePictureResult = await client.query(profilePictureQuery, [videoDetails.creator.owner]); |
||||
|
videoDetails.creator.profile_picture = profilePictureResult.rows[0].picture; |
||||
|
|
||||
|
videos.push(videoDetails); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
return res.status(200).json(videos); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error("Error in search controller:", error); |
||||
|
res.status(500).json({ message: "Internal server error" }); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
import { Router } from 'express'; |
||||
|
import {search} from "../controllers/search.controller.js"; |
||||
|
|
||||
|
const router = Router(); |
||||
|
|
||||
|
router.get('/', search) |
||||
|
|
||||
|
export default router; |
||||
|
After Width: | Height: | Size: 441 B |
@ -0,0 +1,142 @@ |
|||||
|
import Navbar from "../components/Navbar.jsx"; |
||||
|
import {useState} from "react"; |
||||
|
|
||||
|
|
||||
|
export default function Account() { |
||||
|
|
||||
|
let user = JSON.parse(localStorage.getItem("user")) || {}; |
||||
|
|
||||
|
const [username, setUsername] = useState(user.username || ""); |
||||
|
const [email, setEmail] = useState(user.email || ""); |
||||
|
const [password, setPassword] = useState(""); |
||||
|
const [confirmPassword, setConfirmPassword] = useState(""); |
||||
|
const [isPictureEditActive, setIsPictureEditActive] = useState(false); |
||||
|
|
||||
|
const [userChannel, setUserChannel] = useState(null); |
||||
|
|
||||
|
const fetchUserChannel = async () => { |
||||
|
try { |
||||
|
const response = await fetch(`/api/channels/${user.id}`); |
||||
|
if (!response.ok) { |
||||
|
throw new Error("Failed to fetch user data"); |
||||
|
} |
||||
|
const data = await response.json(); |
||||
|
setUserChannel(data); |
||||
|
} catch (error) { |
||||
|
console.error("Error fetching user channel:", error); |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const [editMode, setEditMode] = useState(false); |
||||
|
|
||||
|
const nonEditModeClasses = "text-2xl font-bold text-white p-2 focus:text-white focus:outline-none w-full font-montserrat"; |
||||
|
const editModeClasses = nonEditModeClasses + " glassmorphism"; |
||||
|
|
||||
|
return ( |
||||
|
<div className="min-w-screen min-h-screen bg-linear-to-br from-left-gradient to-right-gradient"> |
||||
|
<Navbar/> |
||||
|
|
||||
|
<main className="px-36 pt-[118px]"> |
||||
|
{/* Left side */} |
||||
|
|
||||
|
{/* Profile / Edit profile */} |
||||
|
<form className="glassmorphism w-1/3 p-10"> |
||||
|
<div className="relative w-1/3 aspect-square overflow-hidden mb-3 mx-auto" onMouseEnter={() => setIsPictureEditActive(true)} onMouseLeave={() => setIsPictureEditActive(false)} > |
||||
|
<label htmlFor="image"> |
||||
|
<img |
||||
|
src={user.picture} |
||||
|
className="w-full aspect-square rounded-full object-cover" |
||||
|
/> |
||||
|
<div className={`absolute w-full h-full bg-[#000000EF] flex items-center justify-center top-0 left-0 rounded-full ${(isPictureEditActive && editMode) ? "opacity-100 cursor-pointer" : "opacity-0 cursor-default"} ` } > |
||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" className="fill-white" viewBox="0 0 24 24"> |
||||
|
<path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path> |
||||
|
</svg> |
||||
|
</div> |
||||
|
</label> |
||||
|
<input type="file" accept="image/*" id="image" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" disabled={!editMode}/> |
||||
|
</div> |
||||
|
<label htmlFor="name" className="text-2xl text-white mb-1 block font-montserrat"> |
||||
|
Nom d'utilisateur |
||||
|
</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
id="name" |
||||
|
value={username} |
||||
|
className={(editMode ? editModeClasses : nonEditModeClasses)} |
||||
|
onChange={(e) => setUsername(e.target.value)} |
||||
|
placeholder="Nom d'utilisateur" |
||||
|
disabled={!editMode} |
||||
|
/> |
||||
|
|
||||
|
<label htmlFor="email" className="text-2xl text-white mb-1 mt-4 block font-montserrat"> |
||||
|
Adresse e-mail |
||||
|
</label> |
||||
|
<input |
||||
|
type="email" |
||||
|
id="email" |
||||
|
value={email} |
||||
|
className={(editMode ? editModeClasses : nonEditModeClasses)} |
||||
|
onChange={(e) => setEmail(e.target.value)} |
||||
|
placeholder="Adresse mail" |
||||
|
disabled={!editMode} |
||||
|
/> |
||||
|
|
||||
|
{ editMode && ( |
||||
|
<> |
||||
|
<label htmlFor="password" className="text-2xl text-white mb-1 mt-4 block font-montserrat"> |
||||
|
Mot de passe |
||||
|
</label> |
||||
|
<input |
||||
|
type="password" |
||||
|
id="password" |
||||
|
value={password} |
||||
|
className={(editMode ? editModeClasses : nonEditModeClasses)} |
||||
|
onChange={(e) => setPassword(e.target.value)} |
||||
|
placeholder="**************" |
||||
|
disabled={!editMode} |
||||
|
/> |
||||
|
|
||||
|
<label htmlFor="confirm-password" className="text-2xl text-white mb-1 mt-4 block font-montserrat"> |
||||
|
Confirmer le mot de passe |
||||
|
</label> |
||||
|
<input |
||||
|
type="password" |
||||
|
id="confirm-password" |
||||
|
value={confirmPassword} |
||||
|
className={(editMode ? editModeClasses : nonEditModeClasses)} |
||||
|
onChange={(e) => setConfirmPassword(e.target.value)} |
||||
|
placeholder="" |
||||
|
disabled={!editMode} |
||||
|
/> |
||||
|
</> |
||||
|
) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
<div className="flex justify-center mt-5"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer" |
||||
|
onClick={() => setEditMode(!editMode)} |
||||
|
> |
||||
|
{editMode ? "Enregistrer" : "Modifier le profil"} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
|
||||
|
{ /* Right side */} |
||||
|
|
||||
|
{/* Channel */} |
||||
|
|
||||
|
{/* Playlists */} |
||||
|
|
||||
|
{/* History */} |
||||
|
|
||||
|
</main> |
||||
|
|
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue