From 0eeac27d3b50c71b4ec60d286b100213cd77e244 Mon Sep 17 00:00:00 2001
From: Austin Chen
Date: Fri, 19 Aug 2022 16:30:27 -0700
Subject: [PATCH] Use react-masonry-css to accomplish masonry view
---
functions/package.json | 1 +
web/components/contract/contracts-grid.tsx | 51 ++++------------------
yarn.lock | 5 +++
3 files changed, 14 insertions(+), 43 deletions(-)
diff --git a/functions/package.json b/functions/package.json
index 5839b5eb..d6278c25 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -39,6 +39,7 @@
"lodash": "4.17.21",
"mailgun-js": "0.22.0",
"module-alias": "2.2.2",
+ "react-masonry-css": "1.0.16",
"stripe": "8.194.0",
"zod": "3.17.2"
},
diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx
index bf0cd9b8..70abc1dc 100644
--- a/web/components/contract/contracts-grid.tsx
+++ b/web/components/contract/contracts-grid.tsx
@@ -9,6 +9,7 @@ import { useCallback } from 'react'
import clsx from 'clsx'
import { LoadingIndicator } from '../loading-indicator'
import { VisibilityObserver } from '../visibility-observer'
+import Masonry from 'react-masonry-css'
export type ContractHighlightOptions = {
contractIds?: string[]
@@ -61,50 +62,14 @@ export function ContractsGrid(props: {
)
}
- // Reorganize the contracts so that the masonry layout shows them in the original order
- // E.g. from [0, 1, 2, 3] => [0, 2, 1, 3]
- // E.g. from [0, 1, 2, 3, 4, 5, 6] => [0, 2, 4, 1, 3, 5, 6]
- const halfway = Math.floor(contracts.length / 2)
- function reorder(i: number) {
- return i < halfway
- ? i * 2
- : Math.min((i - halfway) * 2 + 1, (contracts?.length ?? 1) - 1)
- }
- const twoColContracts = Array.from(
- { length: contracts.length },
- (_, i) => contracts[reorder(i)]
- )
return (
-
- {twoColContracts.map((contract) => (
- onContractClick(contract) : undefined
- }
- hideQuickBet={hideQuickBet}
- hideGroupLink={hideGroupLink}
- className={clsx(
- 'break-inside-avoid-column',
- contractIds?.includes(contract.id) && highlightClassName
- )}
- />
- ))}
-
-
{contracts.map((contract) => (
))}
-
+