Merge pull request #448 from georgetown-cset/240-detail-page-squished…

…-briefly-on-load Rework window sizes to resolve squished pages
georgetown-cset · Jun 21, 2024 · efa0e67 · efa0e67
2 parents de49731 + 1eaba90
commit efa0e67
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/web/gui-v2/package-lock.json b/web/gui-v2/package-lock.json
diff --git a/web/gui-v2/src/components/AddRemoveColumnDialog.jsx b/web/gui-v2/src/components/AddRemoveColumnDialog.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import {
   Checkbox,
@@ -145,33 +145,35 @@ const AddRemoveColumnDialog = ({
       <div css={styles.columnDialogContents}>
         <div css={styles.columnDialogList}>
           {
-            COLUMN_GROUPINGS.map((colGroup) => (
-              <>
+            COLUMN_GROUPINGS.map((colGroup, ix) => (
+              <Fragment key={ix}>
                 <h3>{colGroup.heading}</h3>
                 {colGroup.entries &&
-                  colGroup.entries.map((entry) => (
+                  colGroup.entries.map((entry, ix) => (
                     <ColumnSelectionListEntry
                       colDef={entry}
                       columnsInternal={columnsInternal}
+                      key={ix}
                       setColumnsInternal={setColumnsInternal}
                     />
                   ))
                 }
                 {colGroup.subgroups &&
-                  colGroup.subgroups.map((subgroup) => (
-                    <>
+                  colGroup.subgroups.map((subgroup, ix) => (
+                    <Fragment key={ix}>
                       <h4>{subgroup.heading}</h4>
-                      {subgroup.entries.map((entry) => (
+                      {subgroup.entries.map((entry, ix) => (
                         <ColumnSelectionListEntry
                           colDef={entry}
                           columnsInternal={columnsInternal}
+                          key={ix}
                           setColumnsInternal={setColumnsInternal}
                         />
                       ))}
-                    </>
+                    </Fragment>
                   ))
                 }
-              </>
+              </Fragment>
             ))
           }
         </div>

diff --git a/web/gui-v2/src/util/useWindowSize.js b/web/gui-v2/src/util/useWindowSize.js
@@ -1,16 +1,24 @@
 import { useEffect, useState } from 'react';
 
+const DEFAULT_WIDTH = 1100;
+
 /**
  * Return the current width of the browser viewport.
  *
  * @returns {number} The current width of the viewport (in px).  This width
  *     updates as the user resizes the viewport.
  */
 export const useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState(800);
+  const [windowSize, setWindowSize] = useState(() => {
+    if ( typeof window !== "undefined" ) {
+      return window.innerWidth;
+    } else {
+      return DEFAULT_WIDTH;
+    }
+  });
 
   useEffect(() => {
-    const handleResize = () => setWindowSize(window?.innerWidth ?? 800);
+    const handleResize = () => setWindowSize(window?.innerWidth ?? DEFAULT_WIDTH);
     if ( typeof window !== "undefined" ) {
       window.addEventListener("resize", handleResize);
     }