change info / combos back to functional components with passed down props

client/src/components/vbox.combos.jsx

@@ -1,29 +1,14 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
 
 const { convertItem } = require('../utils');
 
-const addState = connect(({ info, itemInfo, instance, tutorial, vboxInfo }) =>
+function Combos(props) {
-    ({ info, itemInfo, instance, tutorial, vboxInfo }));
-
-
-class Combos extends preact.Component {
-    shouldComponentUpdate(newProps) {
-        if (newProps.info !== this.props.info) return true;
-        if (newProps.tutorial !== this.props.tutorial) return true;
-        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
-        return false;
-    }
-
-    render(props) {
     const {
-            // Variables that will change
         info,
+        instance,
+        itemInfo,
         tutorial,
         vboxInfo,
-            // Static
-            itemInfo,
-            instance, // Only used for tutorial check
     } = props;
 
     if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
@@ -34,7 +19,8 @@ class Combos extends preact.Component {
     const comboTable = vboxCombos.map((c, i) => {
         const mouseOver = e => {
             e.stopPropagation();
-                this.setState({ comboItem: c.item });
+            // this.setState({ comboItem: c.item });
+            // set comboInfo state here
         };
         const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
             ? [<div key="0">{convertItem(c.components[0])}&nbsp;{convertItem(c.components[1])}</div>,
@@ -55,12 +41,11 @@ class Combos extends preact.Component {
                 <h2>COMBOS</h2>
                 Combine colours and items.
             </div>
-                <div class="combo-list">
+            <div class="combo-list" onClick={e => e.stopPropagation()}>
                 {comboTable}
             </div>
         </div>
     );
 }
-}
 
-module.exports = addState(Combos);
+module.exports = Combos;

client/src/components/vbox.component.jsx

@@ -4,8 +4,8 @@ const { connect } = require('preact-redux');
 const actions = require('../actions');
 
 const InfoContainer = require('./vbox.info');
-const StashElement = require('./vbox.stash');
+const { StashHdr, StashElement } = require('./vbox.stash');
-const StoreElement = require('./vbox.store');
+const { StoreHdr, StoreElement } = require('./vbox.store');
 const Combiner = require('./vbox.combiner');
 const Combos = require('./vbox.combos');
 
@@ -28,6 +28,10 @@ const addState = connect(
             vboxSelected,
         } = state;
 
+        function clearTutorial() {
+            return ws.clearTutorial(instance.id);
+        }
+
         function sendVboxDiscard() {
             return ws.sendVboxDiscard(instance.id);
         }
@@ -64,6 +68,7 @@ const addState = connect(
             vboxInfo,
             vboxSelected,
 
+            clearTutorial,
             sendVboxAccept,
             sendVboxCombine,
             sendVboxDiscard,
@@ -105,15 +110,18 @@ class Vbox extends preact.Component {
         const {
             // Changing state variables
             itemUnequip,
+            info,
+            instance,
             player,
             tutorial,
-            instance,
             vboxCombiner,
             vboxHighlight,
+            vboxInfo,
             vboxSelected,
             // Static
             itemInfo,
             // Function Calls
+            clearTutorial,
             dispatchVboxSelect,
             sendItemUnequip,
             sendVboxAccept,
@@ -140,67 +148,16 @@ class Vbox extends preact.Component {
             return true;
         }
 
-        function storeHdr() {
-            return (
-                <div class="store-hdr">
-                    <h2
-                        onTouchStart={e => e.target.scrollIntoView(true)}
-                        onMouseOver={e => vboxHover(e, 'store')}> STORE
-                    </h2>
-                    <h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
-                        {vbox.bits}b
-                    </h1>
-                    <button
-                        class='vbox-btn'
-                        onMouseOver={e => vboxHover(e, 'refill')}
-                        disabled={vbox.bits < 2
-                            || (tutorial && tutorial < 7
-                            && instance.time_control === 'Practice' && instance.rounds.length === 1)
-                        }
-                        onClick={e => e.stopPropagation()}
-                        onMouseDown={() => sendVboxDiscard()}>
-                        refill <br />
-                        2b
-                    </button>
-                </div>
-            );
-        }
-
-        function stashHdr() {
-            const refund = storeSelect.length === 0 && stashSelect.length === 1
-                ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
-                : 0;
-            const tutorialDisabled = tutorial && tutorial < 8
-                && instance.time_control === 'Practice' && instance.rounds.length === 1;
-            const refundBtn = (
-                <button
-                    disabled={tutorialDisabled || !refund}
-                    class='vbox-btn'
-                    onClick={e => e.stopPropagation()}
-                    onMouseDown={e => {
-                        e.stopPropagation();
-                        sendVboxReclaim(vboxSelected.stashSelect[0]);
-                    }}>
-                    refund <br />
-                    {refund}b
-                </button>
-            );
-
-            return (
-                <div class='stash-hdr'>
-                    <h2 onTouchStart={e => e.target.scrollIntoView(true)}
-                        onMouseOver={e => vboxHover(e, 'stash')}> STASH
-                    </h2>
-                    {refundBtn}
-                </div>
-            );
-        }
-
         // EVERYTHING
         return (
             <div class='vbox'>
-                {storeHdr()}
+                <StoreHdr
-                {stashHdr()}
+                    instance={instance}
+                    tutorial={tutorial}
+                    sendVboxDiscard={sendVboxDiscard}
+                    vbox={vbox}
+                    vboxHover={vboxHover}
+                />
                 <StoreElement
                     clearVboxSelected = {clearVboxSelected}
                     setInfo = {setInfo}
@@ -211,6 +168,15 @@ class Vbox extends preact.Component {
                     vboxHighlight = {vboxHighlight}
                     vboxHover = {vboxHover}
                 />
+                <StashHdr
+                    instance={instance}
+                    itemInfo={itemInfo}
+                    sendVboxReclaim={sendVboxReclaim}
+                    tutorial={tutorial}
+                    vbox={vbox}
+                    vboxHover={vboxHover}
+                    vboxSelected={vboxSelected}
+                />
                 <StashElement
                     itemUnequip = {itemUnequip}
                     stashSelect = {stashSelect}
@@ -224,7 +190,15 @@ class Vbox extends preact.Component {
                     vboxHover = {vboxHover}
                 />
                 <div class='info-combiner'>
-                    <InfoContainer />
+                    <InfoContainer
+                        clearTutorial={clearTutorial}
+                        info={info}
+                        instance={instance}
+                        itemInfo={itemInfo}
+                        player={player}
+                        tutorial={tutorial}
+                        vboxInfo={vboxInfo}
+                    />
                     <Combiner
                         vbox={vbox}
                         vboxCombiner={vboxCombiner}
@@ -233,7 +207,13 @@ class Vbox extends preact.Component {
                         sendVboxCombine={sendVboxCombine}
                     />
                 </div>
-                <Combos />
+                <Combos
+                    info={info}
+                    instance={instance}
+                    itemInfo={itemInfo}
+                    tutorial={tutorial}
+                    vboxInfo={vboxInfo}
+                />
             </div>
         );
     }

client/src/components/vbox.info.jsx

@@ -1,22 +1,8 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
 const { tutorialStage } = require('../tutorial.utils');
 const { genItemInfo } = require('./vbox.utils');
 
-const addState = connect(({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }) =>
+function Info(props) {
-    ({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }));
-
-class Info extends preact.Component {
-    shouldComponentUpdate(newProps) {
-        // Single variable props
-        if (newProps.info !== this.props.info) return true;
-        if (newProps.player !== this.props.player) return true;
-        if (newProps.tutorial !== this.props.tutorial) return true;
-        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
-        return false;
-    }
-
-    render(props) {
     const {
         // Variables that will change
         info,
@@ -24,13 +10,13 @@ class Info extends preact.Component {
         tutorial,
         vboxInfo,
         // Static
-            ws,
+        clearTutorial,
         itemInfo,
         instance,
     } = props;
 
     if (tutorial) {
-            const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
+        const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
         if (tutorialStageInfo) return tutorialStageInfo;
     }
 
@@ -65,6 +51,5 @@ class Info extends preact.Component {
 
     return genItemInfo(info, itemInfo, player, info);
 }
-}
 
-module.exports = addState(Info);
+module.exports = Info;

client/src/components/vbox.stash.jsx

@@ -6,6 +6,46 @@ const shapes = require('./shapes');
 const buttons = require('./buttons');
 const { removeTier } = require('../utils');
 
+function stashHdr(props) {
+    const {
+        instance,
+        itemInfo,
+        sendVboxReclaim,
+        tutorial,
+        vbox,
+        vboxHover,
+        vboxSelected,
+    } = props;
+    const { storeSelect, stashSelect } = vboxSelected;
+    const refund = storeSelect.length === 0 && stashSelect.length === 1
+        ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
+        : 0;
+    const tutorialDisabled = tutorial && tutorial < 8
+        && instance.time_control === 'Practice' && instance.rounds.length === 1;
+    const refundBtn = (
+        <button
+            disabled={tutorialDisabled || !refund}
+            class='vbox-btn'
+            onClick={e => e.stopPropagation()}
+            onMouseDown={e => {
+                e.stopPropagation();
+                sendVboxReclaim(vboxSelected.stashSelect[0]);
+            }}>
+            refund <br />
+            {refund}b
+        </button>
+    );
+
+    return (
+        <div class='stash-hdr'>
+            <h2 onTouchStart={e => e.target.scrollIntoView(true)}
+                onMouseOver={e => vboxHover(e, 'stash')}> STASH
+            </h2>
+            {refundBtn}
+        </div>
+    );
+}
+
 function stashElement(props) {
     const {
         itemUnequip,
@@ -105,4 +145,4 @@ function stashElement(props) {
     );
 }
 
-module.exports = stashElement;
+module.exports = { stashHdr, stashElement };

client/src/components/vbox.store.jsx

@@ -3,6 +3,40 @@ const range = require('lodash/range');
 
 const shapes = require('./shapes');
 
+function storeHdr(props) {
+    const {
+        instance,
+        tutorial,
+        sendVboxDiscard,
+        vbox,
+        vboxHover,
+    } = props;
+
+    return (
+        <div class="store-hdr">
+            <h2
+                onTouchStart={e => e.target.scrollIntoView(true)}
+                onMouseOver={e => vboxHover(e, 'store')}> STORE
+            </h2>
+            <h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
+                {vbox.bits}b
+            </h1>
+            <button
+                class='vbox-btn'
+                onMouseOver={e => vboxHover(e, 'refill')}
+                disabled={vbox.bits < 2
+                    || (tutorial && tutorial < 7
+                    && instance.time_control === 'Practice' && instance.rounds.length === 1)
+                }
+                onClick={e => e.stopPropagation()}
+                onMouseDown={() => sendVboxDiscard()}>
+                refill <br />
+                2b
+            </button>
+        </div>
+    );
+}
+
 
 function storeElement(props) {
     const {
@@ -75,4 +109,4 @@ function storeElement(props) {
     );
 }
 
-module.exports = storeElement;
+module.exports = { storeHdr, storeElement };

client/src/tutorial.utils.jsx

@@ -97,10 +97,10 @@ function tutorialVbox(player, store, tutorial) {
     store.dispatch(actions.setTutorial(stage));
 }
 
-function tutorialStage(tutorial, ws, instance) {
+function tutorialStage(tutorial, clearTutorial, instance) {
     if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false;
 
-    const exit = () => ws.clearTutorial(instance.id);
+    const exit = () => clearTutorial();
 
     const tutorialText = () => {
         if (tutorial === 1) {