frontpage calendar

frontend-react/src/components/home/HomePage.tsx

@@ -7,6 +7,7 @@ import MyThemeContext from "../../themeContext"
 import "./HomePage.css"
 import { Helmet } from "react-helmet-async"
 import Stats from "./Stats"
+import WeeksTournaments from "./WeeksTournaments"
 
 const HomePage: React.FC<RouteComponentProps> = () => {
   const { colorMode, grayWithShade } = useContext(MyThemeContext)
@@ -15,7 +16,7 @@ const HomePage: React.FC<RouteComponentProps> = () => {
       <Helmet>
         <title>sendou.ink | Competitive Splatoon Hub</title>
       </Helmet>
-      <Flex flexDirection="column" alignItems="center">
+      <Flex flexDirection="column" alignItems="center" mb="1.5em">
         <Image className="rgb" src={posterGirl[colorMode]} w="400px" h="auto" />
         <Heading
           letterSpacing="1px"
@@ -35,6 +36,7 @@ const HomePage: React.FC<RouteComponentProps> = () => {
         </Heading>
         <Stats />
       </Flex>
+      <WeeksTournaments />
     </>
   )
 }

frontend-react/src/components/home/Stats.tsx

@@ -40,13 +40,13 @@ const Stats: React.FC = () => {
   const { stats } = data
   return (
     <>
-      <Box fontSize="2xl" fontWeight="hairline" mt="2em" color={grayWithShade}>
+      <Box fontSize="xl" fontWeight="hairline" mt="1em" color={grayWithShade}>
         Featuring...
       </Box>
       <Flex
         flexDirection="column"
         alignItems="center"
-        fontSize="2xl"
+        fontSize="xl"
         fontWeight="black"
         mt="0.5em"
         textAlign="center"
@@ -92,15 +92,14 @@ const Stats: React.FC = () => {
           </Link>
         </Box>
       </Flex>
-      <Box fontSize="2xl" fontWeight="hairline" mt="1em" color={grayWithShade}>
+      <Box fontSize="xl" fontWeight="hairline" mt="0.5em" color={grayWithShade}>
         As well as
       </Box>
       <Flex
         flexDirection="column"
         alignItems="center"
-        fontSize="2xl"
+        fontSize="xl"
         fontWeight="black"
-        mt="0.5em"
         textAlign="center"
       >
         <Box mb="0.5em">

frontend-react/src/components/home/WeeksTournaments.tsx

@@ -0,0 +1,63 @@
+import React, { useContext } from "react"
+import Loading from "../common/Loading"
+import Error from "../common/Error"
+import { useQuery } from "@apollo/react-hooks"
+import {
+  UpcomingEventsData,
+  UPCOMING_EVENTS,
+} from "../../graphql/queries/upcomingEvents"
+import { getWeek } from "../../utils/helperFunctions"
+import SubHeader from "../common/SubHeader"
+import { Heading, Flex, Box } from "@chakra-ui/core"
+import { FiClock, FiInfo } from "react-icons/fi"
+import MyThemeContext from "../../themeContext"
+import Button from "../elements/Button"
+import { Link } from "@reach/router"
+
+const WeeksTournaments: React.FC = () => {
+  const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
+  const { data, error, loading } = useQuery<UpcomingEventsData>(UPCOMING_EVENTS)
+
+  if (loading) return <Loading />
+  if (error) return <Error errorMessage={error.message} />
+
+  const thisWeekNumber = getWeek(new Date())
+
+  const events = data!.upcomingEvents.filter(
+    (event) => getWeek(new Date(parseInt(event.date))) === thisWeekNumber
+  )
+
+  if (events.length === 0) return null
+
+  return (
+    <>
+      <SubHeader>Play in competitive events this week</SubHeader>
+      <Flex alignItems="center" flexDirection="column">
+        {events.map((tournament) => (
+          <Box
+            key={tournament.discord_invite_url}
+            my="0.5em"
+            textAlign="center"
+          >
+            <Heading fontFamily="'Rubik', sans-serif" size="md">
+              {tournament.name}
+            </Heading>
+            <Flex alignItems="center" color={grayWithShade}>
+              <Box as={FiClock} mr="0.5em" color={themeColorWithShade} />
+              {new Date(parseInt(tournament.date)).toLocaleString()}
+            </Flex>
+          </Box>
+        ))}
+        <Box mt="1em">
+          <Link to="/calendar">
+            <Button outlined icon={FiInfo}>
+              View more info
+            </Button>
+          </Link>
+        </Box>
+      </Flex>
+    </>
+  )
+}
+
+export default WeeksTournaments