feat: add spoiler mode to admin table

app/tipping/add-tips/[race-id]/actions/submit-tip.tsx

@@ -97,6 +97,7 @@ export async function submitChanges(input: Record<string, any>) {
         set: onConflictUpdateKeys(predictionEntriesTable, [
           'driverId',
           'constructorId',
+          'lastUpdatedBy',
         ]),
       })
   }
@@ -112,7 +113,12 @@ export async function submitChanges(input: Record<string, any>) {
       if (!id) {
         return acc
       }
-      acc.push({ predictionId, position: entry, driverId: id })
+      acc.push({
+        predictionId,
+        position: entry,
+        driverId: id,
+        lastUpdatedBy: userId,
+      })
       return acc
     }, [] as Db.InsertPredictionEntry[])
 
@@ -123,7 +129,12 @@ export async function submitChanges(input: Record<string, any>) {
       if (!id) {
         return acc
       }
-      acc.push({ predictionId, position: entry, constructorId: id })
+      acc.push({
+        predictionId,
+        position: entry,
+        constructorId: id,
+        lastUpdatedBy: userId,
+      })
       return acc
     }, [] as Db.InsertPredictionEntry[])
 

app/tipping/group-admin/_components/columns.tsx

@@ -48,7 +48,27 @@ export const columns: ColumnDef<PredictionRow>[] = [
   {
     accessorKey: 'value',
     header: 'Tip',
-    cell({ row }) {
+    cell({ row, table }) {
+      const meta = table.options.meta as
+        | { showSpoilers: boolean; currentUserId: string }
+        | undefined
+      const showSpoilers = meta?.showSpoilers ?? true
+      const currentUserId = meta?.currentUserId
+
+      const { lastUpdatedBy, race } = row.original
+      const isRaceInFuture = race.grandPrixDate > new Date()
+      const isNotUpdatedByCurrentUser = lastUpdatedBy !== currentUserId
+      const shouldHideSpoiler =
+        !showSpoilers && isRaceInFuture && isNotUpdatedByCurrentUser
+
+      if (shouldHideSpoiler) {
+        return (
+          <span className='text-muted-foreground italic text-sm'>
+            No spoilers
+          </span>
+        )
+      }
+
       const type = row.original.type
       if (type === 'driver') {
         const driver = row.original.value as DriverOptionProps

app/tipping/group-admin/_components/data-table.tsx

@@ -23,15 +23,18 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { RACE_PREDICTION_FIELDS } from '@/constants'
+import { LucideEye, LucideEyeOff } from 'lucide-react'
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
+  currentUserId: string
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
+  currentUserId,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>([
     {
@@ -47,6 +50,7 @@ export function DataTable<TData, TValue>({
       desc: true,
     },
   ])
+  const [showSpoilers, setShowSpoilers] = React.useState(false)
 
   const table = useReactTable({
     data,
@@ -58,6 +62,10 @@ export function DataTable<TData, TValue>({
     state: {
       sorting,
     },
+    meta: {
+      showSpoilers,
+      currentUserId,
+    },
     initialState: {
       pagination: {
         pageSize: 50,
@@ -66,7 +74,26 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div>
+    <div className={showSpoilers ? 'show-spoilers' : ''}>
+      <div className='mb-4 flex justify-end'>
+        <Button
+          variant='outline'
+          size='sm'
+          onClick={() => setShowSpoilers(!showSpoilers)}
+        >
+          {showSpoilers ? (
+            <>
+              <LucideEyeOff className='mr-2 h-4 w-4' />
+              Hide spoilers
+            </>
+          ) : (
+            <>
+              <LucideEye className='mr-2 h-4 w-4' />
+              Show spoilers
+            </>
+          )}
+        </Button>
+      </div>
       <div className='overflow-hidden rounded-md border'>
         <Table>
           <TableHeader>

app/tipping/group-admin/_utils/create-tip-action.ts

@@ -18,7 +18,7 @@ export async function createTip(data: Schema): Promise<ServerResponse> {
   if (!result.ok) {
     return result
   }
-  const { group, parsed } = result
+  const { group, parsed, adminUserId } = result
   const prediction = await getPrediction({
     groupId: group.id,
     raceId: data.raceId,
@@ -36,6 +36,7 @@ export async function createTip(data: Schema): Promise<ServerResponse> {
       prediction?.id,
       parsed.data,
       group.id,
+      adminUserId,
     )
     revalidateTag(CacheTag.Predictions)
     return {
@@ -53,6 +54,7 @@ export async function createTip(data: Schema): Promise<ServerResponse> {
     predictionIdInput: Database.PredictionId | undefined,
     data: Schema,
     groupId: Database.GroupId,
+    adminUserId: Database.UserId,
   ) {
     const { userId, raceId, position, valueId } = data
 
@@ -66,6 +68,7 @@ export async function createTip(data: Schema): Promise<ServerResponse> {
         predictionId,
         position,
         overwriteTo: getOverwrite(data.overwriteTo),
+        lastUpdatedBy: adminUserId,
         ...valueObject,
       })
     }
@@ -148,6 +151,7 @@ async function verifyRequest(data: Schema) {
     message: '',
     parsed,
     userId,
+    adminUserId,
   }
 
   async function getUserIsMemberOfGroup(groupId: Database.Group['id']) {
@@ -170,6 +174,7 @@ export async function updateTip(
   if (!result.ok) {
     return result
   }
+  const { adminUserId } = result
   try {
     await updatePrediction()
     revalidateTag(CacheTag.Predictions)
@@ -190,6 +195,7 @@ export async function updateTip(
       .set({
         ...getValueObject(data),
         overwriteTo: getOverwrite(data.overwriteTo),
+        lastUpdatedBy: adminUserId,
       })
       .where(eq(predictionEntriesTable.id, predictionEntryId))
   }

app/tipping/group-admin/_utils/rows.ts

@@ -17,11 +17,13 @@ export type PredictionRow = {
   race: {
     id: Database.Race['id']
     label: string
+    grandPrixDate: Date
   }
   created: string
   position: RacePredictionField
   type: 'driver' | 'constructor'
   overwrite: Database.PredictionEntry['overwriteTo']
+  lastUpdatedBy: Database.PredictionEntry['lastUpdatedBy']
 }
 
 export function formatPredictionsToRows(
@@ -52,6 +54,7 @@ export function formatPredictionsToRows(
         race: {
           id: entry.prediction.raceId!,
           label: race.locality,
+          grandPrixDate: race.grandPrixDate,
         },
         userName: user.name,
         user: {
@@ -61,6 +64,7 @@ export function formatPredictionsToRows(
         value: getValue()!,
         position: entry.position as RacePredictionField,
         type: getType(),
+        lastUpdatedBy: entry.lastUpdatedBy,
       }
 
       function getType() {

app/tipping/group-admin/page.tsx

@@ -87,7 +87,7 @@ export default async function GroupSettings() {
           <CreateOrEditTipDialog {...formProps} />
         </div>
         <TipFormProvider context={formProps}>
-          <DataTable columns={columns} data={rows} />
+          <DataTable columns={columns} data={rows} currentUserId={userId} />
         </TipFormProvider>
       </section>
     </div>

db/migrations/0004_real_kronos.sql

@@ -0,0 +1 @@
+ALTER TABLE `prediction_entries` ADD `last_updated_by` text REFERENCES user(id);