Improvements: compare tool, add neutral site to url, light mode color…

… changes
esmalleydev · Mar 29, 2024 · 588188c · 588188c
1 parent 2466f6b
commit 588188c
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 42 deletions.
diff --git a/app/cbb/compare/page.tsx b/app/cbb/compare/page.tsx
@@ -37,7 +37,7 @@ export async function generateMetadata(
 ): Promise<Metadata> {
 
   return {
-    title: 'sRating | compare tool' ,
+    title: 'sRating | Compare tool' ,
     description: 'Compare any college basketball team statistics',
     openGraph: {
       title: 'Compare tool',
@@ -88,25 +88,26 @@ async function getData({ season, home_team_id, away_team_id}) {
 };
 
 
-export default async function Page({ params, searchParams }) {
+export default async function Page({ /*params,*/ searchParams }) {
   const CBB = new HelperCBB();
 
-  const home_team_id = searchParams?.home_team_id || null;
-  const away_team_id = searchParams?.away_team_id || null;
-  const season = searchParams?.season || CBB.getCurrentSeason();
-  const view = searchParams?.view || 'team';
-  const subview = searchParams?.subview || null;
-  // const neutral_site = searchParams?.neutral_site || 0;
-
+  const home_team_id: string | null = searchParams?.home_team_id || null;
+  const away_team_id: string | null = searchParams?.away_team_id || null;
+  const season: number = searchParams?.season || CBB.getCurrentSeason();
+  const view: string = searchParams?.view || 'team';
+  const subview: string | null = searchParams?.subview || null;
+  const neutral_site: boolean = (+searchParams?.neutral === 1);
 
   const teams = await getData({ season, home_team_id, away_team_id});
 
+  // todo wrap the whole thing in a client component to set redux values?
+
   return (
     <div>
       <HeaderClientWrapper>
-        <HeaderClient home_team_id = {home_team_id} away_team_id = {away_team_id} teams = {teams} season = {season} />
+        <HeaderClient home_team_id = {home_team_id} away_team_id = {away_team_id} teams = {teams} season = {season} neutral_site = {neutral_site} />
       </HeaderClientWrapper>
-      <SubNavBar home_team_id = {home_team_id} away_team_id = {away_team_id} view = {view} />
+      <SubNavBar home_team_id = {home_team_id} away_team_id = {away_team_id} view = {view} neutral_site = {neutral_site} />
       {
       !home_team_id || !away_team_id ?
         <Splash /> :
@@ -134,7 +135,7 @@ export default async function Page({ params, searchParams }) {
           }
         </>
       }
-      <PredictionLoader season = {season} />
+      <PredictionLoader season = {season} neutral_site = {neutral_site} />
     </div>
   );
 };
diff --git a/app/home-page.tsx b/app/home-page.tsx
@@ -29,6 +29,7 @@ import playerImage from '../public/static/images/player.png';
 
 import Pricing from '../components/generic/Pricing';
 import BackdropLoader from '../components/generic/BackdropLoader';
+import { getLogoColorPrimary, getLogoColorSecondary } from '@/components/utils/Color';
 
 const Home = (props) => {
   const theme = useTheme();
@@ -121,7 +122,7 @@ const Home = (props) => {
               style = {{'fontWeight': 600, 'fontStyle': 'italic'}}
               gutterBottom
             >
-              {theme.palette.mode === 'dark' ? <><span style = {{'color': '#FDD835'}}>s</span><span style = {{'color': '#2ab92a'}}>Rating</span></> : 'sRating'}
+              {<><span style = {{'color': getLogoColorPrimary()}}>s</span><span style = {{'color': getLogoColorSecondary()}}>Rating</span></>}
             </Typography>
             <Typography variant="h5" align="center" color="text.secondary" paragraph>
               College basketball live scores, odds, picks, API, <br /> no ads, <Link underline="hover" href = "https://github.com/esmalleydev/srating.io-gui" target = "_blank">open-source</Link>

diff --git a/components/generic/CBB/Compare/Header/Client.tsx b/components/generic/CBB/Compare/Header/Client.tsx
@@ -16,7 +16,7 @@ import BackdropLoader from '@/components/generic/BackdropLoader';
 import { setHomeTeamID, setAwayTeamID } from '@/redux/features/compare-slice';
 
 
-const Client = ({ home_team_id, away_team_id, teams, season }) => {
+const Client = ({ home_team_id, away_team_id, teams, season, neutral_site }) => {
   const CBB = new HelperCBB();
   const ColorUtil = new Color();
 
@@ -32,7 +32,7 @@ const Client = ({ home_team_id, away_team_id, teams, season }) => {
 
   const dispatch = useAppDispatch();
   const displayRank = useAppSelector(state => state.displayReducer.rank);
-  const neutral_site = useAppSelector(state => state.compareReducer.neutral_site);
+  // const neutral_site = useAppSelector(state => state.compareReducer.neutral_site);
 
   const handleRemove = (team_id) => {
     setSpin(true);

diff --git a/components/generic/CBB/Compare/SubNavBar.tsx b/components/generic/CBB/Compare/SubNavBar.tsx
@@ -28,7 +28,7 @@ const getSubNavHeaderHeight = () => {
 
 export { getSubNavHeaderHeight };
 
-const SubNavBar = ({ view, home_team_id, away_team_id }) => {
+const SubNavBar = ({ view, home_team_id, away_team_id, neutral_site }) => {
   const theme = useTheme();
   const router = useRouter();
   const pathName = usePathname();
@@ -146,7 +146,7 @@ const SubNavBar = ({ view, home_team_id, away_team_id }) => {
   );
 
   if (view === 'team') {
-    rightButtons.push(<TeamAdditionalOptions key = {'team-additional'} />);
+    rightButtons.push(<TeamAdditionalOptions key = {'team-additional'} neutral_site = {neutral_site} />);
 
     leftButtons.push(
       <Tooltip key = {'table-button'} title = {subview === 'table' ? 'View compare mode' : 'View table mode'}>

diff --git a/components/generic/CBB/Compare/Team/PredictionLoader.ts b/components/generic/CBB/Compare/Team/PredictionLoader.ts
@@ -5,12 +5,12 @@ import { setPredictions, setPredictionsLoading } from '@/redux/features/compare-
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { useState } from 'react';
 
-const PredictionLoader = ({ season }) => {
+const PredictionLoader = ({ season, neutral_site }) => {
   const dispatch = useAppDispatch();
 
   const home_team_id = useAppSelector(state => state.compareReducer.home_team_id);
   const away_team_id = useAppSelector(state => state.compareReducer.away_team_id);
-  const neutral_site = useAppSelector(state => state.compareReducer.neutral_site);
+  // const neutral_site = useAppSelector(state => state.compareReducer.neutral_site);
 
   const [loading, setLoading] = useState(false);
   const [lastSeason, setLastSeason] = useState(null);

diff --git a/components/generic/CBB/Compare/TeamAdditionalOptions.tsx b/components/generic/CBB/Compare/TeamAdditionalOptions.tsx
@@ -1,20 +1,45 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useState, useTransition } from 'react';
 
 import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
 import TripleDotsIcon from '@mui/icons-material/MoreVert';
 import CheckIcon from '@mui/icons-material/Check';
 import LuggageIcon from '@mui/icons-material/Luggage';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { setNeutralSite } from '@/redux/features/compare-slice';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import BackdropLoader from '@/components/generic/BackdropLoader';
 
-const TeamAdditionalOptions = () => {
 
+const TeamAdditionalOptions = ({ neutral_site }: { neutral_site: boolean}) => {
+  const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+  const [spin, setSpin] = useState(false);
   const [anchor, setAnchor] = useState(null);
   const open = Boolean(anchor);
 
   const dispatch = useAppDispatch();
-  const neutral_site = useAppSelector(state => state.compareReducer.neutral_site);
+  // const neutral_site = useAppSelector(state => state.compareReducer.neutral_site);
+
+
+  const handleNeutral = () => {
+    const newValue: boolean = !neutral_site;
+    setSpin(true);
+    startTransition(() => {
+      if (newValue !== neutral_site) {
+        const current = new URLSearchParams(Array.from(searchParams.entries()));
+        current.set('neutral', (+newValue).toString());
+        const search = current.toString();
+        const query = search ? `?${search}` : "";
+        router.replace(`${pathName}${query}`);
+        dispatch(setNeutralSite(newValue));
+      }
+      handleClose();
+      setSpin(false);
+    });
+  };
 
 
   const handleOpen = (event) => {
@@ -27,6 +52,7 @@ const TeamAdditionalOptions = () => {
 
   return (
     <div>
+      {spin ? <BackdropLoader /> : ''}
       <IconButton
           id="team-additional-options"
           aria-controls={open ? 'long-menu' : undefined}
@@ -42,12 +68,9 @@ const TeamAdditionalOptions = () => {
           open={open}
           onClose={handleClose}
         >
-          <MenuItem key='neutral-site-display' onClick={() => {
-            dispatch(setNeutralSite(+!neutral_site));
-            handleClose();
-          }}>
+          <MenuItem key='neutral-site-display' onClick={handleNeutral}>
             <ListItemIcon>
-              {neutral_site ? <CheckIcon fontSize='small' /> : <LuggageIcon fontSize='small' />}
+              {+neutral_site ? <CheckIcon fontSize='small' /> : <LuggageIcon fontSize='small' />}
             </ListItemIcon>
             <ListItemText>Neutral site game</ListItemText>
           </MenuItem>

diff --git a/components/generic/FooterNavigation.tsx b/components/generic/FooterNavigation.tsx
@@ -23,13 +23,11 @@ import { setScrollTop as setGamesScrollTop } from '@/redux/features/games-slice'
 const StyledBottomNavigationAction = styled(BottomNavigationAction)(({ theme }) => ({
   'color': theme.palette.mode === 'light' ? '#fff' : theme.palette.text.primary,
   '&.Mui-selected': {
-    'color': theme.palette.mode === 'light' ? '#424CF5' : theme.palette.success.dark,
+    'color': theme.palette.mode === 'light' ? theme.palette.warning.light : theme.palette.success.dark,
   },
 }));
 
-const FooterNavigation = (props) => {
-  const self = this;
-
+const FooterNavigation = () => {
   const theme = useTheme();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -133,7 +131,7 @@ const FooterNavigation = (props) => {
     {spin ? <BackdropLoader /> : ''}
     {/* {viewingSport ?  */}
       <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 4}}>
-        <BottomNavigation style = {{'backgroundColor': theme.palette.mode == 'dark' ? theme.palette.grey[900] : theme.palette.primary.light}} showLabels value={hightlightValue}>
+        <BottomNavigation style = {{'backgroundColor': theme.palette.mode == 'dark' ? theme.palette.grey[900] : '#1976d2'}} showLabels value={hightlightValue}>
           <StyledBottomNavigationAction color = 'secondary' onClick = {handleHome} label="Home" icon={<HomeIcon />} />
           <StyledBottomNavigationAction color = 'secondary' onClick = {handleRanking} label="Ranking" icon={<RankingIcon />} />
           <StyledBottomNavigationAction color = 'secondary' onClick = {handleScores} label="Scores" icon={<ScoresIcon />} />

diff --git a/components/generic/Header.tsx b/components/generic/Header.tsx
@@ -37,6 +37,7 @@ import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { setSession, setValidSession } from '../../redux/features/user-slice';
 import { Avatar, Divider, ListItemIcon, Tooltip } from '@mui/material';
 import { clear } from '@/redux/features/compare-slice';
+import { getLogoColorPrimary, getLogoColorSecondary } from '../utils/Color';
 
 
 const SignUpButton = styled(Button)(({ theme }) => ({
@@ -146,10 +147,6 @@ const Header = () => {
     'cursor': 'pointer',
   };
 
-  if (theme.palette.mode === 'dark') {
-    logoStyle.color = '#2ab92a';
-    // purple #b92ab9
-  }
 
   return (
     <AppBar position="fixed">
@@ -178,7 +175,7 @@ const Header = () => {
                 </IconButton>
                 <Box sx = {{ display: 'flex', mr: 1, 'alignItems': 'center' }} style = {logoStyle} onClick = {handleHome}>
                   <img src={sratingLogo.src} width = '20' height = '20' style = {{'marginRight': 5}} />
-                  <span style = {{'color': '#FDD835'}}>S</span>{'RATING'}
+                  <><span style = {{'color': getLogoColorPrimary()}}>S</span><span style = {{'color': (theme.palette.mode === 'dark' ? getLogoColorSecondary() : '#fff')}}>RATING</span></>
                 </Box>
                 <Box sx={{ flexGrow: 1, display: 'flex' }}>
                 </Box>

diff --git a/components/utils/Color.js b/components/utils/Color.js
@@ -12,6 +12,19 @@ export const getWorstColor = () => {
   return theme.palette.mode === 'light' ? theme.palette.error.main : theme.palette.error.dark;
 };
 
+export const getLogoColorPrimary = () => {
+  const theme = useTheme();
+
+  // return theme.palette.mode === 'light' ? '#fd35ab' : '#FDD835';
+  return theme.palette.mode === 'light' ? theme.palette.warning.light : '#FDD835';
+};
+
+export const getLogoColorSecondary = () => {
+  const theme = useTheme();
+
+  return theme.palette.mode === 'light' ? '#482ab9' : '#2ab92a';
+};
+
 
 class Color {
   constructor(args) {
@@ -40,6 +53,7 @@ class Color {
     return '#' + ((1 << 24) + (rr << 16) + (rg << 8) + rb | 0).toString(16).slice(1);
   };
 
+
 };
 
 export default Color;
diff --git a/redux/features/compare-slice.ts b/redux/features/compare-slice.ts
@@ -4,7 +4,7 @@ type InitialState = {
   home_team_id: string | null,
   away_team_id: string | null,
   next_search: string | null,
-  neutral_site: number,
+  neutral_site: boolean,
   view: string,
   subview: string | null,
   scrollTop: number,
@@ -18,7 +18,7 @@ const initialState = {
   home_team_id: null,
   away_team_id: null,
   next_search: null,
-  neutral_site: 0,
+  neutral_site: false,
   view: 'team',
   subview: null,
   scrollTop: 0,
@@ -35,7 +35,7 @@ const updateStateFromUrlParams = (state: InitialState) => {
   const urlParams = new URLSearchParams(window.location.search);
   const home_team_id = urlParams.get('home_team_id');
   const away_team_id = urlParams.get('away_team_id');
-  const neutral_site = urlParams.get('neutral_site');
+  const neutral_site = urlParams.get('neutral');
   const view = urlParams.get('view');
   const subview = urlParams.get('subview');
 
@@ -47,7 +47,7 @@ const updateStateFromUrlParams = (state: InitialState) => {
     state.away_team_id = away_team_id;
   }
   if (neutral_site !== null) {
-    state.neutral_site = +neutral_site;
+    state.neutral_site = (+neutral_site === 1);
   }
   if (view !== null) {
     state.view = view;
@@ -93,7 +93,7 @@ export const compare = createSlice({
     setView: (state, action: PayloadAction<string>) => {
       state.view = action.payload;
     },
-    setNeutralSite: (state, action: PayloadAction<number>) => {
+    setNeutralSite: (state, action: PayloadAction<boolean>) => {
       state.neutral_site = action.payload;
     },
     setHomeTeamID: (state, action: PayloadAction<string|null>) => {