Skip to content

Commit

Permalink
QoL: ranking table save scroll, sort, etc
Browse files Browse the repository at this point in the history
  • Loading branch information
@esmalleydev
esmalleydev committed Apr 16, 2024
1 parent b7e43a3 commit 595da21
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 22 deletions.
39 changes: 20 additions & 19 deletions app/cbb/ranking/ranking-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import { clearPositions, updateConferences, updatePositions } from '@/redux/feat
import { getHeaderColumns } from './columns';
import { getRowsData } from './rows';
import AdditionalOptions from '@/components/generic/CBB/Ranking/AdditionalOptions';
import { setOrder, setOrderBy, setTableScrollTop } from '@/redux/features/ranking-slice';


// TODO Filter out people who play under x minutes?
Expand Down Expand Up @@ -82,8 +83,11 @@ const Ranking = (props) => {
const dispatch = useAppDispatch();
const conferences = useAppSelector(state => state.displayReducer.conferences);
const positions = useAppSelector(state => state.displayReducer.positions);
const order = useAppSelector(state => state.rankingReducer.order);
const orderBy = useAppSelector(state => state.rankingReducer.orderBy);
const hideCommitted = useAppSelector(state => state.rankingReducer.hideCommitted);
const hideUnderTwoMPG = useAppSelector(state => state.rankingReducer.hideUnderTwoMPG);
const tableScrollTop = useAppSelector(state => state.rankingReducer.tableScrollTop);

interface TableComponentsType {
Scroller: React.ComponentType<any>;
Expand All @@ -101,11 +105,8 @@ const Ranking = (props) => {

const [loading, setLoading] = useState(false);
const [spin, setSpin] = useState(false);
const [firstRender, setFirstRender] = useState(true);
const [season, setSeason] = useState(searchParams?.get('season') || new HelperCBB().getCurrentSeason());
const [rankView, setRankView] = useState(searchParams?.get('view') || 'team');
const [order, setOrder] = useState('asc');
const [orderBy, setOrderBy] = useState('composite_rank');
const [view, setView] = useState('composite');
const [customColumns, setCustomColumns] = useState(['composite_rank', 'name']);
const [customColumnsOpen, setCustomColumnsOpen] = useState(false);
Expand Down Expand Up @@ -135,22 +136,13 @@ const Ranking = (props) => {


useEffect(() => {
setFirstRender(false);
const localRankView = localStorage.getItem('CBB.RANKING.VIEW') || null;
const localRankCols = localStorage.getItem('CBB.RANKING.COLUMNS.' + rankView) || null;
setView(localRankView ? localRankView : 'composite');
setCustomColumns(localRankCols ? JSON.parse(localRankCols) : ['composite_rank', 'name']);
}, []);

if (firstRender) {
return (
<div>
<div style = {{'display': 'flex', 'justifyContent': 'center'}}>
<CircularProgress />
</div>
</div>
);
}


const rankViewOptions = [
{'value': 'team', 'label': 'Team rankings'},
Expand All @@ -165,6 +157,8 @@ const Ranking = (props) => {
if (searchParams) {
const current = new URLSearchParams(Array.from(searchParams.entries()));
current.set('view', newRankView);
current.delete('hideCommitted');
current.delete('hideUnderTwoMPG');
const search = current.toString();
const query = search ? `?${search}` : "";
setLoading(true);
Expand All @@ -176,8 +170,9 @@ const Ranking = (props) => {

setCustomColumns(['composite_rank', 'name']);
dispatch(clearPositions());
setOrder('asc');
setOrderBy('composite_rank');
dispatch(setOrder('asc'));
dispatch(setOrderBy('composite_rank'));
dispatch(setTableScrollTop(0));
setView('composite');
setRankView(newRankView);
}
Expand Down Expand Up @@ -210,6 +205,9 @@ const Ranking = (props) => {

const handleTeam = (team_id) => {
setSpin(true);
if (tableRef && tableRef.current) {
dispatch(setTableScrollTop(tableRef.current.scrollTop));
}
startTransition(() => {
router.push('/cbb/team/' + team_id+'?season='+season);
setSpin(false);
Expand All @@ -218,6 +216,9 @@ const Ranking = (props) => {

const handlePlayer = (player_id) => {
setSpin(true);
if (tableRef && tableRef.current) {
dispatch(setTableScrollTop(tableRef.current.scrollTop));
}
startTransition(() => {
router.push('/cbb/player/' + player_id+'?season='+season);
setSpin(false);
Expand Down Expand Up @@ -276,8 +277,8 @@ const Ranking = (props) => {
if (tableRef && tableRef.current) {
setTableHorizontalScroll(tableRef.current.scrollLeft);
}
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(id);
dispatch(setOrder(isAsc ? 'desc' : 'asc'));
dispatch(setOrderBy(id));
};

const descendingComparator = (a, b, orderBy) => {
Expand Down Expand Up @@ -577,7 +578,7 @@ const Ranking = (props) => {
<OptionPicker title = 'View' options = {rankViewOptions} selected = {rankView} actionHandler = {handleRankView} />
<SeasonPicker selected = {season} actionHandler = {handleSeason} />
</div>
<Typography variant = 'h5'>{'College basketball' + (rankView === 'transfer' ? ' transfers.' : 'rankings.')}</Typography>
<Typography variant = 'h5'>{'College basketball' + (rankView === 'transfer' ? ' transfers.' : ' rankings.')}</Typography>
{lastUpdated ? <Typography color="text.secondary" variant = 'body1' style = {{'fontStyle': 'italic'}}>{'Last updated: ' + getLastUpdated()}</Typography> : ''}
<div style = {{'display': 'flex', 'justifyContent': 'center', 'flexWrap': 'wrap'}}>
<Chip sx = {{'margin': '5px'}} label='Composite' variant={view !== 'composite' ? 'outlined' : 'filled'} color={view !== 'composite' ? 'primary' : 'success'} onClick={() => handleRankingView('composite')} />
Expand All @@ -598,7 +599,7 @@ const Ranking = (props) => {
{positionChips}
</div>
<div style = {{'padding': width < 600 ? '0px 10px' : '0px 20px'}}>
{rows.length ? <TableVirtuoso scrollerRef={scrollerRef} /*onScroll={(e) => console.log(e.target.scrollLeft)}*/ style={tableStyle} data={rows} components={TableComponents} fixedHeaderContent={getTableHeader} itemContent={getTableContents} /> : <div><Typography variant='h6' style = {{'textAlign': 'center'}}>No results :(</Typography></div>}
{rows.length ? <TableVirtuoso scrollerRef={scrollerRef} initialScrollTop={tableScrollTop} style={tableStyle} data={rows} components={TableComponents} fixedHeaderContent={getTableHeader} itemContent={getTableContents} /> : <div><Typography variant='h6' style = {{'textAlign': 'center'}}>No results :(</Typography></div>}
</div>
</div>
}
Expand Down
4 changes: 2 additions & 2 deletions components/generic/CBB/Ranking/AdditionalOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const AdditionalOptions = ({ view }: {view: string}) => {

const handleCommitted = () => {
const newValue: boolean = !hideCommitted;
handleClose();
setSpin(true);
startTransition(() => {
if (newValue !== hideCommitted) {
Expand All @@ -49,13 +50,13 @@ const AdditionalOptions = ({ view }: {view: string}) => {
router.replace(`${pathName}${query}`);
dispatch(setHideCommitted(newValue));
}
handleClose();
setSpin(false);
});
};

const handleUnderTwo = () => {
const newValue: boolean = !hideUnderTwoMPG;
handleClose();
setSpin(true);
startTransition(() => {
if (newValue !== hideUnderTwoMPG) {
Expand All @@ -66,7 +67,6 @@ const AdditionalOptions = ({ view }: {view: string}) => {
router.replace(`${pathName}${query}`);
dispatch(setHideUnderTwoMPG(newValue));
}
handleClose();
setSpin(false);
});
};
Expand Down
17 changes: 16 additions & 1 deletion redux/features/ranking-slice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,20 @@ if (typeof window !== 'undefined') {

type InitialState = {
rank: string,
order: string,
orderBy: string,
hideCommitted: boolean,
hideUnderTwoMPG: boolean,
tableScrollTop: number,
};

const initialState = {
rank: rankLocalStorage || 'composite_rank',
order: 'asc',
orderBy: 'composite_rank',
hideCommitted: false,
hideUnderTwoMPG: false,
tableScrollTop: 0,
} as InitialState;

const updateStateFromUrlParams = (state: InitialState) => {
Expand Down Expand Up @@ -46,19 +52,28 @@ export const ranking = createSlice({
name: 'ranking',
initialState: initialState,
reducers: {
setOrder: (state, action: PayloadAction<string>) => {
state.order = action.payload;
},
setOrderBy: (state, action: PayloadAction<string>) => {
state.orderBy = action.payload;
},
setHideCommitted: (state, action: PayloadAction<boolean>) => {
state.hideCommitted = action.payload;
},
setHideUnderTwoMPG: (state, action: PayloadAction<boolean>) => {
state.hideUnderTwoMPG = action.payload;
},
setTableScrollTop: (state, action: PayloadAction<number>) => {
state.tableScrollTop = action.payload;
},
// setSeason: (state, action: PayloadAction<number>) => {
// state.value.season = action.payload;
// },
}
});

export const { setHideCommitted, setHideUnderTwoMPG } = ranking.actions;
export const { setOrder, setOrderBy, setHideCommitted, setHideUnderTwoMPG, setTableScrollTop } = ranking.actions;
export default ranking.reducer;

updateStateFromUrlParams(initialState);

0 comments on commit 595da21

Please sign in to comment.