Index: components/BuildCard.tsx =================================================================== --- components/BuildCard.tsx (revision 6ce67397d2c78df0968f51f75185de688968b04a) +++ components/BuildCard.tsx (revision 387083452a874472599c1fd728bdeea99bf1c966) @@ -1,36 +1,79 @@ -import React from 'react'; -import { Card, CardMedia, CardContent, Typography, Box, Chip } from '@mui/material'; +import React, {useEffect, useState} from 'react'; +import {Card, CardContent, CardMedia, Typography, Box, Chip} from '@mui/material'; import StarIcon from '@mui/icons-material/Star'; -// import PersonIcon from '@mui/icons-material/Person'; +import {onGetBuildDetails} from "../pages/+Layout.telefunc"; -export default function BuildCard({ build, onClick }: { build: any, onClick: () => void }) { - const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR' }).format(build.total_price || 0); +export default function BuildCard({build, onClick}: { build: any, onClick?: () => void }) { + const [caseImage, setCaseImage] = useState("https://placehold.co/600x400?text=PC+Build"); + const [imageLoading, setImageLoading] = useState(true); + + const formattedPrice = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'EUR' + }).format(build.total_price || 0); + + useEffect(() => { + onGetBuildDetails({buildId: build.id}) + .then(details => { + const caseComponent = details.components.find((c: any) => c.type === 'case'); + setCaseImage(caseComponent?.imgUrl || caseComponent?.imgUrl || "https://placehold.co/600x400?text=PC+Build"); + }) + .catch(() => { + }) + .finally(() => setImageLoading(false)); + }, [build.id]); return ( - - - - {build.name} - + + + - {/*Ne se renderira user-ot*/} - - {/* */} - {/* {build.user || 'Unknown'}*/} + + + + {build.name} + - - - - + + + + {Number(build.avgRating || 5).toFixed(1)} Index: components/BuildDetailsDialog.tsx =================================================================== --- components/BuildDetailsDialog.tsx (revision 6ce67397d2c78df0968f51f75185de688968b04a) +++ components/BuildDetailsDialog.tsx (revision 387083452a874472599c1fd728bdeea99bf1c966) @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { - Dialog, DialogTitle, DialogContent, Button, Grid, Box, Typography, - IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip + Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid, Box, Typography, + IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip, Alert } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; @@ -9,12 +9,14 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; import PersonIcon from "@mui/icons-material/Person"; -import { onGetBuildDetails, onSetReview, onToggleFavorite } from '../pages/+Layout.telefunc'; +import {onGetBuildDetails, onSetReview, onToggleFavorite, onCloneBuild, onSetRating} from '../pages/+Layout.telefunc'; const formatPrice = (price: any) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(Number(price) || 0); -export default function BuildDetailsDialog({ open, buildId, onClose, onClone, currentUser }: any) { +export default function BuildDetailsDialog({ open, buildId, onClose, currentUser }: any) { const [details, setDetails] = useState(null); const [loading, setLoading] = useState(false); const [tabIndex, setTabIndex] = useState(0); + const [cloneDialogOpen, setCloneDialogOpen] = useState(false); + const [cloningBuildId, setCloningBuildId] = useState(null); const [reviewText, setReviewText] = useState(""); @@ -45,7 +47,15 @@ const handleSubmitReview = async () => { if (!currentUser) return alert("Please login to review."); - await onSetReview({ buildId, content: reviewText }); - - setReviewText(""); + + await onSetReview({ + buildId, + content: reviewText, + // rating: ratingVal + }); + + await onSetRating({ + buildId, + value: ratingVal + }) const refreshed = await onGetBuildDetails({ buildId }); @@ -53,158 +63,204 @@ }; + const handleCloneConfirm = async () => { + if (!cloningBuildId) return; + + try { + const newBuildId = await onCloneBuild({ buildId: cloningBuildId }); + + window.location.href = `/forge?buildId=${newBuildId}`; + + setCloneDialogOpen(false); + setCloningBuildId(null); + } catch (e) { + alert("Failed to clone build. Please try again."); + } + }; + + if (!open) return null; - // @ts-ignore return ( - - {loading || !details ? ( - Loading Forge Schematics... - ) : ( - <> - - - {details.name} - - - - by {details.creator} - - + <> + + {loading || !details ? ( + Loading Forge Schematics... + ) : ( + <> + + + {details.name} + + + + by {details.creator} + + + - - - - - - - setTabIndex(v)}> - - - - - - - {tabIndex === 0 && ( - - - - - {details.components.map((comp: any) => ( - - - - {comp.type?.substring(0, 3)?.toUpperCase()} - - - - - {comp.type} - - - {comp.brand} {comp.name} - - - - {formatPrice(comp.price)} + + + + + + setTabIndex(v)}> + + + + + + + {tabIndex === 0 && ( + + +
+ + {details.components.map((comp: any) => ( + + + + {comp.type?.substring(0, 3)?.toUpperCase()} + + + + + {comp.type} + + + {comp.brand} {comp.name} + + + + {formatPrice(comp.price)} + + + ))} + + TOTAL + + {formatPrice(details.totalPrice)} - ))} - - TOTAL - - {formatPrice(details.totalPrice)} - - - -
+ + + + + + + Builder's Notes + + "{details.description || "No notes provided."}" + + + + + + + + - - - - Builder's Notes - - "{details.description || "No notes provided."}" - + )} + + {tabIndex === 1 && ( + + + {details.ratingStatistics.averageRating.toFixed(1)} + + + {details.ratingStatistics.ratingCount} ratings + - - - - - - - )} - - {tabIndex === 1 && ( - - - {details.ratingStatistics.averageRating.toFixed(1)} - - - {details.ratingStatistics.ratingCount} ratings + {currentUser && details.userId !== currentUser.id && ( + + Your Review + + setRatingVal(v || 5)} /> + + setReviewText(e.target.value)} + sx={{ mb: 1 }} + /> + + + )} + + {currentUser && details.userId === currentUser.id && ( + + You cannot rate your own builds. + + )} + + + {details.reviews.map((rev: any, i: number) => ( + + + {rev.username} + {rev.createdAt} + + {rev.content} + + ))} + {details.reviews.length === 0 && ( + No reviews yet. Be the first! + )} - - {currentUser && ( - - Your Review - - setRatingVal(v || 5)} /> - - setReviewText(e.target.value)} - sx={{ mb: 1 }} - /> - - - )} - - - {details.reviews.map((rev: any, i: number) => ( - - - {rev.username} - {rev.createdAt} - - {rev.content} - - ))} - {details.reviews.length === 0 && ( - No reviews yet. Be the first! - )} - - - )} - - - - )} - + )} + + + + )} + + + setCloneDialogOpen(false)}> + Clone Build + + + This will create a copy of "{details?.name}" in your Forge so you can edit it. + All components will be copied over. + + + + + + + + ); } Index: components/ComponentDetailsDialog.tsx =================================================================== --- components/ComponentDetailsDialog.tsx (revision 6ce67397d2c78df0968f51f75185de688968b04a) +++ components/ComponentDetailsDialog.tsx (revision 387083452a874472599c1fd728bdeea99bf1c966) @@ -33,7 +33,23 @@ const renderValue = (key: string, val: any) => { if (Array.isArray(val)) { - if (val.length > 0 && typeof val[0] === 'object') { - return val.map((v: any) => v.formFactor || v.socket || JSON.stringify(v)).join(', '); + if (val.length === 0) return 'None'; + + if (typeof val[0] === 'string') { + return val.join(', '); } + + if (typeof val[0] === 'object') { + const parts = val + .map((v: any) => + v.socket || + v.formFactor || + v.name || + v.type || + Object.values(v)[0] + ) + .filter(Boolean); + return parts.length > 0 ? parts.join(', ') : 'None'; + } + return val.join(', '); } @@ -42,5 +58,4 @@ const lowerKey = key.toLowerCase(); - // Dodava merni edinici vo zavisnost koja komponenta e if (lowerKey.includes('capacity') || lowerKey.includes('vram') || lowerKey === 'memory') { return `${strVal} GB`; @@ -58,4 +73,5 @@ return `${strVal} GHz`; } + if (lowerKey.includes('speed')) { return `${strVal} MHz`; Index: components/ComponentDialog.tsx =================================================================== --- components/ComponentDialog.tsx (revision 6ce67397d2c78df0968f51f75185de688968b04a) +++ components/ComponentDialog.tsx (revision 387083452a874472599c1fd728bdeea99bf1c966) @@ -1,27 +1,57 @@ import React, {useEffect, useState} from 'react'; import { - Dialog, DialogContent, IconButton, Grid, Box, Typography, + Dialog, DialogContent, IconButton, Box, Typography, Chip, Slider, FormControl, InputLabel, Select, MenuItem, Checkbox, ListItemText, - Card, CardContent, CardMedia, Button, CircularProgress, Divider, AppBar, Toolbar + Card, CardContent, CardMedia, Button, CircularProgress, AppBar, Toolbar, InputAdornment, TextField, + TextField as MuiTextField, DialogTitle, DialogActions, Snackbar, Alert } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; -import FilterListIcon from '@mui/icons-material/FilterList'; -import SortIcon from '@mui/icons-material/Sort'; - -import {onGetAllComponents} from '../pages/+Layout.telefunc'; +import AddCircleIcon from '@mui/icons-material/AddCircle'; + +import {onGetAllComponents, onGetAuthState, onSuggestComponent} from '../pages/+Layout.telefunc' +import {onGetCompatibleComponents} from '../pages/forge/forge.telefunc'; import ComponentDetailsDialog from "./ComponentDetailsDialog"; - -const formatMoney = (amount: number) => `$${amount}`; - -export default function ComponentBrowserDialog({open, category, onClose}: any) { +import SearchIcon from "@mui/icons-material/Search"; + +const formatMoney = (amount: number) => `$${Number(amount).toFixed(2)}`; + +export default function ComponentDialog({open, category, onClose, mode, onSelect, currentBuildId}: any) { const [components, setComponents] = useState([]); const [loading, setLoading] = useState(false); - const [selectedComponent, setSelectedComponent] = useState(null); const [priceRange, setPriceRange] = useState([0, 2000]); const [selectedBrands, setSelectedBrands] = useState([]); const [availableBrands, setAvailableBrands] = useState([]); - const [sortOrder, setSortOrder] = useState('default'); + + const [tempSearchQuery, setTempSearchQuery] = useState(""); + const [searchQuery, setSearchQuery] = useState(""); + + const [suggestOpen, setSuggestOpen] = useState(false); + const [suggestForm, setSuggestForm] = useState({ + link: '', + description: '', + componentType: category || '' + }); + const [suggestLoading, setSuggestLoading] = useState(false); + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState(""); + const [userId, setUserId] = useState(null); + + useEffect(() => { + const timeoutId = setTimeout(() => { + setSearchQuery(tempSearchQuery); + }, 300); + return () => clearTimeout(timeoutId); + }, [tempSearchQuery]); + + // Load user auth + useEffect(() => { + if (open) { + onGetAuthState().then(userData => { + setUserId(userData.userId); + }); + } + }, [open]); useEffect(() => { @@ -30,23 +60,85 @@ setSortOrder('price_desc'); - onGetAllComponents({componentType: category}) + const shouldUseCompatibility = mode === 'forge' && currentBuildId; + const fetcher = shouldUseCompatibility + ? onGetCompatibleComponents({ + buildId: currentBuildId, + componentType: category, + limit: 100, + sort: 'price_desc' + }) + : onGetAllComponents({ + componentType: category, + limit: 100, + sort: 'price_desc' + }); + + fetcher .then((data) => { - setComponents(data); - - const brands = Array.from(new Set(data.map((c: any) => c.brand))); + const comps = data || []; + setComponents(comps); + + const brands = Array.from(new Set(comps.map((c: any) => c.brand))); setAvailableBrands(brands as string[]); - - const maxPrice = data.length > 0 ? Math.max(...data.map((c: any) => Number(c.price))) : 2000; + const maxPrice = comps.length > 0 ? Math.max(...comps.map((c: any) => Number(c.price))) : 2000; setPriceRange([0, Math.ceil(maxPrice)]); }) - .catch(console.error) + .catch((err) => { + console.error('[Dialog] fetch error:', err); + setComponents([]); + }) .finally(() => setLoading(false)); } - }, [open, category]); + }, [open, category, mode, currentBuildId]); + + const handleSuggestChange = (e: React.ChangeEvent) => { + setSuggestForm({ + ...suggestForm, + [e.target.name]: e.target.value + }); + }; + + const submitSuggestion = async () => { + if (!userId) { + setSnackbarMessage("Please login to submit suggestions!"); + setSnackbarOpen(true); + return; + } + + if (!suggestForm.link || !suggestForm.description) { + setSnackbarMessage("Please fill in all fields!"); + setSnackbarOpen(true); + return; + } + + setSuggestLoading(true); + try { + const suggestionId = await onSuggestComponent({ + link: suggestForm.link, + description: suggestForm.description, + componentType: suggestForm.componentType + }); + + setSnackbarMessage("Suggestion submitted! Admin will review it."); + setSnackbarOpen(true); + setSuggestOpen(false); + setSuggestForm({link: '', description: '', componentType: category || ''}); + } catch (error) { + console.error('Suggestion error:', error); + setSnackbarMessage("Failed to submit suggestion. Try again."); + setSnackbarOpen(true); + } finally { + setSuggestLoading(false); + } + }; let processedComponents = components.filter(comp => { const matchesBrand = selectedBrands.length === 0 || selectedBrands.includes(comp.brand); const matchesPrice = Number(comp.price) >= priceRange[0] && Number(comp.price) <= priceRange[1]; - return matchesBrand && matchesPrice; + const matchesSearch = searchQuery === "" || + comp.name.toLowerCase().includes(searchQuery.toLowerCase()) || + comp.brand.toLowerCase().includes(searchQuery.toLowerCase()); + + return matchesBrand && matchesPrice && matchesSearch; }); @@ -65,169 +157,280 @@ return ( - - - - - Browsing: {category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()} - - - - - - - - - - - - Sort By + <> + + + + + Browsing: {category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()} + {mode === 'forge' && currentBuildId && ( + + COMPATIBILITY MODE ON + + )} + + + + + + + + + + setTempSearchQuery(e.target.value)} + sx={{mb: 2}} + InputProps={{ + startAdornment: , + }} + /> + + + + Sort By + + + + + Brands + + + + Price Range + setPriceRange(v as number[])} min={0} max={2000} + sx={{color: '#ff8201'}}/> + + ${priceRange[0]} + ${priceRange[1]}+ + + {/*TO BE FINISHED*/} + - - Price - - - - - - - - Filters - - - Price Range - setPriceRange(newValue as number[])} - valueLabelDisplay="auto" - min={0} - max={components.length > 0 ? Math.max(...components.map(c => Number(c.price))) : 2000} - sx={{color: '#ff8201', mb: 2}} - /> - - {formatMoney(priceRange[0])} - {formatMoney(priceRange[1])} - - - - Brands - - - - - - {loading ? ( - - - - ) : ( - - {processedComponents.map((comp) => ( - - - - - - {comp.brand} - - + {loading ? ( + + + + ) : ( + + {processedComponents.map((comp) => ( + + + + + + + - {comp.name} - - - - + + + {comp.brand} + + + {comp.name} + + + {formatMoney(comp.price)} + + + + + {mode === 'forge' && onSelect && ( + + )} - - - - - - - ))} - {processedComponents.length === 0 && ( - - No components match. - - )} - - )} - - - setSelectedComponent(null)} - /> - + + + ))} + {processedComponents.length === 0 && ( + + + No compatible components found. + + {mode === 'forge' && ( + + (Try removing incompatible parts) + + )} + + )} + + )} + + + + setSelectedComponent(null)} + /> + + + setSuggestOpen(false)} maxWidth="sm" fullWidth> + Suggest a New Component + + + + + Category: {category?.toUpperCase()} + + + + + + + + + setSnackbarOpen(false)} + anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} + > + setSnackbarOpen(false)} sx={{width: '100%'}}> + {snackbarMessage} + + + ); }