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

33
convex/statuses.ts
View File

@@ -14,23 +14,23 @@ type RWCtx = MutationCtx | QueryCtx;
type StatusRow = {
user: {
id: Id<'users'>,
name: string | null,
imageId: Id<'_storage'> | null,
imageUrl: string | null,
}
id: Id<'users'>;
name: string | null;
imageId: Id<'_storage'> | null;
imageUrl: string | null;
};
latest: {
id: Id<'statuses'>,
message: string,
updatedAt: number,
updatedBy: Id<'users'>,
} | null,
id: Id<'statuses'>;
message: string;
updatedAt: number;
updatedBy: Id<'users'>;
} | null;
updatedByUser: {
id: Id<'users'>,
name: string | null,
imageId: Id<'_storage'> | null,
imageUrl: string | null,
} | null,
id: Id<'users'>;
name: string | null;
imageId: Id<'_storage'> | null;
imageUrl: string | null;
} | null;
};
// CHANGED: typed helpers
@@ -159,8 +159,7 @@ const getName = (u: Doc<'users'>): string | null =>
const getImageId = (u: Doc<'users'>): Id<'_storage'> | null => {
if (!('image' in u)) return null;
const img =
(u as { image?: unknown }).image as string | undefined;
const img = (u as { image?: unknown }).image as string | undefined;
return img && img.length > 0 ? (img as Id<'_storage'>) : null;
};

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>
);
};

40
src/lib/utils.ts
View File

@@ -19,18 +19,40 @@ export const ccn = ({
return twMerge(className, context ? on : off);
};
export const formatTime = (timestamp: string) => {
const date = new Date(timestamp);
const time = date.toLocaleTimeString('en-US', {
type Timestamp = number | string | Date;
const toDate = (ts: Timestamp): Date | null => {
if (ts instanceof Date) return isNaN(ts.getTime()) ? null : ts;
if (typeof ts === 'number') {
// Heuristic: treat small numbers as seconds
const ms = ts < 1_000_000_000_000 ? ts * 1000 : ts;
const d = new Date(ms);
return isNaN(d.getTime()) ? null : d;
}
// string: try numeric first, then ISO/date string
const asNum = Number(ts);
const d =
Number.isFinite(asNum) && asNum !== 0 ? toDate(asNum) : new Date(ts);
return d && !isNaN(d.getTime()) ? d : null;
};
export const formatTime = (timestamp: Timestamp, locale = 'en-US'): string => {
const date = toDate(timestamp);
if (!date) return '--:--';
return date.toLocaleTimeString(locale, {
hour: 'numeric',
minute: 'numeric',
});
return time;
};
export const formatDate = (timestamp: string) => {
const date = new Date(timestamp);
const day = date.getDate();
const month = date.toLocaleString('default', { month: 'long' });
return `${month} ${day}`;
export const formatDate = (timestamp: Timestamp, locale = 'en-US'): string => {
const date = toDate(timestamp);
if (!date) return '--/--';
return date.toLocaleDateString(locale, {
month: 'long',
day: 'numeric',
});
};