link to calendar

frontend-react/src/components/calendar/CalendarPage.tsx

@@ -1,7 +1,13 @@
 import { useQuery } from "@apollo/react-hooks"
 import { Badge, Box, Divider, Flex } from "@chakra-ui/core"
-import { RouteComponentProps } from "@reach/router"
-import React, { useContext, useState } from "react"
+import { RouteComponentProps, useLocation } from "@reach/router"
+import React, {
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+} from "react"
 import { Helmet } from "react-helmet-async"
 import {
   UpcomingEventsData,
@@ -26,9 +32,19 @@ const badgeColor: { [key: string]: string } = {
 
 const CalendarPage: React.FC<RouteComponentProps> = () => {
   const { darkerBgColor, grayWithShade } = useContext(MyThemeContext)
+  const location = useLocation()
+  const matchingRef = useRef<HTMLDivElement>(null)
   const { data, error, loading } = useQuery<UpcomingEventsData>(UPCOMING_EVENTS)
   const [filter, setFilter] = useState("")
 
+  const searchParamsEventName = new URLSearchParams(location.search).get("name")
+
+  useEffect(() => {
+    if (!matchingRef?.current) return
+
+    matchingRef.current.scrollIntoView({ behavior: "smooth", block: "start" })
+  })
+
   if (loading) return <Loading />
   if (error) return <Error errorMessage={error.message} />
 
@@ -104,7 +120,17 @@ const CalendarPage: React.FC<RouteComponentProps> = () => {
                 </Badge>
               </Flex>
             )}
-            <TournamentInfo tournament={event} date={time} />
+            <div
+              ref={
+                event.name === searchParamsEventName ? matchingRef : undefined
+              }
+            >
+              <TournamentInfo
+                tournament={event}
+                date={time}
+                expandedByDefault={event.name === searchParamsEventName}
+              />
+            </div>
           </React.Fragment>
         )
       })}

frontend-react/src/components/calendar/TournamentInfo.tsx

@@ -16,14 +16,16 @@ import TournamentModal from "./TournamentModal"
 interface TournamentInfoProps {
   tournament: CompetitiveFeedEvent
   date: Date
+  expandedByDefault?: boolean
 }
 
 const TournamentInfo: React.FC<TournamentInfoProps> = ({
   tournament,
   date,
+  expandedByDefault,
 }) => {
   const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(!!expandedByDefault)
   const [showModal, setShowModal] = useState(false)
   const poster = tournament.poster_discord_user
 

frontend-react/src/components/root/SideNavBanner.tsx

@@ -1,15 +1,12 @@
-import React, { useState } from "react"
-import { Box, Flex, Image } from "@chakra-ui/core"
-import Markdown from "../elements/Markdown"
-import { FiExternalLink } from "react-icons/fi"
-import IconButton from "../elements/IconButton"
-import { IoMdClose } from "react-icons/io"
 import { useQuery } from "@apollo/react-hooks"
+import { Box, Flex, Image } from "@chakra-ui/core"
+import React, { useState } from "react"
+import { IoMdClose } from "react-icons/io"
 import { BANNERS, BannersData } from "../../graphql/queries/banners"
+import IconButton from "../elements/IconButton"
+import Markdown from "../elements/Markdown"
 
-interface SideNavBannerProps {}
-
-const SideNavBanner: React.FC<SideNavBannerProps> = ({}) => {
+const SideNavBanner: React.FC = () => {
   const [closed, setClosed] = useState(false)
   const { data } = useQuery<BannersData>(BANNERS)
 
@@ -53,8 +50,9 @@ const SideNavBanner: React.FC<SideNavBannerProps> = ({}) => {
 
       <Markdown value={banner.description} />
       <Flex justifyContent="center" alignItems="center">
-        <a href={banner.link}>Learn more</a>
-        <Box as={FiExternalLink} ml="0.5em" mb="0.2em" />
+        <a style={{ textDecoration: "underline" }} href={banner.link}>
+          Learn more
+        </a>
       </Flex>
     </Box>
   )