Merge pull request #295 from TaloDev/develop

Release 0.36.0

Author: tudddorrr

package-lock.json

@@ -78,7 +78,7 @@
   "lint-staged": {
     "*.{ts,js,tsx,jsx}": "eslint --fix"
   },
-  "version": "0.35.0",
+  "version": "0.36.0",
   "engines": {
     "node": "20.x"
   },

package.json

@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import api from './api'
+import makeValidatedRequest from './makeValidatedRequest'
+
+const togglePinnedGroup = makeValidatedRequest(
+  (gameId: number, groupId: string, pinned: boolean) => api.put(`/games/${gameId}/player-groups/${groupId}/toggle-pinned`, { pinned }),
+  z.literal('')
+)
+
+export default togglePinnedGroup

src/api/toggledPinnedGroup.ts

@@ -0,0 +1,28 @@
+import useSWR from 'swr'
+import buildError from '../utils/buildError'
+import { Game } from '../entities/game'
+import makeValidatedGetRequest from './makeValidatedGetRequest'
+import { playerGroupSchema } from '../entities/playerGroup'
+import { z } from 'zod'
+
+export default function usePinnedGroups(activeGame: Game | null) {
+  const fetcher = async ([url]: [string]) => {
+    const res = await makeValidatedGetRequest(url, z.object({
+      groups: z.array(playerGroupSchema)
+    }))
+
+    return res
+  }
+
+  const { data, error, mutate } = useSWR(
+    activeGame ? [`games/${activeGame.id}/player-groups/pinned`] : null,
+    fetcher
+  )
+
+  return {
+    groups: data?.groups ?? [],
+    loading: !data && !error,
+    error: error && buildError(error),
+    mutate
+  }
+}

src/api/usePinnedGroups.ts

@@ -2,7 +2,8 @@ import React from 'react'
 
 export enum ToastType {
   NONE = '',
-  SUCCESS = 'success'
+  SUCCESS = 'success',
+  ERROR = 'error'
 }
 
 export type ToastContextType = {

src/components/toast/ToastContext.ts

@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import ToastContext, { ToastType } from './ToastContext.ts'
-import { IconCheck } from '@tabler/icons-react'
+import { IconCheck, IconX } from '@tabler/icons-react'
 import { useEffect } from 'react'
 import type { ReactNode } from 'react'
+import clsx from 'clsx'
 
 type ToastProviderProps = {
   children: ReactNode
@@ -29,6 +30,8 @@ export default function ToastProvider({
     switch (type) {
       case ToastType.SUCCESS:
         return <IconCheck size={24} />
+      case ToastType.ERROR:
+        return <IconX size={24} />
       default:
         return null
     }
@@ -70,7 +73,7 @@ export default function ToastProvider({
         <AnimatePresence>
           {show &&
             <motion.div
-              className='fixed bottom-0 md:bottom-8 md:left-8 z-[51] w-full md:w-auto md:min-w-80 space-x-2 flex items-center md:rounded p-4 md:pr-8 shadow-md bg-indigo-500 text-white'
+              className={clsx('fixed bottom-0 md:bottom-8 md:left-8 z-[51] w-full md:w-auto md:min-w-80 space-x-2 flex items-center md:rounded p-4 md:pr-8 shadow-md bg-indigo-500 text-white', { 'bg-red-500': type === ToastType.ERROR })}
               initial={{ opacity: 0, scale: 0.95, y: 40 }}
               animate={{
                 opacity: 1,

src/components/toast/ToastProvider.tsx

@@ -7,15 +7,25 @@ import activeGameState from '../../../state/activeGameState'
 import userState from '../../../state/userState'
 import KitchenSink from '../../../utils/KitchenSink'
 import { UserType } from '../../../entities/user'
-import { PlayerGroupRuleCastType, PlayerGroupRuleMode, PlayerGroupRuleName } from '../../../entities/playerGroup'
+import { PlayerGroup, PlayerGroupRuleCastType, PlayerGroupRuleMode, PlayerGroupRuleName } from '../../../entities/playerGroup'
 
 describe('<GroupDetails />', () => {
   const axiosMock = new MockAdapter(api)
   const activeGameValue = { id: '1', name: 'Shattered' }
   axiosMock.onGet(/(.*)preview-count(.*)/).reply(200, { count: 8 })
 
   it('should create a group', async () => {
-    axiosMock.onPost('http://talo.api/games/1/player-groups').replyOnce(200, { group: { id: 2 } })
+    const secondGroup = {
+      id: '1',
+      name: 'Losers',
+      description: 'Players who have lost the game',
+      rules: [],
+      ruleMode: PlayerGroupRuleMode.AND,
+      count: 0,
+      updatedAt: new Date().toISOString()
+    }
+
+    axiosMock.onPost('http://talo.api/games/1/player-groups').replyOnce(200, { group: secondGroup })
 
     const closeMock = vi.fn()
     const mutateMock = vi.fn()
@@ -43,13 +53,21 @@ describe('<GroupDetails />', () => {
 
     expect(mutateMock).toHaveBeenCalled()
 
-    const groups = [
-      { id: '1' }
+    const groups: PlayerGroup[] = [
+      {
+        id: '1',
+        name: 'Winners',
+        description: 'Players who have won the game',
+        rules: [],
+        ruleMode: PlayerGroupRuleMode.AND,
+        count: 0,
+        updatedAt: new Date().toISOString()
+      }
     ]
 
     const mutator = mutateMock.mock.calls[0][0]
     expect(mutator({ groups })).toStrictEqual({
-      groups: [...groups, { id: 2 }]
+      groups: [...groups, secondGroup]
     })
   })
 

src/modals/groups/__tests__/GroupDetails.test.tsx

@@ -15,6 +15,7 @@ import SecondaryNav from '../components/SecondaryNav'
 import DevDataStatus from '../components/DevDataStatus'
 import SecondaryTitle from '../components/SecondaryTitle'
 import useIntendedRoute from '../utils/useIntendedRoute'
+import usePinnedGroups from '../api/usePinnedGroups'
 
 export const secondaryNavRoutes = [
   { title: 'Dashboard', to: routes.dashboard },
@@ -44,6 +45,7 @@ export default function Dashboard() {
   const { startDate, endDate } = useTimePeriod(timePeriod)
   const { headlines, loading: headlinesLoading, error: headlinesError } = useHeadlines(activeGame, startDate, endDate, includeDevData)
   const { stats, loading: statsLoading, error: statsError } = useStats(activeGame, includeDevData)
+  const { groups: pinnedGroups, loading: pinnedGroupsLoading, error: pinnedGroupsError } = usePinnedGroups(activeGame)
 
   const intendedRouteChecked = useIntendedRoute()
 
@@ -89,6 +91,20 @@ export default function Dashboard() {
         </div>
       }
 
+      {pinnedGroups.length > 0 && <SecondaryTitle>Pinned groups</SecondaryTitle>}
+
+      {pinnedGroupsError &&
+        <ErrorMessage error={{ message: 'Couldn\'t fetch pinned groups' }} />
+      }
+
+      {!pinnedGroupsLoading &&
+        <div className='grid md:grid-cols-2 lg:grid-cols-4 gap-4'>
+          {pinnedGroups.map((group) => (
+            <HeadlineStat key={group.id} title={group.name} stat={group.count} />
+          ))}
+        </div>
+      }
+
       {stats.length > 0 && <SecondaryTitle>Global stats</SecondaryTitle>}
 
       {statsError &&

src/pages/Dashboard.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useContext, useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import activeGameState, { SelectedActiveGame } from '../state/activeGameState'
 import ErrorMessage from '../components/ErrorMessage'
 import { format } from 'date-fns'
-import { IconPlus } from '@tabler/icons-react'
+import { IconPinned, IconPinnedFilled, IconPlus } from '@tabler/icons-react'
 import Button from '../components/Button'
 import TableCell from '../components/tables/TableCell'
 import TableBody from '../components/tables/TableBody'
@@ -17,6 +17,10 @@ import Identifier from '../components/Identifier'
 import { useNavigate } from 'react-router-dom'
 import routes from '../constants/routes'
 import { PlayerGroup } from '../entities/playerGroup'
+import Tippy from '@tippyjs/react'
+import usePinnedGroups from '../api/usePinnedGroups'
+import ToastContext, { ToastType } from '../components/toast/ToastContext'
+import togglePinnedGroup from '../api/toggledPinnedGroup'
 
 export default function Groups() {
   const activeGame = useRecoilValue(activeGameState) as SelectedActiveGame
@@ -27,8 +31,12 @@ export default function Groups() {
   const { groups, loading, error, mutate } = useGroups(activeGame)
   const sortedGroups = useSortedItems(groups, 'name', 'asc')
 
+  const { groups: pinnedGroups, mutate: mutatePinnedGroups } = usePinnedGroups(activeGame)
+
   const navigate = useNavigate()
 
+  const toast = useContext(ToastContext)
+
   useEffect(() => {
     if (!showModal) setEditingGroup(null)
   }, [showModal, editingGroup])
@@ -42,6 +50,25 @@ export default function Groups() {
     navigate(`${routes.players}?search=group:${group.id}`)
   }
 
+  const isPinned = useCallback((group: PlayerGroup) => {
+    return pinnedGroups.find((pg) => pg.id === group.id)
+  }, [pinnedGroups])
+
+  const togglePinned = useCallback(async (group: PlayerGroup) => {
+    try {
+      await togglePinnedGroup(activeGame.id, group.id, !isPinned(group))
+      mutatePinnedGroups((data) => ({
+        ...data,
+        groups: isPinned(group)
+          ? data!.groups.filter((pg) => pg.id !== group.id)
+          : [...data!.groups, group]
+      }), false)
+      toast.trigger(isPinned(group) ? 'Group unpinned' : 'Group pinned to your dashboard', ToastType.SUCCESS)
+    } catch (err) {
+      toast.trigger('Failed to pin group', ToastType.ERROR)
+    }
+  }, [activeGame.id, isPinned, mutatePinnedGroups, toast])
+
   return (
     <Page
       title='Groups'
@@ -70,7 +97,31 @@ export default function Groups() {
               {(group) => (
                 <>
                   <TableCell className='min-w-80'>
-                    <Identifier id={group.id} />
+                    <div className='flex flex-row items-center space-x-4'>
+                      {pinnedGroups &&
+                        <Tippy content={<p>{isPinned(group) ? 'Unpin group' : 'Pin group to dashboard'}</p>}>
+                          <div className='inline-block'>
+                            {isPinned(group) &&
+                              <Button
+                                variant='icon'
+                                className='p-1 rounded-full bg-indigo-900'
+                                icon={<IconPinnedFilled />}
+                                onClick={() => togglePinned(group)}
+                              />
+                            }
+                            {!isPinned(group) &&
+                              <Button
+                                variant='icon'
+                                className='p-1 rounded-full bg-indigo-900'
+                                icon={<IconPinned />}
+                                onClick={() => togglePinned(group)}
+                              />
+                            }
+                          </div>
+                        </Tippy>
+                      }
+                      <Identifier id={group.id} />
+                    </div>
                   </TableCell>
                   <TableCell className='min-w-[320px] max-w-[320px] lg:min-w-0'>
                     {group.name}