From a00b7760c23740d759297dadd083690e8e476d53 Mon Sep 17 00:00:00 2001
From: Claudia Valdivieso <claumavaldivieso@gmail.com>
Date: Thu, 25 Nov 2021 22:05:21 -0500
Subject: [PATCH] wip

---
 package.json   |   4 +-
 pages/index.js | 109 ++++++++++++++++++++++++++++++-------------------
 yarn.lock      |  18 ++++++++
 3 files changed, 88 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 4fd684e..7631788 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "next": "11.1.2",
     "next-pwa": "^5.4.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-window": "^1.8.6"
   }
 }
diff --git a/pages/index.js b/pages/index.js
index d5a3c25..67a360a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { FixedSizeList } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
 import {
   Grid,
   Flex,
@@ -69,45 +71,55 @@ const Footer = () => (
   </GridItem>
 );
 
-const Element = ({ verb }) => (
-  <Box p="6" borderWidth="1px" borderRadius="lg" overflow="hidden">
-    <Heading
-      mb="1"
-      fontWeight="semibold"
-      as="h2"
-      size="md"
-      textTransform="uppercase"
+const Element = ({ index, data, style }) => {
+  const verb = data[index];
+
+  return (
+    <Box
+      p="6"
+      borderWidth="1px"
+      borderRadius="lg"
+      overflow="hidden"
+      style={style}
     >
-      {verb.baseForm}
-    </Heading>
-    <SimpleGrid columns={2}>
-      <Box display="flex" alignItems="baseline">
-        <Text color="gray.500" fontWeight="semibold">
-          Past Form:
-        </Text>
-        <Text ml="1">{verb.pastForm}</Text>
-      </Box>
-      <Box display="flex" alignItems="baseline">
-        <Text color="gray.500" fontWeight="semibold">
-          s/es/ies:
-        </Text>
-        <Text ml="1">{verb.sEsIesForm}</Text>
-      </Box>
-      <Box display="flex" alignItems="baseline">
-        <Text color="gray.500" fontWeight="semibold">
-          Past Participle Form:
-        </Text>
-        <Text ml="1">{verb.pastParticipleForm}</Text>
-      </Box>
-      <Box display="flex" alignItems="baseline">
-        <Text color="gray.500" fontWeight="semibold">
-          ing Form:
-        </Text>
-        <Text ml="1">{verb.ingForm}</Text>
-      </Box>
-    </SimpleGrid>
-  </Box>
-);
+      <Heading
+        mb="1"
+        fontWeight="semibold"
+        as="h2"
+        size="md"
+        textTransform="uppercase"
+      >
+        {verb.baseForm}
+      </Heading>
+      <SimpleGrid columns={2}>
+        <Box display="flex" alignItems="baseline">
+          <Text color="gray.500" fontWeight="semibold">
+            Past Form:
+          </Text>
+          <Text ml="1">{verb.pastForm}</Text>
+        </Box>
+        <Box display="flex" alignItems="baseline">
+          <Text color="gray.500" fontWeight="semibold">
+            s/es/ies:
+          </Text>
+          <Text ml="1">{verb.sEsIesForm}</Text>
+        </Box>
+        <Box display="flex" alignItems="baseline">
+          <Text color="gray.500" fontWeight="semibold">
+            Past Participle Form:
+          </Text>
+          <Text ml="1">{verb.pastParticipleForm}</Text>
+        </Box>
+        <Box display="flex" alignItems="baseline">
+          <Text color="gray.500" fontWeight="semibold">
+            ing Form:
+          </Text>
+          <Text ml="1">{verb.ingForm}</Text>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+};
 
 export default function Home() {
   const [search, setSearchTerm] = useState("");
@@ -126,8 +138,8 @@ export default function Home() {
     <Grid h="100vh" templateRows="1fr auto">
       <Box>
         <Header />
-        <Container maxW="container.sm">
-          <VStack spacing={4} align="stretch" py={6}>
+        <Container maxW="container.sm" style={{ height: "calc(100% - 116px)" }}>
+          <VStack spacing={4} align="stretch" py={6} h="100%">
             <Input
               onChange={handleChange}
               value={search}
@@ -135,10 +147,23 @@ export default function Home() {
               type="search"
               size="lg"
             />
-            {filteredVerbs.map((verb) => {
+            {/* {filteredVerbs.map((verb) => {
               if (verb.baseForm.trim() === "") return null;
               return <Element key={verb.id} verb={verb} />;
-            })}
+            })} */}
+            <AutoSizer>
+              {({ height, width }) => (
+                <FixedSizeList
+                  height={height}
+                  width={width}
+                  itemSize={126}
+                  itemData={filteredVerbs}
+                  itemCount={filteredVerbs.length}
+                >
+                  {Element}
+                </FixedSizeList>
+              )}
+            </AutoSizer>
           </VStack>
         </Container>
       </Box>
diff --git a/yarn.lock b/yarn.lock
index 96627d4..6f8b0f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3460,6 +3460,11 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+"memoize-one@>=3.1.1 <6":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -4058,6 +4063,19 @@ react-style-singleton@^2.1.0:
     invariant "^2.2.4"
     tslib "^1.0.0"
 
+react-virtualized-auto-sizer@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
+  integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+
+react-window@^1.8.6:
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
+  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"