Cleaning up. Rewriting. Vibing. Coding. Little bit of vibe coding.
This commit is contained in:
@ -31,7 +31,7 @@
|
||||
"@supabase/ssr": "^0.6.1",
|
||||
"@supabase/supabase-js": "^2.50.0",
|
||||
"@t3-oss/env-nextjs": "^0.12.0",
|
||||
"@tanstack/react-query": "^5.80.7",
|
||||
"@tanstack/react-query": "^5.80.10",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.510.0",
|
||||
@ -62,7 +62,7 @@
|
||||
"import-in-the-middle": "^1.14.2",
|
||||
"postcss": "^8.5.6",
|
||||
"prettier": "^3.5.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.12",
|
||||
"prettier-plugin-tailwindcss": "^0.6.13",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
|
||||
44
pnpm-lock.yaml
generated
44
pnpm-lock.yaml
generated
@ -51,8 +51,8 @@ importers:
|
||||
specifier: ^0.12.0
|
||||
version: 0.12.0(typescript@5.8.3)(zod@3.25.67)
|
||||
'@tanstack/react-query':
|
||||
specifier: ^5.80.7
|
||||
version: 5.80.7(react@19.1.0)
|
||||
specifier: ^5.80.10
|
||||
version: 5.80.10(react@19.1.0)
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
@ -139,8 +139,8 @@ importers:
|
||||
specifier: ^3.5.3
|
||||
version: 3.5.3
|
||||
prettier-plugin-tailwindcss:
|
||||
specifier: ^0.6.12
|
||||
version: 0.6.12(prettier@3.5.3)
|
||||
specifier: ^0.6.13
|
||||
version: 0.6.13(prettier@3.5.3)
|
||||
tailwind-merge:
|
||||
specifier: ^3.3.1
|
||||
version: 3.3.1
|
||||
@ -1504,11 +1504,11 @@ packages:
|
||||
peerDependencies:
|
||||
eslint: ^8.57.0 || ^9.0.0
|
||||
|
||||
'@tanstack/query-core@5.80.7':
|
||||
resolution: {integrity: sha512-s09l5zeUKC8q7DCCCIkVSns8zZrK4ZDT6ryEjxNBFi68G4z2EBobBS7rdOY3r6W1WbUDpc1fe5oY+YO/+2UVUg==}
|
||||
'@tanstack/query-core@5.80.10':
|
||||
resolution: {integrity: sha512-mUNQOtzxkjL6jLbyChZoSBP6A5gQDVRUiPvW+/zw/9ftOAz+H754zCj3D8PwnzPKyHzGkQ9JbH48ukhym9LK1Q==}
|
||||
|
||||
'@tanstack/react-query@5.80.7':
|
||||
resolution: {integrity: sha512-u2F0VK6+anItoEvB3+rfvTO9GEh2vb00Je05OwlUe/A0lkJBgW1HckiY3f9YZa+jx6IOe4dHPh10dyp9aY3iRQ==}
|
||||
'@tanstack/react-query@5.80.10':
|
||||
resolution: {integrity: sha512-6zM098J8sLy9oU60XAdzUlAH4wVzoMVsWUWiiE/Iz4fd67PplxeyL4sw/MPcVJJVhbwGGXCsHn9GrQt2mlAzig==}
|
||||
peerDependencies:
|
||||
react: ^18 || ^19
|
||||
|
||||
@ -2091,8 +2091,8 @@ packages:
|
||||
resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
electron-to-chromium@1.5.170:
|
||||
resolution: {integrity: sha512-GP+M7aeluQo9uAyiTCxgIj/j+PrWhMlY7LFVj8prlsPljd0Fdg9AprlfUi+OCSFWy9Y5/2D/Jrj9HS8Z4rpKWA==}
|
||||
electron-to-chromium@1.5.171:
|
||||
resolution: {integrity: sha512-scWpzXEJEMrGJa4Y6m/tVotb0WuvNmasv3wWVzUAeCgKU0ToFOhUW6Z+xWnRQANMYGxN4ngJXIThgBJOqzVPCQ==}
|
||||
|
||||
emoji-regex@9.2.2:
|
||||
resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
|
||||
@ -3023,8 +3023,8 @@ packages:
|
||||
resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
|
||||
prettier-plugin-tailwindcss@0.6.12:
|
||||
resolution: {integrity: sha512-OuTQKoqNwV7RnxTPwXWzOFXy6Jc4z8oeRZYGuMpRyG3WbuR3jjXdQFK8qFBMBx8UHWdHrddARz2fgUenild6aw==}
|
||||
prettier-plugin-tailwindcss@0.6.13:
|
||||
resolution: {integrity: sha512-uQ0asli1+ic8xrrSmIOaElDu0FacR4x69GynTh2oZjFY10JUt6EEumTQl5tB4fMeD6I1naKd+4rXQQ7esT2i1g==}
|
||||
engines: {node: '>=14.21.3'}
|
||||
peerDependencies:
|
||||
'@ianvs/prettier-plugin-sort-imports': '*'
|
||||
@ -3410,8 +3410,8 @@ packages:
|
||||
uglify-js:
|
||||
optional: true
|
||||
|
||||
terser@5.43.0:
|
||||
resolution: {integrity: sha512-CqNNxKSGKSZCunSvwKLTs8u8sGGlp27sxNZ4quGh0QeNuyHM0JSEM/clM9Mf4zUp6J+tO2gUXhgXT2YMMkwfKQ==}
|
||||
terser@5.43.1:
|
||||
resolution: {integrity: sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==}
|
||||
engines: {node: '>=10'}
|
||||
hasBin: true
|
||||
|
||||
@ -4992,11 +4992,11 @@ snapshots:
|
||||
- supports-color
|
||||
- typescript
|
||||
|
||||
'@tanstack/query-core@5.80.7': {}
|
||||
'@tanstack/query-core@5.80.10': {}
|
||||
|
||||
'@tanstack/react-query@5.80.7(react@19.1.0)':
|
||||
'@tanstack/react-query@5.80.10(react@19.1.0)':
|
||||
dependencies:
|
||||
'@tanstack/query-core': 5.80.7
|
||||
'@tanstack/query-core': 5.80.10
|
||||
react: 19.1.0
|
||||
|
||||
'@tybys/wasm-util@0.9.0':
|
||||
@ -5491,7 +5491,7 @@ snapshots:
|
||||
browserslist@4.25.0:
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001723
|
||||
electron-to-chromium: 1.5.170
|
||||
electron-to-chromium: 1.5.171
|
||||
node-releases: 2.0.19
|
||||
update-browserslist-db: 1.1.3(browserslist@4.25.0)
|
||||
|
||||
@ -5652,7 +5652,7 @@ snapshots:
|
||||
es-errors: 1.3.0
|
||||
gopd: 1.2.0
|
||||
|
||||
electron-to-chromium@1.5.170: {}
|
||||
electron-to-chromium@1.5.171: {}
|
||||
|
||||
emoji-regex@9.2.2: {}
|
||||
|
||||
@ -6679,7 +6679,7 @@ snapshots:
|
||||
dependencies:
|
||||
fast-diff: 1.3.0
|
||||
|
||||
prettier-plugin-tailwindcss@0.6.12(prettier@3.5.3):
|
||||
prettier-plugin-tailwindcss@0.6.13(prettier@3.5.3):
|
||||
dependencies:
|
||||
prettier: 3.5.3
|
||||
|
||||
@ -7087,10 +7087,10 @@ snapshots:
|
||||
jest-worker: 27.5.1
|
||||
schema-utils: 4.3.2
|
||||
serialize-javascript: 6.0.2
|
||||
terser: 5.43.0
|
||||
terser: 5.43.1
|
||||
webpack: 5.99.9
|
||||
|
||||
terser@5.43.0:
|
||||
terser@5.43.1:
|
||||
dependencies:
|
||||
'@jridgewell/source-map': 0.3.6
|
||||
acorn: 8.15.0
|
||||
|
||||
@ -390,8 +390,10 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
|
||||
return (
|
||||
<html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
|
||||
<body
|
||||
className={cn('bg-background text-foreground font-sans antialiased m-10\
|
||||
leading-relaxed px-10')}
|
||||
className={cn(
|
||||
'bg-background text-foreground font-sans antialiased m-10\
|
||||
leading-relaxed px-10',
|
||||
)}
|
||||
>
|
||||
<ThemeProvider
|
||||
attribute='class'
|
||||
|
||||
@ -9,10 +9,6 @@ export const generateMetadata = (): Metadata => {
|
||||
const SignInLayout = ({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) => {
|
||||
return (
|
||||
<div className=''>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
return <div className=''>{children}</div>;
|
||||
};
|
||||
export default SignInLayout;
|
||||
|
||||
@ -48,7 +48,8 @@ const Header = () => {
|
||||
height={100}
|
||||
className='max-w-[40px] md:max-w-[120px]'
|
||||
/>
|
||||
<h1 className='title-text text-sm md:text-4xl lg:text-8xl
|
||||
<h1
|
||||
className='title-text text-sm md:text-4xl lg:text-8xl
|
||||
bg-gradient-to-r from-[#281A65] via-[#363354] to-accent-foreground
|
||||
dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]
|
||||
font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
|
||||
|
||||
@ -8,7 +8,7 @@ type ConnectionStatusProps = {
|
||||
onReconnect?: () => void;
|
||||
showAsButton?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
};
|
||||
|
||||
const getConnectionIcon = (status: ConnectionStatusType) => {
|
||||
switch (status) {
|
||||
@ -57,10 +57,7 @@ export const ConnectionStatus = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<Badge
|
||||
variant='outline'
|
||||
className={`flex items-center gap-2 ${className}`}
|
||||
>
|
||||
<Badge variant='outline' className={`flex items-center gap-2 ${className}`}>
|
||||
{getConnectionIcon(status)}
|
||||
<span className='text-base'>{getConnectionText(status)}</span>
|
||||
</Badge>
|
||||
|
||||
@ -106,7 +106,9 @@ export const HistoryDrawer: React.FC<HistoryDrawerProps> = ({
|
||||
className='w-8 h-8 md:w-12 md:h-12'
|
||||
/>
|
||||
<h1 className='text-lg md:text-2xl lg:text-4xl font-bold pl-2 md:pl-4'>
|
||||
{user && user.id !== '' ? `${user.full_name}'s History` : 'All History'}
|
||||
{user && user.id !== ''
|
||||
? `${user.full_name}'s History`
|
||||
: 'All History'}
|
||||
</h1>
|
||||
</div>
|
||||
{totalCount > 0 && (
|
||||
|
||||
@ -12,12 +12,12 @@ import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RefreshCw, Clock, Calendar } from 'lucide-react';
|
||||
import { useStatusData, useSharedStatusSubscription } from '@/lib/hooks';
|
||||
import { useStatusData, useStatusSubscription } from '@/lib/hooks';
|
||||
import { formatTime, formatDate } from '@/lib/utils';
|
||||
import Link from 'next/link';
|
||||
|
||||
type ListProps = {
|
||||
initialStatuses: UserWithStatus[]
|
||||
initialStatuses: UserWithStatus[];
|
||||
};
|
||||
|
||||
export const StatusList = ({ initialStatuses = [] }: ListProps) => {
|
||||
@ -44,7 +44,7 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
|
||||
});
|
||||
|
||||
// In your StatusList component
|
||||
const { connectionStatus, connect: reconnect } = useSharedStatusSubscription(() => {
|
||||
const { connectionStatus, connect: reconnect } = useStatusSubscription(() => {
|
||||
refetch().catch((error) => {
|
||||
console.error('Error refetching statuses:', error);
|
||||
});
|
||||
@ -53,14 +53,14 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
|
||||
const handleUpdateStatus = () => {
|
||||
if (!isAuthenticated) {
|
||||
setUpdateStatusMessage(
|
||||
'Error: You must be signed in to update technician statuses!'
|
||||
'Error: You must be signed in to update technician statuses!',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (statusInput.length < 3 || statusInput.length > 80) {
|
||||
setUpdateStatusMessage(
|
||||
'Error: Your status must be between 3 & 80 characters long!'
|
||||
'Error: Your status must be between 3 & 80 characters long!',
|
||||
);
|
||||
return;
|
||||
}
|
||||
@ -79,7 +79,7 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
|
||||
setSelectedUsers((prev) =>
|
||||
prev.some((u) => u.user.id === user.user.id)
|
||||
? prev.filter((prevUser) => prevUser.user.id !== user.user.id)
|
||||
: [...prev, user]
|
||||
: [...prev, user],
|
||||
);
|
||||
};
|
||||
|
||||
@ -95,7 +95,7 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
|
||||
useEffect(() => {
|
||||
setSelectAll(
|
||||
selectedUsers.length === usersWithStatuses.length &&
|
||||
usersWithStatuses.length > 0
|
||||
usersWithStatuses.length > 0,
|
||||
);
|
||||
}, [selectedUsers.length, usersWithStatuses.length]);
|
||||
|
||||
@ -187,7 +187,7 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
|
||||
<div className={cardContainerClassName}>
|
||||
{usersWithStatuses.map((userWithStatus) => {
|
||||
const isSelected = selectedUsers.some(
|
||||
(u) => u.user.id === userWithStatus.user.id
|
||||
(u) => u.user.id === userWithStatus.user.id,
|
||||
);
|
||||
const isNewStatus = newStatuses.has(userWithStatus);
|
||||
const isUpdatedByOther =
|
||||
@ -329,8 +329,7 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
|
||||
{selectedUsers.length > 0
|
||||
? `Update status for ${selectedUsers.length}
|
||||
${selectedUsers.length > 1 ? 'users' : 'user'}`
|
||||
: 'Update status'
|
||||
}
|
||||
: 'Update status'}
|
||||
</SubmitButton>
|
||||
</div>
|
||||
{updateStatusMessage &&
|
||||
|
||||
388
src/components/status/StatusList.tsx
Normal file
388
src/components/status/StatusList.tsx
Normal file
@ -0,0 +1,388 @@
|
||||
'use client';
|
||||
import { useState, useEffect } from 'react';
|
||||
import type React from 'react';
|
||||
|
||||
import { useAuth, useTVMode } from '@/components/context';
|
||||
import type { UserWithStatus } from '@/lib/hooks';
|
||||
import { BasedAvatar, Drawer, DrawerTrigger, Loading } from '@/components/ui';
|
||||
import { StatusMessage, SubmitButton } from '@/components/default';
|
||||
import { ConnectionStatus, HistoryDrawer } from '@/components/status';
|
||||
import type { Profile } from '@/utils/supabase';
|
||||
import { makeConditionalClassName } from '@/lib/utils';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RefreshCw, Clock, Calendar, CheckCircle2 } from 'lucide-react';
|
||||
import { useStatusData, useStatusSubscription } from '@/lib/hooks';
|
||||
import { formatTime, formatDate } from '@/lib/utils';
|
||||
import Link from 'next/link';
|
||||
|
||||
type ListProps = {
|
||||
initialStatuses: UserWithStatus[];
|
||||
};
|
||||
|
||||
export const StatusList = ({ initialStatuses = [] }: ListProps) => {
|
||||
const { isAuthenticated } = useAuth();
|
||||
const { tvMode } = useTVMode();
|
||||
|
||||
const [selectedUsers, setSelectedUsers] = useState<UserWithStatus[]>([]);
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [statusInput, setStatusInput] = useState('');
|
||||
const [selectedHistoryUser, setSelectedHistoryUser] =
|
||||
useState<Profile | null>(null);
|
||||
const [updateStatusMessage, setUpdateStatusMessage] = useState('');
|
||||
|
||||
const {
|
||||
data: usersWithStatuses = initialStatuses,
|
||||
isLoading: loading,
|
||||
error,
|
||||
refetch,
|
||||
newStatuses,
|
||||
updateStatusMutation,
|
||||
} = useStatusData({
|
||||
initialData: initialStatuses,
|
||||
enabled: isAuthenticated,
|
||||
});
|
||||
|
||||
const { connectionStatus, connect: reconnect } = useStatusSubscription(() => {
|
||||
refetch().catch((error) => {
|
||||
console.error('Error refetching statuses:', error);
|
||||
});
|
||||
});
|
||||
|
||||
const handleUpdateStatus = () => {
|
||||
if (!isAuthenticated) {
|
||||
setUpdateStatusMessage(
|
||||
'Error: You must be signed in to update technician statuses!',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (statusInput.length < 3 || statusInput.length > 80) {
|
||||
setUpdateStatusMessage(
|
||||
'Error: Your status must be between 3 & 80 characters long!',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
updateStatusMutation.mutate({
|
||||
usersWithStatuses: selectedUsers,
|
||||
status: statusInput.trim(),
|
||||
});
|
||||
|
||||
setSelectedUsers([]);
|
||||
setStatusInput('');
|
||||
setUpdateStatusMessage('');
|
||||
};
|
||||
|
||||
const handleCardSelect = (user: UserWithStatus, e: React.MouseEvent) => {
|
||||
// Prevent selection if clicking on profile elements
|
||||
if ((e.target as HTMLElement).closest('[data-profile-trigger]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedUsers((prev) =>
|
||||
prev.some((u) => u.user.id === user.user.id)
|
||||
? prev.filter((prevUser) => prevUser.user.id !== user.user.id)
|
||||
: [...prev, user],
|
||||
);
|
||||
};
|
||||
|
||||
const handleSelectAllChange = () => {
|
||||
if (selectAll) {
|
||||
setSelectedUsers([]);
|
||||
} else {
|
||||
setSelectedUsers(usersWithStatuses);
|
||||
}
|
||||
setSelectAll(!selectAll);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectAll(
|
||||
selectedUsers.length === usersWithStatuses.length &&
|
||||
usersWithStatuses.length > 0,
|
||||
);
|
||||
}, [selectedUsers.length, usersWithStatuses.length]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className='flex justify-center items-center min-h-[400px]'>
|
||||
<Loading className='w-full' alpha={0.5} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className='flex flex-col justify-center items-center min-h-[400px] gap-4'>
|
||||
<p className='text-red-500'>Error loading status updates</p>
|
||||
<Button onClick={() => refetch()} variant='outline'>
|
||||
<RefreshCw className='w-4 h-4 mr-2' />
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const containerClassName = makeConditionalClassName({
|
||||
context: tvMode,
|
||||
defaultClassName: 'flex flex-col mx-auto space-y-3 items-center',
|
||||
on: 'lg:w-11/12 w-full mt-8',
|
||||
off: 'sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-1/2',
|
||||
});
|
||||
|
||||
const headerClassName = makeConditionalClassName({
|
||||
context: tvMode,
|
||||
defaultClassName: 'w-full',
|
||||
on: 'hidden',
|
||||
off: 'flex mb-6 justify-between items-center',
|
||||
});
|
||||
|
||||
const cardContainerClassName = makeConditionalClassName({
|
||||
context: tvMode,
|
||||
defaultClassName: 'w-full',
|
||||
on: 'grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4',
|
||||
off: 'space-y-2 w-full',
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={containerClassName}>
|
||||
<div className={headerClassName}>
|
||||
<div className='flex items-center gap-6'>
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={handleSelectAllChange}
|
||||
className='flex items-center gap-2'
|
||||
>
|
||||
<CheckCircle2
|
||||
className={`w-4 h-4 ${selectAll ? 'text-primary' : ''}`}
|
||||
/>
|
||||
{selectAll ? 'Deselect All' : 'Select All'}
|
||||
</Button>
|
||||
{!tvMode && (
|
||||
<div className='flex items-center gap-2 text-sm text-muted-foreground'>
|
||||
<span>Miss the old table?</span>
|
||||
<Link
|
||||
href='/status/table'
|
||||
className='font-medium text-primary hover:underline'
|
||||
>
|
||||
Find it here!
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<ConnectionStatus
|
||||
status={connectionStatus}
|
||||
onReconnect={reconnect}
|
||||
showAsButton={connectionStatus === 'disconnected'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cardContainerClassName}>
|
||||
{usersWithStatuses.map((userWithStatus) => {
|
||||
const isSelected = selectedUsers.some(
|
||||
(u) => u.user.id === userWithStatus.user.id,
|
||||
);
|
||||
const isNewStatus = newStatuses.has(userWithStatus);
|
||||
const isUpdatedByOther =
|
||||
userWithStatus.updated_by &&
|
||||
userWithStatus.updated_by.id !== userWithStatus.user.id;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={userWithStatus.user.id}
|
||||
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'}
|
||||
${isNewStatus ? 'animate-in slide-in-from-top-2 duration-500 bg-green-50 border-green-200' : ''}
|
||||
`}
|
||||
onClick={(e) => handleCardSelect(userWithStatus, e)}
|
||||
>
|
||||
{isSelected && (
|
||||
<div className='absolute top-2 right-2 text-primary'>
|
||||
<CheckCircle2
|
||||
className={`${tvMode ? 'w-6 h-6' : 'w-5 h-5'}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CardContent className='p-0'>
|
||||
<div className='flex items-start gap-3'>
|
||||
{/* Profile Section - Clickable for history */}
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<div
|
||||
data-profile-trigger
|
||||
className='flex-shrink-0 cursor-pointer hover:opacity-80 transition-opacity'
|
||||
onClick={() =>
|
||||
setSelectedHistoryUser(userWithStatus.user)
|
||||
}
|
||||
>
|
||||
<BasedAvatar
|
||||
src={userWithStatus.user.avatar_url}
|
||||
fullName={userWithStatus.user.full_name}
|
||||
className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
|
||||
/>
|
||||
</div>
|
||||
</DrawerTrigger>
|
||||
{selectedHistoryUser === userWithStatus.user && (
|
||||
<HistoryDrawer user={selectedHistoryUser} />
|
||||
)}
|
||||
</Drawer>
|
||||
|
||||
{/* Content Section */}
|
||||
<div className='flex-1 min-w-0'>
|
||||
{/* Header with name and timestamp */}
|
||||
<div className='flex items-center justify-between mb-2'>
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<h3
|
||||
data-profile-trigger
|
||||
className={`
|
||||
font-semibold cursor-pointer hover:underline truncate
|
||||
${tvMode ? 'text-2xl' : 'text-base'}
|
||||
`}
|
||||
onClick={() =>
|
||||
setSelectedHistoryUser(userWithStatus.user)
|
||||
}
|
||||
>
|
||||
{userWithStatus.user.full_name}
|
||||
</h3>
|
||||
</DrawerTrigger>
|
||||
{selectedHistoryUser === userWithStatus.user && (
|
||||
<HistoryDrawer user={selectedHistoryUser} />
|
||||
)}
|
||||
</Drawer>
|
||||
|
||||
<div className='flex items-center gap-2 text-muted-foreground flex-shrink-0'>
|
||||
<Clock
|
||||
className={`${tvMode ? 'w-5 h-5' : 'w-4 h-4'}`}
|
||||
/>
|
||||
<span className={`${tvMode ? 'text-lg' : 'text-sm'}`}>
|
||||
{formatTime(userWithStatus.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Content */}
|
||||
<div
|
||||
className={`
|
||||
mb-2 leading-relaxed
|
||||
${tvMode ? 'text-xl' : 'text-sm'}
|
||||
`}
|
||||
>
|
||||
<p>{userWithStatus.status}</p>
|
||||
</div>
|
||||
|
||||
{/* Footer with date and updated by info */}
|
||||
<div className='flex items-center justify-between text-muted-foreground'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Calendar
|
||||
className={`${tvMode ? 'w-4 h-4' : 'w-3 h-3'}`}
|
||||
/>
|
||||
<span className={`${tvMode ? 'text-base' : 'text-xs'}`}>
|
||||
{formatDate(userWithStatus.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isUpdatedByOther && (
|
||||
<div className='flex items-center gap-1'>
|
||||
<BasedAvatar
|
||||
src={userWithStatus.updated_by?.avatar_url}
|
||||
fullName={userWithStatus.updated_by?.full_name}
|
||||
className={`${tvMode ? 'w-5 h-5' : 'w-4 h-4'}`}
|
||||
/>
|
||||
<span
|
||||
className={`${tvMode ? 'text-base' : 'text-xs'}`}
|
||||
>
|
||||
Updated by {userWithStatus.updated_by?.full_name}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{usersWithStatuses.length === 0 && (
|
||||
<Card className='p-8 text-center'>
|
||||
<p
|
||||
className={`text-muted-foreground ${tvMode ? 'text-2xl' : 'text-base'}`}
|
||||
>
|
||||
No status updates have been made in the past day.
|
||||
</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!tvMode && (
|
||||
<Card className='p-6 mt-6 w-full'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<h3 className='text-lg font-semibold'>Update Status</h3>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex gap-4'>
|
||||
<Input
|
||||
autoFocus
|
||||
type='text'
|
||||
placeholder='Enter status update...'
|
||||
className='flex-1 text-base'
|
||||
value={statusInput}
|
||||
disabled={updateStatusMutation.isPending}
|
||||
onChange={(e) => setStatusInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (
|
||||
e.key === 'Enter' &&
|
||||
!e.shiftKey &&
|
||||
!updateStatusMutation.isPending
|
||||
) {
|
||||
e.preventDefault();
|
||||
handleUpdateStatus();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<SubmitButton
|
||||
onClick={handleUpdateStatus}
|
||||
disabled={updateStatusMutation.isPending}
|
||||
className='px-6'
|
||||
>
|
||||
{selectedUsers.length > 0
|
||||
? `Update ${selectedUsers.length} ${selectedUsers.length > 1 ? 'users' : 'user'}`
|
||||
: 'Update Status'}
|
||||
</SubmitButton>
|
||||
</div>
|
||||
{updateStatusMessage &&
|
||||
(updateStatusMessage.includes('Error') ||
|
||||
updateStatusMessage.includes('error') ||
|
||||
updateStatusMessage.includes('failed') ||
|
||||
updateStatusMessage.includes('invalid') ? (
|
||||
<StatusMessage message={{ error: updateStatusMessage }} />
|
||||
) : (
|
||||
<StatusMessage message={{ message: updateStatusMessage }} />
|
||||
))}
|
||||
</div>
|
||||
<div className='flex justify-center mt-2'>
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<Button
|
||||
variant='outline'
|
||||
className={tvMode ? 'text-xl p-6' : ''}
|
||||
>
|
||||
View All Status History
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<HistoryDrawer />
|
||||
</Drawer>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -10,11 +10,10 @@ import { makeConditionalClassName } from '@/lib/utils';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RefreshCw, Clock, Calendar } from 'lucide-react';
|
||||
import { useSharedStatusSubscription, useStatusData } from '@/lib/hooks';
|
||||
import { useStatusSubscription, useStatusData } from '@/lib/hooks';
|
||||
import { formatTime, formatDate } from '@/lib/utils';
|
||||
import Link from 'next/link';
|
||||
|
||||
|
||||
type TableProps = {
|
||||
initialStatuses: UserWithStatus[];
|
||||
};
|
||||
@ -42,7 +41,7 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
enabled: isAuthenticated,
|
||||
});
|
||||
// In your StatusList component
|
||||
const { connectionStatus, connect: reconnect } = useSharedStatusSubscription(() => {
|
||||
const { connectionStatus, connect: reconnect } = useStatusSubscription(() => {
|
||||
refetch().catch((error) => {
|
||||
console.error('Error refetching statuses:', error);
|
||||
});
|
||||
@ -59,14 +58,14 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
const handleUpdateStatus = () => {
|
||||
if (!isAuthenticated) {
|
||||
setUpdateStatusMessage(
|
||||
'Error: You must be signed in to update technician statuses!'
|
||||
'Error: You must be signed in to update technician statuses!',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (statusInput.length < 3 || statusInput.length > 80) {
|
||||
setUpdateStatusMessage(
|
||||
'Error: Your status must be between 3 & 80 characters long!'
|
||||
'Error: Your status must be between 3 & 80 characters long!',
|
||||
);
|
||||
return;
|
||||
}
|
||||
@ -85,7 +84,7 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
setSelectedUsers((prev) =>
|
||||
prev.some((u) => u.user.id === user.user.id)
|
||||
? prev.filter((prevUser) => prevUser.user.id !== user.user.id)
|
||||
: [...prev, user]
|
||||
: [...prev, user],
|
||||
);
|
||||
};
|
||||
|
||||
@ -101,7 +100,7 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
useEffect(() => {
|
||||
setSelectAll(
|
||||
selectedUsers.length === usersWithStatuses.length &&
|
||||
usersWithStatuses.length > 0
|
||||
usersWithStatuses.length > 0,
|
||||
);
|
||||
}, [selectedUsers.length, usersWithStatuses.length]);
|
||||
|
||||
@ -163,7 +162,7 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
/>
|
||||
{!tvMode && (
|
||||
<div className='flex flex-row gap-2'>
|
||||
<p>Tired of the old table? {' '}</p>
|
||||
<p>Tired of the old table? </p>
|
||||
<Link
|
||||
href='/status/list'
|
||||
className='italic font-semibold text-accent-foreground'
|
||||
@ -249,9 +248,7 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
fullName={userWithStatus.updated_by?.full_name}
|
||||
className='w-5 h-5'
|
||||
/>
|
||||
<span
|
||||
className={tvMode ? 'text-lg' : 'text-base'}
|
||||
>
|
||||
<span className={tvMode ? 'text-lg' : 'text-base'}>
|
||||
Updated by {userWithStatus.updated_by.full_name}
|
||||
</span>
|
||||
</div>
|
||||
@ -279,7 +276,9 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
<div className='flex items-start xl:w-1/6'></div>
|
||||
<div className='flex flex-col my-auto items-start'>
|
||||
<div className='flex gap-4 my-1'>
|
||||
<Clock className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`} />
|
||||
<Clock
|
||||
className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
|
||||
/>
|
||||
{formatTime(userWithStatus.created_at)}
|
||||
</div>
|
||||
<div className='flex gap-4 my-1'>
|
||||
@ -352,8 +351,7 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
{selectedUsers.length > 0
|
||||
? `Update status for ${selectedUsers.length}
|
||||
${selectedUsers.length > 1 ? 'users' : 'user'}`
|
||||
: 'Update status'
|
||||
}
|
||||
: 'Update status'}
|
||||
</SubmitButton>
|
||||
</div>
|
||||
)}
|
||||
@ -363,7 +361,10 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
<div className='flex justify-center mt-6'>
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<Button variant='outline' className={tvMode ? 'text-3xl p-6' : ''}>
|
||||
<Button
|
||||
variant='outline'
|
||||
className={tvMode ? 'text-3xl p-6' : ''}
|
||||
>
|
||||
View All Status History
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
@ -374,4 +375,3 @@ export const TechTable = ({ initialStatuses = [] }: TableProps) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
export * from './ConnectionStatus';
|
||||
export * from './HistoryDrawer';
|
||||
export * from './List';
|
||||
//export * from './List';
|
||||
export * from './StatusList';
|
||||
export * from './Table';
|
||||
|
||||
@ -3,7 +3,7 @@ export * from './public';
|
||||
export * from './status';
|
||||
export * from './storage';
|
||||
export * from './useFileUpload';
|
||||
export * from './useSharedStatusSubscription';
|
||||
export * from './useStatusSubscription';
|
||||
export * from './useStatusData';
|
||||
|
||||
export type Result<T> =
|
||||
|
||||
@ -1,213 +0,0 @@
|
||||
'use client';
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { createClient } from '@/utils/supabase';
|
||||
import type { RealtimeChannel } from '@supabase/supabase-js';
|
||||
|
||||
export type ConnectionStatus =
|
||||
| 'connecting'
|
||||
| 'connected'
|
||||
| 'disconnected'
|
||||
| 'updating';
|
||||
|
||||
// Singleton state
|
||||
let sharedChannel: RealtimeChannel | null = null;
|
||||
let sharedConnectionStatus: ConnectionStatus = 'disconnected';
|
||||
const subscribers = new Set<(status: ConnectionStatus) => void>();
|
||||
const statusUpdateCallbacks = new Set<() => void>();
|
||||
let reconnectAttempts = 0;
|
||||
let reconnectTimeout: NodeJS.Timeout | undefined;
|
||||
const supabase = createClient();
|
||||
|
||||
const notifySubscribers = (status: ConnectionStatus) => {
|
||||
console.log('📢 notifySubscribers: Notifying', subscribers.size, 'subscribers of status change to:', status);
|
||||
sharedConnectionStatus = status;
|
||||
subscribers.forEach((callback, index) => {
|
||||
console.log('📢 notifySubscribers: Calling subscriber', index + 1);
|
||||
callback(status);
|
||||
});
|
||||
console.log('📢 notifySubscribers: All subscribers notified');
|
||||
};
|
||||
|
||||
const notifyStatusUpdate = () => {
|
||||
console.log('🔄 notifyStatusUpdate: Notifying', statusUpdateCallbacks.size, 'status update callbacks');
|
||||
statusUpdateCallbacks.forEach((callback, index) => {
|
||||
console.log('🔄 notifyStatusUpdate: Calling callback', index + 1);
|
||||
callback();
|
||||
});
|
||||
console.log('🔄 notifyStatusUpdate: All callbacks executed');
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
console.log('🧹 cleanup: Starting cleanup process');
|
||||
|
||||
if (reconnectTimeout) {
|
||||
console.log('🧹 cleanup: Clearing reconnect timeout');
|
||||
clearTimeout(reconnectTimeout);
|
||||
reconnectTimeout = undefined;
|
||||
}
|
||||
|
||||
if (sharedChannel) {
|
||||
console.log('🧹 cleanup: Removing shared channel');
|
||||
supabase.removeChannel(sharedChannel).catch((error) => {
|
||||
console.error('❌ cleanup: Error removing shared channel:', error);
|
||||
});
|
||||
sharedChannel = null;
|
||||
}
|
||||
|
||||
console.log('✅ cleanup: Cleanup completed');
|
||||
};
|
||||
|
||||
const connect = () => {
|
||||
console.log('🔌 connect: Function called');
|
||||
console.log('🔌 connect: sharedChannel exists:', !!sharedChannel);
|
||||
console.log('🔌 connect: subscribers count:', subscribers.size);
|
||||
|
||||
if (sharedChannel) {
|
||||
console.log('❌ connect: Already connected or connecting, returning early');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('🔌 connect: Starting connection process');
|
||||
cleanup();
|
||||
notifySubscribers('connecting');
|
||||
|
||||
console.log('🔌 connect: Creating new channel');
|
||||
const channel = supabase
|
||||
.channel('shared_status_updates', {
|
||||
config: { broadcast: {self: true }}
|
||||
})
|
||||
.on('broadcast', { event: 'status_updated' }, (payload) => {
|
||||
console.log('📡 connect: Broadcast event received:', payload);
|
||||
notifyStatusUpdate();
|
||||
})
|
||||
.subscribe((status) => {
|
||||
console.log('📡 connect: Subscription status changed to:', status);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
|
||||
if (status === 'SUBSCRIBED') {
|
||||
console.log('✅ connect: Successfully subscribed to realtime');
|
||||
notifySubscribers('connected');
|
||||
reconnectAttempts = 0;
|
||||
console.log('✅ connect: Reset reconnect attempts to 0');
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
|
||||
} else if (status === 'CHANNEL_ERROR' || status === 'CLOSED') {
|
||||
console.log('❌ connect: Channel error or closed, status:', status);
|
||||
notifySubscribers('disconnected');
|
||||
|
||||
if (reconnectAttempts < 5) {
|
||||
reconnectAttempts++;
|
||||
const delay = 2000 * reconnectAttempts;
|
||||
console.log('🔄 connect: Scheduling reconnection attempt', reconnectAttempts, 'in', delay, 'ms');
|
||||
|
||||
reconnectTimeout = setTimeout(() => {
|
||||
console.log('🔄 connect: Reconnection timeout executed');
|
||||
if (subscribers.size > 0) {
|
||||
console.log('🔄 connect: Calling connect() for reconnection');
|
||||
connect();
|
||||
} else {
|
||||
console.log('❌ connect: No active subscribers, skipping reconnection');
|
||||
}
|
||||
}, delay);
|
||||
} else {
|
||||
console.warn('⚠️ connect: Max reconnection attempts (5) reached');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
sharedChannel = channel;
|
||||
console.log('🔌 connect: Channel stored in sharedChannel variable');
|
||||
};
|
||||
|
||||
const disconnect = () => {
|
||||
console.log('🔌 disconnect: Function called');
|
||||
cleanup();
|
||||
notifySubscribers('disconnected');
|
||||
};
|
||||
|
||||
export const useSharedStatusSubscription = (onStatusUpdate?: () => void) => {
|
||||
console.log('🚀 useSharedStatusSubscription: Hook called');
|
||||
|
||||
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(sharedConnectionStatus);
|
||||
const onStatusUpdateRef = useRef(onStatusUpdate);
|
||||
const hasInitialized = useRef(false);
|
||||
|
||||
// Keep the ref updated
|
||||
onStatusUpdateRef.current = onStatusUpdate;
|
||||
|
||||
// Create a stable callback
|
||||
const stableOnStatusUpdate = useCallback(() => {
|
||||
onStatusUpdateRef.current?.();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Running');
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: hasInitialized:', hasInitialized.current);
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Current subscribers count:', subscribers.size);
|
||||
|
||||
// Prevent duplicate initialization
|
||||
if (hasInitialized.current) {
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
|
||||
hasInitialized.current = true;
|
||||
|
||||
// Subscribe to status changes
|
||||
subscribers.add(setConnectionStatus);
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Added setConnectionStatus to subscribers');
|
||||
|
||||
// Subscribe to status updates
|
||||
if (onStatusUpdate) {
|
||||
statusUpdateCallbacks.add(stableOnStatusUpdate);
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Added stable onStatusUpdate callback');
|
||||
}
|
||||
|
||||
// Connect if this is the first subscriber
|
||||
if (subscribers.size === 1) {
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: First subscriber, setting up connection');
|
||||
const timeout = setTimeout(() => {
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Connection timeout executed, calling connect()');
|
||||
connect();
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Cleanup - clearing connection timeout');
|
||||
clearTimeout(timeout);
|
||||
hasInitialized.current = false;
|
||||
subscribers.delete(setConnectionStatus);
|
||||
statusUpdateCallbacks.delete(stableOnStatusUpdate);
|
||||
|
||||
if (subscribers.size === 0) {
|
||||
disconnect();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return () => {
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Cleanup function running');
|
||||
hasInitialized.current = false;
|
||||
subscribers.delete(setConnectionStatus);
|
||||
statusUpdateCallbacks.delete(stableOnStatusUpdate);
|
||||
|
||||
if (subscribers.size === 0) {
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: No more subscribers, calling disconnect()');
|
||||
disconnect();
|
||||
}
|
||||
};
|
||||
}, []); // Empty dependency array!
|
||||
|
||||
const reconnect = useCallback(() => {
|
||||
console.log('🔄 reconnect: Function called');
|
||||
reconnectAttempts = 0;
|
||||
console.log('🔄 reconnect: Reset reconnectAttempts to 0, calling connect()');
|
||||
connect();
|
||||
}, []);
|
||||
|
||||
console.log('🏁 useSharedStatusSubscription: connectionStatus:', connectionStatus);
|
||||
|
||||
return {
|
||||
connectionStatus,
|
||||
connect: reconnect,
|
||||
disconnect,
|
||||
};
|
||||
};
|
||||
@ -13,15 +13,15 @@ import { toast } from 'sonner';
|
||||
type UseStatusDataOptions = {
|
||||
initialData?: UserWithStatus[];
|
||||
enabled?: boolean;
|
||||
}
|
||||
};
|
||||
|
||||
export const useStatusData = ({
|
||||
initialData = [],
|
||||
enabled = true
|
||||
enabled = true,
|
||||
}: UseStatusDataOptions = {}) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [newStatuses, setNewStatuses] = useState<Set<UserWithStatus>>(
|
||||
new Set()
|
||||
new Set(),
|
||||
);
|
||||
|
||||
const query = useQuery({
|
||||
@ -79,7 +79,7 @@ export const useStatusData = ({
|
||||
const optimisticData = previousData.map((userStatus) => {
|
||||
if (
|
||||
usersWithStatuses.some(
|
||||
(selected) => selected.user.id === userStatus.user.id
|
||||
(selected) => selected.user.id === userStatus.user.id,
|
||||
)
|
||||
) {
|
||||
return { ...userStatus, status, created_at: now };
|
||||
@ -94,7 +94,7 @@ export const useStatusData = ({
|
||||
setNewStatuses((prev) => {
|
||||
const updated = new Set(prev);
|
||||
usersWithStatuses.forEach((updatedStatus) =>
|
||||
updated.delete(updatedStatus)
|
||||
updated.delete(updatedStatus),
|
||||
);
|
||||
return updated;
|
||||
});
|
||||
@ -112,7 +112,7 @@ export const useStatusData = ({
|
||||
|
||||
data.forEach((statusUpdate) => {
|
||||
toast.success(
|
||||
`${statusUpdate.user.full_name}'s status updated to '${statusUpdate.status}'.`
|
||||
`${statusUpdate.user.full_name}'s status updated to '${statusUpdate.status}'.`,
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
'use client';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { createClient } from '@/utils/supabase';
|
||||
import type { RealtimeChannel } from '@supabase/supabase-js';
|
||||
|
||||
@ -9,135 +9,247 @@ export type ConnectionStatus =
|
||||
| 'disconnected'
|
||||
| 'updating';
|
||||
|
||||
type UseStatusSubscriptionOptions = {
|
||||
enabled?: boolean;
|
||||
onStatusUpdate?: () => void;
|
||||
maxReconnectAttempts?: number;
|
||||
reconnectDelay?: number;
|
||||
}
|
||||
// Singleton state
|
||||
let sharedChannel: RealtimeChannel | null = null;
|
||||
let sharedConnectionStatus: ConnectionStatus = 'disconnected';
|
||||
const subscribers = new Set<(status: ConnectionStatus) => void>();
|
||||
const statusUpdateCallbacks = new Set<() => void>();
|
||||
let reconnectAttempts = 0;
|
||||
let reconnectTimeout: NodeJS.Timeout | undefined;
|
||||
const supabase = createClient();
|
||||
|
||||
export const useStatusSubscription = ({
|
||||
enabled = true,
|
||||
onStatusUpdate,
|
||||
maxReconnectAttempts = 5,
|
||||
reconnectDelay = 2000,
|
||||
}: UseStatusSubscriptionOptions = {}) => {
|
||||
const [connectionStatus, setConnectionStatus] =
|
||||
useState<ConnectionStatus>('disconnected');
|
||||
const channelRef = useRef<RealtimeChannel | null>(null);
|
||||
const supabaseRef = useRef(createClient());
|
||||
const reconnectAttemptsRef = useRef(0);
|
||||
const reconnectTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
|
||||
const isComponentMountedRef = useRef(true);
|
||||
const visibilityTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
|
||||
|
||||
const cleanup = useCallback(() => {
|
||||
if (reconnectTimeoutRef.current) {
|
||||
clearTimeout(reconnectTimeoutRef.current);
|
||||
reconnectTimeoutRef.current = undefined;
|
||||
}
|
||||
if (visibilityTimeoutRef.current) {
|
||||
clearTimeout(visibilityTimeoutRef.current);
|
||||
visibilityTimeoutRef.current = undefined;
|
||||
}
|
||||
if (channelRef.current) {
|
||||
supabaseRef.current.removeChannel(channelRef.current).catch((error) => {
|
||||
console.error('❌ cleanup: Error removing channel:', error);
|
||||
const notifySubscribers = (status: ConnectionStatus) => {
|
||||
console.log(
|
||||
'📢 notifySubscribers: Notifying',
|
||||
subscribers.size,
|
||||
'subscribers of status change to:',
|
||||
status,
|
||||
);
|
||||
sharedConnectionStatus = status;
|
||||
subscribers.forEach((callback, index) => {
|
||||
console.log('📢 notifySubscribers: Calling subscriber', index + 1);
|
||||
callback(status);
|
||||
});
|
||||
channelRef.current = null;
|
||||
console.log('📢 notifySubscribers: All subscribers notified');
|
||||
};
|
||||
|
||||
const notifyStatusUpdate = () => {
|
||||
console.log(
|
||||
'🔄 notifyStatusUpdate: Notifying',
|
||||
statusUpdateCallbacks.size,
|
||||
'status update callbacks',
|
||||
);
|
||||
statusUpdateCallbacks.forEach((callback, index) => {
|
||||
console.log('🔄 notifyStatusUpdate: Calling callback', index + 1);
|
||||
callback();
|
||||
});
|
||||
console.log('🔄 notifyStatusUpdate: All callbacks executed');
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
console.log('🧹 cleanup: Starting cleanup process');
|
||||
|
||||
if (reconnectTimeout) {
|
||||
console.log('🧹 cleanup: Clearing reconnect timeout');
|
||||
clearTimeout(reconnectTimeout);
|
||||
reconnectTimeout = undefined;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const connect = useCallback(() => {
|
||||
if (!enabled || !isComponentMountedRef.current) return;
|
||||
if (sharedChannel) {
|
||||
console.log('🧹 cleanup: Removing shared channel');
|
||||
supabase.removeChannel(sharedChannel).catch((error) => {
|
||||
console.error('❌ cleanup: Error removing shared channel:', error);
|
||||
});
|
||||
sharedChannel = null;
|
||||
}
|
||||
|
||||
console.log('✅ cleanup: Cleanup completed');
|
||||
};
|
||||
|
||||
const connect = () => {
|
||||
console.log('🔌 connect: Function called');
|
||||
console.log('🔌 connect: sharedChannel exists:', !!sharedChannel);
|
||||
console.log('🔌 connect: subscribers count:', subscribers.size);
|
||||
|
||||
if (sharedChannel) {
|
||||
console.log('❌ connect: Already connected or connecting, returning early');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('🔌 connect: Starting connection process');
|
||||
cleanup();
|
||||
setConnectionStatus('connecting');
|
||||
notifySubscribers('connecting');
|
||||
|
||||
const channel = supabaseRef.current
|
||||
console.log('🔌 connect: Creating new channel');
|
||||
const channel = supabase
|
||||
.channel('status_updates', {
|
||||
config: { broadcast: {self: true }}
|
||||
});
|
||||
channel
|
||||
config: { broadcast: { self: true } },
|
||||
})
|
||||
.on('broadcast', { event: 'status_updated' }, (payload) => {
|
||||
onStatusUpdate?.();
|
||||
console.log('📡 connect: Broadcast event received:', payload);
|
||||
notifyStatusUpdate();
|
||||
})
|
||||
.subscribe((status) => {
|
||||
if (!isComponentMountedRef.current) return;
|
||||
console.log('📡 connect: Subscription status changed to:', status);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
|
||||
if (status === 'SUBSCRIBED') {
|
||||
setConnectionStatus('connected');
|
||||
reconnectAttemptsRef.current = 0;
|
||||
console.log('✅ connect: Successfully subscribed to realtime');
|
||||
notifySubscribers('connected');
|
||||
reconnectAttempts = 0;
|
||||
console.log('✅ connect: Reset reconnect attempts to 0');
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
|
||||
} else if (status === 'CHANNEL_ERROR' || status === 'CLOSED') {
|
||||
setConnectionStatus('disconnected');
|
||||
if (reconnectAttemptsRef.current < maxReconnectAttempts) {
|
||||
reconnectAttemptsRef.current++;
|
||||
const delay = reconnectDelay * reconnectAttemptsRef.current;
|
||||
console.log('❌ connect: Channel error or closed, status:', status);
|
||||
notifySubscribers('disconnected');
|
||||
|
||||
reconnectTimeoutRef.current = setTimeout(() => {
|
||||
if (isComponentMountedRef.current) connect();
|
||||
if (reconnectAttempts < 5) {
|
||||
reconnectAttempts++;
|
||||
const delay = 2000 * reconnectAttempts;
|
||||
console.log(
|
||||
'🔄 connect: Scheduling reconnection attempt',
|
||||
reconnectAttempts,
|
||||
'in',
|
||||
delay,
|
||||
'ms',
|
||||
);
|
||||
|
||||
reconnectTimeout = setTimeout(() => {
|
||||
console.log('🔄 connect: Reconnection timeout executed');
|
||||
if (subscribers.size > 0) {
|
||||
console.log('🔄 connect: Calling connect() for reconnection');
|
||||
connect();
|
||||
} else {
|
||||
console.log(
|
||||
'❌ connect: No active subscribers, skipping reconnection',
|
||||
);
|
||||
}
|
||||
}, delay);
|
||||
} else {
|
||||
console.warn('⚠️ connect: Max reconnection attempts reached');
|
||||
setConnectionStatus('disconnected');
|
||||
console.warn('⚠️ connect: Max reconnection attempts (5) reached');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
channelRef.current = channel;
|
||||
}, [enabled, onStatusUpdate, maxReconnectAttempts, reconnectDelay, cleanup]);
|
||||
sharedChannel = channel;
|
||||
console.log('🔌 connect: Channel stored in sharedChannel variable');
|
||||
};
|
||||
|
||||
const disconnect = useCallback(() => {
|
||||
const disconnect = () => {
|
||||
console.log('🔌 disconnect: Function called');
|
||||
cleanup();
|
||||
setConnectionStatus('disconnected');
|
||||
}, [cleanup]);
|
||||
notifySubscribers('disconnected');
|
||||
};
|
||||
|
||||
const reconnect = useCallback(() => {
|
||||
reconnectAttemptsRef.current = 0;
|
||||
connect();
|
||||
}, [connect]);
|
||||
export const useStatusSubscription = (onStatusUpdate?: () => void) => {
|
||||
console.log('🚀 useSharedStatusSubscription: Hook called');
|
||||
|
||||
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(
|
||||
sharedConnectionStatus,
|
||||
);
|
||||
const onStatusUpdateRef = useRef(onStatusUpdate);
|
||||
const hasInitialized = useRef(false);
|
||||
|
||||
// Keep the ref updated
|
||||
onStatusUpdateRef.current = onStatusUpdate;
|
||||
|
||||
// Create a stable callback
|
||||
const stableOnStatusUpdate = useCallback(() => {
|
||||
onStatusUpdateRef.current?.();
|
||||
}, []);
|
||||
|
||||
// Handle visibility change for better reconnection
|
||||
useEffect(() => {
|
||||
const handleVisibilityChange = () => {
|
||||
if (!enabled) return;
|
||||
if (document.visibilityState === 'visible') {
|
||||
visibilityTimeoutRef.current = setTimeout(() => {
|
||||
if (connectionStatus === 'disconnected' && isComponentMountedRef.current) {
|
||||
reconnect();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
};
|
||||
}, [enabled, connectionStatus, reconnect]);
|
||||
console.log('🔧 useSharedStatusSubscription useEffect: Running');
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: hasInitialized:',
|
||||
hasInitialized.current,
|
||||
);
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: Current subscribers count:',
|
||||
subscribers.size,
|
||||
);
|
||||
|
||||
// Initial connection - SIMPLIFIED to avoid dependency issues
|
||||
useEffect(() => {
|
||||
if (!enabled) {
|
||||
disconnect();
|
||||
// Prevent duplicate initialization
|
||||
if (hasInitialized.current) {
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: Already initialized, skipping',
|
||||
);
|
||||
return;
|
||||
}
|
||||
const initialTimeout = setTimeout(() => {
|
||||
if (isComponentMountedRef.current) connect();
|
||||
|
||||
hasInitialized.current = true;
|
||||
|
||||
// Subscribe to status changes
|
||||
subscribers.add(setConnectionStatus);
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: Added setConnectionStatus to subscribers',
|
||||
);
|
||||
|
||||
// Subscribe to status updates
|
||||
if (onStatusUpdate) {
|
||||
statusUpdateCallbacks.add(stableOnStatusUpdate);
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: Added stable onStatusUpdate callback',
|
||||
);
|
||||
}
|
||||
|
||||
// Connect if this is the first subscriber
|
||||
if (subscribers.size === 1) {
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: First subscriber, setting up connection',
|
||||
);
|
||||
const timeout = setTimeout(() => {
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: Connection timeout executed, calling connect()',
|
||||
);
|
||||
connect();
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
clearTimeout(initialTimeout);
|
||||
};
|
||||
}, [enabled]);
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: Cleanup - clearing connection timeout',
|
||||
);
|
||||
clearTimeout(timeout);
|
||||
hasInitialized.current = false;
|
||||
subscribers.delete(setConnectionStatus);
|
||||
statusUpdateCallbacks.delete(stableOnStatusUpdate);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
cleanup();
|
||||
if (subscribers.size === 0) {
|
||||
disconnect();
|
||||
}
|
||||
};
|
||||
}, [cleanup]);
|
||||
}
|
||||
|
||||
return () => {
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: Cleanup function running',
|
||||
);
|
||||
hasInitialized.current = false;
|
||||
subscribers.delete(setConnectionStatus);
|
||||
statusUpdateCallbacks.delete(stableOnStatusUpdate);
|
||||
|
||||
if (subscribers.size === 0) {
|
||||
console.log(
|
||||
'🔧 useSharedStatusSubscription useEffect: No more subscribers, calling disconnect()',
|
||||
);
|
||||
disconnect();
|
||||
}
|
||||
};
|
||||
}, []); // Empty dependency array!
|
||||
|
||||
const reconnect = useCallback(() => {
|
||||
console.log('🔄 reconnect: Function called');
|
||||
reconnectAttempts = 0;
|
||||
console.log(
|
||||
'🔄 reconnect: Reset reconnectAttempts to 0, calling connect()',
|
||||
);
|
||||
connect();
|
||||
}, []);
|
||||
|
||||
console.log(
|
||||
'🏁 useSharedStatusSubscription: connectionStatus:',
|
||||
connectionStatus,
|
||||
);
|
||||
|
||||
return {
|
||||
connectionStatus,
|
||||
|
||||
Reference in New Issue
Block a user