From e651568cfde874ef9f6016b88149e6e38d6f3329 Mon Sep 17 00:00:00 2001
From: Caden Buckhalt <halaeb@gmail.com>
Date: Fri, 19 Jan 2024 14:57:01 -0800
Subject: [PATCH 1/2] bypass generated compiler alias

next.js generates compiler aliases so that references to legacy browser code in react-dom/server throw errors. however, renderToString is depreciated. this bypass allows for using it
---
 .../containers/HyperList/HyperList.js         | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/lib/interviewer/containers/HyperList/HyperList.js b/lib/interviewer/containers/HyperList/HyperList.js
index 9a9ada35..a5f26219 100644
--- a/lib/interviewer/containers/HyperList/HyperList.js
+++ b/lib/interviewer/containers/HyperList/HyperList.js
@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useCallback } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
 import { compose } from 'recompose';
@@ -10,6 +10,7 @@ import {
   DropTarget,
   MonitorDropTarget,
 } from '../../behaviours/DragAndDrop';
+import { renderToString } from 'next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.development';
 
 const LargeRosterNotice = () => (
   <div
@@ -135,24 +136,48 @@ const HyperList = ({
 
   const classNames = cx('hyper-list', className);
 
+  let portalRoot = null;
+
+  if (!portalRoot) {
+    portalRoot = document.createElement('div');
+    portalRoot.setAttribute('id', 'portal-root');
+    portalRoot.style.position = 'absolute';
+    portalRoot.style.top = '-1000px';
+    portalRoot.style.left = '-1000px';
+    document.body.appendChild(portalRoot);
+  }
+
+  const SizeRenderer = useCallback(
+    (props) => (
+      <div className="hyper-list__item">
+        <ItemComponent {...props} />
+      </div>
+    ),
+    [ItemComponent],
+  );
+
   const getItemSize = (item, listWidth) => {
     if (!listWidth) {
       return 0;
     }
 
-    // const itemData = items[item];
-    // const { props } = itemData;
+    const itemData = items[item];
+    const { props } = itemData;
+    const newHiddenSizingEl = document.createElement('div');
+
+    newHiddenSizingEl.style.position = 'absolute';
+    newHiddenSizingEl.style.top = '0';
+    newHiddenSizingEl.style.width = `${listWidth - GUTTER_SIZE * 2 - 14}px`; // Additional 14 for scrollbar
+    newHiddenSizingEl.style.pointerEvents = 'none';
 
-    // const sizingElement = simpleRenderToString(
-    //   <div className="hyper-list__item">
-    //     <ItemComponent {...props} />
-    //   </div>,
-    // );
-    // const height = sizingElement.clientHeight;
+    newHiddenSizingEl.style.visibility = 'hidden';
 
-    // return height + GUTTER_SIZE;
+    document.body.appendChild(newHiddenSizingEl);
+    newHiddenSizingEl.innerHTML = renderToString(<SizeRenderer {...props} />);
+    const height = newHiddenSizingEl.clientHeight;
+    document.body.removeChild(newHiddenSizingEl);
 
-    return 200;
+    return height + GUTTER_SIZE;
   };
 
   // If placeholder is provider it supersedes everything

From c723a61dd76e5f882cb546493c0b9c92b83de9f1 Mon Sep 17 00:00:00 2001
From: Caden Buckhalt <halaeb@gmail.com>
Date: Fri, 19 Jan 2024 15:02:58 -0800
Subject: [PATCH 2/2] remove initial attempt to use portals

---
 lib/interviewer/containers/HyperList/HyperList.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/lib/interviewer/containers/HyperList/HyperList.js b/lib/interviewer/containers/HyperList/HyperList.js
index a5f26219..e6bdc2ec 100644
--- a/lib/interviewer/containers/HyperList/HyperList.js
+++ b/lib/interviewer/containers/HyperList/HyperList.js
@@ -136,17 +136,6 @@ const HyperList = ({
 
   const classNames = cx('hyper-list', className);
 
-  let portalRoot = null;
-
-  if (!portalRoot) {
-    portalRoot = document.createElement('div');
-    portalRoot.setAttribute('id', 'portal-root');
-    portalRoot.style.position = 'absolute';
-    portalRoot.style.top = '-1000px';
-    portalRoot.style.left = '-1000px';
-    document.body.appendChild(portalRoot);
-  }
-
   const SizeRenderer = useCallback(
     (props) => (
       <div className="hyper-list__item">