feat(points): allow to see different matchdays

src/components/AbstractTeam/AbstractTeam.tsx

@@ -487,6 +487,21 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 		}
 	};
 
+	const onDayChange = (directionNext: boolean) => {
+		if (directionNext) {
+			const upcomingWeekExists = deadlineInfo.weeks.find((week: Week) => !!(state.visibleWeekId && (week.id > state.visibleWeekId)));
+			if (upcomingWeekExists && state.visibleWeekId) {
+				setState({ ...state, visibleWeekId: state.visibleWeekId + 1 });
+			}
+		} else {
+			const previousWeekExists = deadlineInfo.weeks.find((week: Week) => !!(state.visibleWeekId && (week.id < state.visibleWeekId)));
+
+			if (previousWeekExists && state.visibleWeekId) {
+				setState({ ...state, visibleWeekId: state.visibleWeekId - 1 });
+			}
+		}
+	};
+
 	const onPlayerSwap = (player: Player) => {
 		if (player && player.id === state.swapPlayerId) {
 			const pickBackResult = state.validator.pick(player);
@@ -721,6 +736,7 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 					onTransfersSubmit={onTransfersSubmit}
 					onTransfersReset={onTransfersReset}
 					reloadUserTeams={reloadUserTeams}
+					onDayChange={onDayChange}
 					teamUser={state.teamUser}
 					initializedExternally={state.initializedExternally}
 					visibleWeekId={state.visibleWeekId}

src/components/Calendar/Calendar.tsx

@@ -39,6 +39,8 @@ export const Calendar = (props: CalendarProps) => {
 		weekId: props.weekId
 	});
 
+	useEffect(() => setState({...state, weekId: props.weekId}), [props]);
+
 	const onFilterChange = (name: string, value: string | number) => {
 		const filters: any = Object.assign({}, state.filters, { [name]: value });
 		setState({ ...state, filters });

src/components/MatchdaySelector/MatchdaySelector.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from "react-i18next";
+import { ButtonStyle, MatchdaySelectorStyle } from "./MatchdaySelectorStyle";
+
+type MatchdaySelectorProps = {
+	day: number
+	name: string
+	min: number
+	max: number
+	onNext: any
+	onPrev: any
+}
+
+export const MatchdaySelector = (props: MatchdaySelectorProps) => {
+	const [t] = useTranslation();
+	const previousDisabled = props.min && props.day === props.min;
+	const nextDisabled = props.max && props.day === props.max - 1;
+
+	return (
+		<MatchdaySelectorStyle>
+			<ButtonStyle
+				type="previous"
+				className={previousDisabled ? "disabled" : ""}
+				onClick={previousDisabled ? () => ({}) : props.onPrev}
+			/>
+			{t("general.footballWeek")} {props.day} {props.name ? ` - ${props.name}` : ""}
+			<ButtonStyle
+				type="next"
+				className={nextDisabled ? "disabled" : ""}
+				onClick={nextDisabled ? () => ({}) : props.onNext}
+			/>
+		</MatchdaySelectorStyle>
+	);
+};

src/components/MatchdaySelector/MatchdaySelectorStyle.tsx

@@ -0,0 +1,30 @@
+import styled from "@/styles/styled-components";
+
+export const MatchdaySelectorStyle = styled.div`
+	text-align: center;
+	font-weight: bold;
+	padding: 5px;
+	font-size:18px;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`;
+
+export const ButtonStyle = styled.a`
+	display: block;
+	width: 50px;
+	height: 50px;
+	cursor: pointer;
+	background: url(/src/assets/img/back.png) center center / 20px 20px no-repeat rgb(255,255,255);
+	border-radius: 50%;
+	margin: 0 0 0 5px;
+    &.disabled {
+    	cursor: not-allowed;
+	}
+
+    ${({ type }) => type === "next" && `
+        transform: rotate(180deg);
+        margin: 0 5px 0 0;
+    `}
+`;

src/pages/Points/Points.tsx

@@ -23,6 +23,7 @@ import { Calendar } from "@/components/Calendar/Calendar";
 import { Stats } from "@/components/Stats/Stats";
 import { PointsStats } from "@/components/PointsStats/PointsStats";
 import teamBackground from "./../../assets/img/fpl-pitch-no-boarding.svg";
+import { MatchdaySelector } from "@/components/MatchdaySelector/MatchdaySelector";
 
 export const _TeamPoints = (props: AbstractTeamType) => {
 	const { id } = useParams();
@@ -38,12 +39,16 @@ export const _TeamPoints = (props: AbstractTeamType) => {
 	const application = useSelector((state: StoreState) => state.application);
 	const location = useLocation();
 
+	const {
+		visibleWeekId,
+	} = props;
 
 	const deadlineWeek = useMemo(() => deadlineInfoSuccess && deadlineInfo.deadlineInfo.deadlineWeek, [deadlineInfo]);
 	const deadlineDate = useMemo(() => deadlineInfoSuccess && deadlineInfo.deadlineInfo.deadlineDate, [deadlineInfo]);
-	const visibleWeekId = useMemo(() => deadlineInfoSuccess && deadlineInfo.deadlineInfo.displayWeek, [deadlineInfo]);
+	// const visibleWeekId = useMemo(() => deadlineInfoSuccess && deadlineInfo.deadlineInfo.displayWeek, [deadlineInfo]);
 	const currentWeek = useMemo(() => deadlineInfoSuccess && deadlineInfo.weeks.find((week: Week) => week.id === visibleWeekId), [visibleWeekId, deadlineInfo]);
 
+
 	const parsePlayerPointsValue = (value: string) => {
 		try {
 			return JSON.parse(value);
@@ -146,10 +151,11 @@ export const _TeamPoints = (props: AbstractTeamType) => {
 	};
 
 	useEffect(() => {
+		console.log("EFFECT, visibleweekid", visibleWeekId);
 		if (deadlineInfoSuccess && clubsSuccess && teamSuccess && matchesSuccess) {
 			getTeamInfo(visibleWeekId);
 		}
-	}, [clubsSuccess, teamSuccess, matchesSuccess, deadlineInfoSuccess]);
+	}, [clubsSuccess, teamSuccess, matchesSuccess, deadlineInfoSuccess, visibleWeekId]);
 
 	const { starting, bench, initializedExternally, teamName, teamUser, captainId, viceCaptainId, teamPointsInfo } = props;
 
@@ -183,10 +189,14 @@ export const _TeamPoints = (props: AbstractTeamType) => {
 				(initializedExternally && visibleWeekId &&
 					<Row style={{ margin: 0 }}>
 						<Col md={24}>
-							{/* TODO: MATCHDAYSELECTOR */}
-							<Block>
-								Week {visibleWeekId}
-							</Block>
+							<MatchdaySelector
+								day={visibleWeekId}
+								max={deadlineWeek ? deadlineWeek : visibleWeekId}
+								min={1}
+								name={""}
+								onPrev={(e: any) => props.onDayChange(false)}
+								onNext={(e: any) => props.onDayChange(true)}
+							/>
 						</Col>
 					</Row>)
 				|| null
@@ -291,4 +301,4 @@ export const _TeamPoints = (props: AbstractTeamType) => {
 	);
 };
 
-export const PointsPage = () => AbstractTeam(_TeamPoints, {});
+export const PointsPage = () => AbstractTeam(_TeamPoints, {}, { mode: "points" });

src/types/component_types.tsx

@@ -1,51 +1,52 @@
 declare type AbstractTeamType = {
-		setStarting: (starting: any[]) => void,
-		setBench: (bench: any[]) => void,
-		setBudget: (budget:	number) => void,
-		setTeamName:	(name: string) => void,
-		setCaptainId: (captainId: number) => void,
-		setActivePositionFilter:	(positionId: number) => void,
-		isPickAble: (player: Player, taxForPicking?: boolean, isTransferPick?: boolean) => any,
-		isSwapAble: (player: Player) => any,
-		onTeamSave: () => Promise<any>,
-		onTeamReset: (team: any) => Promise<any>,
-		onTeamNameChange: (e: any) => void,
-		onCaptainSelect: (player: Player) => void,
-		onViceCaptainSelect: (player: Player, captainFirstInList?: boolean) => void,
-		removeBenchPlayer: (player: Player) => void,
-		removeStartingPlayer: (player: Player) => void,
-		removePlayer: (player: Player) => void,
-		pickPlayer: (player: Player, taxForPicking?: boolean) => void,
-		activePositionFilter?: any,
-		starting?: any[],
-		bench?: any[],
-		captainId?: number , 
-		viceCaptainId?: number ,
-		teamName?: string,
-		budget?: number,
-		swapPlayerId?: any,
-		swappedFrom?: string | null,
-		teamNameChanged?: boolean,
-		initTeamState: (starting: any[], bench: any[], teamName: string, captainId: number, budget: number, leagues?: any[] | undefined, visibleWeekId?: number | undefined, teamPointsInfo?: any, rawTransfers?: any[] | undefined, deadlineWeekTransfers?: any[] | undefined, pastTransfers?: any[] | undefined, viceCaptainId?: number, boosters?: Boosters, isTeamOwner?: boolean, teamUser?: any) => void,
-		resetTeamName: () => void,
-		onTeamNameUpdate: (teamId: number) => void,
-		onTeamEdit: (team: any) => void,
-		onTeamSelectionsUpdate: (teamId: number, weekId: number) => void,
-		onPlayerSwap: (player: Player) => void,
-		loadAllMatches: () => void,
-		onTransferPlayerOut: (player: Player, extra?: boolean) => void,
-		onDraftTransfersClear: () => void,
-		onTransferPlayerIn: (player: Player) => void,
-		onTransfersSubmit: (teamId: number) => void,
-		onTransfersReset: (teamId: number) => void,
-		reloadUserTeams: () => void,
-		teamUser?: any,
-		savingTeamPending?: any,
-		visibleWeekId: number | null,
-		boosters: Boosters,
-		initializedExternally: boolean,
-		deadlineWeekTransfers: Transfer[] | null,
+	setStarting: (starting: any[]) => void,
+	setBench: (bench: any[]) => void,
+	setBudget: (budget: number) => void,
+	setTeamName: (name: string) => void,
+	setCaptainId: (captainId: number) => void,
+	setActivePositionFilter: (positionId: number) => void,
+	isPickAble: (player: Player, taxForPicking?: boolean, isTransferPick?: boolean) => any,
+	isSwapAble: (player: Player) => any,
+	onTeamSave: () => Promise<any>,
+	onTeamReset: (team: any) => Promise<any>,
+	onTeamNameChange: (e: any) => void,
+	onCaptainSelect: (player: Player) => void,
+	onViceCaptainSelect: (player: Player, captainFirstInList?: boolean) => void,
+	removeBenchPlayer: (player: Player) => void,
+	removeStartingPlayer: (player: Player) => void,
+	removePlayer: (player: Player) => void,
+	pickPlayer: (player: Player, taxForPicking?: boolean) => void,
+	activePositionFilter?: any,
+	starting?: any[],
+	bench?: any[],
+	captainId?: number,
+	viceCaptainId?: number,
+	teamName?: string,
+	budget?: number,
+	swapPlayerId?: any,
+	swappedFrom?: string | null,
+	teamNameChanged?: boolean,
+	initTeamState: (starting: any[], bench: any[], teamName: string, captainId: number, budget: number, leagues?: any[] | undefined, visibleWeekId?: number | undefined, teamPointsInfo?: any, rawTransfers?: any[] | undefined, deadlineWeekTransfers?: any[] | undefined, pastTransfers?: any[] | undefined, viceCaptainId?: number, boosters?: Boosters, isTeamOwner?: boolean, teamUser?: any) => void,
+	resetTeamName: () => void,
+	onTeamNameUpdate: (teamId: number) => void,
+	onTeamEdit: (team: any) => void,
+	onTeamSelectionsUpdate: (teamId: number, weekId: number) => void,
+	onPlayerSwap: (player: Player) => void,
+	loadAllMatches: () => void,
+	onTransferPlayerOut: (player: Player, extra?: boolean) => void,
+	onDraftTransfersClear: () => void,
+	onTransferPlayerIn: (player: Player) => void,
+	onTransfersSubmit: (teamId: number) => void,
+	onTransfersReset: (teamId: number) => void,
+	reloadUserTeams: () => void,
+	onDayChange: (directionNext: boolean) => void,
+	teamUser?: any,
+	savingTeamPending?: any,
+	visibleWeekId: number | null,
+	boosters: Boosters,
+	initializedExternally: boolean,
+	deadlineWeekTransfers: Transfer[] | null,
 	draftTransfers: Transfer[] | null,
 	pastTransfers: Transfer[] | null,
-		teamPointsInfo: any,
+	teamPointsInfo: any,
 }