From 4b3ec916049032ad1f2c82ca30af6447ecee10eb Mon Sep 17 00:00:00 2001 From: Sinclair Chen Date: Thu, 24 Aug 2023 14:46:52 -0700 Subject: [PATCH] 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 | 28 +++++++++++++++ web/components/groups/group-options.tsx | 2 +- web/components/groups/groups-button.tsx | 3 +- web/components/search/search-context.tsx | 7 ++-- web/pages/[username]/[contractSlug].tsx | 34 ++----------------- web/pages/embed/[username]/[contractSlug].tsx | 2 +- web/pages/group/[...slugs]/index.tsx | 1 - 7 files changed, 39 insertions(+), 38 deletions(-) create mode 100644 web/components/contract/contract-seo.tsx diff --git a/web/components/contract/contract-seo.tsx b/web/components/contract/contract-seo.tsx new file mode 100644 index 0000000000..b5b8f796db --- /dev/null +++ b/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 ( + + ) +} diff --git a/web/components/groups/group-options.tsx b/web/components/groups/group-options.tsx index 64a19fdc17..7a1e03217d 100644 --- a/web/components/groups/group-options.tsx +++ b/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' diff --git a/web/components/groups/groups-button.tsx b/web/components/groups/groups-button.tsx index 099f19be07..4066a5c5df 100644 --- a/web/components/groups/groups-button.tsx +++ b/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 diff --git a/web/components/search/search-context.tsx b/web/components/search/search-context.tsx index cecdb51af9..cf367a216e 100644 --- a/web/components/search/search-context.tsx +++ b/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 ( diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index fa032a86e7..38364d153d 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/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 ( - - ) -} - -export function PrivateContractAdminTag(props: { - contract: Contract - user: User -}) { +function PrivateContractAdminTag(props: { contract: Contract; user: User }) { const { contract, user } = props const isPrivateContractMember = useIsPrivateContractMember( user.id, diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx index dbf07a8bad..174fabc791 100644 --- a/web/pages/embed/[username]/[contractSlug].tsx +++ b/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' diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx index cfa155d68c..4363621bf6 100644 --- a/web/pages/group/[...slugs]/index.tsx +++ b/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