Skip to content

Commit

Permalink
fix(assets): use CDN
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonassimoen
jonassimoen committed Nov 30, 2023
1 parent 041569a commit bb94e60
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 114 deletions.
5 changes: 3 additions & 2 deletions src/components/Calendar/Calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ type CalendarProps = {
weekId: number
showHeader?: boolean
size: number
assetsCdn: string
}

type CalendarState = {
Expand Down Expand Up @@ -79,7 +80,7 @@ export const Calendar = (props: CalendarProps) => {
dataIndex: "home",
width: "40%",
render: (homeId: any, record: any) => {
const clubBadge = `${config.API_URL}/static/badges/${record.home.externalId}.png`;
const clubBadge = `${props.assetsCdn}/badges/${record.home.id}.png`;

return <ClubDetails left>
<ClubName className="team-name" fullName={record.home.name} shortName={record.home.short}></ClubName>
Expand All @@ -106,7 +107,7 @@ export const Calendar = (props: CalendarProps) => {
dataIndex: "away",
width: "40%",
render: (awayId: any, record: any) => {
const clubBadge = `${config.API_URL}/static/badges/${record.away.externalId}.png`;
const clubBadge = `${props.assetsCdn}/badges/${record.away.id}.png`;

return <ClubDetails>
<ClubBadgeBg src={clubBadge} />
Expand Down
5 changes: 3 additions & 2 deletions src/components/Stats/MatchStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ declare type MatchStatsProps = {
matchId: number
homeScore: number
awayScore: number
assetsCdn: string
}

export const MatchStats = (props: MatchStatsProps) => {
Expand Down Expand Up @@ -35,13 +36,13 @@ export const MatchStats = (props: MatchStatsProps) => {
<MatchStatsStyle>
<ClubDetails className="team" left>
<ClubName className="team-name" fullName={data?.home.name} short={data?.home.short} />
<ClubBadgeBg src={`${config.API_URL}/static/badges/${data?.home.externalId}.png`} />
<ClubBadgeBg src={`${props.assetsCdn}/badges/${data?.home.id}.png`} />
</ClubDetails>
<div className="score">
<b>{`${props.homeScore} - ${props.awayScore}`}</b>
</div>
<ClubDetails className="team">
<ClubBadgeBg src={`${config.API_URL}/static/badges/${data?.away.externalId}.png`} />
<ClubBadgeBg src={`${props.assetsCdn}/badges/${data?.away.id}.png`} />
<ClubName className="team-name" fullName={data?.away.name} short={data?.away.short} />
</ClubDetails>
</MatchStatsStyle>
Expand Down
9 changes: 6 additions & 3 deletions src/pages/GameStatsManagement/GameStatsManagement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { useNavigate, useParams } from "react-router-dom";
import { TableStyle } from "./GameStatsManagementStyle";
import { MatchStats } from "@/components/Stats/MatchStats";
import { theme } from "@/styles/theme";
import { useSelector } from "react-redux";

const GameStatsHeaderTable = (props: { name?: string, score: number, type: string }) => {
return (
Expand Down Expand Up @@ -72,7 +73,9 @@ type GameStatsManagementState = {
export const GameStatsManagement = (props: GameStatsMangementProps) => {
const { id } = useParams();
const { t } = useTranslation();
const navigate = useNavigate();
const navigate = useNavigate();
const application = useSelector((state: StoreState) => state.application);
const assetsCdn = application.competition.assetsCdn;

const PositionLabels: any = {
0: t("player.coachShort"),
Expand Down Expand Up @@ -187,7 +190,7 @@ export const GameStatsManagement = (props: GameStatsMangementProps) => {
render: (txt: number, rec: any, index: number) => {
const player = matchPlayers.find((v: Player) => v.id === txt);
const playerPositionColor = getPlayerPositionHexColor(player, theme);
const clubBadge = `${config.API_URL}/static/badges/${player?.clubId === match.home.id ? match.home.externalId : match.away.externalId}.png`;
const clubBadge = `${assetsCdn}/badges/${player?.clubId === match.home.id ? match.home.id : match.away.id}.png`;
++index;
return (
<Flex justify={"space-between"}>
Expand Down Expand Up @@ -230,7 +233,7 @@ export const GameStatsManagement = (props: GameStatsMangementProps) => {

return (
<Spin spinning={matchLoading || playersLoading || matchStatisticsImportLoading || state.isProcessing} delay={0} style={{ padding: "2rem 0" }}>
<MatchStats matchId={+id} homeScore={state.homeScore} awayScore={state.awayScore} />
<MatchStats matchId={+id} homeScore={state.homeScore} awayScore={state.awayScore} assetsCdn={assetsCdn}/>
{
matchStatisticsImportSuccess ?
<Alert
Expand Down
213 changes: 107 additions & 106 deletions src/pages/Points/Points.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,113 +178,114 @@ export const _TeamPoints = (props: AbstractTeamType) => {

return (
clubsSuccess && playersSuccess && matchesSuccess && teamSuccess && deadlineInfoSuccess &&
<React.Fragment>
{
(initializedExternally && visibleWeekId &&
<Row style={{ margin: 0 }}>
<Col md={24}>
{/* TODO: MATCHDAYSELECTOR */}
<Block>
Week {visibleWeekId}
</Block>
</Col>
</Row>)
|| null
}
{
(initializedExternally &&
<Row style={{ margin: 0 }}>
<Col lg={12} md={12} sm={24} xs={24}>
<Block style={{ marginTop: "10px" }}>
{
<Title level={2}>{t("pointsPage.statsBlockTitle")} {isPublicRoute ? `"${teamName}"` : ""}</Title>
}
{/* {`Managed by ${teamUser?.firstName} ${teamUser?.lastName}`} */}
<PointsStats
visibleWeekPoints={teamPointsInfo.visibleWeekPoints}
isPublic={isPublicRoute}
weekWinnerPoints={teamPointsInfo.weekWinnerPoints}
weekAveragePoints={teamPointsInfo.weekAveragePoints}
/>
</Block>
<Block style={{ marginTop: "10px" }}>
<Title level={2}>{t("general.footballLineup")}</Title>
<Team widthRatio={15}
heightRatio={10}
clubs={clubs}
captainId={captainId}
captainHasPlayed={captainHasPlayed}
viceCaptainId={viceCaptainId}
centerAligned={true}
selection={startingByPositions}
assetsCdn={application.competition.assetsCdn}
onSwap={props.onPlayerSwap}
isSwapAble={(isPowerSubEnabled) ? props.isSwapAble : false}
swapPlayerId={props.swapPlayerId}
swappedFrom={props.swappedFrom}
// boosterWeekStatus={boosterWeekStatus}
replacePlayerPointsWithStatsPoints={true}
showCaptainBadge={true}
modalEnabled={true}
playerBadgeColor="#fff"
playerBadgeBgColor={theme.primaryColor}
playerPointsColor={"#fff"}
playerPointsBgColor="#84FF00"
bg={teamBackground}
playerType={PlayerType.SoccerShirt} />
<Substitutes
selection={bench}
title={"De bank"}
clubs={clubs}
assetsCdn={application.competition.assetsCdn}
playerType={PlayerType.SoccerShirt}
playerBadgeColor={"#000"}
playerBadgeBgColor={theme.primaryColor}
playerPointsColor={"#000"}
playerPointsBgColor={"#84FF000"}
captainId={captainId}
viceCaptainId={viceCaptainId}
showCaptainBadge={true}
modalEnabled={true}
<React.Fragment>
{
(initializedExternally && visibleWeekId &&
<Row style={{ margin: 0 }}>
<Col md={24}>
{/* TODO: MATCHDAYSELECTOR */}
<Block>
Week {visibleWeekId}
</Block>
</Col>
</Row>)
|| null
}
{
(initializedExternally &&
<Row style={{ margin: 0 }}>
<Col lg={12} md={12} sm={24} xs={24}>
<Block style={{ marginTop: "10px" }}>
{
<Title level={2}>{t("pointsPage.statsBlockTitle")} {isPublicRoute ? `"${teamName}"` : ""}</Title>
}
{/* {`Managed by ${teamUser?.firstName} ${teamUser?.lastName}`} */}
<PointsStats
visibleWeekPoints={teamPointsInfo.visibleWeekPoints}
isPublic={isPublicRoute}
weekWinnerPoints={teamPointsInfo.weekWinnerPoints}
weekAveragePoints={teamPointsInfo.weekAveragePoints}
/>
</Block>
<Block style={{ marginTop: "10px" }}>
<Title level={2}>{t("general.footballLineup")}</Title>
<Team widthRatio={15}
heightRatio={10}
clubs={clubs}
captainId={captainId}
captainHasPlayed={captainHasPlayed}
viceCaptainId={viceCaptainId}
centerAligned={true}
selection={startingByPositions}
assetsCdn={application.competition.assetsCdn}
onSwap={props.onPlayerSwap}
isSwapAble={(isPowerSubEnabled) ? props.isSwapAble : false}
swapPlayerId={props.swapPlayerId}
swappedFrom={props.swappedFrom}
// boosterWeekStatus={boosterWeekStatus}
replacePlayerPointsWithStatsPoints={true}
showCaptainBadge={true}
modalEnabled={true}
playerBadgeColor="#fff"
playerBadgeBgColor={theme.primaryColor}
playerPointsColor={"#fff"}
playerPointsBgColor="#84FF00"
bg={teamBackground}
playerType={PlayerType.SoccerShirt} />
<Substitutes
selection={bench}
title={"De bank"}
clubs={clubs}
assetsCdn={application.competition.assetsCdn}
playerType={PlayerType.SoccerShirt}
playerBadgeColor={"#000"}
playerBadgeBgColor={theme.primaryColor}
playerPointsColor={"#000"}
playerPointsBgColor={"#84FF000"}
captainId={captainId}
viceCaptainId={viceCaptainId}
showCaptainBadge={true}
modalEnabled={true}

onSwap={props.onPlayerSwap}
swapPlayerId={props.swapPlayerId}
swappedFrom={props.swappedFrom}
isSwapAble={false} // todo: implement powersub
/>
</Block>
</Col>
<Col lg={12} md={12} sm={24} xs={24}>
{
<Block style={{ marginTop: "10px" }}>
<Title level={2}>{t("pointsPage.overviewBlockTitle")}</Title>
<Stats
visibleWeekPoints={teamPointsInfo.visibleWeekPoints}
visibleWeekRank={teamPointsInfo.visibleWeekRank}
transfers={teamPointsInfo.transfers}
generalPoints={teamPointsInfo.generalPoints}
generalRank={teamPointsInfo.generalRank}
weekId={visibleWeekId}
/>
</Block>
}
{
matches && matches.length && visibleWeekId ?
<Block style={{ marginTop: "10px" }}>
<Title level={2}>{t("general.footballCalendar")}</Title>
<Calendar
size={30}
weekId={visibleWeekId}
showHeader={false}
/>
</Block>
: null
}
</Col>
</Row>
)
}
</React.Fragment >
onSwap={props.onPlayerSwap}
swapPlayerId={props.swapPlayerId}
swappedFrom={props.swappedFrom}
isSwapAble={false} // todo: implement powersub
/>
</Block>
</Col>
<Col lg={12} md={12} sm={24} xs={24}>
{
<Block style={{ marginTop: "10px" }}>
<Title level={2}>{t("pointsPage.overviewBlockTitle")}</Title>
<Stats
visibleWeekPoints={teamPointsInfo.visibleWeekPoints}
visibleWeekRank={teamPointsInfo.visibleWeekRank}
transfers={teamPointsInfo.transfers}
generalPoints={teamPointsInfo.generalPoints}
generalRank={teamPointsInfo.generalRank}
weekId={visibleWeekId}
/>
</Block>
}
{
matches && matches.length && visibleWeekId ?
<Block style={{ marginTop: "10px" }}>
<Title level={2}>{t("general.footballCalendar")}</Title>
<Calendar
assetsCdn={application.competition.assetsCdn}
size={30}
weekId={visibleWeekId}
showHeader={false}
/>
</Block>
: null
}
</Col>
</Row>
)
}
</React.Fragment >
);
};

Expand Down
3 changes: 2 additions & 1 deletion src/pages/Team/Team.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const _Team = (props: AbstractTeamType) => {

props.initTeamState(starting, bench, teamName, captainId, budget, undefined, undefined, undefined, [], [], [], viceCaptainId, boosters);
};

useEffect(() => {
if (deadlineInfoSuccess && clubsSuccess && teamSuccess && matchesSuccess) {
getTeamInfo(props.visibleWeekId);
Expand Down Expand Up @@ -170,6 +170,7 @@ export const _Team = (props: AbstractTeamType) => {
<Col lg={12} md={12} sm={24} xs={24}>
<Title level={2}>{t("general.footballCalendar")}</Title>
<Calendar
assetsCdn={application.competition.assetsCdn}
weekId={props.visibleWeekId}
showHeader={false}
size={30}
Expand Down

0 comments on commit bb94e60

Please sign in to comment.