From 42eac940c5b747e1d74bcb4d458c44941c34033a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ademir=20Jos=C3=A9=20Ferreira=20J=C3=BAnior?=
 <ademirj.ferreirajunior@gmail.com>
Date: Sun, 13 Aug 2023 18:38:24 -0300
Subject: [PATCH] feat: hard-code optimal masonry layout

---
 app/_components/Masonry.tsx | 24 +++++++++++++++++++++++-
 app/_utils/swapInPlace.ts   |  5 +++++
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 app/_utils/swapInPlace.ts

diff --git a/app/_components/Masonry.tsx b/app/_components/Masonry.tsx
index 237c522..2087a48 100644
--- a/app/_components/Masonry.tsx
+++ b/app/_components/Masonry.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react';
 import styles from './Masonry.module.css';
 import { useMediaQuery } from '@/_hooks/useMediaQuery';
+import swapInPlace from '@/_utils/swapInPlace';
 
 function MasonryItem({
   children,
@@ -58,11 +59,32 @@ function MasonryItem({
 const MemoizedMasonryItem = memo(MasonryItem);
 
 export default function Masonry({ children }: { children: React.ReactNode }) {
-  const items = useMemo(() => Children.toArray(children), [children]);
+  const _items = useMemo(() => Children.toArray(children), [children]);
 
   const isTablet = useMediaQuery('(min-width: 768px)');
   const isDesktop = useMediaQuery('(min-width: 1440px)');
 
+  // hard code partitioning
+  const items = useMemo(() => {
+    const sortedItems = [..._items];
+    if (isDesktop) {
+      swapInPlace(sortedItems, 5, 7);
+      swapInPlace(sortedItems, 8, 10);
+      swapInPlace(sortedItems, 9, 10);
+      swapInPlace(sortedItems, 11, 13);
+      swapInPlace(sortedItems, 12, 13);
+      swapInPlace(sortedItems, 12, 14);
+      return sortedItems;
+    }
+
+    if (isTablet) {
+      swapInPlace(sortedItems, 8, 9);
+      return sortedItems;
+    }
+
+    return sortedItems;
+  }, [_items, isTablet, isDesktop]);
+
   const [columns, gap] = useMemo(() => {
     if (isDesktop) {
       return [4, 40];
diff --git a/app/_utils/swapInPlace.ts b/app/_utils/swapInPlace.ts
new file mode 100644
index 0000000..6f1689c
--- /dev/null
+++ b/app/_utils/swapInPlace.ts
@@ -0,0 +1,5 @@
+export default function swapInPlace(arr: unknown[], i1: number, i2: number) {
+  const tmp = arr[i1];
+  arr[i1] = arr[i2];
+  arr[i2] = tmp;
+}