Context Navigation

source: components/BuildDetailsDialog.tsx@ 1b5c18b

main

Last change on this file since 1b5c18b was 41a2f81, checked in by Mihail <mihail2.naumov@…>, 6 months ago
Added mini photos for components
Property mode set to `100644`
File size: 19.2 KB

Rev	Line
[958bc89]	1	import React, {useEffect, useState} from 'react';
[1bf6e1f]	2	import {
[8a7f936]	3	Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid, Box, Typography,
	4	IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip, Alert
[1bf6e1f]	5	} from '@mui/material';
	6	import CloseIcon from '@mui/icons-material/Close';
	7	import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
	8	import FavoriteIcon from '@mui/icons-material/Favorite';
	9	import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
	10	import PersonIcon from "@mui/icons-material/Person";
[8a7f936]	11	import {onGetBuildDetails, onSetReview, onToggleFavorite, onCloneBuild, onSetRating} from '../pages/+Layout.telefunc';
[b6e1b3c]	12	import {onGetBuildState} from '../pages/forge/forge.telefunc';
[1bf6e1f]	13
[b6e1b3c]	14	const formatPrice = (price: any) => new Intl.NumberFormat('en-US', {
	15	style: 'currency',
	16	currency: 'USD'
	17	}).format(Number(price) \|\| 0);
[1bf6e1f]	18
[b6e1b3c]	19	export default function BuildDetailsDialog({open, buildId, onClose, currentUser, isDashboardView = false}: {
	20	open: boolean;
	21	buildId: number \| null;
	22	onClose: () => void;
	23	currentUser: any;
	24	isDashboardView?: boolean;
	25	}) {
[1bf6e1f]	26	const [details, setDetails] = useState<any>(null);
	27	const [loading, setLoading] = useState(false);
	28	const [tabIndex, setTabIndex] = useState(0);
[8a7f936]	29	const [cloneDialogOpen, setCloneDialogOpen] = useState(false);
	30	const [cloningBuildId, setCloningBuildId] = useState<number \| null>(null);
[b6e1b3c]	31	const [isOwner, setIsOwner] = useState(false);
[1bf6e1f]	32
	33	const [reviewText, setReviewText] = useState("");
	34	const [ratingVal, setRatingVal] = useState(5);
	35
[b6e1b3c]	36	// Main details fetch
[1bf6e1f]	37	useEffect(() => {
[b6e1b3c]	38	if (open && buildId !== null && typeof buildId === 'number') {
[1bf6e1f]	39	setLoading(true);
[e599341]	40	setReviewText("");
	41	setRatingVal(5);
	42
[b6e1b3c]	43	onGetBuildDetails({buildId})
[1bf6e1f]	44	.then(data => {
	45	setDetails(data);
	46	if (data.userRating) setRatingVal(data.userRating);
	47	if (data.userReview) setReviewText(data.userReview);
	48	})
	49	.finally(() => setLoading(false));
	50	}
	51	}, [open, buildId]);
	52
[b6e1b3c]	53	useEffect(() => {
	54	if (open && buildId !== null && typeof buildId === 'number') {
[958bc89]	55	onGetBuildState({buildId})
[b6e1b3c]	56	.then(state => {
	57	setIsOwner(!!state);
	58	})
	59	.catch(() => setIsOwner(false));
	60	} else {
	61	setIsOwner(false);
	62	}
	63	}, [open, buildId]);
	64
[1bf6e1f]	65	const handleFavorite = async () => {
[b6e1b3c]	66	if (!currentUser \|\| buildId === null) return alert("Please login to favorite builds.");
	67	const res = await onToggleFavorite({buildId});
	68	setDetails((prev: any) => ({...prev, isFavorite: res}));
[1bf6e1f]	69	};
	70
	71	const handleSubmitReview = async () => {
[b6e1b3c]	72	if (!currentUser \|\| buildId === null) return alert("Please login to review.");
[1bf6e1f]	73
[8a7f936]	74	await onSetReview({
	75	buildId,
	76	content: reviewText,
	77	});
	78
	79	await onSetRating({
	80	buildId,
	81	value: ratingVal
[b6e1b3c]	82	});
[e599341]	83
[b6e1b3c]	84	const refreshed = await onGetBuildDetails({buildId});
[1bf6e1f]	85	setDetails(refreshed);
	86	};
	87
[8a7f936]	88	const handleCloneConfirm = async () => {
	89	if (!cloningBuildId) return;
	90
	91	try {
[958bc89]	92	const newBuildId = await onCloneBuild({buildId: cloningBuildId});
[8a7f936]	93	window.location.href = `/forge?buildId=${newBuildId}`;
	94	setCloneDialogOpen(false);
	95	setCloningBuildId(null);
	96	} catch (e) {
	97	alert("Failed to clone build. Please try again.");
	98	}
	99	};
	100
[1bf6e1f]	101	if (!open) return null;
	102
	103	return (
[8a7f936]	104	<>
	105	<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth scroll="paper">
	106	{loading \|\| !details ? (
[b6e1b3c]	107	<Box sx={{p: 5, textAlign: 'center'}}>Loading Forge Schematics...</Box>
[8a7f936]	108	) : (
	109	<>
[b6e1b3c]	110	<DialogTitle sx={{
	111	display: 'flex',
	112	justifyContent: 'space-between',
	113	alignItems: 'center',
	114	bgcolor: '#ff8201'
	115	}}>
[8a7f936]	116	<Box>
	117	<Typography variant="h5" fontWeight="bold">{details.name}</Typography>
[b6e1b3c]	118	<Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
	119	<PersonIcon sx={{fontSize: 16}}/>
[8a7f936]	120	<Typography variant="subtitle2" color="text.secondary" fontWeight="bold">
	121	by {details.creator}
	122	</Typography>
[b6e1b3c]	123	<Chip label={formatPrice(details.totalPrice)} size="small" color="primary"
	124	variant="outlined"/>
[8a7f936]	125	</Box>
[1bf6e1f]	126	</Box>
[b6e1b3c]	127	<IconButton onClick={onClose}><CloseIcon/></IconButton>
[8a7f936]	128	</DialogTitle>
	129
[b6e1b3c]	130	<DialogContent sx={{p: 0}}>
	131	<Box sx={{
	132	borderBottom: 1,
	133	borderColor: 'divider',
	134	px: 2,
	135	bgcolor: 'primary',
	136	position: 'sticky',
	137	top: 0,
	138	zIndex: 1
	139	}}>
[8a7f936]	140	<Tabs value={tabIndex} onChange={(_, v) => setTabIndex(v)}>
[b6e1b3c]	141	<Tab label="Specs"/>
	142	<Tab label={`Reviews (${details.ratingStatistics.ratingCount})`}/>
[8a7f936]	143	</Tabs>
	144	</Box>
	145
[b6e1b3c]	146	<Box sx={{p: 3}}>
[8a7f936]	147	{tabIndex === 0 && (
	148	<Grid container spacing={2}>
	149	<Grid item xs={12} md={8}>
	150	<Table size="small">
	151	<TableBody>
	152	{details.components.map((comp: any) => (
	153	<TableRow key={comp.id}>
[b6e1b3c]	154	<TableCell sx={{width: 50}}>
[8a7f936]	155	<Avatar
[41a2f81]	156	src={comp.imgUrl \|\| undefined}
[8a7f936]	157	variant="rounded"
[41a2f81]	158	sx={{width: 50, height: 50, bgcolor: '#ff8201'}}
[8a7f936]	159	>
	160	{comp.type?.substring(0, 3)?.toUpperCase()}
	161	</Avatar>
	162	</TableCell>
	163	<TableCell>
[b6e1b3c]	164	<Typography variant="body2" color="text.secondary" sx={{
	165	fontSize: '0.75rem',
	166	textTransform: 'uppercase'
	167	}}>
[8a7f936]	168	{comp.type}
	169	</Typography>
	170	<Typography variant="body1" fontWeight="500">
	171	{comp.brand} {comp.name}
	172	</Typography>
	173	</TableCell>
[b6e1b3c]	174	<TableCell align="right"
	175	sx={{fontWeight: 'bold', color: '#ff8201'}}>
[8a7f936]	176	{formatPrice(comp.price)}
	177	</TableCell>
	178	</TableRow>
	179	))}
[b6e1b3c]	180	<TableRow sx={{bgcolor: '#424343'}}>
	181	<TableCell colSpan={2} sx={{
	182	fontWeight: 'bold',
	183	color: '#ff8201'
	184	}}>TOTAL</TableCell>
	185	<TableCell align="right" sx={{
	186	fontWeight: 'bold',
	187	fontSize: '1.1rem',
	188	color: 'primary.main'
	189	}}>
[8a7f936]	190	{formatPrice(details.totalPrice)}
[1bf6e1f]	191	</TableCell>
	192	</TableRow>
[8a7f936]	193	</TableBody>
	194	</Table>
	195	</Grid>
[1bf6e1f]	196
[8a7f936]	197	<Grid item xs={12} md={4}>
[b6e1b3c]	198	<Box sx={{bgcolor: '#424343', p: 2, borderRadius: 2, mb: 2}}>
	199	<Typography color="primary.main" gutterBottom fontWeight="bold">Builder's
	200	Notes</Typography>
	201	<Typography color="primary.main" variant="body2"
	202	sx={{fontStyle: 'italic'}}>
[8a7f936]	203	"{details.description \|\| "No notes provided."}"
	204	</Typography>
	205	</Box>
[1bf6e1f]	206
[b6e1b3c]	207	<Box sx={{display: 'flex', flexDirection: 'column', gap: 1}}>
	208	{isDashboardView && isOwner ? (
	209	<Button
	210	variant="contained"
	211	color="primary"
	212	size="large"
	213	startIcon={<AutoFixHighIcon/>}
	214	onClick={() => {
	215	window.location.href = `/forge?buildId=${details.id}`;
	216	onClose();
	217	}}
	218	>
	219	Edit Build
	220	</Button>
	221	) : (
	222	<Button
	223	variant="contained"
	224	color="primary"
	225	size="large"
	226	startIcon={<AutoFixHighIcon/>}
	227	onClick={() => {
	228	setCloningBuildId(details.id);
	229	setCloneDialogOpen(true);
	230	}}
	231	>
	232	Clone & Edit
	233	</Button>
	234	)}
[8a7f936]	235	<Button
	236	variant={details.isFavorite ? "contained" : "outlined"}
	237	color={details.isFavorite ? "error" : "primary"}
[b6e1b3c]	238	startIcon={details.isFavorite ? <FavoriteIcon/> :
	239	<FavoriteBorderIcon/>}
[8a7f936]	240	onClick={handleFavorite}
	241	>
	242	{details.isFavorite ? "Favorited" : "Add to Favorites"}
	243	</Button>
	244	</Box>
	245	</Grid>
[1bf6e1f]	246	</Grid>
[8a7f936]	247	)}
[1bf6e1f]	248
[8a7f936]	249	{tabIndex === 1 && (
	250	<Box>
[b6e1b3c]	251	<Box sx={{
	252	display: 'flex',
	253	alignItems: 'center',
	254	gap: 2,
	255	mb: 4,
	256	p: 2,
	257	bgcolor: '#5e5e5e',
	258	borderRadius: 2
	259	}}>
	260	<Typography variant="h3"
	261	fontWeight="bold">{details.ratingStatistics.averageRating.toFixed(1)}</Typography>
[8a7f936]	262	<Box>
[b6e1b3c]	263	<Rating value={details.ratingStatistics.averageRating} readOnly
	264	precision={0.5}/>
	265	<Typography variant="body2"
	266	color="text.secondary">{details.ratingStatistics.ratingCount} ratings</Typography>
[1bf6e1f]	267	</Box>
	268	</Box>
[8a7f936]	269
	270	{currentUser && details.userId !== currentUser.id && (
[b6e1b3c]	271	<Box sx={{mb: 4, p: 2, border: '1px solid #ddd', borderRadius: 2}}>
[8a7f936]	272	<Typography variant="subtitle2" gutterBottom>Your Review</Typography>
[b6e1b3c]	273	<Box sx={{display: 'flex', alignItems: 'center', mb: 1}}>
	274	<Rating value={ratingVal}
	275	onChange={(_, v) => setRatingVal(v \|\| 5)}/>
[1bf6e1f]	276	</Box>
[8a7f936]	277	<TextField
	278	fullWidth
	279	multiline
	280	rows={2}
	281	placeholder="Share your thoughts on this build..."
	282	value={reviewText}
	283	onChange={(e) => setReviewText(e.target.value)}
[b6e1b3c]	284	sx={{mb: 1}}
[8a7f936]	285	/>
	286	<Button size="small" variant="contained" onClick={handleSubmitReview}>
	287	Submit Review
	288	</Button>
[1bf6e1f]	289	</Box>
	290	)}
[8a7f936]	291
	292	{currentUser && details.userId === currentUser.id && (
[b6e1b3c]	293	<Alert severity="info" sx={{mb: 4}}>
[8a7f936]	294	You cannot rate your own builds.
	295	</Alert>
	296	)}
	297
[b6e1b3c]	298	<Box sx={{display: 'flex', flexDirection: 'column', gap: 2}}>
[8a7f936]	299	{details.reviews.map((rev: any, i: number) => (
[b6e1b3c]	300	<Box key={i} sx={{pb: 2, borderBottom: '1px solid #eee'}}>
	301	<Box sx={{
	302	display: 'flex',
	303	justifyContent: 'space-between',
	304	mb: 0.5
	305	}}>
	306	<Typography fontWeight="bold"
	307	variant="body2">{rev.username}</Typography>
	308	<Typography variant="caption"
	309	color="text.secondary">{rev.createdAt}</Typography>
[8a7f936]	310	</Box>
	311	<Typography variant="body2">{rev.content}</Typography>
	312	</Box>
	313	))}
	314	{details.reviews.length === 0 && (
[b6e1b3c]	315	<Typography color="text.secondary" align="center">No reviews yet. Be the
	316	first!</Typography>
[8a7f936]	317	)}
	318	</Box>
[1bf6e1f]	319	</Box>
[8a7f936]	320	)}
	321	</Box>
	322	</DialogContent>
	323	</>
	324	)}
	325	</Dialog>
	326
	327	<Dialog open={cloneDialogOpen} onClose={() => setCloneDialogOpen(false)}>
	328	<DialogTitle>Clone Build</DialogTitle>
	329	<DialogContent>
	330	<Typography>
	331	This will create a copy of "{details?.name}" in your Forge so you can edit it.
	332	All components will be copied over.
	333	</Typography>
	334	</DialogContent>
	335	<DialogActions>
	336	<Button onClick={() => setCloneDialogOpen(false)}>Cancel</Button>
	337	<Button
	338	variant="contained"
	339	onClick={handleCloneConfirm}
	340	disabled={!cloningBuildId}
	341	>
	342	Clone Build
	343	</Button>
	344	</DialogActions>
	345	</Dialog>
	346	</>
[1bf6e1f]	347	);
[b6e1b3c]	348	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format