diff --git a/frontend-react/public/locales/en/translation.json b/frontend-react/public/locales/en/translation.json index a8c0b5cd8..1a8737341 100644 --- a/frontend-react/public/locales/en/translation.json +++ b/frontend-react/public/locales/en/translation.json @@ -1240,7 +1240,8 @@ "Hide info": "Hide info", "Show info": "Show info", "Edit": "Edit", - "footer": "All events listed in your local time: {{timeNow}}<2>If you want your event displayed here message Sendou#0043 on Discord" + "footer": "All events listed in your local time: {{timeNow}}<2>If you want your event displayed here message Sendou#0043 on Discord", + "plusVotingInfo": "<0>Plus Server voting of the month starts and lasts for the weekend" }, "builds": { "Default to Ability Point view": "Default to Ability Point view", diff --git a/frontend-react/src/assets/plusServer.jpg b/frontend-react/src/assets/plusServer.jpg new file mode 100644 index 000000000..4ccb024a6 Binary files /dev/null and b/frontend-react/src/assets/plusServer.jpg differ diff --git a/frontend-react/src/components/calendar/CalendarPage.tsx b/frontend-react/src/components/calendar/CalendarPage.tsx index 2522e5853..51ad61b16 100644 --- a/frontend-react/src/components/calendar/CalendarPage.tsx +++ b/frontend-react/src/components/calendar/CalendarPage.tsx @@ -1,5 +1,5 @@ import { useQuery } from "@apollo/react-hooks" -import { Box, Divider, Flex } from "@chakra-ui/core" +import { Box, Divider, Flex, Avatar } from "@chakra-ui/core" import { RouteComponentProps, useLocation } from "@reach/router" import React, { useContext, useEffect, useRef, useState } from "react" import { Helmet } from "react-helmet-async" @@ -8,6 +8,7 @@ import { FaFilter } from "react-icons/fa" import { UpcomingEventsData, UPCOMING_EVENTS, + CompetitiveFeedEvent, } from "../../graphql/queries/upcomingEvents" import MyThemeContext from "../../themeContext" import { getWeek } from "../../utils/helperFunctions" @@ -17,13 +18,56 @@ import PageHeader from "../common/PageHeader" import SubHeader from "../common/SubHeader" import Input from "../elements/Input" import TournamentInfo from "./TournamentInfo" +import plusServerImage from "../../assets/plusServer.jpg" +import { UserData } from "../../types" +import { USER } from "../../graphql/queries/user" + +const getFirstFridayDate = () => { + const today = new Date() + const month = + today.getDate() < 7 && today.getDay() > 5 + ? today.getMonth() + : today.getMonth() + 1 + + let day = 1 + while (day <= 7) { + const dateOfVoting = new Date( + Date.UTC(today.getFullYear(), month, day, 15, 0, 0) + ) + + if (dateOfVoting.getDay() === 5) return "" + dateOfVoting.getTime() + + day++ + } + + console.error("Couldn't resolve first friday of the month for voting") + return "" + new Date(2000, 1, 1).getTime() +} + +const PLUS_VOTING_TEMPLATE: CompetitiveFeedEvent = { + name: "", + date: getFirstFridayDate(), + description: "", + message_url: "", + message_discord_id: "", + discord_invite_url: "", + poster_discord_user: { + username: "", + discriminator: "", + discord_id: "", + }, + isVotingTemplate: true, +} const CalendarPage: React.FC = () => { const { darkerBgColor, grayWithShade } = useContext(MyThemeContext) const { t, i18n } = useTranslation() const location = useLocation() const matchingRef = useRef(null) + const { data, error, loading } = useQuery(UPCOMING_EVENTS) + const { data: userData } = useQuery(USER) + const [filter, setFilter] = useState("") const searchParamsEventName = new URLSearchParams(location.search).get("name") @@ -52,6 +96,13 @@ const CalendarPage: React.FC = () => { .includes(filter.toLowerCase()) ) + const isPlusServerMember = !!userData?.user?.plus?.membership_status + + if (isPlusServerMember) { + filteredTournaments.push(PLUS_VOTING_TEMPLATE) + filteredTournaments.sort((a, b) => parseInt(a.date) - parseInt(b.date)) + } + const timeNow = new Date().toTimeString() return ( @@ -72,6 +123,11 @@ const CalendarPage: React.FC = () => { const thisDay = time.getDate() const thisMonth = time.getMonth() const printWeekHeader = weekNumber !== lastPrintedWeek + + /*const isFriday = time.getDay() === 5 + const isFirstFridayOfTheMonth = isFriday && thisDay <= 7 + const displayPlusServerVotingInfo = isPlusServerMember && isFirstFridayOfTheMonth*/ + const printDayHeader = thisDay !== lastPrintedDay || thisMonth !== lastPrintedMonth if (printWeekHeader) { @@ -114,17 +170,27 @@ const CalendarPage: React.FC = () => { })} )} -
- -
+ {event.isVotingTemplate ? ( + + {" "} + + Plus Server voting of + the month starts and lasts for the weekend + + + ) : ( +
+ +
+ )} ) })} diff --git a/frontend-react/src/graphql/queries/upcomingEvents.ts b/frontend-react/src/graphql/queries/upcomingEvents.ts index 4e53c6705..6e7d2687a 100644 --- a/frontend-react/src/graphql/queries/upcomingEvents.ts +++ b/frontend-react/src/graphql/queries/upcomingEvents.ts @@ -15,6 +15,7 @@ export interface CompetitiveFeedEvent { discord_id: string avatar?: string } + isVotingTemplate?: boolean } export interface UpcomingEventsData {