From 119a1be1dda4c102602200538efe4ddc4c4eafac Mon Sep 17 00:00:00 2001
From: Pico2x <pico2x@gmail.com>
Date: Wed, 31 Aug 2022 14:08:41 +0100
Subject: [PATCH] Add embedded market grids

---
 web/components/contract/contracts-grid.tsx |  3 +-
 web/components/editor/market-modal.tsx     | 17 +++++++---
 web/components/share-embed-button.tsx      | 17 +++++++---
 web/pages/create-post.tsx                  |  2 +-
 web/pages/embed/grid/[...slugs]/index.tsx  | 37 ++++++++++++++++++++++
 5 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 web/pages/embed/grid/[...slugs]/index.tsx

diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx
index 2f804644..3a09a167 100644
--- a/web/components/contract/contracts-grid.tsx
+++ b/web/components/contract/contracts-grid.tsx
@@ -27,6 +27,7 @@ export function ContractsGrid(props: {
   }
   highlightOptions?: ContractHighlightOptions
   trackingPostfix?: string
+  breakpointColumns?: { [key: string]: number }
 }) {
   const {
     contracts,
@@ -67,7 +68,7 @@ export function ContractsGrid(props: {
     <Col className="gap-8">
       <Masonry
         // Show only 1 column on tailwind's md breakpoint (768px)
-        breakpointCols={{ default: 2, 768: 1 }}
+        breakpointCols={props.breakpointColumns ?? { default: 2, 768: 1 }}
         className="-ml-4 flex w-auto"
         columnClassName="pl-4 bg-clip-padding"
       >
diff --git a/web/components/editor/market-modal.tsx b/web/components/editor/market-modal.tsx
index a81953de..af11559a 100644
--- a/web/components/editor/market-modal.tsx
+++ b/web/components/editor/market-modal.tsx
@@ -7,7 +7,7 @@ import { Col } from '../layout/col'
 import { Modal } from '../layout/modal'
 import { Row } from '../layout/row'
 import { LoadingIndicator } from '../loading-indicator'
-import { embedCode } from '../share-embed-button'
+import { embedContractCode, embedContractGridCode } from '../share-embed-button'
 import { insertContent } from './utils'
 
 export function MarketModal(props: {
@@ -28,7 +28,11 @@ export function MarketModal(props: {
 
   async function doneAddingContracts() {
     setLoading(true)
-    insertContent(editor, ...contracts.map(embedCode))
+    if (contracts.length == 1) {
+      insertContent(editor, ...contracts.map(embedContractCode))
+    } else if (contracts.length > 1) {
+      insertContent(editor, embedContractGridCode(contracts))
+    }
     setLoading(false)
     setOpen(false)
     setContracts([])
@@ -42,9 +46,14 @@ export function MarketModal(props: {
 
           {!loading && (
             <Row className="grow justify-end gap-4">
-              {contracts.length > 0 && (
+              {contracts.length == 1 && (
                 <Button onClick={doneAddingContracts} color={'indigo'}>
-                  Embed {contracts.length} question
+                  Embed 1 question
+                </Button>
+              )}
+              {contracts.length > 1 && (
+                <Button onClick={doneAddingContracts} color={'indigo'}>
+                  Embed grid of {contracts.length} question
                   {contracts.length > 1 && 's'}
                 </Button>
               )}
diff --git a/web/components/share-embed-button.tsx b/web/components/share-embed-button.tsx
index cfbe78f0..5c2be0db 100644
--- a/web/components/share-embed-button.tsx
+++ b/web/components/share-embed-button.tsx
@@ -9,13 +9,22 @@ import { DOMAIN } from 'common/envs/constants'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { track } from 'web/lib/service/analytics'
 
-export function embedCode(contract: Contract) {
+export function embedContractCode(contract: Contract) {
   const title = contract.question
   const src = `https://${DOMAIN}/embed${contractPath(contract)}`
-
-  return `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
+  return embedCode(src, title)
 }
 
+export function embedContractGridCode(contracts: Contract[]) {
+  const src = `http://${DOMAIN}/embed/grid/${contracts
+    .map((c) => c.slug)
+    .join('/')}`
+  return embedCode(src, 'Grid of contracts')
+}
+
+const embedCode = (src: string, title: string) =>
+  `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
+
 export function ShareEmbedButton(props: { contract: Contract }) {
   const { contract } = props
 
@@ -26,7 +35,7 @@ export function ShareEmbedButton(props: { contract: Contract }) {
       as="div"
       className="relative z-10 flex-shrink-0"
       onMouseUp={() => {
-        copyToClipboard(embedCode(contract))
+        copyToClipboard(embedContractCode(contract))
         toast.success('Embed code copied!', {
           icon: codeIcon,
         })
diff --git a/web/pages/create-post.tsx b/web/pages/create-post.tsx
index f88f56a5..01147cc0 100644
--- a/web/pages/create-post.tsx
+++ b/web/pages/create-post.tsx
@@ -41,7 +41,7 @@ export default function CreatePost() {
 
   return (
     <Page>
-      <div className="mx-auto w-full max-w-2xl">
+      <div className="mx-auto w-full max-w-3xl">
         <div className="rounded-lg px-6 py-4 sm:py-0">
           <Title className="!mt-0" text="Create a post" />
           <form>
diff --git a/web/pages/embed/grid/[...slugs]/index.tsx b/web/pages/embed/grid/[...slugs]/index.tsx
new file mode 100644
index 00000000..7500665f
--- /dev/null
+++ b/web/pages/embed/grid/[...slugs]/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { Contract, getContractFromSlug } from 'web/lib/firebase/contracts'
+import { ContractsGrid } from 'web/components/contract/contracts-grid'
+
+export async function getStaticProps(props: { params: { slugs: string[] } }) {
+  const { slugs } = props.params
+
+  const contracts = (await Promise.all(
+    slugs.map((slug) =>
+      getContractFromSlug(slug) != null ? getContractFromSlug(slug) : []
+    )
+  )) as Contract[]
+
+  return {
+    props: {
+      contracts,
+    },
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: 'blocking' }
+}
+
+export default function ContractGridPage(props: { contracts: Contract[] }) {
+  const { contracts } = props
+
+  return (
+    <>
+      <ContractsGrid
+        contracts={contracts}
+        breakpointColumns={{ default: 2, 650: 1 }}
+      />
+    </>
+  )
+}