FT-10-transfers

feat(transfers): initial implementation
jonassimoen · Oct 30, 2023 · 08d4b5b · 08d4b5b
2 parents 0cebf0c + b3ffd77
commit 08d4b5b
Show file tree

Hide file tree

Showing 18 changed files with 778 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "axios": "^1.4.0",
     "dayjs": "^1.11.7",
     "decimal.js": "^10.4.3",
+    "html-react-parser": "^5.0.0",
     "i18next-browser-languagedetector": "^7.0.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",

diff --git a/src/components/AbstractTeam/AbstractTeam.tsx b/src/components/AbstractTeam/AbstractTeam.tsx
@@ -3,11 +3,12 @@ import { useSelector } from "react-redux";
 import { FootballPicker } from "@/lib/football-picker";
 import { FootballMaxPositionsPicks, FootballPositionIds } from "@/lib/constants";
 import Decimal from "decimal.js";
-import { useAddTeamMutation, useUpdateTeamSelectionMutation } from "@/services/teamsApi";
+import { useAddTeamMutation, useSubmitTransfersMutation, useUpdateTeamSelectionMutation } from "@/services/teamsApi";
 import { openErrorNotification, openSuccessNotification } from "@/lib/helpers";
 import { t } from "i18next";
 import { useLazyGetTeamsQuery } from "@/services/usersApi";
 import { useGetDeadlineInfoQuery } from "@/services/weeksApi";
+import { pick } from "lodash";
 
 declare type AbstractTeamProps = {
 	matches?: any;
@@ -52,6 +53,12 @@ declare type AbstractTeamState = {
 	teamUser?: any
 	validator?: any
 	savingTeamPending?: any
+	visibleWeekId: number | null
+	initializedExternally: boolean
+	boosters: Boosters
+	deadlineWeekTransfers: Transfer[],
+	draftTransfers: Transfer[],
+	pastTransfers: Transfer[],
 }
 
 function playersToValidatorFormat(players: any) {
@@ -73,7 +80,9 @@ const getInitializedList = (size: number, forStarting?: boolean) => {
 export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props: AbstractTeamProps, options?: Options,) => {
 	const [addTeam] = useAddTeamMutation();
 	const [updateTeamSelections, { isSuccess: updateTeamSelectionsSucces, data: updateTeamSelectionsResult }] = useUpdateTeamSelectionMutation();
+	const { data: deadlineInfo, isSuccess: deadlineInfoSuccess, isLoading: deadlineInfoLoading, isError: deadlineInfoError } = useGetDeadlineInfoQuery();
 	const [getTeams] = useLazyGetTeamsQuery();
+	const [submitTransfers, { isSuccess: submitTransfersSucces, data: submitTransfersResult }] = useSubmitTransfersMutation();
 
 	const application = useSelector((state: StoreState.All) => state.application);
 
@@ -92,13 +101,20 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 		swapPlayerId: null,
 		swapPlayer: null,
 		swappedFrom: null,
+		visibleWeekId: deadlineInfoSuccess ? (options && options.mode === 'points' ? deadlineInfo.deadlineInfo.displayWeek : deadlineInfo.deadlineInfo.deadlineWeek) : 0,
+		boosters: {},
+
+		deadlineWeekTransfers: [],
+		draftTransfers: [],
+		pastTransfers: [],
 
 		initialStarting: getInitializedList(application.competition.lineupSize, true),
 		initialBench: getInitializedList(application.competition.benchSize),
 		initialBudget: application.competition.budget,
 
 		teamUser: undefined,
 		activePositionFilter: -1,
+		initializedExternally: false,
 	});
 
 	const setStarting = (starting: any[]) => {
@@ -131,10 +147,18 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 		starting: any[],
 		bench: any[],
 		teamName: string,
+		captainId: number,
 		budget: number,
-		captainId?: number,
+		leagues?: any[] | undefined,
+		visibleWeekId?: number | undefined,
+		teamPointsInfo?: any,
+		rawTransfers?: any[] | undefined,
+		deadlineWeekTransfers?: any[] | undefined,
+		pastTransfers?: any[] | undefined,
 		viceCaptainId?: number,
-		teamUser?: any,
+		boosters?: Boosters,
+		isTeamOwner?: boolean,
+		teamUser?: any
 	) => {
 		const startingPlayersValidatorFormat = playersToValidatorFormat(starting);
 		const benchPlayersValidatorFormat = playersToValidatorFormat(bench);
@@ -154,10 +178,16 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 			initialBench: bench,
 			initialStarting: starting,
 			initialBudget: budget,
+			visibleWeekId: visibleWeekId | state.visibleWeekId,
+			initializedExternally: true,
+			boosters: boosters || {},
+			deadlineWeekTransfers: deadlineWeekTransfers || [],
+			draftTransfers: [],
+			pastTransfers: pastTransfers || [],
 		});
 	};
 
-	const pickPlayer = (player: Player) => {
+	const pickPlayer = (player: Player, taxForPicking?: boolean) => {
 		const nilPlayer: any = null;
 
 		const alreadyInTeam: Player = [].concat(state.initialStarting, state.initialBench).find((item: Player) => item && player && item.id === player.id);
@@ -257,7 +287,7 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 		const captainId = state.captainId === player.id ? undefined : state.captainId;
 		const viceCaptainId = state.viceCaptainId === player.id ? undefined : state.captainId;
 
-		// const removeResult = state.validator.remove(player);
+		const removeResult = state.validator.remove(player);
 
 		setState({ ...state, starting: newStarting, budget, captainId, viceCaptainId });
 	};
@@ -276,7 +306,7 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 			.plus(player.value.toFixed(2))
 			.toString());
 
-		// const removeResult = state.validator.remove(player);
+		const removeResult = state.validator.remove(player);
 
 		setState({ ...state, bench: newBench, budget });
 	};
@@ -503,7 +533,7 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 		}
 	};
 
-	const isPickable = (player: Player) => {
+	const isPickable = (player: Player, taxForPicking?: boolean, isTransferPick?: boolean) => {
 		const notInStarting = !state.starting.find(startingPlayer => startingPlayer && startingPlayer.id && startingPlayer.id === player.id);
 		const notInBench = !state.bench.find(benchPlayer => benchPlayer && benchPlayer.id && benchPlayer.id === player.id);
 		const affordable = player.value <= state.budget;
@@ -568,27 +598,27 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 	const onTransferPlayerOut = (player: Player, extra?: boolean) => {
 		removePlayer(player);
 
-		// const draftTransfers = state.draftTransfers
-		// 	.concat([{
-		// 		inId: null,
-		// 		outId: player.id,
-		// 		outPlayer: player,
-		// 		extra,
-		// 		// weekId: matches.info.deadlineWeek
-		// 	}]);
-		// setState({ ...state, draftTransfers });
+		const draftTransfers = state.draftTransfers
+			.concat([{
+				inId: null,
+				outId: player.id,
+				outPlayer: player,
+				extra,
+				weekId: deadlineInfo.deadlineInfo.deadlineWeek
+			}]);
+		setState(previousState => ({ ...previousState, draftTransfers }));
 	};
 
 	const onTransferPlayerIn = (player: Player) => {
-		// const draftTransfers = ([] as Transfer[]).concat(state.draftTransfers);
-		// for (let tfIdx = 0; tfIdx < draftTransfers.length; tfIdx++) {
-		// 	if (!draftTransfers[tfIdx].inId && draftTransfers[tfIdx].outPlayer?.positionId === player.positionId) {
-		// 		draftTransfers[tfIdx].inId = player.id;
-		// 		draftTransfers[tfIdx].inPlayer = player;
-		// 		break;
-		// 	}
-		// }
-		// setState({ ...state, draftTransfers });
+		const draftTransfers = ([] as Transfer[]).concat(state.draftTransfers);
+		for (let tfIdx = 0; tfIdx < draftTransfers.length; tfIdx++) {
+			if (!draftTransfers[tfIdx].inId && draftTransfers[tfIdx].outPlayer?.positionId === player.positionId) {
+				draftTransfers[tfIdx].inId = player.id;
+				draftTransfers[tfIdx].inPlayer = player;
+				break;
+			}
+		}
+		setState(previousState => ({ ...previousState, draftTransfers }));
 	};
 
 	const onDraftTransfersClear = () => {
@@ -598,16 +628,18 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 
 		setState({
 			...state,
+			draftTransfers: [],
 			starting: state.initialStarting,
 			bench: state.initialBench,
 			budget: state.initialBudget
 		});
 	};
 	const onTransfersSubmit = (teamId: number) => {
-		// const transfers = state.draftTransfers
-		// 	.map((transfer: Transfer) => pick(transfer, ["inId", "outId"]));
-		// return teamsActions.submitTransfers(teamId, transfers)
-		// TODO: POST team/transfers/:teamid
+        console.log("TRANSFERS SUBMITTED");
+		const transfers = state.draftTransfers
+			.map((transfer: Transfer) => pick(transfer, ["inId", "outId"]));
+
+		submitTransfers({teamId, transfers}).unwrap().then((res) => openSuccessNotification({ title: res.msg })).catch((err) => openErrorNotification({ title: t(`team.transfers.failed`) }));
 	};
 
 	const onTransfersReset = (teamId: number) => {
@@ -668,6 +700,12 @@ export const AbstractTeam = (Component: (props: AbstractTeamType) => any, props:
 			onTransfersReset={onTransfersReset}
 			reloadUserTeams={reloadUserTeams}
 			teamUser={state.teamUser}
+			visibleWeekId={state.visibleWeekId}
+			initializedExternally={state.initializedExternally}
+			boosters={state.boosters}
+			draftTransfers={state.draftTransfers}
+			deadlineWeekTransfers={state.deadlineWeekTransfers}
+			pastTransfers={state.pastTransfers}
 			{...props}
 
 		/>

diff --git a/src/components/ConfirmModal/ConfirmModal.tsx b/src/components/ConfirmModal/ConfirmModal.tsx
@@ -0,0 +1,40 @@
+import { Button } from "../UI/Button/Button"
+import { Col, Row } from "../UI/Grid/Grid"
+import { ConfirmModalStyle } from "./ConfirmModalStyle"
+import { useTranslation } from "react-i18next"
+
+declare type ConfirmModalProps = {
+    visible: boolean
+    title: string
+    text: string
+    onCancel: any
+    onConfirm: any
+}
+
+export const ConfirmModal = (props: any) => {
+    const { visible, onCancel, onConfirm, text, title } = props;
+    const { t } = useTranslation();
+
+    return (
+        <ConfirmModalStyle
+            title={title}
+            closable={true}
+            open={visible}
+            onCancel={onCancel}
+            footer={[]}
+        >
+            <Row>
+                <Col md={24} sm={24} xs={24}>
+                    {text}
+                </Col>
+            </Row>
+            <Row>
+                <Col md={24} sm={24} xs={24} className="actions">
+                    <Button onClick={(e: any) => { onConfirm() }}>{t('general.confirmModalYesBtn')}</Button>
+                    <Button danger onClick={(e: any) => { onCancel() }}>{t('general.confirmModalNoBtn')}</Button>
+                </Col>
+            </Row>
+
+        </ConfirmModalStyle>
+    )
+}
diff --git a/src/components/ConfirmModal/ConfirmModalStyle.tsx b/src/components/ConfirmModal/ConfirmModalStyle.tsx
@@ -0,0 +1,58 @@
+import styled from "@/styles/styled-components";
+import { Modal } from "antd";
+
+export const ConfirmModalStyle = styled(Modal)`
+.ant-modal-content {
+    border-radius: 0px;
+    max-width: 575px;
+
+    .ant-modal-title {
+        font-family: "C-Bold";
+        text-transform: uppercase;
+        background: #000;
+        padding: 5px 5px 5px 36.5px;
+    }
+
+    .ant-modal-close-x {
+        width: 30px;
+        height: 30px;
+        font-size: 20px;
+        color: 84FF00;
+        line-height: 30px;
+    }
+
+    .ant-modal-header {
+        border: 0px;
+        border-radius: 0px;
+        padding: 0;
+
+        .ant-modal-title {
+            color: white;
+            p {
+                margin: 0px;
+            }
+
+            .custom-title-container {
+                text-align: right;
+
+                .anticon {
+                    margin-top: 5px;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+
+    .ant-modal-footer {
+        display: none;
+    }
+}
+
+.actions {
+    text-align: right;
+    margin-top: 15px;
+    button {
+        margin: 5px;
+    }
+}
+`;
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
@@ -49,6 +49,9 @@ declare type PlayerProps = {
 	onSwap?: any
 	onCaptainSelect?: any
 	onViceCaptainSelect?: any
+	benchPlayer?: boolean
+	showPlayerValue?: boolean
+	showPlayerValueInsteadOfPoints?: boolean
 
 	className?: string
 }
@@ -76,6 +79,10 @@ export const Player = (props: PlayerProps) => {
 		onSwap,
 		onCaptainSelect,
 		onViceCaptainSelect,
+		showPlayerValueInsteadOfPoints,
+		showPlayerValue,
+		benchPlayer,
+		// showPlayerStatsPoints,
 	} = props;
 	const [state, setState] = useState<PlayerState>({
 		portraitFace: props.portraitFace,
@@ -132,7 +139,7 @@ export const Player = (props: PlayerProps) => {
 	const isCaptain = useMemo(() => player && player.id && player.id === captainId, [player, captainId]);
 	const isViceCaptain = useMemo(() => player && player.id && player.id === viceCaptainId, [player, viceCaptainId]);
 
-	const showPoints = true;
+	const showPoints = (player && player.points !== undefined && player.points !== null) || showPlayerValueInsteadOfPoints; //todo
 	const showPlayerName = !avatarOnly;
 
 	const onRemoveHandler = (e: any, player: Player) => {
@@ -189,7 +196,14 @@ export const Player = (props: PlayerProps) => {
 						</p>
 					</OpponentBadge> : null
 			}
-
+			{
+				(
+					player && showPlayerValue &&
+					<Value benchPlayer={benchPlayer}>
+						<span>{(player.value) ? `€${player.value}M` : null}</span>
+					</Value>
+				) || null
+			}
 			{
 				!player || (player && !player.id) &&
 				<NoPlayer onClick={onPlaceholderClick ? (e: any) => onPlaceholderClick(player) : () => { }}>

diff --git a/src/components/PlayerList/PlayerList.tsx b/src/components/PlayerList/PlayerList.tsx
@@ -34,6 +34,9 @@ declare type PlayerListProps = {
 	actionLabel?: string
 	isLoading?: boolean
 	playerType: PlayerType
+	matches?: any
+	deadlineWeek?: any;
+	playerTax?: number | undefined;
 }
 
 declare type PlayerListState = {