Visible tweaks

frontend/src/components/MyComponent.js

@@ -31,18 +31,19 @@ class MyComponent extends Component {
   myComponentDidMount() { };
 
   shouldComponentUpdate(nextProps, nextState) {
-    if (this.nextProps && typeof this.nextProps.visible != 'undefined' && !this.nextProps.visible) {
-      // don't rerender components that won't be visible.
-      return false;
-    }
-    if (this.props.visible === false && !this.nextProps) {
-      // don't rerender components if it is still not visible
-      return false;
-    }
-    // if (this.nextProps && typeof this.nextProps.visible != 'undefined' && this.nextProps.visible) {
-    //   // render if nextprops should be visible
-    //   return true;
+    // Below is buggy with redux connect
+    // if (this.nextProps && typeof this.nextProps.visible != 'undefined' && !this.nextProps.visible) {
+    //   // don't rerender components that won't be visible.
+    //   return false;
+    // }
+    // if (this.props.visible === false && !this.nextProps) {
+    //   // don't rerender components if it is still not visible
+    //   return false;
     // }
+    // // if (this.nextProps && typeof this.nextProps.visible != 'undefined' && this.nextProps.visible) {
+    // //   // render if nextprops should be visible
+    // //   return true;
+    // // }
     return this.myShouldComponentUpdate(nextProps, nextState);
   }
   myShouldComponentUpdate(nextProps, nextState) { return true; }

frontend/src/components/shared/VisibilityContext.js

+import React from 'react';
+const VisibilityContext = React.createContext();
+export default VisibilityContext;
\ No newline at end of file

frontend/src/components/university/UniversityTemplate.js

@@ -24,15 +24,19 @@ import PreviousDeparturesTab from './tabs/PreviousDeparturesTab';
 import ScholarshipsTab from './tabs/ScholarshipsTab';
 import MoreTab from './tabs/MoreTab';
 
+import VisibilityContext from '../shared/VisibilityContext';
+
 function TabContainer(props) {
   let style = { padding: 8 * 3 };
   if (props.visible === false) {
     style = { display: 'none' }
   }
   return (
-    <Typography component="div" style={style}>
-      {props.children}
-    </Typography>
+    <VisibilityContext.Provider value={props.visible}>
+      <Typography component="div" style={style}>
+        {props.children}
+      </Typography>
+    </VisibilityContext.Provider>
   );
 }
 

frontend/src/components/university/shared/UnivInfoConsumer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import __pick from 'lodash/pick';
 import UnivContext from '../../shared/UnivContext';
-
+import VisibilityContext from '../../shared/VisibilityContext';
 
 class UnivInfoConsumer extends React.PureComponent {
   render() {
@@ -11,7 +11,15 @@ class UnivInfoConsumer extends React.PureComponent {
       <UnivContext.Consumer>
         {
           value => (
+            // <VisibilityContext.Consumer>
+            //   {
+            //     visible => (
+            //       <this.props.renderAndAddPropsTo {...__pick(value, add)} univId={value.univId} visible={visible} />
+            //     )
+            //   }
+            // </VisibilityContext.Consumer>
             <this.props.renderAndAddPropsTo {...__pick(value, add)} univId={value.univId} />
+
           )
         }
       </UnivContext.Consumer>