= usage.limit })}
28 | >
29 | {usage.used.toLocaleString()} / {usage.limit.toLocaleString()}
30 |
31 |
32 |
33 |
= usage.limit })}
35 | style={{ width: `${Math.min(100, usage.used / usage.limit * 100)}%` }}
36 | />
37 |
38 |
39 |
40 | }
41 |
42 | }
43 | footer={(
44 | <>
45 | {usageError &&
46 |
47 | }
48 |
49 | )}
50 | />
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/billing/PaymentRequiredBanner.tsx:
--------------------------------------------------------------------------------
1 | import { MouseEvent, useState } from 'react'
2 | import buildError from '../../utils/buildError'
3 | import Button from '../Button'
4 | import ErrorMessage, { TaloError } from '../ErrorMessage'
5 | import createPortalSession from '../../api/createPortalSession'
6 | import { IconAlertCircle } from '@tabler/icons-react'
7 |
8 | export default function PaymentRequiredBanner() {
9 | const [isLoading, setLoading] = useState(false)
10 | const [error, setError] = useState
(null)
11 |
12 | const onUpdateClick = async (e: MouseEvent) => {
13 | e.preventDefault()
14 |
15 | setLoading(true)
16 | try {
17 | const { redirect } = await createPortalSession()
18 | window.location.assign(redirect)
19 | } catch (err) {
20 | setError(buildError(err))
21 | } finally {
22 | setLoading(false)
23 | }
24 | }
25 |
26 | return (
27 |
28 |
29 |
30 |
33 |
Please update your payment details to continue your current price plan
34 |
35 |
36 |
47 |
48 | {error &&
}
49 |
To learn more about Enterprise Plans , visit the Billing page after registering and creating your first game
12 | : To upgrade to the {capitalize(planName)} Plan , visit the Billing page after registering and creating your first game
13 |
14 | return (
15 |
10 |
18 | )
19 |
20 | expect(screen.getByText('Players')).toBeInTheDocument()
21 | expect(screen.getByText('3 / 5')).toBeInTheDocument()
22 | })
23 |
24 | it('should handle usage errors', async () => {
25 | render(
26 |
27 |
29 | )
30 |
31 | expect(await screen.findByText('Network Error')).toHaveAttribute('role', 'alert')
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/src/components/billing/__tests__/PaymentRequiredBanner.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen, waitFor, within } from '@testing-library/react'
2 | import api from '../../../api/api'
3 | import MockAdapter from 'axios-mock-adapter'
4 | import userEvent from '@testing-library/user-event'
5 | import PaymentRequiredBanner from '../PaymentRequiredBanner'
6 |
7 | describe('
12 |
13 | {payload && formatter(payload.value)}
14 |
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/charts/__tests__/ChartTick.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react'
2 | import ChartTick from '../ChartTick'
3 |
4 | describe('
8 | (tick as string).split(' ')[0]}
11 | transform={vi.fn()}
12 | />
13 |
14 | )
15 |
16 | expect(screen.getByText('1995-11-12')).toBeInTheDocument()
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/src/components/saves/SaveContentFitManager.tsx:
--------------------------------------------------------------------------------
1 | import { useReactFlow } from '@xyflow/react'
2 | import { useEffect } from 'react'
3 | import { useRecoilValue } from 'recoil'
4 | import saveDataNodeSizesState from '../../state/saveDataNodeSizesState'
5 | import { useDebounce } from 'use-debounce'
6 |
7 | export default function SaveContentFitManager() {
8 | const reactFlow = useReactFlow()
9 | const nodeSizes = useRecoilValue(saveDataNodeSizesState)
10 |
11 | const [debouncedLength] = useDebounce(nodeSizes.length, 100)
12 |
13 | useEffect(() => {
14 | if (debouncedLength > 0) {
15 | reactFlow.fitView()
16 | }
17 | }, [debouncedLength, reactFlow])
18 |
19 | return null
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/tables/Table.tsx:
--------------------------------------------------------------------------------
1 | import TableHeader from './TableHeader'
2 | import type { ReactNode } from 'react'
3 |
4 | type TableProps = {
5 | columns: string[]
6 | children: ReactNode
7 | }
8 |
9 | export default function Table({
10 | columns,
11 | children
12 | }: TableProps) {
13 | return (
14 |
15 |
16 |
19 |
= {
5 | iterator: T[]
6 | children: (iteraee: T, idx: number) => ReactNode
7 | startIdx?: number
8 | configureClassnames?: (iteraee: T, idx: number) => { [key: string]: boolean }
9 | }
10 |
11 | export default function TableBody({
12 | iterator,
13 | children,
14 | startIdx = 0,
15 | configureClassnames
16 | }: TableBodyProps) {
17 | return (
18 |
19 | {iterator.map((iteraee, idx) => (
20 |
28 | {children(iteraee, idx)}
29 |
30 | ))}
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/tables/TableCell.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import type { ReactNode } from 'react'
3 |
4 | type TableCellProps = {
5 | children?: ReactNode
6 | className?: string
7 | }
8 |
9 | const TableCell = (props: TableCellProps) => {
10 | return (
11 |
20 | {props.children}
21 |
22 | )
23 | }
24 |
25 | export default TableCell
26 |
--------------------------------------------------------------------------------
/src/components/tables/TableHeader.tsx:
--------------------------------------------------------------------------------
1 | type TableHeaderProps = {
2 | columns: string[]
3 | }
4 |
5 | const TableHeader = (props: TableHeaderProps) => {
6 | return (
7 |
8 |
9 | {props.columns.map((col, idx) => (
10 | {col}
11 | ))}
12 |
13 |
14 | )
15 | }
16 |
17 | export default TableHeader
18 |
--------------------------------------------------------------------------------
/src/components/tables/cells/DateCell.tsx:
--------------------------------------------------------------------------------
1 | import TableCell from '../TableCell'
2 | import type { ReactNode } from 'react'
3 |
4 | type DateCellProps = {
5 | children: ReactNode
6 | }
7 |
8 | const DateCell = (props: DateCellProps) => {
9 | return (
10 |
11 | {props.children}
12 |
13 | )
14 | }
15 |
16 | export default DateCell
17 |
--------------------------------------------------------------------------------
/src/components/toast/ToastContext.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export enum ToastType {
4 | NONE = '',
5 | SUCCESS = 'success',
6 | ERROR = 'error'
7 | }
8 |
9 | export type ToastContextType = {
10 | trigger: (text: string, type?: ToastType) => void
11 | }
12 |
13 | export default React.createContext({ trigger: () => {} })
14 |
--------------------------------------------------------------------------------
/src/components/toast/ToastProvider.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen, waitForElementToBeRemoved } from '@testing-library/react'
2 | import { useContext, useRef } from 'react'
3 | import ToastContext from './ToastContext'
4 | import ToastProvider from './ToastProvider'
5 | import userEvent from '@testing-library/user-event'
6 |
7 | function ToastDummy() {
8 | const { trigger } = useContext(ToastContext)
9 | return trigger('Hello!')}>Trigger
10 | }
11 |
12 | function MultiToastDummy() {
13 | const { trigger } = useContext(ToastContext)
14 | const clicks = useRef(0)
15 |
16 | return (
17 | {
20 | trigger(clicks.current === 0 ? 'Hello!' : 'Hello again!')
21 | clicks.current++
22 | }}
23 | >
24 | Trigger
25 |
26 | )
27 | }
28 |
29 | describe('
33 |
35 | )
36 |
37 | await userEvent.click(screen.getByText('Trigger'))
38 | expect(await screen.findByText('Hello!')).toBeInTheDocument()
39 | })
40 |
41 | it('should trigger multiple toasts', async () => {
42 | render(
43 |
44 |
46 | )
47 |
48 | await userEvent.click(screen.getByText('Trigger'))
49 | expect(await screen.findByText('Hello!')).toBeInTheDocument()
50 |
51 | await userEvent.click(screen.getByText('Trigger'))
52 | await waitForElementToBeRemoved(() => screen.queryByText('Hello!'))
53 | expect(await screen.findByText('Hello again!')).toBeInTheDocument()
54 | })
55 | })
56 |
--------------------------------------------------------------------------------
/src/components/toggles/__tests__/DevDataToggle.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen, waitFor } from '@testing-library/react'
2 | import userEvent from '@testing-library/user-event'
3 | import KitchenSink from '../../../utils/KitchenSink'
4 | import devDataState from '../../../state/devDataState'
5 | import DevDataToggle from '../DevDataToggle'
6 |
7 | describe('
13 |
15 | )
16 |
17 | await userEvent.click(screen.getByRole('checkbox'))
18 | await waitFor(() => expect(toggleMock).toHaveBeenLastCalledWith(true))
19 |
20 | await userEvent.click(screen.getByRole('checkbox'))
21 | await waitFor(() => expect(toggleMock).toHaveBeenLastCalledWith(false))
22 | })
23 | })
24 |
--------------------------------------------------------------------------------
/src/components/toggles/__tests__/Toggle.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen, waitFor } from '@testing-library/react'
2 | import userEvent from '@testing-library/user-event'
3 | import Toggle from '../Toggle'
4 |
5 | describe('
13 |
--------------------------------------------------------------------------------
/src/entities/dataExport.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export enum DataExportStatus {
4 | REQUESTED,
5 | QUEUED,
6 | GENERATED,
7 | SENT
8 | }
9 |
10 | export enum DataExportAvailableEntities {
11 | EVENTS = 'events',
12 | PLAYERS = 'players',
13 | PLAYER_ALIASES = 'playerAliases',
14 | LEADERBOARD_ENTRIES = 'leaderboardEntries',
15 | GAME_STATS = 'gameStats',
16 | PLAYER_GAME_STATS = 'playerGameStats',
17 | GAME_ACTIVITIES = 'gameActivities',
18 | GAME_FEEDBACK = 'gameFeedback'
19 | }
20 |
21 | export const dataExportSchema = z.object({
22 | id: z.number(),
23 | entities: z.array(z.nativeEnum(DataExportAvailableEntities)),
24 | createdBy: z.string(),
25 | status: z.nativeEnum(DataExportStatus),
26 | createdAt: z.string().datetime(),
27 | failedAt: z.string().datetime().nullish()
28 | })
29 |
30 | export type DataExport = z.infer
31 |
--------------------------------------------------------------------------------
/src/entities/event.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { propSchema } from './prop'
3 | import { playerAliasSchema } from './playerAlias'
4 |
5 | export const eventSchema = z.object({
6 | id: z.string().uuid(),
7 | name: z.string(),
8 | props: z.array(propSchema),
9 | playerAlias: playerAliasSchema,
10 | gameId: z.number(),
11 | createdAt: z.string().datetime()
12 | })
13 |
14 | export type Event = z.infer
15 |
--------------------------------------------------------------------------------
/src/entities/game.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { propSchema } from './prop'
3 |
4 | export const gameSchema = z.object({
5 | id: z.number(),
6 | name: z.string(),
7 | props: z.array(propSchema),
8 | playerCount: z.number().optional(),
9 | createdAt: z.string().datetime()
10 | })
11 |
12 | export type Game = z.infer
13 |
--------------------------------------------------------------------------------
/src/entities/gameActivity.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const gameActivitySchema = z.object({
4 | id: z.number(),
5 | type: z.number(),
6 | description: z.string(),
7 | extra: z.record(z.unknown()).optional(),
8 | createdAt: z.string().datetime()
9 | })
10 |
11 | export type GameActivity = z.infer
12 |
--------------------------------------------------------------------------------
/src/entities/gameChannels.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { propSchema } from './prop'
3 | import { playerAliasSchema } from './playerAlias'
4 |
5 | export const gameChannelSchema = z.object({
6 | id: z.number(),
7 | name: z.string(),
8 | owner: z.union([
9 | playerAliasSchema,
10 | z.null()
11 | ]),
12 | totalMessages: z.number(),
13 | props: z.array(propSchema),
14 | memberCount: z.number(),
15 | autoCleanup: z.boolean(),
16 | private: z.boolean(),
17 | temporaryMembership: z.boolean(),
18 | createdAt: z.string().datetime(),
19 | updatedAt: z.string().datetime()
20 | })
21 |
22 | export type GameChannel = z.infer
23 |
--------------------------------------------------------------------------------
/src/entities/gameFeedback.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { playerAliasSchema } from './playerAlias'
3 | import { gameFeedbackCategorySchema } from './gameFeedbackCategory'
4 |
5 | export const gameFeedbackSchema = z.object({
6 | id: z.number(),
7 | category: gameFeedbackCategorySchema,
8 | comment: z.string(),
9 | anonymised: z.boolean(),
10 | playerAlias: playerAliasSchema.nullable(),
11 | devBuild: z.boolean(),
12 | createdAt: z.string().datetime()
13 | })
14 |
15 | export type GameFeedback = z.infer
16 |
--------------------------------------------------------------------------------
/src/entities/gameFeedbackCategory.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const gameFeedbackCategorySchema = z.object({
4 | id: z.number(),
5 | internalName: z.string(),
6 | name: z.string(),
7 | description: z.string(),
8 | anonymised: z.boolean(),
9 | createdAt: z.string().datetime(),
10 | updatedAt: z.string().datetime()
11 | })
12 |
13 | export type GameFeedbackCategory = z.infer
14 |
--------------------------------------------------------------------------------
/src/entities/gameSave.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const gameSaveSchema = z.object({
4 | id: z.number(),
5 | name: z.string(),
6 | content: z.record(z.string(), z.unknown()),
7 | createdAt: z.string().datetime(),
8 | updatedAt: z.string().datetime()
9 | })
10 |
11 | export type GameSave = z.infer
12 |
--------------------------------------------------------------------------------
/src/entities/gameStat.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const gameStatSchema = z.object({
4 | id: z.number(),
5 | internalName: z.string(),
6 | name: z.string(),
7 | global: z.boolean(),
8 | globalValue: z.number(),
9 | defaultValue: z.number(),
10 | maxChange: z.number().nullable(),
11 | minValue: z.number().nullable(),
12 | maxValue: z.number().nullable(),
13 | minTimeBetweenUpdates: z.number(),
14 | createdAt: z.string().datetime(),
15 | updatedAt: z.string().datetime()
16 | })
17 |
18 | export type GameStat = z.infer
19 |
--------------------------------------------------------------------------------
/src/entities/headline.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const countSchema = z.object({
4 | count: z.number()
5 | })
6 |
7 | export const averageSessionDurationSchema = z.object({
8 | hours: z.number(),
9 | minutes: z.number(),
10 | seconds: z.number()
11 | })
12 |
13 | export const headlinesSchema = z.object({
14 | new_players: countSchema,
15 | returning_players: countSchema,
16 | events: countSchema,
17 | unique_event_submitters: countSchema,
18 | total_sessions: countSchema,
19 | average_session_duration: averageSessionDurationSchema
20 | })
21 |
22 | export type Headlines = z.infer
23 |
--------------------------------------------------------------------------------
/src/entities/integration.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export enum IntegrationType {
4 | STEAMWORKS = 'steamworks'
5 | }
6 |
7 | export const steamIntegrationConfigSchema = z.object({
8 | appId: z.number(),
9 | syncLeaderboards: z.boolean(),
10 | syncStats: z.boolean()
11 | })
12 |
13 | export type SteamIntegrationConfig = z.infer
14 |
15 | // use union when more integrations are added
16 | export const integrationConfigSchema = steamIntegrationConfigSchema
17 |
18 | export type IntegrationConfig = z.infer
19 |
20 | export const integrationSchema = z.object({
21 | id: z.number(),
22 | type: z.nativeEnum(IntegrationType),
23 | config: integrationConfigSchema,
24 | createdAt: z.string().datetime(),
25 | updatedAt: z.string().datetime()
26 | })
27 |
28 | export type Integration = z.infer
29 |
--------------------------------------------------------------------------------
/src/entities/invite.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { UserType } from './user'
3 | import { organisationSchema } from './organisation'
4 |
5 | export const inviteSchema = z.object({
6 | id: z.number(),
7 | email: z.string().email(),
8 | organisation: organisationSchema,
9 | type: z.nativeEnum(UserType),
10 | invitedBy: z.string(),
11 | createdAt: z.string().datetime()
12 | })
13 |
14 | export type Invite = z.infer
15 |
--------------------------------------------------------------------------------
/src/entities/invoice.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const invoiceSchema = z.object({
4 | lines: z.array(z.object({
5 | id: z.string(),
6 | amount: z.number(),
7 | description: z.string().nullable(),
8 | period: z.object({
9 | start: z.number(),
10 | end: z.number()
11 | })
12 | })),
13 | total: z.number(),
14 | collectionDate: z.number(),
15 | prorationDate: z.number()
16 | })
17 |
18 | export type Invoice = z.infer
19 |
--------------------------------------------------------------------------------
/src/entities/leaderboard.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export enum LeaderboardSortMode {
4 | DESC = 'desc',
5 | ASC = 'asc'
6 | }
7 |
8 | export enum LeaderboardRefreshInterval {
9 | NEVER = 'never',
10 | DAILY = 'daily',
11 | WEEKLY = 'weekly',
12 | MONTHLY = 'monthly',
13 | YEARLY = 'yearly'
14 | }
15 |
16 | export const leaderboardSchema = z.object({
17 | id: z.number(),
18 | internalName: z.string(),
19 | name: z.string(),
20 | sortMode: z.nativeEnum(LeaderboardSortMode),
21 | unique: z.boolean(),
22 | refreshInterval: z.nativeEnum(LeaderboardRefreshInterval),
23 | createdAt: z.string().datetime(),
24 | updatedAt: z.string().datetime()
25 | })
26 |
27 | export type Leaderboard = z.infer
28 |
--------------------------------------------------------------------------------
/src/entities/leaderboardEntry.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { playerAliasSchema } from './playerAlias'
3 | import { propSchema } from './prop'
4 |
5 | export const leaderboardEntrySchema = z.object({
6 | id: z.number(),
7 | position: z.number().optional(),
8 | score: z.number(),
9 | leaderboardName: z.string(),
10 | leaderboardInternalName: z.string(),
11 | playerAlias: playerAliasSchema,
12 | hidden: z.boolean(),
13 | props: z.array(propSchema),
14 | createdAt: z.string().datetime(),
15 | updatedAt: z.string().datetime(),
16 | deletedAt: z.string().datetime().nullable()
17 | })
18 |
19 | export type LeaderboardEntry = z.infer
20 |
--------------------------------------------------------------------------------
/src/entities/organisation.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { gameSchema } from './game'
3 | import { pricingPlanSchema } from './pricingPlan'
4 |
5 | export const statusSchema = z.enum(['active', 'canceled', 'incomplete', 'incomplete_expired', 'past_due', 'paused', 'trialing', 'unpaid'])
6 |
7 | export const organisationPricingPlanSchema = z.object({
8 | pricingPlan: pricingPlanSchema,
9 | status: statusSchema,
10 | endDate: z.string().datetime().nullable(),
11 | canViewBillingPortal: z.boolean()
12 | })
13 |
14 | export const organisationSchema = z.object({
15 | id: z.number(),
16 | name: z.string(),
17 | games: z.array(gameSchema),
18 | pricingPlan: z.object({
19 | status: statusSchema
20 | })
21 | })
22 |
23 | export type Organisation = z.infer
24 |
--------------------------------------------------------------------------------
/src/entities/player.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { propSchema } from './prop'
3 | import { playerAliasSchema, PlayerAlias } from './playerAlias'
4 | import { playerPresenceSchema } from './playerPresence'
5 |
6 | export const basePlayerSchema = z.object({
7 | id: z.string().uuid(),
8 | props: z.array(propSchema),
9 | devBuild: z.boolean(),
10 | createdAt: z.string().datetime(),
11 | lastSeenAt: z.string().datetime(),
12 | groups: z.array(z.object({
13 | id: z.string(),
14 | name: z.string()
15 | })),
16 | presence: playerPresenceSchema.nullable()
17 | })
18 |
19 | export type Player = z.infer & {
20 | aliases: PlayerAlias[]
21 | }
22 |
23 | export const playerSchema: z.ZodType = basePlayerSchema.extend({
24 | aliases: z.lazy(() => playerAliasSchema.array())
25 | })
26 |
--------------------------------------------------------------------------------
/src/entities/playerAlias.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { basePlayerSchema } from './player'
3 |
4 | export enum PlayerAliasService {
5 | STEAM = 'steam',
6 | EPIC = 'epic',
7 | USERNAME = 'username',
8 | EMAIL = 'email',
9 | CUSTOM = 'custom',
10 | TALO = 'talo'
11 | }
12 |
13 | export const playerAliasSchema = z.object({
14 | id: z.number(),
15 | service: z.string(),
16 | identifier: z.string(),
17 | player: z.lazy(() => basePlayerSchema),
18 | lastSeenAt: z.string().datetime(),
19 | createdAt: z.string().datetime(),
20 | updatedAt: z.string().datetime()
21 | })
22 |
23 | export type PlayerAlias = z.infer
24 |
--------------------------------------------------------------------------------
/src/entities/playerAuthActivity.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const playerAuthActivitySchema = z.object({
4 | id: z.number(),
5 | type: z.number(),
6 | description: z.string(),
7 | extra: z.record(z.unknown()),
8 | createdAt: z.string().datetime()
9 | })
10 |
11 | export type PlayerAuthActivity = z.infer
12 |
--------------------------------------------------------------------------------
/src/entities/playerGameStat.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { gameStatSchema } from './gameStat'
3 |
4 | export const playerGameStatSchema = z.object({
5 | id: z.number(),
6 | stat: gameStatSchema,
7 | value: z.number(),
8 | createdAt: z.string().datetime(),
9 | updatedAt: z.string().datetime()
10 | })
11 |
12 | export type PlayerGameStat = z.infer
13 |
--------------------------------------------------------------------------------
/src/entities/playerHeadline.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | const countSchema = z.object({
4 | count: z.number()
5 | })
6 |
7 | export const playerHeadlinesSchema = z.object({
8 | total_players: countSchema,
9 | online_players: countSchema
10 | })
11 |
12 | export type PlayerHeadlines = z.infer
13 |
--------------------------------------------------------------------------------
/src/entities/playerPresence.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const playerPresenceSchema = z.object({
4 | online: z.boolean(),
5 | customStatus: z.string(),
6 | updatedAt: z.string().datetime()
7 | })
8 |
9 | export type PlayerPresence = z.infer
10 |
--------------------------------------------------------------------------------
/src/entities/pricingPlan.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const pricingPlanSchema = z.object({
4 | id: z.number(),
5 | stripeId: z.string(),
6 | hidden: z.boolean(),
7 | default: z.boolean(),
8 | playerLimit: z.number().nullable()
9 | })
10 |
11 | export const pricingPlanUsageSchema = z.object({
12 | limit: z.number(),
13 | used: z.number()
14 | })
15 |
16 | export type PricingPlanUsage = z.infer
17 |
18 | const pricingPlanProductPriceSchema = z.object({
19 | currency: z.string(),
20 | amount: z.number(),
21 | interval: z.enum(['day', 'week', 'month', 'year']),
22 | current: z.boolean()
23 | })
24 |
25 | export type PricingPlanProductPrice = z.infer
26 |
27 | export const pricingPlanProductSchema = pricingPlanSchema.merge(
28 | z.object({
29 | name: z.string(),
30 | prices: z.array(
31 | z.object({
32 | currency: z.string(),
33 | amount: z.number(),
34 | interval: z.enum(['day', 'week', 'month', 'year']),
35 | current: z.boolean()
36 | })
37 | )
38 | })
39 | )
40 |
41 | export type PricingPlanProduct = z.infer
42 |
--------------------------------------------------------------------------------
/src/entities/prop.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const propSchema = z.object({
4 | key: z.string(),
5 | value: z.string().nullable()
6 | })
7 |
8 | export type Prop = z.infer
9 |
--------------------------------------------------------------------------------
/src/entities/user.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { organisationSchema } from './organisation'
3 |
4 | export enum UserType {
5 | OWNER,
6 | ADMIN,
7 | DEV,
8 | DEMO
9 | }
10 |
11 | export const userSchema = z.object({
12 | id: z.number(),
13 | email: z.string().email(),
14 | username: z.string(),
15 | lastSeenAt: z.string().datetime(),
16 | emailConfirmed: z.boolean(),
17 | organisation: organisationSchema,
18 | type: z.nativeEnum(UserType),
19 | has2fa: z.boolean(),
20 | createdAt: z.string().datetime()
21 | })
22 |
23 | export type User = z.infer
24 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import './styles/index.css'
4 | import 'tippy.js/dist/tippy.css'
5 | import 'react-day-picker/dist/style.css'
6 | import '@xyflow/react/dist/base.css'
7 | import App from './App'
8 | import { RecoilRoot } from 'recoil'
9 | import { BrowserRouter } from 'react-router-dom'
10 | import * as Sentry from '@sentry/react'
11 | import ToastProvider from './components/toast/ToastProvider'
12 |
13 | if (import.meta.env.VITE_SENTRY_DSN?.startsWith('http')) {
14 | Sentry.init({
15 | dsn: import.meta.env.VITE_SENTRY_DSN,
16 | environment: import.meta.env.VITE_SENTRY_ENV
17 | })
18 | }
19 |
20 | const root = createRoot(document.getElementById('root')!)
21 | root.render(
22 |
23 |
24 |
25 |
26 |
28 |
29 |
30 |
31 | )
32 |
--------------------------------------------------------------------------------
/src/pages/Activity.tsx:
--------------------------------------------------------------------------------
1 | import useGameActivities from '../api/useGameActivities'
2 | import ErrorMessage from '../components/ErrorMessage'
3 | import activeGameState, { SelectedActiveGame } from '../state/activeGameState'
4 | import { useRecoilValue } from 'recoil'
5 | import SecondaryNav from '../components/SecondaryNav'
6 | import { secondaryNavRoutes } from '../constants/secondaryNavRoutes'
7 | import Page from '../components/Page'
8 | import useDaySections from '../utils/useDaySections'
9 | import ActivityRenderer from '../components/ActivityRenderer'
10 |
11 | export default function Activity() {
12 | const activeGame = useRecoilValue(activeGameState) as SelectedActiveGame
13 | const { activities, loading, error } = useGameActivities(activeGame)
14 | const sections = useDaySections(activities)
15 |
16 | return (
17 | {activeGame.name} doesn't have any activity yet
24 | }
25 |
26 | {!error && sections.map((section, sectionIdx) => (
27 |
16 |
18 | )
19 | }
20 |
21 | function EventsOverviewDisplay({ activeGame }: { activeGame: SelectedActiveGame }) {
22 | const { debouncedStartDate, debouncedEndDate } = useEventsContext()
23 | const { events, eventNames, loading, error } = useEvents(activeGame, debouncedStartDate, debouncedEndDate)
24 |
25 | return (
26 |
27 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/GameProps.tsx:
--------------------------------------------------------------------------------
1 | import Page from '../components/Page'
2 | import activeGameState, { SelectedActiveGameState } from '../state/activeGameState'
3 | import { useRecoilState } from 'recoil'
4 | import PropsEditor from '../components/PropsEditor'
5 | import updateGame from '../api/updateGame'
6 | import { Prop } from '../entities/prop'
7 |
8 | export default function GameProps() {
9 | const [activeGame, setActiveGame] = useRecoilState(activeGameState) as SelectedActiveGameState
10 |
11 | const onSave = async (props: Prop[]): Promise => {
12 | const { game } = await updateGame(activeGame.id, { props })
13 | setActiveGame(game)
14 | return game.props
15 | }
16 |
17 | return (
18 |
22 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/pages/NotFound.tsx:
--------------------------------------------------------------------------------
1 | import Button from '../components/Button'
2 | import { unauthedContainerStyle } from '../styles/theme'
3 | import { useNavigate } from 'react-router-dom'
4 | import routes from '../constants/routes'
5 | import { useEffect, useState } from 'react'
6 | import Loading from '../components/Loading'
7 | import clsx from 'clsx'
8 |
9 | export default function NotFound() {
10 | const navigate = useNavigate()
11 |
12 | const [routeChecked, setRouteChcked] = useState(false)
13 |
14 | useEffect(() => {
15 | // e.g. /demo doesn't exist post-auth but it was a real route pre-auth
16 | if (Object.values(routes).includes(window.location.pathname)) {
17 | navigate(routes.dashboard)
18 | } else {
19 | setRouteChcked(true)
20 | }
21 | }, [navigate])
22 |
23 | if (!routeChecked) {
24 | return
29 |
30 |
404 Not Found
31 |
32 | Sorry, we couldn't find that page. If this is a mistake, please contact us.
33 |
34 |
35 |
navigate(routes.dashboard)}
37 | >
38 | Go to dashboard
39 |
40 |
41 |
=> {
17 | const { player: updatedPlayer } = await updatePlayer(activeGame.id, player.id, { props })
18 | return updatedPlayer.props
19 | }
20 |
21 | if (!player) {
22 | return (
23 |
24 |
26 | )
27 | }
28 |
29 | return (
30 |
35 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/services/AuthService.ts:
--------------------------------------------------------------------------------
1 | const AuthService = (() => {
2 | let _token: string | null = null
3 |
4 | const getToken = () => {
5 | return _token
6 | }
7 |
8 | const setToken = (token: string) => {
9 | _token = token
10 | }
11 |
12 | const reload = () => {
13 | window.localStorage.setItem('loggedOut', 'true')
14 | window.location.reload()
15 | }
16 |
17 | return {
18 | getToken,
19 | setToken,
20 | reload
21 | }
22 | })()
23 |
24 | export default AuthService
25 |
--------------------------------------------------------------------------------
/src/services/__tests__/AuthService.test.ts:
--------------------------------------------------------------------------------
1 | import AuthService from '../AuthService'
2 |
3 | describe('AuthService', () => {
4 | it('should set the token', () => {
5 | AuthService.setToken('abc123')
6 | expect(AuthService.getToken()).toBe('abc123')
7 | })
8 |
9 | it('should set the loggedOut key after reloading', () => {
10 | const reloadMock = vi.fn()
11 |
12 | const { reload } = window.location
13 | Object.defineProperty(window, 'location', {
14 | value: { reload: reloadMock }
15 | })
16 |
17 | AuthService.reload()
18 |
19 | expect(window.localStorage.getItem('loggedOut')).toBe('true')
20 | expect(reloadMock).toHaveBeenCalled()
21 |
22 | window.location.reload = reload
23 | })
24 | })
25 |
--------------------------------------------------------------------------------
/src/state/RecoilObserver.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { RecoilState, useRecoilState } from 'recoil'
3 |
4 | type RecoilObserverProps = {
5 | node: RecoilState
6 | onChange?: (value: T) => void
7 | }
8 |
9 | export default function RecoilObserver({ node, onChange }: RecoilObserverProps) {
10 | const [value] = useRecoilState(node)
11 |
12 | useEffect(() => {
13 | onChange?.(value)
14 | }, [onChange, value])
15 |
16 | return null
17 | }
18 |
--------------------------------------------------------------------------------
/src/state/activeGameState.ts:
--------------------------------------------------------------------------------
1 | import { SetterOrUpdater, atom } from 'recoil'
2 | import { Game } from '../entities/game'
3 |
4 | const activeGameState = atom({
5 | key: 'activeGame',
6 | default: JSON.parse(window.localStorage.getItem('activeGame') ?? 'null'),
7 | effects: [
8 | ({ onSet }) => {
9 | onSet((updatedActiveGame) => {
10 | window.localStorage.setItem('activeGame', JSON.stringify(updatedActiveGame))
11 | })
12 | }
13 | ]
14 | })
15 |
16 | export type SelectedActiveGame = NonNullable
17 |
18 | export type SelectedActiveGameState = [SelectedActiveGame, SetterOrUpdater]
19 |
20 | export default activeGameState
21 |
--------------------------------------------------------------------------------
/src/state/devDataState.ts:
--------------------------------------------------------------------------------
1 | import { AtomEffect, atom } from 'recoil'
2 |
3 | const localStorageEffect: AtomEffect = ({ setSelf, onSet }) => {
4 | if (!window.localStorage.getItem(key)) {
5 | setSelf(true)
6 | window.localStorage.setItem(key, 'true')
7 | }
8 |
9 | onSet((includeDevData: boolean) => {
10 | window.localStorage.setItem(key, String(includeDevData))
11 | })
12 | }
13 |
14 | const key = 'includeDevData'
15 | const devDataState = atom({
16 | key,
17 | default: window.localStorage.getItem(key) === 'true',
18 | effects: [localStorageEffect]
19 | })
20 |
21 | export default devDataState
22 |
--------------------------------------------------------------------------------
/src/state/gamesState.ts:
--------------------------------------------------------------------------------
1 | import { selector } from 'recoil'
2 | import userState from './userState'
3 | import { Game } from '../entities/game'
4 |
5 | const gamesState = selector({
6 | key: 'games',
7 | get: ({ get }) => {
8 | const user = get(userState)
9 | return user?.organisation.games ?? []
10 | }
11 | })
12 |
13 | export default gamesState
14 |
--------------------------------------------------------------------------------
/src/state/justConfirmedEmailState.ts:
--------------------------------------------------------------------------------
1 | import { atom } from 'recoil'
2 |
3 | const justConfirmedEmailState = atom({
4 | key: 'justConfirmedEmail',
5 | default: false
6 | })
7 |
8 | export default justConfirmedEmailState
9 |
--------------------------------------------------------------------------------
/src/state/organisationState.ts:
--------------------------------------------------------------------------------
1 | import { selector } from 'recoil'
2 | import userState, { AuthedUser } from './userState'
3 | import { Organisation } from '../entities/organisation'
4 |
5 | const organisationState = selector({
6 | key: 'organisation',
7 | get: ({ get }) => {
8 | const user = get(userState) as AuthedUser
9 | return user.organisation
10 | }
11 | })
12 |
13 | export default organisationState
14 |
--------------------------------------------------------------------------------
/src/state/saveDataNodeSizesState.ts:
--------------------------------------------------------------------------------
1 | import { atom } from 'recoil'
2 |
3 | export type SaveDataNodeSize = {
4 | id: string
5 | width: number
6 | height: number
7 | }
8 |
9 | const saveDataNodeSizesState = atom({
10 | key: 'saveDataNodeSizes',
11 | default: []
12 | })
13 |
14 | export default saveDataNodeSizesState
15 |
--------------------------------------------------------------------------------
/src/state/userState.ts:
--------------------------------------------------------------------------------
1 | import { SetterOrUpdater, atom } from 'recoil'
2 | import { User } from '../entities/user'
3 |
4 | const userState = atom({
5 | key: 'user',
6 | default: null
7 | })
8 |
9 | export type AuthedUser = NonNullable
10 |
11 | export type AuthedUserState = [AuthedUser, SetterOrUpdater]
12 |
13 | export default userState
14 |
--------------------------------------------------------------------------------
/src/styles/theme.ts:
--------------------------------------------------------------------------------
1 | export const focusStyle = 'focus:outline-none focus:ring focus:ring-pink-500 focus:z-[999]'
2 |
3 | export const labelFocusStyle = 'ring ring-pink-500'
4 |
5 | export const linkStyle = 'text-indigo-400 hover:underline font-semibold transition-colors rounded-none'
6 |
7 | export const unauthedContainerStyle = 'w-full md:w-2/3 xl:w-1/3'
8 |
9 | export const hiddenInputStyle = 'absolute inset-0 opacity-0 w-0 h-0'
10 |
--------------------------------------------------------------------------------
/src/utils/__tests__/canPerformAction.test.ts:
--------------------------------------------------------------------------------
1 | import userMock from '../../__mocks__/userMock'
2 | import { UserType } from '../../entities/user'
3 | import canPerformAction, { PermissionBasedAction } from '../canPerformAction'
4 |
5 | describe('canPerformAction', () => {
6 | it('should always return true for owner users', () => {
7 | const user = userMock({ type: UserType.OWNER })
8 | expect(canPerformAction(user, PermissionBasedAction.DELETE_LEADERBOARD)).toBe(true)
9 | })
10 | })
11 |
--------------------------------------------------------------------------------
/src/utils/buildError.ts:
--------------------------------------------------------------------------------
1 | import { AxiosError } from 'axios'
2 | import { TaloError } from '../components/ErrorMessage'
3 |
4 | type APIError = {
5 | message: string
6 | errors: { [key: string]: string[] }
7 | }
8 |
9 | export default function buildError(error: unknown, preferredKey: string = ''): TaloError {
10 | let message = ''
11 | let keys: { [key: string]: string[] } = {}
12 | let extra: Partial> = {}
13 |
14 | if (typeof error === 'string') {
15 | message = error
16 | } else {
17 | const axiosError = error as AxiosError
18 |
19 | if (axiosError.response?.data?.message) {
20 | message = axiosError.response.data.message
21 | extra = (Object.keys(axiosError.response.data) as (keyof APIError)[])
22 | .reduce((acc, key) => {
23 | if (key !== 'message') {
24 | return { ...acc, [key]: axiosError.response!.data[key] }
25 | }
26 | return acc
27 | }, {} as Partial>)
28 | } else if (axiosError.response?.data?.errors) {
29 | keys = axiosError.response.data.errors
30 | extra = (Object.keys(axiosError.response.data) as (keyof APIError)[])
31 | .reduce((acc, key) => {
32 | if (key !== 'errors') {
33 | return { ...acc, [key]: axiosError.response!.data[key] }
34 | }
35 | return acc
36 | }, {} as Partial>)
37 |
38 | message = Object.keys(keys).includes(preferredKey)
39 | ? keys[preferredKey][0]
40 | : 'Something went wrong, please try again later'
41 | } else {
42 | message = axiosError.message
43 | }
44 | }
45 |
46 | return {
47 | message,
48 | keys,
49 | hasKeys: Object.keys(keys).length > 0,
50 | extra
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/utils/canPerformAction.ts:
--------------------------------------------------------------------------------
1 | import { User, UserType } from '../entities/user'
2 |
3 | export enum PermissionBasedAction {
4 | DELETE_LEADERBOARD,
5 | DELETE_STAT,
6 | DELETE_GROUP,
7 | DELETE_FEEDBACK_CATEGORY,
8 | VIEW_PLAYER_AUTH_ACTIVITIES,
9 | UPDATE_PLAYER_STAT,
10 | UPDATE_LEADERBOARD_ENTRY,
11 | DELETE_CHANNEL
12 | }
13 |
14 | export default function canPerformAction(user: User, action: PermissionBasedAction) {
15 | if (user.type === UserType.OWNER) return true
16 |
17 | switch (action) {
18 | case PermissionBasedAction.DELETE_LEADERBOARD:
19 | case PermissionBasedAction.DELETE_STAT:
20 | case PermissionBasedAction.DELETE_FEEDBACK_CATEGORY:
21 | case PermissionBasedAction.VIEW_PLAYER_AUTH_ACTIVITIES:
22 | case PermissionBasedAction.UPDATE_PLAYER_STAT:
23 | case PermissionBasedAction.UPDATE_LEADERBOARD_ENTRY:
24 | case PermissionBasedAction.DELETE_CHANNEL:
25 | return user.type === UserType.ADMIN
26 | case PermissionBasedAction.DELETE_GROUP:
27 | return [UserType.DEV, UserType.ADMIN].includes(user.type)
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/utils/canViewPage.ts:
--------------------------------------------------------------------------------
1 | import routes from '../constants/routes'
2 | import { User, UserType } from '../entities/user'
3 |
4 | export default function canViewPage(user: User | null, route: string) {
5 | if (!user) return false
6 | if (user.type === UserType.OWNER) return true
7 |
8 | switch (route) {
9 | case routes.activity:
10 | case routes.integrations:
11 | case routes.gameProps:
12 | return [UserType.ADMIN, UserType.DEMO].includes(user.type)
13 | case routes.apiKeys:
14 | return user.type === UserType.ADMIN
15 | case routes.dataExports:
16 | return user.type === UserType.ADMIN && user.emailConfirmed
17 | case routes.organisation:
18 | return user.type === UserType.ADMIN
19 | case routes.billing:
20 | case routes.gameSettings:
21 | return false
22 | case routes.feedbackCategories:
23 | return [UserType.ADMIN, UserType.DEV].includes(user.type)
24 | default:
25 | return true
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/utils/getEventColour.ts:
--------------------------------------------------------------------------------
1 | import randomColor from 'randomcolor'
2 |
3 | export default (eventName: string) => {
4 | return randomColor({ seed: eventName })
5 | }
6 |
--------------------------------------------------------------------------------
/src/utils/group-rules/isGroupRuleValid.ts:
--------------------------------------------------------------------------------
1 | import { UnpackedGroupRule } from '../../modals/groups/GroupDetails'
2 |
3 | export default function isGroupRuleValid(rawRule: UnpackedGroupRule) {
4 | if (Object.keys(rawRule.operands).length < rawRule.operandCount) return false
5 | if (Object.values(rawRule.operands).some((operand) => (operand ?? '').length === 0)) return false
6 | if (rawRule.namespaced && !rawRule.namespacedValue) return false
7 | return true
8 | }
9 |
--------------------------------------------------------------------------------
/src/utils/group-rules/prepareRule.ts:
--------------------------------------------------------------------------------
1 | import { PlayerGroupRule } from '../../entities/playerGroup'
2 | import { UnpackedGroupRule } from '../../modals/groups/GroupDetails'
3 |
4 | export default function prepareRule(rule: UnpackedGroupRule): PlayerGroupRule {
5 | return {
6 | name: rule.name,
7 | negate: rule.negate,
8 | castType: rule.castType,
9 | field: rule.namespaced ? `${rule.mapsTo}.${rule.namespacedValue}` : rule.mapsTo,
10 | operands: Object.values(rule.operands).filter((_, idx) => idx < rule.operandCount),
11 | namespaced: rule.namespaced
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/group-rules/unpackRules.ts:
--------------------------------------------------------------------------------
1 | import { PlayerGroupRule } from '../../entities/playerGroup'
2 | import { UnpackedGroupRule } from '../../modals/groups/GroupDetails'
3 |
4 | export function unpackRules(rules?: PlayerGroupRule[]): UnpackedGroupRule[] | undefined {
5 | if (!rules) return rules
6 |
7 | return rules.map((rule) => {
8 | const field = rule.field.split('.')[0]
9 | const namespacedValue = rule.namespaced
10 | ? rule.field.split('.').slice(1).join('.')
11 | : ''
12 |
13 | return {
14 | name: rule.name,
15 | negate: rule.negate,
16 | castType: rule.castType,
17 | mapsTo: field,
18 | namespaced: rule.namespaced,
19 | namespacedValue,
20 | operands: rule.operands.reduce((acc, curr, idx) => ({
21 | ...acc,
22 | [idx]: curr
23 | }), {}),
24 | operandCount: rule.operands.length
25 | }
26 | })
27 | }
28 |
--------------------------------------------------------------------------------
/src/utils/useDaySections.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import useSortedItems from './useSortedItems'
3 | import { differenceInDays, isSameDay, startOfDay, subDays } from 'date-fns'
4 |
5 | export default function useDaySections(items: T[]) {
6 | const sortedItems = useSortedItems(items, 'createdAt')
7 |
8 | const sections = useMemo(() => {
9 | if (sortedItems.length === 0) return []
10 | const latestDate = sortedItems[0].createdAt
11 | const oldestDate = sortedItems[sortedItems.length - 1].createdAt
12 |
13 | const numSections = differenceInDays(new Date(latestDate), new Date(oldestDate)) + 1
14 |
15 | const sections = []
16 | for (let i = 0; i < numSections; i++) {
17 | const date = startOfDay(subDays(new Date(latestDate), i))
18 | sections.push({
19 | date,
20 | items: sortedItems.filter((item) => isSameDay(date, new Date(item.createdAt)))
21 | })
22 | }
23 |
24 | return sections.filter((section) => section.items.length > 0)
25 | }, [sortedItems])
26 |
27 | return sections
28 | }
29 |
--------------------------------------------------------------------------------
/src/utils/useIntendedRoute.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect } from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 |
4 | export default function useIntendedRoute() {
5 | const navigate = useNavigate()
6 |
7 | const intendedRouteChecked = useCallback(() => {
8 | return window.sessionStorage.getItem('intendedRouteChecked') === 'true'
9 | }, [])
10 |
11 | const setIntendedRouteChecked = useCallback(() => {
12 | window.sessionStorage.setItem('intendedRouteChecked', 'true')
13 | }, [])
14 |
15 | useEffect(() => {
16 | const intended = window.sessionStorage.getItem('intendedRoute')
17 |
18 | if (intended) {
19 | window.sessionStorage.removeItem('intendedRoute')
20 | navigate(intended, { replace: true })
21 | } else {
22 | setIntendedRouteChecked()
23 | }
24 | }, [navigate, setIntendedRouteChecked])
25 |
26 | return intendedRouteChecked()
27 | }
28 |
--------------------------------------------------------------------------------
/src/utils/useLocalStorage.ts:
--------------------------------------------------------------------------------
1 | // https://usehooks.com/useLocalStorage
2 |
3 | import { useCallback, useState } from 'react'
4 |
5 | export type SetLocalStorageValue = (value: T | ((curr: T) => T)) => void
6 |
7 | export default function useLocalStorage(key: string, initialValue: T): [T, SetLocalStorageValue] {
8 | // State to store our value
9 | // Pass initial state function to useState so logic is only executed once
10 | const [storedValue, setStoredValue] = useState(() => {
11 | try {
12 | // Get from local storage by key
13 | const item = window.localStorage.getItem(key)
14 | // Parse stored json or if none return initialValue
15 | return item ? JSON.parse(item) as T : initialValue
16 | } catch (error) {
17 | // If error also return initialValue
18 | console.error(error)
19 | return initialValue
20 | }
21 | })
22 |
23 | // Return a wrapped version of useState's setter function that persists the new value to localStorage.
24 | const setValue = useCallback>((value) => {
25 | try {
26 | // Allow value to be a function so we have same API as useState
27 | const valueToStore =
28 | value instanceof Function ? value(storedValue) : value
29 | // Save state
30 | setStoredValue(valueToStore)
31 | // Save to local storage
32 | window.localStorage.setItem(key, JSON.stringify(valueToStore))
33 | } catch (error) {
34 | // A more advanced implementation would handle the error case
35 | console.error(error)
36 | }
37 | }, [key, storedValue])
38 |
39 | return [storedValue, setValue]
40 | }
41 |
--------------------------------------------------------------------------------
/src/utils/usePlayer.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { useLocation, useNavigate, useParams } from 'react-router-dom'
3 | import { useRecoilValue } from 'recoil'
4 | import findPlayer from '../api/findPlayer'
5 | import routes from '../constants/routes'
6 | import activeGameState, { SelectedActiveGame } from '../state/activeGameState'
7 | import type { Player } from '../entities/player'
8 |
9 | function usePlayer(): [Player, (player: Player) => void] {
10 | const { id } = useParams()
11 | const location = useLocation()
12 |
13 | const [player, setPlayer] = useState(location.state?.player)
14 | const activeGame = useRecoilValue(activeGameState) as SelectedActiveGame
15 |
16 | const navigate = useNavigate()
17 |
18 | useEffect(() => {
19 | (async () => {
20 | if (!player) {
21 | try {
22 | const { players } = await findPlayer(activeGame.id, id!)
23 | const player = players.find((p) => p.id === id)
24 |
25 | if (player) {
26 | setPlayer(player)
27 | } else {
28 | navigate(routes.players, { replace: true })
29 | }
30 | } catch (err) {
31 | navigate(routes.players, { replace: true })
32 | }
33 | }
34 | })()
35 | }, [activeGame.id, id, navigate, player])
36 |
37 | return [player, setPlayer]
38 | }
39 |
40 | export default usePlayer
41 |
--------------------------------------------------------------------------------
/src/utils/useSearch.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { useDebounce } from 'use-debounce'
3 |
4 | export default function useSearch(initialSearch?: string | null) {
5 | const [search, setSearch] = useState(initialSearch ?? '')
6 | const [page, setPage] = useState(0)
7 | const [debouncedSearch] = useDebounce(search, 300)
8 |
9 | useEffect(() => {
10 | window.scrollTo(0, 0)
11 | }, [page])
12 |
13 | useEffect(() => {
14 | setPage(0)
15 | }, [search])
16 |
17 | return {
18 | search,
19 | setSearch,
20 | page,
21 | setPage,
22 | debouncedSearch
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/utils/useSortedItems.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useMemo } from 'react'
2 |
3 | export default function useSortedItems(items: T[], key: keyof T, direction: 'asc' | 'desc' = 'desc'): T[] {
4 | const getComparator = useCallback(() => {
5 | const valForKey = items[0][key] as T
6 |
7 | switch (typeof valForKey) {
8 | case 'string':
9 | if (!isNaN(new Date(valForKey).getTime())) {
10 | return (a: T, b: T) => new Date(b[key] as string).getTime() - new Date(a[key] as string).getTime()
11 | }
12 |
13 | return (a: T, b: T) => (b[key] as string).localeCompare(a[key] as string)
14 | case 'number':
15 | return (a: T, b: T) => (b[key] as number) - (a[key] as number)
16 | }
17 | }, [items, key])
18 |
19 | const sorted = useMemo(() => {
20 | if (items.length === 0) return items
21 |
22 | const sortedItems: T[] = [...items]
23 | sortedItems.sort(getComparator())
24 | if (direction === 'asc') sortedItems.reverse()
25 |
26 | return sortedItems
27 | }, [items, getComparator, direction])
28 |
29 | return sorted
30 | }
31 |
--------------------------------------------------------------------------------
/src/utils/useTimePeriod.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { format, sub, startOfWeek, startOfMonth, startOfYear, isToday } from 'date-fns'
3 |
4 | export type TimePeriod = '7d' | '30d' | 'w' | 'm' | 'y'
5 |
6 | export default (timePeriod: TimePeriod | null) => {
7 | const [startDate, setStartDate] = useState('')
8 | const [endDate, setEndDate] = useState('')
9 |
10 | useEffect(() => {
11 | if (timePeriod) {
12 | const isStartOfWeekToday = isToday(startOfWeek(new Date()))
13 |
14 | switch (timePeriod) {
15 | case '7d':
16 | setStartDate(format(sub(new Date(), { days: 7 }), 'yyyy-MM-dd'))
17 | break
18 | case '30d':
19 | setStartDate(format(sub(new Date(), { days: 30 }), 'yyyy-MM-dd'))
20 | break
21 | case 'w':
22 | if (isStartOfWeekToday) {
23 | setStartDate(format(sub(new Date(), { days: 7 }), 'yyyy-MM-dd'))
24 | } else {
25 | setStartDate(format(startOfWeek(new Date()), 'yyyy-MM-dd'))
26 | }
27 | break
28 | case 'm':
29 | setStartDate(format(startOfMonth(new Date()), 'yyyy-MM-dd'))
30 | break
31 | case 'y':
32 | setStartDate(format(startOfYear(new Date()), 'yyyy-MM-dd'))
33 | break
34 | }
35 |
36 | setEndDate(format(new Date(), 'yyyy-MM-dd'))
37 | } else {
38 | setStartDate('')
39 | setEndDate('')
40 | }
41 | }, [timePeriod])
42 |
43 | return {
44 | startDate,
45 | endDate
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/utils/validation/nullableNumber.ts:
--------------------------------------------------------------------------------
1 | export default function nullableNumber(val: unknown) {
2 | if (val === '' || val === null || typeof val === 'undefined') return null
3 | return Number(val)
4 | }
5 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///