2 lines
10 KiB
JSON
2 lines
10 KiB
JSON
|
{"id":"chatcmpl-be34c2faa5d59734","object":"chat.completion","created":1774199896,"model":"NousResearch\/Hermes-3-Llama-3.2-3B","choices":[{"index":0,"message":{"role":"assistant","content":"Here is the complete ProjectList component with full functionality:\n\n```typescript\n\/\/ src\/components\/ProjectList.tsx\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { Link, useHistory, useLocation } from 'react-router-dom';\nimport { Card, CardContent, CardActions, Button, IconButton, Tooltip, Chip, Typography, Grid, Container } from '@material-ui\/core';\nimport { makeStyles } from '@material-ui\/core\/styles';\nimport { useProjects, useAuth } from '..\/context';\nimport { useNotifications } from '..\/context\/NotificationsContext';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n paper: {\n padding: theme.spacing(2),\n textAlign: 'center',\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.background.paper,\n },\n grid: {\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',\n gridGap: theme.spacing(2),\n },\n card: {\n boxShadow: theme.shadows[5],\n borderRadius: theme.shape.borderRadius,\n padding: theme.spacing(2),\n '&:hover': {\n boxShadow: theme.shadows[10],\n },\n },\n actions: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n marginTop: theme.spacing(2),\n },\n memberAvatar: {\n width: theme.spacing(3),\n height: theme.spacing(3),\n borderRadius: '50%',\n },\n}));\n\nconst ProjectList: React.FC = () => {\n const { projects, loading, error } = useProjects();\n const { user } = useAuth();\n const notifications = useNotifications();\n const history = useHistory();\n const location = useLocation();\n const classes = useStyles();\n const projectListRef = useRef(null);\n\n const handleNewProject = () => {\n history.push('\/projects\/new');\n };\n\n useEffect(() => {\n if (loading) {\n projectListRef.current.clear();\n }\n }, [loading]);\n\n useEffect(() => {\n if (error) {\n console.error(error);\n }\n }, [error]);\n\n return (\n <div className={classes.root}>\n <Container maxWidth=\"xl\">\n <div className={classes.paper}>\n <Typography variant=\"h6\">Projects<\/Typography>\n <Grid container spacing={2} ref={projectListRef}>\n {projects.map((project) => (\n <Grid item xs={12} sm={12} md={4} lg={4} xl={4}>\n <Link to={`\/projects\/${project.id}`}>\n <Card className={classes.card}>\n <CardContent>\n <Typography variant=\"h5\">{project.name}<\/Typography>\n <Typography>{project.description}<\/Typography>\n <Typography>{project.deadline}<\/Typography>\n <Grid container spacing={2}>\n {project.members.map((member) => (\n <Grid item>\n <img src={member.avatar} alt=\"Member\" className={classes.memberAvatar} \/>\n <\/Grid>\n ))}\n <\/Grid>\n <Typography>{project.tasks.length} tasks<\/Typography>\n <\/CardContent>\n <CardActions className={classes.actions}>\n <Tooltip title=\"Edit\">\n <IconButton>\n <Typography>Edit<\/Typography>\n <\/IconButton>\n <\/Tooltip>\n <Tooltip title=\"Delete\">\n <IconButton>\n <Typography>Delete<\/Typography>\n <\/IconButton>\n <\/Tooltip>\n <\/CardActions>\n <\/Card>\n <\/Link>\n <\/Grid>\n ))}\n <\/Grid>\n <div className={classes.newProject}>\n
|