diff --git a/frontend/src/components/DataTable/index.tsx b/frontend/src/components/DataTable/index.tsx index 6021f65d..a45fc43b 100644 --- a/frontend/src/components/DataTable/index.tsx +++ b/frontend/src/components/DataTable/index.tsx @@ -10,7 +10,6 @@ import { getLadder } from '@/services/stats.service'; import {getActivityFromUrl, getBracket, getRegion} from '@/utils/urlparts'; import { BRACKETS } from '@/constants/pvp-activity'; -import { REGION } from '@/constants/region'; import type { IActivityRecord } from '@/types'; export function getFromSearchParams(searchParams: URLSearchParams, name: string): string[] { diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx index 9f8ad5bc..22db9868 100644 --- a/frontend/src/components/Header/index.tsx +++ b/frontend/src/components/Header/index.tsx @@ -12,7 +12,7 @@ import { borderColor, containerBg } from "@/theme"; import { metaUrls, publicUrls, shuffleMulticlassUrls } from "@/config"; import { REGION } from "@/constants/region"; import { BRACKETS } from "@/constants/pvp-activity"; -import {getActivityFromUrl, getRegion} from "@/utils/urlparts"; +import {getActivityFromUrl, getBracket, getRegion} from "@/utils/urlparts"; const StyledAppBar = styled(AppBar)({ backgroundImage: "none", @@ -33,7 +33,7 @@ const Header = () => { const host = window.location.host.toUpperCase(); const { region: regionFromUrl = REGION.eu, - bracket = BRACKETS["3v3"], + bracket = getBracket(), } = useParams(); const region = getRegion(regionFromUrl); const activity = getActivityFromUrl(); diff --git a/frontend/src/containers/Activity/Tabs.tsx b/frontend/src/containers/Activity/Tabs.tsx index 5c75fca7..d9e28f7f 100644 --- a/frontend/src/containers/Activity/Tabs.tsx +++ b/frontend/src/containers/Activity/Tabs.tsx @@ -1,101 +1,101 @@ -import {useNavigate, useLocation, useParams} from 'react-router-dom'; -import {generatePath} from 'react-router'; - -import {Button, Chip} from '@mui/material'; -import {styled} from '@mui/system'; - -import {getActivityFromUrl, getBracket, getRegion} from '@/utils/urlparts'; -import {publicUrls} from '@/config'; -import {BRACKETS} from '@/constants/pvp-activity'; -import {borderColor} from '@/theme'; - -interface IProps { - bracketActivity: Record | undefined; -} - -export const TabButton = styled(Button)<{ isActive: boolean }>(({isActive}) => { - return { - color: 'white', - flexGrow: 1, - borderRadius: 0, - borderColor: borderColor, - borderRightWidth: 1, - borderStyle: 'solid', - textTransform: 'none', - fontSize: 16, - fontWeight: 1000, - backgroundColor: isActive ? 'rgb(21, 128, 61, 0.25)' : 'rgba(31, 41, 55, 0.25)', - '&:hover': { - backgroundColor: isActive && 'rgb(21, 128, 61, 0.25)', - }, - }; -}); - -export const BracketCount = ({content}: { content: number | string | undefined }) => { - if (!content) return null; - - return ( -
- -
- ); -}; - -const ActivityTabs = ({bracketActivity}: IProps) => { - let navigate = useNavigate(); - const location = useLocation(); - - const {region: regionFromUrl, bracket: bracketFromParams} = useParams(); - - const bracket = getBracket(bracketFromParams); - const activity = getActivityFromUrl(); - const region = getRegion(regionFromUrl); - - const handleBracketChange = (bracket: BRACKETS) => { - const newPath = generatePath(publicUrls.page, {region, activity, bracket}); - navigate(`${newPath}${location.search}`); - }; - - return ( -
- handleBracketChange(BRACKETS.shuffle)} - isActive={bracket === BRACKETS.shuffle} - > - Shuffle - - - handleBracketChange(BRACKETS['2v2'])} - isActive={bracket === BRACKETS['2v2']} - > - 2v2 - - - handleBracketChange(BRACKETS['3v3'])} - isActive={bracket === BRACKETS['3v3']} - > - 3v3 - - handleBracketChange(BRACKETS.blitz)} - isActive={bracket === BRACKETS.blitz} - > - Blitz - - - handleBracketChange(BRACKETS.rbg)} - isActive={bracket === BRACKETS.rbg} - > - RBG - -
- ); -}; - -export default ActivityTabs; +import {useNavigate, useLocation, useParams} from 'react-router-dom'; +import {generatePath} from 'react-router'; + +import {Button, Chip} from '@mui/material'; +import {styled} from '@mui/system'; + +import {getActivityFromUrl, getBracket, getRegion} from '@/utils/urlparts'; +import {publicUrls} from '@/config'; +import {BRACKETS} from '@/constants/pvp-activity'; +import {borderColor} from '@/theme'; + +interface IProps { + bracketActivity: Record | undefined; +} + +export const TabButton = styled(Button)<{ isActive: boolean }>(({isActive}) => { + return { + color: 'white', + flexGrow: 1, + borderRadius: 0, + borderColor: borderColor, + borderRightWidth: 1, + borderStyle: 'solid', + textTransform: 'none', + fontSize: 16, + fontWeight: 1000, + backgroundColor: isActive ? 'rgb(21, 128, 61, 0.25)' : 'rgba(31, 41, 55, 0.25)', + '&:hover': { + backgroundColor: isActive && 'rgb(21, 128, 61, 0.25)', + }, + }; +}); + +export const BracketCount = ({content}: { content: number | string | undefined }) => { + if (!content) return null; + + return ( +
+ +
+ ); +}; + +const ActivityTabs = ({bracketActivity}: IProps) => { + let navigate = useNavigate(); + const location = useLocation(); + + const {region: regionFromUrl, bracket: bracketFromParams} = useParams(); + + const bracket = getBracket(bracketFromParams); + const activity = getActivityFromUrl(); + const region = getRegion(regionFromUrl); + + const handleBracketChange = (bracket: BRACKETS) => { + const newPath = generatePath(publicUrls.page, {region, activity, bracket}); + navigate(`${newPath}${location.search}`); + }; + + return ( +
+ handleBracketChange(BRACKETS.shuffle)} + isActive={bracket === BRACKETS.shuffle} + > + Shuffle + + + handleBracketChange(BRACKETS['2v2'])} + isActive={bracket === BRACKETS['2v2']} + > + 2v2 + + + handleBracketChange(BRACKETS['3v3'])} + isActive={bracket === BRACKETS['3v3']} + > + 3v3 + + handleBracketChange(BRACKETS.blitz)} + isActive={bracket === BRACKETS.blitz} + > + Blitz + + + handleBracketChange(BRACKETS.rbg)} + isActive={bracket === BRACKETS.rbg} + > + RBG + +
+ ); +}; + +export default ActivityTabs;