gib/techtracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Think I'm ready to host this one!

Browse Source
This commit is contained in:
Gabriel Brown
2025-09-04 20:08:38 -05:00
parent 399ce36981
commit 64a05df71d
3 changed files with 77 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/layout/status/list/index.tsx
View File

@@ -1,12 +1,7 @@
'use client';
import Link from 'next/link';
import { useState } from 'react';
import {
type Preloaded,
usePreloadedQuery,
useMutation,
useQuery,
} from 'convex/react';
import { type Preloaded, usePreloadedQuery, useMutation } from 'convex/react';
import { api } from '~/convex/_generated/api';
import { type Id } from '~/convex/_generated/dataModel';
import { useTVMode } from '@/components/providers';
@@ -22,7 +17,7 @@ import {
} from '@/components/ui';
import { toast } from 'sonner';
import { ccn, formatTime, formatDate } from '@/lib/utils';
import { RefreshCw, Clock, Calendar, CheckCircle2 } from 'lucide-react';
import { Clock, Calendar, CheckCircle2 } from 'lucide-react';
type StatusListProps = {
preloadedUser: Preloaded<typeof api.auth.getUser>;
@@ -46,13 +41,15 @@ export const StatusList = ({
const toggleUser = (id: Id<'users'>) => {
setSelectedUserIds((prev) =>
prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
prev.some((i) => i === id)
? prev.filter((prevId) => prevId !== id)
: [...prev, id],
);
}
};
const handleSelectAllClick = () => {
if (selectAll) setSelectedUserIds([]);
else setSelectedUserIds([]);
else setSelectedUserIds(statuses.map((s) => s.user.id));
setSelectAll(!selectAll);
};
@@ -61,16 +58,17 @@ export const StatusList = ({
setUpdatingStatus(true);
try {
if (message.length < 3 || message.length > 80)
throw new Error('Status must be between 3 & 80 characters')
if (selectedUserIds.length === 0)
throw new Error('You must select at least one user.')
await bulkCreate({ message, userIds: selectedUserIds})
toast.success('Status updated.')
throw new Error('Status must be between 3 & 80 characters');
if (selectedUserIds.length === 0 && user?.id)
await bulkCreate({ message, userIds: [user.id] });
else throw new Error("Hmm.. this shouldn't happen");
await bulkCreate({ message, userIds: selectedUserIds });
toast.success('Status updated.');
setSelectedUserIds([]);
setSelectAll(false);
setStatusInput('');
} catch (error) {
toast.error(`Update failed. ${error as Error}`)
toast.error(`Update failed. ${error as Error}`);
} finally {
setUpdatingStatus(false);
}
@@ -143,9 +141,11 @@ export const StatusList = ({
className={`relative transition-all duration-200
cursor-pointer hover:shadow-md
${tvMode ? 'p-4' : 'p-3'}
${isSelected
? 'ring-2 ring-primary bg-primary/5 shadow-md'
: 'hover:bg-muted/30'}
${
isSelected
? 'ring-2 ring-primary bg-primary/5 shadow-md'
: 'hover:bg-muted/30'
}
`}
onClick={() => toggleUser(u.id)}
>
@@ -193,15 +193,14 @@ export const StatusList = ({
</div>
</div>
<div className='flex flex-col items-end px-2 gap-2
<div
className='flex flex-col items-end px-2 gap-2
text-muted-foreground flex-shrink-0'
>
<div className='flex items-center gap-2'>
<Clock
className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
/>
<Clock className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
<span className={tvMode ? 'text-2xl' : 'text-xl'}>
{latest ? formatTime(latest.updatedAt.toString()) : '--:--'}
{latest ? formatTime(latest.updatedAt) : '--:--'}
</span>
</div>
<div className='flex items-center gap-2'>
@@ -209,7 +208,7 @@ export const StatusList = ({
className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
/>
<span className={tvMode ? 'text-2xl' : 'text-xl'}>
{latest ? formatDate(latest.updatedAt.toString()) : '--/--'}
{latest ? formatDate(latest.updatedAt) : '--/--'}
</span>
</div>
@@ -220,9 +219,7 @@ export const StatusList = ({
fullName={updatedByUser.name ?? 'User'}
className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
/>
<span
className={tvMode ? 'text-base' : 'text-sm'}
>
<span className={tvMode ? 'text-base' : 'text-sm'}>
<div className='flex flex-col'>
<p>Updated by</p>
{updatedByUser.name ?? 'User'}
@@ -236,13 +233,15 @@ export const StatusList = ({
</div>
</CardContent>
</Card>
)
);
})}
</div>
{statuses.length === 0 && (
<Card className='p-8 text-center'>
<p className={`text-muted-foreground ${tvMode ? 'text-2xl' : 'text-lg'}`} >
<p
className={`text-muted-foreground ${tvMode ? 'text-2xl' : 'text-lg'}`}
>
No status updates have been made in the past day.
</p>
</Card>
@@ -263,11 +262,7 @@ export const StatusList = ({
disabled={updatingStatus}
onChange={(e) => setStatusInput(e.target.value)}
onKeyDown={(e) => {
if (
e.key === 'Enter' &&
!e.shiftKey &&
!updatingStatus
) {
if (e.key === 'Enter' && !e.shiftKey && !updatingStatus) {
e.preventDefault();
handleUpdateStatus();
}
@@ -299,7 +294,6 @@ export const StatusList = ({
</div>
</Card>
)}
</div>
);
};