speed up development builds slightly (#1990)

* move group button class import out

* Add cleanup function to search-context listener

* move ContractSeo to it's own file

web/components/contract/contract-seo.tsx

@@ -0,0 +1,28 @@
+import { Contract } from 'common/contract'
+import { getSeoDescription, getContractOGProps } from 'common/contract-seo'
+import { removeUndefinedProps } from 'common/util/object'
+import { SEO } from '../SEO'
+
+export function ContractSEO(props: {
+  contract: Contract
+  /** Base64 encoded points */
+  points?: string
+}) {
+  const { contract, points } = props
+  const { question, creatorUsername, slug } = contract
+
+  const seoDesc = getSeoDescription(contract)
+  const ogCardProps = removeUndefinedProps({
+    ...getContractOGProps(contract),
+    points,
+  })
+
+  return (
+    <SEO
+      title={question}
+      description={seoDesc}
+      url={`/${creatorUsername}/${slug}`}
+      ogProps={{ props: ogCardProps, endpoint: 'market' }}
+    />
+  )
+}

web/components/groups/group-options.tsx

@@ -9,7 +9,7 @@ import { PrivateUser } from 'common/user'
 import { referralQuery } from 'common/util/share'
 import { CopyLinkOrShareButton } from 'web/components/buttons/copy-link-button'
 import { useUser } from 'web/hooks/use-user'
-import { groupButtonClass } from 'web/pages/group/[...slugs]'
+import { groupButtonClass } from './groups-button'
 import DropdownMenu, { DropdownItem } from '../comments/dropdown-menu'
 import { Row } from '../layout/row'
 import { getBlockGroupDropdownItem } from './hide-group-item'

web/components/groups/groups-button.tsx

@@ -7,12 +7,13 @@ import { Row } from 'web/components/layout/row'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { withTracking } from 'web/lib/service/analytics'
 import { leaveGroup, SearchGroupInfo } from 'web/lib/supabase/groups'
-import { groupButtonClass } from 'web/pages/group/[...slugs]'
 import { Button } from '../buttons/button'
 import { ConfirmationButton } from '../buttons/confirmation-button'
 import { Subtitle } from '../widgets/subtitle'
 import { joinGroup } from 'web/lib/firebase/api'
 
+export const groupButtonClass = 'text-ink-700 hover:text-ink-800'
+
 export function LeavePrivateGroupButton(props: {
   group: SearchGroupInfo
   user: User | undefined | null

web/components/search/search-context.tsx

@@ -23,12 +23,15 @@ export const SearchProvider = (props: { children: ReactNode }) => {
   const [query, setQuery] = useState('')
 
   useEffect(() => {
-    window.addEventListener('keydown', (e) => {
+    const handler = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
         setOpen(true)
         e.preventDefault()
       }
-    })
+    }
+
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
   }, [])
 
   return (

web/pages/[username]/[contractSlug].tsx

@@ -5,16 +5,12 @@ import Head from 'next/head'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useMemo, useRef, useState } from 'react'
-
 import { Answer, DpmAnswer } from 'common/answer'
 import { unserializePoints } from 'common/chart'
 import { ContractParams, MaybeAuthedContractParams } from 'common/contract'
 import { ContractMetric } from 'common/contract-metric'
-import { getContractOGProps, getSeoDescription } from 'common/contract-seo'
 import { HOUSE_BOT_USERNAME, isTrustworthy } from 'common/envs/constants'
 import { User } from 'common/user'
-import { removeUndefinedProps } from 'common/util/object'
-import { SEO } from 'web/components/SEO'
 import { DeleteMarketButton } from 'web/components/buttons/delete-market-button'
 import { ScrollToTopButton } from 'web/components/buttons/scroll-to-top-button'
 import { BackButton } from 'web/components/contract/back-button'
@@ -72,6 +68,7 @@ import { linkClass } from 'web/components/widgets/site-link'
 import { MarketGroups } from 'web/components/contract/market-groups'
 import { getMultiBetPoints } from 'web/components/charts/contract/choice'
 import { useRealtimeBets } from 'web/hooks/use-bets-supabase'
+import { ContractSEO } from 'web/components/contract/contract-seo'
 
 export async function getStaticProps(ctx: {
   params: { username: string; contractSlug: string }
@@ -608,34 +605,7 @@ export function ContractPageContent(props: {
   )
 }
 
-export function ContractSEO(props: {
-  contract: Contract
-  /** Base64 encoded points */
-  points?: string
-}) {
-  const { contract, points } = props
-  const { question, creatorUsername, slug } = contract
-
-  const seoDesc = getSeoDescription(contract)
-  const ogCardProps = removeUndefinedProps({
-    ...getContractOGProps(contract),
-    points,
-  })
-
-  return (
-    <SEO
-      title={question}
-      description={seoDesc}
-      url={`/${creatorUsername}/${slug}`}
-      ogProps={{ props: ogCardProps, endpoint: 'market' }}
-    />
-  )
-}
-
-export function PrivateContractAdminTag(props: {
-  contract: Contract
-  user: User
-}) {
+function PrivateContractAdminTag(props: { contract: Contract; user: User }) {
   const { contract, user } = props
   const isPrivateContractMember = useIsPrivateContractMember(
     user.id,

web/pages/embed/[username]/[contractSlug].tsx

@@ -21,6 +21,7 @@ import {
   PseudoNumericResolutionOrExpectation,
   StonkPrice,
 } from 'web/components/contract/contract-price'
+import { ContractSEO } from 'web/components/contract/contract-seo'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { SizedContainer } from 'web/components/sized-container'
@@ -30,7 +31,6 @@ import { useNumContractComments } from 'web/hooks/use-comments-supabase'
 import { track } from 'web/lib/service/analytics'
 import { getBetFields } from 'web/lib/supabase/bets'
 import { db } from 'web/lib/supabase/db'
-import { ContractSEO } from 'web/pages/[username]/[contractSlug]'
 import Custom404 from '../../404'
 import { useFirebasePublicContract } from 'web/hooks/use-contract-supabase'
 

web/pages/group/[...slugs]/index.tsx

@@ -42,7 +42,6 @@ import { initSupabaseAdmin } from 'web/lib/supabase/admin-db'
 import { useUserById } from 'web/hooks/use-user-supabase'
 import { EditableGroupTitle } from 'web/components/groups/editable-group-name'
 
-export const groupButtonClass = 'text-ink-700 hover:text-ink-800'
 const MAX_LEADERBOARD_SIZE = 50
 export const MEMBER_INDEX = 0
 export const MEMBER_INVITE_INDEX = 1