diff --git a/frontend-react/src/components/calendar/CalendarPage.tsx b/frontend-react/src/components/calendar/CalendarPage.tsx index 66744d706..188afd5c2 100644 --- a/frontend-react/src/components/calendar/CalendarPage.tsx +++ b/frontend-react/src/components/calendar/CalendarPage.tsx @@ -1,115 +1,92 @@ -import React, { useState, useEffect, useRef } from "react" -import jstz from "jstz" +import React, { useContext } from "react" +import { useQuery } from "@apollo/react-hooks" import { - Popover, - PopoverTrigger, - PopoverContent, - PopoverArrow, - PopoverCloseButton, - PopoverBody, - Box, - Link, - Icon, -} from "@chakra-ui/core" + UPCOMING_EVENTS, + UpcomingEventsData, +} from "../../graphql/queries/upcomingEvents" import { RouteComponentProps } from "@reach/router" -import { useContext } from "react" -import MyThemeContext from "../../themeContext" import PageHeader from "../common/PageHeader" -import { Helmet } from "react-helmet-async" -import Button from "../elements/Button" +import Loading from "../common/Loading" +import Error from "../common/Error" +import { getWeek, ordinal_suffix_of } from "../../utils/helperFunctions" +import SubHeader from "../common/SubHeader" +import { Box, Badge, Flex } from "@chakra-ui/core" +import { months, days } from "../../utils/lists" +import MyThemeContext from "../../themeContext" +import TournamentInfo from "./TournamentInfo" -const CalendarPage: React.FC = () => { - const { darkerBgColor, themeColorWithShade, grayWithShade } = useContext( - MyThemeContext - ) - const [showCode, setShowCode] = useState(false) - const calenderDiv = useRef(null) +const badgeColor: { [key: string]: string } = { + Friday: "purple", + Saturday: "green", + Sunday: "blue", +} as const - const iFrameHTML = `` +const CalendarPage: React.FC = ({}) => { + const { darkerBgColor, grayWithShade } = useContext(MyThemeContext) + const { data, error, loading } = useQuery(UPCOMING_EVENTS) - //This is a weird solution but I couldn't get it working just setting the iframe src from a variable - useEffect(() => { - if (!calenderDiv?.current) return - calenderDiv.current.innerHTML = iFrameHTML - }, [iFrameHTML]) + if (loading) return + if (error) return + const events = data!.upcomingEvents + + let lastPrintedWeek: number | null = null + let lastPrintedDay: number | null = null + let lastPrintedMonth: number | null = null + const thisWeekNumber = getWeek(new Date()) return ( <> - - Competitive Calendar | sendou.ink - - - - - - - - - - - -

- - đź’° - {" "} - - Has prizes -
- - 🎭 - {" "} - - Unconventional ruleset -
- - đź”’ - {" "} - - Limited registration -
- - 🤝 - {" "} - - Local event -
- - 🎲 - {" "} - - Solo registration available -
- - đź‘€ - {" "} - - No open registration -

- - - - - - If an event is missing you can contact{" "} - - Kbot - {" "} - about it. -
- You can add the calendar to your personal Google Calendar by pressing - the plus button above. If you are using other kind of calendar program - you can try{" "} - - this link - {" "} - instead. + {events.map((event) => { + const time = new Date(parseInt(event.date)) + const weekNumber = getWeek(time) + const thisDay = time.getDate() + const thisDayOfTheWeek = days[time.getDay()] + const thisMonth = time.getMonth() + const printWeekHeader = weekNumber !== lastPrintedWeek + const printDayHeader = + thisDay !== lastPrintedDay || thisMonth !== lastPrintedMonth + if (printWeekHeader) { + lastPrintedWeek = weekNumber + } + if (printDayHeader) { + lastPrintedDay = thisDay + lastPrintedMonth = thisMonth + } + + const colorForBadge = badgeColor[thisDayOfTheWeek] ?? "red" + + return ( + + {printWeekHeader && ( + + + Week {weekNumber}{" "} + {thisWeekNumber === weekNumber && <>(This week)} + + + )} + {printDayHeader && ( + + {months[thisMonth + 1]} {thisDay} + {ordinal_suffix_of(thisDay)} + + {thisDayOfTheWeek} + + + )} + + + ) + })} + + All events listed in your local time: {new Date().toTimeString()} ) diff --git a/frontend-react/src/components/calendar/TournamentInfo.tsx b/frontend-react/src/components/calendar/TournamentInfo.tsx new file mode 100644 index 000000000..3da15a687 --- /dev/null +++ b/frontend-react/src/components/calendar/TournamentInfo.tsx @@ -0,0 +1,73 @@ +import React, { useState, useContext } from "react" +import { CompetitiveFeedEvent } from "../../graphql/queries/upcomingEvents" +import Markdown from "../elements/Markdown" +import { Heading, Box, Flex, Link as ChakraLink } from "@chakra-ui/core" +import Button from "../elements/Button" +import { FiInfo, FiClock } from "react-icons/fi" +import { FaDiscord } from "react-icons/fa" +import MyThemeContext from "../../themeContext" +import UserAvatar from "../common/UserAvatar" +import { Link } from "@reach/router" + +interface TournamentInfoProps { + tournament: CompetitiveFeedEvent + date: Date +} + +const TournamentInfo: React.FC = ({ + tournament, + date, +}) => { + const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext) + const [expanded, setExpanded] = useState(false) + const poster = tournament.poster_discord_user + return ( + + + {tournament.name} + + + + {date.toLocaleString()} + + + + {poster.twitter_name && ( + + + + )}{" "} + + + {poster.username}#{poster.discriminator} + + + + + + + + + + + + + {expanded && } + + ) +} + +export default TournamentInfo diff --git a/frontend-react/src/components/common/SubHeader.css b/frontend-react/src/components/common/SubHeader.css index 0679f59a1..89ad7063f 100644 --- a/frontend-react/src/components/common/SubHeader.css +++ b/frontend-react/src/components/common/SubHeader.css @@ -19,7 +19,7 @@ content: ""; position: absolute; top: 50%; - border-bottom: 4px solid; + border-bottom: 2px solid; border-color: var(--sub-header-border); width: 592px; /* half of limiter */ margin: 0 20px; diff --git a/frontend-react/src/components/common/SubHeader.tsx b/frontend-react/src/components/common/SubHeader.tsx index 65710ce64..f5d27c823 100644 --- a/frontend-react/src/components/common/SubHeader.tsx +++ b/frontend-react/src/components/common/SubHeader.tsx @@ -3,7 +3,7 @@ import "./SubHeader.css" import MyThemeContext from "../../themeContext" interface SubHeaderProps { - children: string[] | string + children: React.ReactNode } const SubHeader: React.FC = ({ children }) => { diff --git a/frontend-react/src/components/elements/Button.tsx b/frontend-react/src/components/elements/Button.tsx index 402787228..babe749c8 100644 --- a/frontend-react/src/components/elements/Button.tsx +++ b/frontend-react/src/components/elements/Button.tsx @@ -9,6 +9,7 @@ interface ButtonProps { onClick?: () => void size?: "xs" | "sm" | "lg" | "md" icon?: IconType + width?: string outlined?: boolean disabled?: boolean loading?: boolean @@ -21,6 +22,7 @@ const Button: React.FC = ({ size, disabled, loading, + width, outlined = false, }) => { const { themeColor } = useContext(MyThemeContext) @@ -33,6 +35,7 @@ const Button: React.FC = ({ size={size} isDisabled={disabled} isLoading={loading} + width={width ?? undefined} > {children} diff --git a/frontend-react/src/components/home/HomePage.tsx b/frontend-react/src/components/home/HomePage.tsx index ee8ac12d2..df904f6e3 100644 --- a/frontend-react/src/components/home/HomePage.tsx +++ b/frontend-react/src/components/home/HomePage.tsx @@ -16,13 +16,7 @@ const HomePage: React.FC = () => { sendou.ink | Competitive Splatoon Hub - + = () => { About | sendou.ink
- + Help If you need help using the site don't hesitate to ask on our Discord. @@ -29,20 +29,55 @@ const About: React.FC = () => { Thanks to
  • - Lean (provided the Top - 500 X Rank data) + + Lean + {" "} + (provided the Top 500 X Rank data)
  • - zorg (provided - background pictures for the map planner) + + zorg + {" "} + (provided background pictures for the map planner)
  • - ganbawoomy (provided - the data for tournament browser) + + ganbawoomy + {" "} + (provided the data for tournament browser)
  • - NoAim™bUrn (gave plenty - of useful feedback) + + NoAim™bUrn + {" "} + (gave plenty of useful feedback) +
    • +
  • + + borzoic + {" "} + (art for the site like the inkling on the front page as well as + footer pictures)
diff --git a/frontend-react/src/components/root/SideNavContent.tsx b/frontend-react/src/components/root/SideNavContent.tsx index 2dce67700..fa54c879c 100644 --- a/frontend-react/src/components/root/SideNavContent.tsx +++ b/frontend-react/src/components/root/SideNavContent.tsx @@ -27,8 +27,8 @@ import { FiLogOut, FiUser, FiPlus, - FiShoppingCart, FiLogIn, + FiHeart, } from "react-icons/fi" import { RiTShirt2Line } from "react-icons/ri" import Logo from "./Logo" @@ -148,11 +148,7 @@ export const SideNavContent: React.FC = ({ showLogo = true }) => { - + { }) return newObj } + +// https://stackoverflow.com/a/31810991 +export const getWeek = (date: Date) => { + const onejan = new Date(date.getFullYear(), 0, 1) + const today = new Date(date.getFullYear(), date.getMonth(), date.getDate()) + const dayOfYear = (today.getTime() - onejan.getTime() + 86400000) / 86400000 + return Math.ceil(dayOfYear / 7) +} diff --git a/frontend-react/src/utils/lists.ts b/frontend-react/src/utils/lists.ts index 01b1a8b44..f9f303ae5 100644 --- a/frontend-react/src/utils/lists.ts +++ b/frontend-react/src/utils/lists.ts @@ -1586,6 +1586,16 @@ export const months = [ "December", ] as const +export const days = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", +] as const + export const weapons = [ "Sploosh-o-matic", "Neo Sploosh-o-matic",