diff --git a/tournament-scheduler/src/Components/App.tsx b/tournament-scheduler/src/Components/App.tsx index 2e79ff7e..a33efc59 100644 --- a/tournament-scheduler/src/Components/App.tsx +++ b/tournament-scheduler/src/Components/App.tsx @@ -15,6 +15,7 @@ import { apiGet } from 'src/fetchers/Api' import type User from 'src/Models/User' import darkTheme from 'src/styles/dark.theme' import lightTheme from 'src/styles/light.theme' +import copyToClipboard from 'src/utils/Clipboard' type Themes = 'dark' | 'light' type StylesOverrides = { body: { background: string } } @@ -32,6 +33,18 @@ const logout = (setCurrentUser: (user: null) => void) => { } const App = () => { + /* eslint-disable react-hooks/rules-of-hooks */ + for (const param of ['register', 'view']) { + const oldParamValue = new URLSearchParams(window.location.search).get(param) + console.log(oldParamValue, typeof oldParamValue) + if (oldParamValue != null) { + const newLink = `${window.location.origin}${window.process.env.PUBLIC_URL}/${param}/${oldParamValue}` + console.warn(`Old ${param} param found in URL, redirecting to:`, newLink) + copyToClipboard(newLink).finally(() => window.location.href = newLink) + return <> + } + } + const isMobileSize = useMediaQuery('(max-width:640px)', { noSsr: true }) const [currentUser, setCurrentUser] = useState() const location = useLocation() diff --git a/tournament-scheduler/src/utils/Clipboard.ts b/tournament-scheduler/src/utils/Clipboard.ts index 67ab5638..0b0ae705 100644 --- a/tournament-scheduler/src/utils/Clipboard.ts +++ b/tournament-scheduler/src/utils/Clipboard.ts @@ -3,37 +3,40 @@ /* eslint-disable @typescript-eslint/restrict-template-expressions */ const MAX_SELECTION = 99_999 -const oldCopyToClipboard = (text: string) => { - const textArea = document.createElement('textarea') - textArea.value = text - textArea.style.position = 'fixed' // Avoid scrolling to bottom - document.body.append(textArea) - textArea.focus() - textArea.select() - textArea.setSelectionRange(0, MAX_SELECTION) // For mobile devices +const oldCopyToClipboard = (text: string) => + new Promise((resolve, reject) => { + const textArea = document.createElement('textarea') + textArea.value = text + textArea.style.position = 'fixed' // Avoid scrolling to bottom + document.body.append(textArea) + textArea.focus() + textArea.select() + textArea.setSelectionRange(0, MAX_SELECTION) // For mobile devices - try { - const successful = document.execCommand('copy') - if (!successful) throw new Error('execCommand failed') - console.info('text copied to clipboard successfully using textarea') - // @ts-expect-error TypeScript should allow error type on catch https://github.com/Microsoft/TypeScript/issues/20024 - } catch (err: Error) { - alert(`Could not copy text: ${err}`) - console.error('Could not copy text using textarea:', err) - } + try { + const successful = document.execCommand('copy') + if (!successful) throw new Error('execCommand failed') + console.info('text copied to clipboard successfully using textarea') + // https://github.com/Microsoft/TypeScript/issues/20024 + // @ts-expect-error TypeScript should allow error type on catch + } catch (err: Error) { + alert(`Could not copy text: ${err}`) + console.error('Could not copy text using textarea:', err) + reject() + } - textArea.remove() -} + textArea.remove() + resolve() + }) const copyToClipboard = (text: string) => { // Note: navigator.clipboard may not exist on some devices // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (!navigator.clipboard) { - oldCopyToClipboard(text) - return + return oldCopyToClipboard(text) } - navigator.clipboard.writeText(text).then( + return navigator.clipboard.writeText(text).then( () => console.info('text copied to clipboard successfully'), err => { alert(`Could not copy text: ${err}`)