Adjust market modal styles (#875)

* Refactor add market modals into one component
* Adjust style: stickier search, scroll auto

web/components/contract-search.tsx

@@ -200,7 +200,7 @@ export function ContractSearch(props: {
   }
 
   return (
-    <Col className="h-full">
+    <Col>
       <ContractSearchControls
         className={headerClassName}
         defaultSort={defaultSort}

web/components/contract-select-modal.tsx

@@ -0,0 +1,102 @@
+import { Contract } from 'common/contract'
+import { useState } from 'react'
+import { Button } from './button'
+import { ContractSearch } from './contract-search'
+import { Col } from './layout/col'
+import { Modal } from './layout/modal'
+import { Row } from './layout/row'
+import { LoadingIndicator } from './loading-indicator'
+
+export function SelectMarketsModal(props: {
+  title: string
+  description?: React.ReactNode
+  open: boolean
+  setOpen: (open: boolean) => void
+  submitLabel: (length: number) => string
+  onSubmit: (contracts: Contract[]) => void | Promise<void>
+  contractSearchOptions?: Partial<Parameters<typeof ContractSearch>[0]>
+}) {
+  const {
+    title,
+    description,
+    open,
+    setOpen,
+    submitLabel,
+    onSubmit,
+    contractSearchOptions,
+  } = props
+
+  const [contracts, setContracts] = useState<Contract[]>([])
+  const [loading, setLoading] = useState(false)
+
+  async function addContract(contract: Contract) {
+    if (contracts.map((c) => c.id).includes(contract.id)) {
+      setContracts(contracts.filter((c) => c.id !== contract.id))
+    } else setContracts([...contracts, contract])
+  }
+
+  async function onFinish() {
+    setLoading(true)
+    await onSubmit(contracts)
+    setLoading(false)
+    setOpen(false)
+    setContracts([])
+  }
+
+  return (
+    <Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
+      <Col className="h-[85vh] w-full gap-4 rounded-md bg-white">
+        <div className="p-8 pb-0">
+          <Row>
+            <div className={'text-xl text-indigo-700'}>{title}</div>
+
+            {!loading && (
+              <Row className="grow justify-end gap-4">
+                {contracts.length > 0 && (
+                  <Button onClick={onFinish} color="indigo">
+                    {submitLabel(contracts.length)}
+                  </Button>
+                )}
+                <Button
+                  onClick={() => {
+                    if (contracts.length > 0) {
+                      setContracts([])
+                    } else {
+                      setOpen(false)
+                    }
+                  }}
+                  color="gray"
+                >
+                  {contracts.length > 0 ? 'Reset' : 'Cancel'}
+                </Button>
+              </Row>
+            )}
+          </Row>
+          {description}
+        </div>
+
+        {loading && (
+          <div className="w-full justify-center">
+            <LoadingIndicator />
+          </div>
+        )}
+
+        <div className="overflow-y-auto sm:px-8">
+          <ContractSearch
+            hideOrderSelector
+            onContractClick={addContract}
+            cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
+            highlightOptions={{
+              contractIds: contracts.map((c) => c.id),
+              highlightClassName:
+                '!bg-indigo-100 outline outline-2 outline-indigo-300',
+            }}
+            additionalFilter={{}} /* hide pills */
+            headerClassName="bg-white"
+            {...contractSearchOptions}
+          />
+        </div>
+      </Col>
+    </Modal>
+  )
+}

web/components/editor/market-modal.tsx

@@ -1,12 +1,6 @@
 import { Editor } from '@tiptap/react'
 import { Contract } from 'common/contract'
-import { useState } from 'react'
-import { Button } from '../button'
-import { ContractSearch } from '../contract-search'
-import { Col } from '../layout/col'
-import { Modal } from '../layout/modal'
-import { Row } from '../layout/row'
-import { LoadingIndicator } from '../loading-indicator'
+import { SelectMarketsModal } from '../contract-select-modal'
 import { embedContractCode, embedContractGridCode } from '../share-embed-button'
 import { insertContent } from './utils'
 
@@ -17,83 +11,23 @@ export function MarketModal(props: {
 }) {
   const { editor, open, setOpen } = props
 
-  const [contracts, setContracts] = useState<Contract[]>([])
-  const [loading, setLoading] = useState(false)
-
-  async function addContract(contract: Contract) {
-    if (contracts.map((c) => c.id).includes(contract.id)) {
-      setContracts(contracts.filter((c) => c.id !== contract.id))
-    } else setContracts([...contracts, contract])
-  }
-
-  async function doneAddingContracts() {
-    setLoading(true)
+  function onSubmit(contracts: Contract[]) {
     if (contracts.length == 1) {
       insertContent(editor, embedContractCode(contracts[0]))
     } else if (contracts.length > 1) {
       insertContent(editor, embedContractGridCode(contracts))
     }
-    setLoading(false)
-    setOpen(false)
-    setContracts([])
   }
 
   return (
-    <Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
-      <Col className="h-[85vh] w-full gap-4 rounded-md bg-white">
-        <Row className="p-8 pb-0">
-          <div className={'text-xl text-indigo-700'}>Embed a market</div>
-
-          {!loading && (
-            <Row className="grow justify-end gap-4">
-              {contracts.length == 1 && (
-                <Button onClick={doneAddingContracts} color={'indigo'}>
-                  Embed 1 question
-                </Button>
-              )}
-              {contracts.length > 1 && (
-                <Button onClick={doneAddingContracts} color={'indigo'}>
-                  Embed grid of {contracts.length} question
-                  {contracts.length > 1 && 's'}
-                </Button>
-              )}
-              <Button
-                onClick={() => {
-                  if (contracts.length > 0) {
-                    setContracts([])
-                  } else {
-                    setOpen(false)
+    <SelectMarketsModal
+      title="Embed markets"
+      open={open}
+      setOpen={setOpen}
+      submitLabel={(len) =>
+        len == 1 ? 'Embed 1 question' : `Embed grid of ${len} questions`
       }
-                }}
-                color="gray"
-              >
-                {contracts.length > 0 ? 'Reset' : 'Cancel'}
-              </Button>
-            </Row>
-          )}
-        </Row>
-
-        {loading && (
-          <div className="w-full justify-center">
-            <LoadingIndicator />
-          </div>
-        )}
-
-        <div className="overflow-y-scroll sm:px-8">
-          <ContractSearch
-            hideOrderSelector
-            onContractClick={addContract}
-            cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
-            highlightOptions={{
-              contractIds: contracts.map((c) => c.id),
-              highlightClassName:
-                '!bg-indigo-100 outline outline-2 outline-indigo-300',
-            }}
-            additionalFilter={{}} /* hide pills */
-            headerClassName="bg-white"
+      onSubmit={onSubmit}
     />
-        </div>
-      </Col>
-    </Modal>
   )
 }

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

@@ -31,8 +31,6 @@ import { SEO } from 'web/components/SEO'
 import { Linkify } from 'web/components/linkify'
 import { fromPropz, usePropz } from 'web/hooks/use-propz'
 import { Tabs } from 'web/components/layout/tabs'
-import { LoadingIndicator } from 'web/components/loading-indicator'
-import { Modal } from 'web/components/layout/modal'
 import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
 import { ContractSearch } from 'web/components/contract-search'
 import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
@@ -51,6 +49,7 @@ import { Spacer } from 'web/components/layout/spacer'
 import { usePost } from 'web/hooks/use-post'
 import { useAdmin } from 'web/hooks/use-admin'
 import { track } from '@amplitude/analytics-browser'
+import { SelectMarketsModal } from 'web/components/contract-select-modal'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -401,27 +400,12 @@ function GroupLeaderboard(props: {
 function AddContractButton(props: { group: Group; user: User }) {
   const { group, user } = props
   const [open, setOpen] = useState(false)
-  const [contracts, setContracts] = useState<Contract[]>([])
-  const [loading, setLoading] = useState(false)
   const groupContractIds = useGroupContractIds(group.id)
 
-  async function addContractToCurrentGroup(contract: Contract) {
-    if (contracts.map((c) => c.id).includes(contract.id)) {
-      setContracts(contracts.filter((c) => c.id !== contract.id))
-    } else setContracts([...contracts, contract])
-  }
-
-  async function doneAddingContracts() {
-    Promise.all(
-      contracts.map(async (contract) => {
-        setLoading(true)
-        await addContractToGroup(group, contract, user.id)
-      })
-    ).then(() => {
-      setLoading(false)
-      setOpen(false)
-      setContracts([])
-    })
+  async function onSubmit(contracts: Contract[]) {
+    await Promise.all(
+      contracts.map((contract) => addContractToGroup(group, contract, user.id))
+    )
   }
 
   return (
@@ -437,18 +421,11 @@ function AddContractButton(props: { group: Group; user: User }) {
         </Button>
       </div>
 
-      <Modal
+      <SelectMarketsModal
         open={open}
         setOpen={setOpen}
-        className={'max-w-4xl sm:p-0'}
-        size={'xl'}
-      >
-        <Col
-          className={'min-h-screen w-full max-w-4xl gap-4 rounded-md bg-white'}
-        >
-          <Col className="p-8 pb-0">
-            <div className={'text-xl text-indigo-700'}>Add markets</div>
-
+        title="Add markets"
+        description={
           <div className={'text-md my-4 text-gray-600'}>
             Add pre-existing markets to this group, or{' '}
             <Link href={`/create?groupId=${group.id}`}>
@@ -458,50 +435,13 @@ function AddContractButton(props: { group: Group; user: User }) {
             </Link>
             .
           </div>
-
-            {contracts.length > 0 && (
-              <Col className={'w-full '}>
-                {!loading ? (
-                  <Row className={'justify-end gap-4'}>
-                    <Button onClick={doneAddingContracts} color={'indigo'}>
-                      Add {contracts.length} question
-                      {contracts.length > 1 && 's'}
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        setContracts([])
-                      }}
-                      color={'gray'}
-                    >
-                      Cancel
-                    </Button>
-                  </Row>
-                ) : (
-                  <Row className={'justify-center'}>
-                    <LoadingIndicator />
-                  </Row>
-                )}
-              </Col>
-            )}
-          </Col>
-
-          <div className={'overflow-y-scroll sm:px-8'}>
-            <ContractSearch
-              user={user}
-              hideOrderSelector={true}
-              onContractClick={addContractToCurrentGroup}
-              cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
-              additionalFilter={{
-                excludeContractIds: groupContractIds,
-              }}
-              highlightOptions={{
-                contractIds: contracts.map((c) => c.id),
-                highlightClassName: '!bg-indigo-100 border-indigo-100 border-2',
+        }
+        submitLabel={(len) => `Add ${len} question${len !== 1 ? 's' : ''}`}
+        onSubmit={onSubmit}
+        contractSearchOptions={{
+          additionalFilter: { excludeContractIds: groupContractIds },
         }}
       />
-          </div>
-        </Col>
-      </Modal>
     </>
   )
 }