test new virtuoso design for catalogs

src/hooks/useFeedRows.js

@@ -0,0 +1,20 @@
+import { useMemo, useRef } from "react"
+
+const useFeedRows = (feedWithDescriptionAndRules, columnCount) => {
+  const rowsRef = useRef([]);
+  return useMemo(() => {
+    const rows = [];
+    for (let i = 0; i < feedWithDescriptionAndRules.length; i += columnCount) {
+      if (rowsRef.current?.[rows.length] && rowsRef.current[rows.length].length === columnCount) {
+        rows.push(rowsRef.current[rows.length])
+      }
+      else {
+        rows.push(feedWithDescriptionAndRules.slice(i, i + columnCount))
+      }
+    }
+    rowsRef.current = rows
+    return rows;
+  }, [feedWithDescriptionAndRules, columnCount]);
+}
+
+export default useFeedRows;

src/hooks/useWindowWidth.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react'
+
+export default function useWindowWidth() {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowWidth(window.innerWidth)
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return windowWidth
+}