Updating react-transition-group now that the StrictMode bug is fixed

client/package.json

@@ -9,7 +9,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0-next.80",
-    "react-transition-group": "^4.3.0"
+    "react-transition-group": "^4.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import styles from './App.module.css';
 import GamePanel from './components/screens/GamePanel';
@@ -20,49 +20,64 @@ const needsHeaderFooter = {
   [ERROR]: true
 };
 
-const Header = ({ show }) => (
-  <CSSTransition 
-    in={show}
-    timeout={500}
-    mountOnEnter
-    unmountOnExit
-    classNames="fade"
-  >
-    <div className={styles.header}>
-      <p>TerrAssumptions!</p>
-    </div>
-  </CSSTransition>
-)
+const Header = ({ show }) => {
+  const transitionRef = useRef(null);
 
-const Footer = ({ show }) => (
-  <CSSTransition 
-    in={show}
-    timeout={500}
-    mountOnEnter
-    unmountOnExit
-    classNames="fade"
-  >
-    <div className={styles.footer}>
-      <ApiInfo />
-    </div>
-  </CSSTransition>
-)
+  return (
+    <CSSTransition
+      nodeRef={transitionRef}
+      in={show}
+      timeout={500}
+      mountOnEnter
+      unmountOnExit
+      classNames="fade"
+    >
+      <div className={styles.header} ref={transitionRef}>
+        <p>TerrAssumptions!</p>
+      </div>
+    </CSSTransition>
+  );
+}
+
+const Footer = ({ show }) => {
+  const transitionRef = useRef(null);
+
+  return (
+    <CSSTransition
+      nodeRef={transitionRef}
+      in={show}
+      timeout={500}
+      mountOnEnter
+      unmountOnExit
+      classNames="fade"
+    >
+      <div className={styles.footer} ref={transitionRef}>
+        <ApiInfo />
+      </div>
+    </CSSTransition>
+  );
+}
+
+const State = ({ show, children, setTransitioning }) => {
+  const transitionRef = useRef(null);
 
-const State = ({ show, children, setTransitioning }) => (
-  <CSSTransition
-    in={show}
-    timeout={500}
-    mountOnEnter
-    unmountOnExit
-    classNames="fade"
-    onEnter={() => setTransitioning(true)} 
-    onExited={() => setTransitioning(false)}
-  >
-    <div className={styles.state}>
-      {children}
-    </div>
-  </CSSTransition>
-)
+  return (
+    <CSSTransition
+      nodeRef={transitionRef}
+      in={show}
+      timeout={500}
+      mountOnEnter
+      unmountOnExit
+      classNames="fade"
+      onEnter={() => setTransitioning(true)} 
+      onExited={() => setTransitioning(false)}
+    >
+      <div className={styles.state} ref={transitionRef}>
+        {children}
+      </div>
+    </CSSTransition>
+  );
+}
 
 export default () => {
   const [transitioning, setTransitioning] = useState(true);
@@ -71,7 +86,7 @@ export default () => {
   const needsHF = needsHeaderFooter[gameState];
 
   return (
-    // <React.StrictMode>
+    <React.StrictMode>
       <div className={styles.page}>
         <Header show={needsHF} />
         <State show={gameState === PRE_GAME} setTransitioning={setTransitioning}>
@@ -92,6 +107,6 @@ export default () => {
         </State>
         <Footer show={needsHF} />
       </div>
-    // </React.StrictMode>
+    </React.StrictMode>
   );
 };

client/src/components/screens/HomePage/HomePage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { dispatch } from '../../../domain/gameStore';
 import { hasSavedGameInfo } from '../../../domain/localStorageMethods';
 import DelayedButton from '../../util/DelayedButton';
@@ -6,25 +6,26 @@ import GameCreationForm from '../../util/GameCreationForm';
 import styles from './HomePage.module.css';
 import { CSSTransition } from 'react-transition-group';
 
-const Rejoin = () => (
-  <div className={styles.rejoinSection}>
+const Rejoin = React.forwardRef((_, ref) => (
+  <div className={styles.rejoinSection} ref={ref}>
     <span className={styles.rejoinLabel}>Looks like you were in a game before that you didn't finish!</span>
     <DelayedButton onEnd={() => dispatch.rejoinGame()} countDownFormatter={(rem) => `Rejoining in ${rem}s...`}>
       Rejoin Game?
     </DelayedButton>
   </div>
-);
+));
 
 export default () => {
   const [hasSavedInfo, setHasSavedInfo] = useState(false);
   useEffect(() => {
     hasSavedGameInfo().then(setHasSavedInfo)
   }, []);
+  const transitionRef = useRef(null);
 
   return (
     <div className={styles.page}>
-      <CSSTransition in={hasSavedInfo} mountOnEnter unmountOnExit timeout={500} classNames="fade">
-        <Rejoin />
+      <CSSTransition nodeRef={transitionRef} in={hasSavedInfo} mountOnEnter unmountOnExit timeout={500} classNames="fade">
+        <Rejoin ref={transitionRef}/>
       </CSSTransition>
       <GameCreationForm afterCreate={(gameId) => dispatch.goToLobby(gameId)} />
     </div>

client/src/components/util/GameCreationForm/Dropdown.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import styles from './Dropdown.module.css';
 
@@ -8,18 +8,21 @@ export const Item = ({ value, onSelect, children }) => (
   </div>
 );
 
-export const Dropdown = ({ open, selected, onSelect, onClick, children }) => (
-  <div className={styles.container}>
-    <div className={styles.button} onClick={onClick}>{selected}</div>
-    <CSSTransition in={open} timeout={200} mountOnEnter unmountOnExit classNames={{
-      enter: styles['list-enter'],
-      enterActive: styles['list-enter-active'],
-      exit: styles['list-exit'],
-      exitActive: styles['list-exit-active'],
-    }}>
-      <div className={styles.list}>
-        {children.map((child, key) => React.cloneElement(child, { onSelect, key }))}
-      </div>
-    </CSSTransition>
-  </div>
-);
+export const Dropdown = ({ open, selected, onSelect, onClick, children }) => {
+  const transitionRef = useRef(null);
+  return (
+    <div className={styles.container}>
+      <div className={styles.button} onClick={onClick}>{selected}</div>
+      <CSSTransition nodeRef={transitionRef} in={open} timeout={200} mountOnEnter unmountOnExit classNames={{
+        enter: styles['list-enter'],
+        enterActive: styles['list-enter-active'],
+        exit: styles['list-exit'],
+        exitActive: styles['list-exit-active'],
+      }}>
+        <div className={styles.list} ref={transitionRef}>
+          {children.map((child, key) => React.cloneElement(child, { onSelect, key }))}
+        </div>
+      </CSSTransition>
+    </div>
+  )
+};

client/yarn.lock

@@ -966,13 +966,20 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
+  integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.4.0", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
@@ -8498,10 +8505,10 @@ react-scripts@^3.3.0-next.80:
   optionalDependencies:
     fsevents "2.1.2"
 
-react-transition-group@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
-  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
+react-transition-group@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"