auth loading
) - if (loaderElement) return loaderElement + + // use global loader for auth checks as it blocks the entire app + useEffect(() => { + if (loading) { + startLoading() + } else { + stopLoading() + } + }, [loading]) + + if (loading) return null if (!isLoggedIn) return ( diff --git a/frontend/src/components/api/DisplayResourceGeneric.tsx b/frontend/src/components/api/DisplayResourceGeneric.tsx new file mode 100644 index 0000000..c113c81 --- /dev/null +++ b/frontend/src/components/api/DisplayResourceGeneric.tsx @@ -0,0 +1,65 @@ +import { useEffect, useState, type MouseEvent } from 'react' +import { Link, useSearchParams } from 'react-router-dom' +import { useResource } from '../../hooks/load/useResource.ts' +import ShowLoader from '../load/ShowLoader.tsx' + +export type Item = { + id: number + name: string +} + +type Props = { + fetchFn: (page: number) => Promise
+ {/* show loading text while fetching, otherwise show items */}
+ {ShowLoader(isLoading,
+ )
+}
diff --git a/frontend/src/components/context/ExtendableContextMenu.tsx b/frontend/src/components/context/ExtendableContextMenu.tsx
new file mode 100644
index 0000000..1f3e8c6
--- /dev/null
+++ b/frontend/src/components/context/ExtendableContextMenu.tsx
@@ -0,0 +1,162 @@
+import { useRef, useState } from 'react'
+
+type ContextMenuField =
+ | { type: 'text'; label: string; onClick?: () => void }
+ | {
+ type: 'input'
+ label: string
+ onSubmit: (value: string) => void | PromiseLoading...
)}
+ {!isLoading &&
+ items.map((item: Item) => (
+
+ onContextMenu?.(e, item)}
+ >
+ {item.name}
+
+
+ ))}
+ {pageNum === totalPages && onAdd && }
+
+ {pageNum > 1 && }
+ {pageNum > 1 && }
+
+ Page {pageNum} of {totalPages}
+
+ {pageNum < totalPages && }
+ {pageNum < totalPages && }
+
+ e.stopPropagation()}
+ style={{
+ position: 'fixed',
+ top: y,
+ left: x,
+ background: 'var(--color-bg-card)',
+ border: '1px solid var(--color-border)',
+ padding: '8px',
+ zIndex: 9999,
+ }}
+ >
+ {title}
+
+ )
+}
diff --git a/frontend/src/components/error/ErrorBanner.tsx b/frontend/src/components/error/ErrorBanner.tsx
new file mode 100644
index 0000000..46b4e67
--- /dev/null
+++ b/frontend/src/components/error/ErrorBanner.tsx
@@ -0,0 +1,36 @@
+import { clearError } from '../../helpers/exports/exportError.ts'
+
+export default function ErrorBanner({ message }: { message: string }) {
+ return (
+
+ {fields.map((field, i) => {
+ if (field.type === 'text') {
+ return (
+
+
+ {/* shared submit button at the bottom */}
+ {fields.some(f => f.type === 'input') && (
+
+ )}
+
+
+
+ )
+ }
+
+ if (field.type === 'input') {
+ const inputId = `context-menu-field-${i}-${field.label.replace(/\s+/g, '-').toLowerCase()}`
+ const errorId = `${inputId}-error`
+
+ return (
+
+
+ handleChange(i, field, e.target.value)}
+ aria-invalid={!!errors[i]}
+ aria-describedby={errors[i] ? errorId : undefined}
+ />
+ {errors[i] && (
+
+ {errors[i]}
+
+ )}
+
+ )
+ }
+ })}
+
+ {message}
+
+
+ )
+}
diff --git a/frontend/src/components/leagues/LeagueContextMenu.tsx b/frontend/src/components/leagues/LeagueContextMenu.tsx
index 97b7010..0c7dca8 100644
--- a/frontend/src/components/leagues/LeagueContextMenu.tsx
+++ b/frontend/src/components/leagues/LeagueContextMenu.tsx
@@ -1,38 +1,28 @@
-/**
- * Right-click context menu for leagues
- *
- * @param x horiz pos
- * @param y vert pos
- */
-export default function LeagueContextMenu({ x, y }: { x: number; y: number }) {
+import ContextMenu from '../context/ExtendableContextMenu.tsx'
+import { isNameUnique } from '../../helpers/validation/checkUniqueness.ts'
+
+type Props = {
+ x: number
+ y: number
+ onRename: (name: string) => void | Promise
-
+ -
-
-
-
hard coded for now:
-
- - - - -
- - - -
+
+ )
+}
diff --git a/frontend/src/components/load/LoadResourceIndex.tsx b/frontend/src/components/load/LoadResourceIndex.tsx
deleted file mode 100644
index 699e220..0000000
--- a/frontend/src/components/load/LoadResourceIndex.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useCallback } from 'react'
-import { startLoading, stopLoading } from '../../helpers/exports/exportLoading.ts'
-import fetchLeaguesIndex from '../../helpers/leagues/fetchLeaguesIndex.ts'
-import { Link } from 'react-router-dom'
-
-/**
- * Abstract component to load all resources for a given category todo: fully abstract and extend in LoadLeague.tsx
- */
-export default async function LoadResourceIndex({ pageNum }: any) {
- startLoading()
- const response = await fetchLeaguesIndex(pageNum)
-
- // // get total pages from Yii2 response _meta
- // if (response._meta) {
- // setTotalPages(response._meta.pageCount)
- // }
-
- const league = response.items.map((item: any) => {
- return {
- button: (
-
- ),
- }
- })
- stopLoading()
-}
diff --git a/frontend/src/components/load/ShowLoader.tsx b/frontend/src/components/load/ShowLoader.tsx
index 878d1be..6563037 100644
--- a/frontend/src/components/load/ShowLoader.tsx
+++ b/frontend/src/components/load/ShowLoader.tsx
@@ -1,28 +1,12 @@
import React from 'react'
+import GlobalLoader from './GlobalLoader.tsx'
// decides whether a loader should be shown
export default function ShowLoader(isLoading: boolean, loader?: React.ReactNode) {
// fallback to default global loader
if (!loader) {
- loader = (
-
-
- )
+ loader = Loading...
- {loader}
+ if (isLoading) return <>{loader}
return null // Return null when not loading, so parent can continue
}
diff --git a/frontend/src/components/modals/CreationModal.tsx b/frontend/src/components/modals/CreationModal.tsx
index 9e21aba..4d6e05d 100644
--- a/frontend/src/components/modals/CreationModal.tsx
+++ b/frontend/src/components/modals/CreationModal.tsx
@@ -17,7 +17,7 @@ export interface CreationModalProps {
title: string
fields: FormField[]
onSubmit: ({ data, onReload }: ResourceCreation) => Promise