Samuel Gbafa
2 months ago
parent
3194f76839
commit
4434609ec9
@ -0,0 +1,5 @@ |
||||
This command is being called by someone who is not a developer. Your job is to take steps to accomplish the stated goal. |
||||
|
||||
ultrathink about the root cause of the following problem. Use subagents to explore if needed. Create a plan to address the root cause. Follow this use plan and then fix it. |
||||
|
||||
Optional context: #$ARGUMENTS |
||||
@ -0,0 +1,80 @@ |
||||
[ |
||||
{ |
||||
"id": "1", |
||||
"name": "React Developers", |
||||
"description": "A group for React developers to share knowledge and collaborate on projects", |
||||
"memberCount": 15, |
||||
"memberIds": ["1", "2", "3"], |
||||
"createdBy": "1", |
||||
"createdAt": "2023-08-01T10:00:00Z", |
||||
"updatedAt": "2023-10-15T14:30:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["react", "frontend", "development"], |
||||
"image": "https://i.pravatar.cc/200?img=react" |
||||
}, |
||||
{ |
||||
"id": "2", |
||||
"name": "Product Management Circle", |
||||
"description": "Product managers discussing strategies, tools, and best practices", |
||||
"memberCount": 8, |
||||
"memberIds": ["2", "4"], |
||||
"createdBy": "2", |
||||
"createdAt": "2023-09-10T09:00:00Z", |
||||
"updatedAt": "2023-10-20T16:45:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["product", "management", "strategy"], |
||||
"image": "https://i.pravatar.cc/200?img=product" |
||||
}, |
||||
{ |
||||
"id": "3", |
||||
"name": "UX Design Collective", |
||||
"description": "Designers sharing insights, resources, and feedback on user experience", |
||||
"memberCount": 12, |
||||
"memberIds": ["3", "6"], |
||||
"createdBy": "3", |
||||
"createdAt": "2023-07-15T11:30:00Z", |
||||
"updatedAt": "2023-09-25T13:15:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["design", "ux", "ui"], |
||||
"image": "https://i.pravatar.cc/200?img=design" |
||||
}, |
||||
{ |
||||
"id": "4", |
||||
"name": "Engineering Leadership", |
||||
"description": "Engineering managers and tech leads discussing team management and technical strategy", |
||||
"memberCount": 6, |
||||
"memberIds": ["4", "1"], |
||||
"createdBy": "4", |
||||
"createdAt": "2023-06-20T08:00:00Z", |
||||
"updatedAt": "2023-08-30T10:20:00Z", |
||||
"isPrivate": true, |
||||
"tags": ["engineering", "leadership", "management"], |
||||
"image": "https://i.pravatar.cc/200?img=leadership" |
||||
}, |
||||
{ |
||||
"id": "5", |
||||
"name": "Business Strategy Network", |
||||
"description": "Business consultants and strategists sharing market insights and methodologies", |
||||
"memberCount": 10, |
||||
"memberIds": ["5", "2", "6"], |
||||
"createdBy": "5", |
||||
"createdAt": "2023-05-05T14:00:00Z", |
||||
"updatedAt": "2023-07-20T09:30:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["business", "strategy", "consulting"], |
||||
"image": "https://i.pravatar.cc/200?img=business" |
||||
}, |
||||
{ |
||||
"id": "6", |
||||
"name": "Digital Marketing Hub", |
||||
"description": "Marketing professionals sharing campaigns, tools, and growth strategies", |
||||
"memberCount": 20, |
||||
"memberIds": ["6", "2", "5"], |
||||
"createdBy": "6", |
||||
"createdAt": "2023-04-10T12:00:00Z", |
||||
"updatedAt": "2023-06-25T15:45:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["marketing", "digital", "growth"], |
||||
"image": "https://i.pravatar.cc/200?img=marketing" |
||||
} |
||||
] |
||||
@ -0,0 +1,80 @@ |
||||
[ |
||||
{ |
||||
"id": "1", |
||||
"name": "React Developers", |
||||
"description": "A group for React developers to share knowledge and collaborate on projects", |
||||
"memberCount": 15, |
||||
"memberIds": ["1", "2", "3"], |
||||
"createdBy": "1", |
||||
"createdAt": "2023-08-01T10:00:00Z", |
||||
"updatedAt": "2023-10-15T14:30:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["react", "frontend", "development"], |
||||
"image": "https://i.pravatar.cc/200?img=react" |
||||
}, |
||||
{ |
||||
"id": "2", |
||||
"name": "Product Management Circle", |
||||
"description": "Product managers discussing strategies, tools, and best practices", |
||||
"memberCount": 8, |
||||
"memberIds": ["2", "4"], |
||||
"createdBy": "2", |
||||
"createdAt": "2023-09-10T09:00:00Z", |
||||
"updatedAt": "2023-10-20T16:45:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["product", "management", "strategy"], |
||||
"image": "https://i.pravatar.cc/200?img=product" |
||||
}, |
||||
{ |
||||
"id": "3", |
||||
"name": "UX Design Collective", |
||||
"description": "Designers sharing insights, resources, and feedback on user experience", |
||||
"memberCount": 12, |
||||
"memberIds": ["3", "6"], |
||||
"createdBy": "3", |
||||
"createdAt": "2023-07-15T11:30:00Z", |
||||
"updatedAt": "2023-09-25T13:15:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["design", "ux", "ui"], |
||||
"image": "https://i.pravatar.cc/200?img=design" |
||||
}, |
||||
{ |
||||
"id": "4", |
||||
"name": "Engineering Leadership", |
||||
"description": "Engineering managers and tech leads discussing team management and technical strategy", |
||||
"memberCount": 6, |
||||
"memberIds": ["4", "1"], |
||||
"createdBy": "4", |
||||
"createdAt": "2023-06-20T08:00:00Z", |
||||
"updatedAt": "2023-08-30T10:20:00Z", |
||||
"isPrivate": true, |
||||
"tags": ["engineering", "leadership", "management"], |
||||
"image": "https://i.pravatar.cc/200?img=leadership" |
||||
}, |
||||
{ |
||||
"id": "5", |
||||
"name": "Business Strategy Network", |
||||
"description": "Business consultants and strategists sharing market insights and methodologies", |
||||
"memberCount": 10, |
||||
"memberIds": ["5", "2", "6"], |
||||
"createdBy": "5", |
||||
"createdAt": "2023-05-05T14:00:00Z", |
||||
"updatedAt": "2023-07-20T09:30:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["business", "strategy", "consulting"], |
||||
"image": "https://i.pravatar.cc/200?img=business" |
||||
}, |
||||
{ |
||||
"id": "6", |
||||
"name": "Digital Marketing Hub", |
||||
"description": "Marketing professionals sharing campaigns, tools, and growth strategies", |
||||
"memberCount": 20, |
||||
"memberIds": ["6", "2", "5"], |
||||
"createdBy": "6", |
||||
"createdAt": "2023-04-10T12:00:00Z", |
||||
"updatedAt": "2023-06-25T15:45:00Z", |
||||
"isPrivate": false, |
||||
"tags": ["marketing", "digital", "growth"], |
||||
"image": "https://i.pravatar.cc/200?img=marketing" |
||||
} |
||||
] |
||||
@ -0,0 +1,243 @@ |
||||
import { useState, useEffect } from 'react'; |
||||
import { useNavigate } from 'react-router-dom'; |
||||
import { |
||||
Typography, |
||||
Box, |
||||
Avatar, |
||||
Chip, |
||||
TextField, |
||||
InputAdornment, |
||||
Button, |
||||
Card, |
||||
CardContent, |
||||
Grid, |
||||
alpha, |
||||
useTheme, |
||||
Badge |
||||
} from '@mui/material'; |
||||
import { |
||||
Search, |
||||
Add, |
||||
Group, |
||||
Public, |
||||
Lock, |
||||
People |
||||
} from '@mui/icons-material'; |
||||
import { dataService } from '../services/dataService'; |
||||
import type { Group as GroupType } from '../types/group'; |
||||
|
||||
const GroupPage = () => { |
||||
const [groups, setGroups] = useState<GroupType[]>([]); |
||||
const [filteredGroups, setFilteredGroups] = useState<GroupType[]>([]); |
||||
const [searchQuery, setSearchQuery] = useState(''); |
||||
const [isLoading, setIsLoading] = useState(true); |
||||
const theme = useTheme(); |
||||
const navigate = useNavigate(); |
||||
|
||||
useEffect(() => { |
||||
const loadGroups = async () => { |
||||
setIsLoading(true); |
||||
try { |
||||
const groupsData = await dataService.getGroups(); |
||||
setGroups(groupsData); |
||||
setFilteredGroups(groupsData); |
||||
} catch (error) { |
||||
console.error('Failed to load groups:', error); |
||||
} finally { |
||||
setIsLoading(false); |
||||
} |
||||
}; |
||||
loadGroups(); |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
const filtered = groups.filter(group => |
||||
group.name.toLowerCase().includes(searchQuery.toLowerCase()) || |
||||
group.description?.toLowerCase().includes(searchQuery.toLowerCase()) || |
||||
group.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())) |
||||
); |
||||
setFilteredGroups(filtered); |
||||
}, [searchQuery, groups]); |
||||
|
||||
const handleGroupClick = (groupId: string) => { |
||||
navigate(`/groups/${groupId}`); |
||||
}; |
||||
|
||||
const handleCreateGroup = () => { |
||||
// TODO: Navigate to create group page
|
||||
console.log('Create group functionality coming soon'); |
||||
}; |
||||
|
||||
const getPrivacyIcon = (isPrivate: boolean) => { |
||||
return isPrivate ? ( |
||||
<Lock sx={{ fontSize: 16, color: '#ff9800' }} /> |
||||
) : ( |
||||
<Public sx={{ fontSize: 16, color: '#4caf50' }} /> |
||||
); |
||||
}; |
||||
|
||||
const formatDate = (date: Date) => { |
||||
return new Intl.DateTimeFormat('en-US', { |
||||
year: 'numeric', |
||||
month: 'short', |
||||
day: 'numeric' |
||||
}).format(date); |
||||
}; |
||||
|
||||
return ( |
||||
<Box sx={{ height: '100%' }}> |
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}> |
||||
<Box> |
||||
<Typography variant="h4" component="h1" sx={{ fontWeight: 700, mb: 1 }}> |
||||
Groups |
||||
</Typography> |
||||
<Typography variant="body1" color="text.secondary"> |
||||
Explore and manage your {filteredGroups.length} groups |
||||
</Typography> |
||||
</Box> |
||||
<Box sx={{ display: 'flex', gap: 1 }}> |
||||
<Button |
||||
variant="contained" |
||||
startIcon={<Add />} |
||||
onClick={handleCreateGroup} |
||||
sx={{ borderRadius: 2 }} |
||||
> |
||||
Create Group |
||||
</Button> |
||||
</Box> |
||||
</Box> |
||||
|
||||
<Card sx={{ mb: 3 }}> |
||||
<Box sx={{ p: 3 }}> |
||||
<TextField |
||||
fullWidth |
||||
placeholder="Search groups..." |
||||
value={searchQuery} |
||||
onChange={(e) => setSearchQuery(e.target.value)} |
||||
InputProps={{ |
||||
startAdornment: ( |
||||
<InputAdornment position="start"> |
||||
<Search /> |
||||
</InputAdornment> |
||||
), |
||||
}} |
||||
sx={{ mb: 3 }} |
||||
/> |
||||
|
||||
{isLoading ? ( |
||||
<Box sx={{ textAlign: 'center', py: 8 }}> |
||||
<Typography variant="h6" color="text.secondary" gutterBottom> |
||||
Loading groups... |
||||
</Typography> |
||||
<Typography variant="body2" color="text.secondary"> |
||||
Please wait while we fetch your groups |
||||
</Typography> |
||||
</Box> |
||||
) : filteredGroups.length === 0 ? ( |
||||
<Box sx={{ textAlign: 'center', py: 8 }}> |
||||
<Typography variant="h6" color="text.secondary" gutterBottom> |
||||
{searchQuery ? 'No groups found' : 'No groups yet'} |
||||
</Typography> |
||||
<Typography variant="body2" color="text.secondary"> |
||||
{searchQuery ? 'Try adjusting your search terms.' : 'Create your first group to get started!'} |
||||
</Typography> |
||||
</Box> |
||||
) : ( |
||||
<Grid container spacing={2}> |
||||
{filteredGroups.map((group) => ( |
||||
<Grid size={{ xs: 12, md: 6, lg: 4 }} key={group.id}> |
||||
<Card |
||||
onClick={() => handleGroupClick(group.id)} |
||||
sx={{ |
||||
cursor: 'pointer', |
||||
transition: 'all 0.2s ease-in-out', |
||||
border: 1, |
||||
borderColor: 'divider', |
||||
height: '100%', |
||||
'&:hover': { |
||||
borderColor: 'primary.main', |
||||
boxShadow: theme.shadows[4], |
||||
transform: 'translateY(-2px)', |
||||
}, |
||||
}} |
||||
> |
||||
<CardContent sx={{ p: 3 }}> |
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}> |
||||
<Avatar |
||||
src={group.image} |
||||
alt={group.name} |
||||
sx={{ width: 48, height: 48, bgcolor: 'primary.main' }} |
||||
> |
||||
<Group /> |
||||
</Avatar> |
||||
|
||||
<Box sx={{ flexGrow: 1 }}> |
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}> |
||||
<Typography variant="h6" component="div" sx={{ fontWeight: 600 }}> |
||||
{group.name} |
||||
</Typography> |
||||
{getPrivacyIcon(group.isPrivate)} |
||||
</Box> |
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> |
||||
<Badge |
||||
badgeContent={group.memberCount} |
||||
color="primary" |
||||
sx={{
|
||||
'& .MuiBadge-badge': {
|
||||
position: 'static',
|
||||
transform: 'none', |
||||
fontSize: '0.75rem', |
||||
minWidth: 'auto', |
||||
height: 20, |
||||
borderRadius: 1 |
||||
}
|
||||
}} |
||||
> |
||||
<People sx={{ fontSize: 16, color: 'text.secondary' }} /> |
||||
</Badge> |
||||
<Typography variant="body2" color="text.secondary"> |
||||
members |
||||
</Typography> |
||||
</Box> |
||||
</Box> |
||||
</Box> |
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2, minHeight: 40 }}> |
||||
{group.description} |
||||
</Typography> |
||||
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }}> |
||||
{group.tags?.map((tag) => ( |
||||
<Chip
|
||||
key={tag}
|
||||
label={tag}
|
||||
size="small"
|
||||
variant="outlined" |
||||
sx={{
|
||||
borderRadius: 1, |
||||
backgroundColor: alpha(theme.palette.primary.main, 0.04), |
||||
borderColor: alpha(theme.palette.primary.main, 0.12), |
||||
color: 'primary.main', |
||||
fontWeight: 500, |
||||
}} |
||||
/> |
||||
))} |
||||
</Box> |
||||
|
||||
<Typography variant="caption" color="text.secondary"> |
||||
Created {formatDate(group.createdAt)} |
||||
</Typography> |
||||
</CardContent> |
||||
</Card> |
||||
</Grid> |
||||
))} |
||||
</Grid> |
||||
)} |
||||
</Box> |
||||
</Card> |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default GroupPage; |
||||
@ -0,0 +1,20 @@ |
||||
export interface Group { |
||||
id: string; |
||||
name: string; |
||||
description?: string; |
||||
memberCount: number; |
||||
memberIds: string[]; |
||||
createdBy: string; |
||||
createdAt: Date; |
||||
updatedAt: Date; |
||||
isPrivate: boolean; |
||||
tags?: string[]; |
||||
image?: string; |
||||
} |
||||
|
||||
export interface GroupMember { |
||||
userId: string; |
||||
groupId: string; |
||||
joinedAt: Date; |
||||
role: 'admin' | 'member' | 'moderator'; |
||||
} |
||||
Loading…
Reference in new issue