Merge branch 'production'

src/components/CanvasItem.jsx

@@ -4,39 +4,20 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
 import { t } from 'ttag';
 
 import { THREE_CANVAS_HEIGHT } from '../core/constants';
-import { selectCanvas } from '../actions';
 
 
-const buttonStyle = {
-  marginTop: 8,
-  marginBottom: 8,
-  border: '#c5c5c5',
-  borderStyle: 'solid',
-  borderRadius: 8,
-  cursor: 'pointer',
-};
-
-const imageStyle = {
-  maxWidth: '20%',
-  opacity: 0.3,
-  padding: 2,
-  display: 'inline-block',
-  verticalAlign: 'middle',
-};
-
-const CanvasItem = ({ canvasId, canvas, changeCanvas }) => (
+const CanvasItem = ({ canvasId, canvas, selCanvas }) => (
   <div
-    style={buttonStyle}
-    onClick={() => { changeCanvas(canvasId); }}
+    className="cvbtn"
+    onClick={() => selCanvas(canvasId)}
     role="button"
     tabIndex={0}
   >
     <img
-      style={imageStyle}
+      className="cvimg"
       alt="preview"
       src={`/preview${canvasId}.png`}
     />
@@ -71,12 +52,4 @@ const CanvasItem = ({ canvasId, canvas, changeCanvas }) => (
   </div>
 );
 
-function mapDispatchToProps(dispatch) {
-  return {
-    changeCanvas(canvasId) {
-      dispatch(selectCanvas(canvasId));
-    },
-  };
-}
-
-export default connect(null, mapDispatchToProps)(CanvasItem);
+export default React.memo(CanvasItem);

src/components/DailyRankings.jsx

@@ -4,38 +4,37 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 
-import type { State } from '../reducers';
+const DailyRankings = () => {
+  const totalDailyRanking = useSelector(
+    (state) => state.ranks.totalDailyRanking,
+  );
 
-const DailyRankings = ({ totalDailyRanking }) => (
-  <div style={{ overflowY: 'auto', display: 'inline-block' }}>
-    <table>
-      <tr>
-        <th>#</th>
-        <th>user</th>
-        <th>Pixels</th>
-        <th># Total</th>
-        <th>Total Pixels</th>
-      </tr>
-      {
-        totalDailyRanking.map((rank) => (
-          <tr>
-            <td>{rank.dailyRanking}</td>
-            <td>{rank.name}</td>
-            <td>{rank.dailyTotalPixels}</td>
-            <td>{rank.ranking}</td>
-            <td>{rank.totalPixels}</td>
-          </tr>
-        ))
-      }
-    </table>
-  </div>
-);
+  return (
+    <div style={{ overflowY: 'auto', display: 'inline-block' }}>
+      <table>
+        <tr>
+          <th>#</th>
+          <th>user</th>
+          <th>Pixels</th>
+          <th># Total</th>
+          <th>Total Pixels</th>
+        </tr>
+        {
+          totalDailyRanking.map((rank) => (
+            <tr>
+              <td>{rank.dailyRanking}</td>
+              <td>{rank.name}</td>
+              <td>{rank.dailyTotalPixels}</td>
+              <td>{rank.ranking}</td>
+              <td>{rank.totalPixels}</td>
+            </tr>
+          ))
+        }
+      </table>
+    </div>
+  );
+};
 
-function mapStateToProps(state: State) {
-  const { totalDailyRanking } = state.ranks;
-  return { totalDailyRanking };
-}
-
-export default connect(mapStateToProps)(DailyRankings);
+export default React.memo(DailyRankings);

src/components/Menu.jsx

@@ -5,17 +5,16 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import HelpButton from './buttons/HelpButton';
 import SettingsButton from './buttons/SettingsButton';
 import LogInButton from './buttons/LogInButton';
 import DownloadButton from './buttons/DownloadButton';
 
-function Menu({
-  menuOpen,
-}) {
+const Menu = () => {
   const [render, setRender] = useState(false);
+  const menuOpen = useSelector((state) => state.gui.menuOpen);
 
   useEffect(() => {
     window.setTimeout(() => {
@@ -40,11 +39,6 @@ function Menu({
       </div>
     )
   );
-}
+};
 
-function mapStateToProps(state: State) {
-  const { menuOpen } = state.gui;
-  return { menuOpen };
-}
-
-export default connect(mapStateToProps)(Menu);
+export default React.memo(Menu);

src/components/NotifyBox.jsx

@@ -3,42 +3,34 @@
  * @flow
  */
 
-import React, { useState } from 'react';
-import { connect } from 'react-redux';
-
-import type { State } from '../reducers';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 
 
-const NotifyBox = ({ notification }) => {
+const NotifyBox = () => {
   const [className, setClassName] = useState('notifybox');
-  const [value, setValue] = useState(notification);
+  const notification = useSelector((state) => state.user.notification);
 
-  if (notification) {
-    let newClassName = 'notifybox';
-    if (notification && typeof notification !== 'string') {
-      if (notification > 0) newClassName += ' green';
-      else newClassName += ' red';
+  useEffect(() => {
+    if (notification) {
+      let newClassName = 'notifybox';
+      if (notification && typeof notification !== 'string') {
+        if (notification > 0) newClassName += ' green';
+        else newClassName += ' red';
+      }
+      if (newClassName !== className) {
+        setClassName(newClassName);
+      }
     }
-    if (newClassName !== className) {
-      setClassName(newClassName);
-    }
-    if (notification !== value) {
-      setValue(notification);
-    }
-  }
+  }, [notification]);
 
   return (
     <div
       className={(notification) ? `${className} show` : className}
     >
-      {value}
+      {notification}
     </div>
   );
 };
 
-function mapStateToProps(state: State) {
-  const { notification } = state.user;
-  return { notification };
-}
-
-export default connect(mapStateToProps)(NotifyBox);
+export default React.memo(NotifyBox);

src/components/TotalRankings.jsx

@@ -4,38 +4,35 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 
-import type { State } from '../reducers';
+const TotalRankings = () => {
+  const totalRanking = useSelector((state) => state.ranks.totalRanking);
 
-const TotalRankings = ({ totalRanking }) => (
-  <div style={{ overflowY: 'auto', display: 'inline-block' }}>
-    <table>
-      <tr>
-        <th>#</th>
-        <th>user</th>
-        <th>Pixels</th>
-        <th># Today</th>
-        <th>Pixels Today</th>
-      </tr>
-      {
-        totalRanking.map((rank) => (
-          <tr>
-            <td>{rank.ranking}</td>
-            <td>{rank.name}</td>
-            <td>{rank.totalPixels}</td>
-            <td>{rank.dailyRanking}</td>
-            <td>{rank.dailyTotalPixels}</td>
-          </tr>
-        ))
-      }
-    </table>
-  </div>
-);
+  return (
+    <div style={{ overflowY: 'auto', display: 'inline-block' }}>
+      <table>
+        <tr>
+          <th>#</th>
+          <th>user</th>
+          <th>Pixels</th>
+          <th># Today</th>
+          <th>Pixels Today</th>
+        </tr>
+        {
+          totalRanking.map((rank) => (
+            <tr>
+              <td>{rank.ranking}</td>
+              <td>{rank.name}</td>
+              <td>{rank.totalPixels}</td>
+              <td>{rank.dailyRanking}</td>
+              <td>{rank.dailyTotalPixels}</td>
+            </tr>
+          ))
+        }
+      </table>
+    </div>
+  );
+};
 
-function mapStateToProps(state: State) {
-  const { totalRanking } = state.ranks;
-  return { totalRanking };
-}
-
-export default connect(mapStateToProps)(TotalRankings);
+export default React.memo(TotalRankings);

src/components/buttons/CanvasSwitchButton.jsx

@@ -4,33 +4,28 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { FaGlobe } from 'react-icons/fa';
 import { t } from 'ttag';
 
 import { showCanvasSelectionModal } from '../../actions';
 
 
-const CanvasSwitchButton = ({ open }) => (
-  <div
-    id="canvasbutton"
-    className="actionbuttons"
-    onClick={open}
-    role="button"
-    title={t`Canvas Selection`}
-    tabIndex={-1}
-  >
-    <FaGlobe />
-  </div>
-);
+const CanvasSwitchButton = () => {
+  const dispatch = useDispatch();
 
-function mapDispatchToProps(dispatch) {
-  return {
-    open() {
-      dispatch(showCanvasSelectionModal());
-    },
-  };
-}
+  return (
+    <div
+      id="canvasbutton"
+      className="actionbuttons"
+      onClick={() => dispatch(showCanvasSelectionModal())}
+      role="button"
+      title={t`Canvas Selection`}
+      tabIndex={-1}
+    >
+      <FaGlobe />
+    </div>
+  );
+};
 
-export default connect(null,
-  mapDispatchToProps)(CanvasSwitchButton);
+export default React.memo(CanvasSwitchButton);

src/components/buttons/ExpandMenuButton.jsx

@@ -5,36 +5,28 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { MdExpandMore, MdExpandLess } from 'react-icons/md';
 import { t } from 'ttag';
 
 import { toggleOpenMenu } from '../../actions';
 
-const ExpandMenuButton = ({ menuOpen, expand }) => (
-  <div
-    id="menubutton"
-    className="actionbuttons"
-    role="button"
-    title={(menuOpen) ? t`Close Menu` : t`Open Menu`}
-    tabIndex={-1}
-    onClick={expand}
-  >
-    {(menuOpen) ? <MdExpandLess /> : <MdExpandMore /> }
-  </div>
-);
+const ExpandMenuButton = () => {
+  const menuOpen = useSelector((state) => state.gui.menuOpen);
+  const dispatch = useDispatch();
 
-function mapStateToProps(state: State) {
-  const { menuOpen } = state.gui;
-  return { menuOpen };
-}
+  return (
+    <div
+      id="menubutton"
+      className="actionbuttons"
+      role="button"
+      title={(menuOpen) ? t`Close Menu` : t`Open Menu`}
+      tabIndex={-1}
+      onClick={() => dispatch(toggleOpenMenu())}
+    >
+      {(menuOpen) ? <MdExpandLess /> : <MdExpandMore /> }
+    </div>
+  );
+};
 
-function mapDispatchToProps(dispatch) {
-  return {
-    expand() {
-      dispatch(toggleOpenMenu());
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ExpandMenuButton);
+export default React.memo(ExpandMenuButton);

src/components/buttons/HelpButton.jsx

@@ -4,33 +4,28 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { FaQuestion } from 'react-icons/fa';
 import { t } from 'ttag';
 
 import { showHelpModal } from '../../actions';
 
 
-const HelpButton = ({ open }) => (
-  <div
-    id="helpbutton"
-    className="actionbuttons"
-    onClick={open}
-    role="button"
-    title={t`Help`}
-    tabIndex={-1}
-  >
-    <FaQuestion />
-  </div>
-);
+const HelpButton = () => {
+  const dispatch = useDispatch();
 
+  return (
+    <div
+      id="helpbutton"
+      className="actionbuttons"
+      onClick={() => dispatch(showHelpModal())}
+      role="button"
+      title={t`Help`}
+      tabIndex={-1}
+    >
+      <FaQuestion />
+    </div>
+  );
+};
 
-function mapDispatchToProps(dispatch) {
-  return {
-    open() {
-      dispatch(showHelpModal());
-    },
-  };
-}
-
-export default connect(null, mapDispatchToProps)(HelpButton);
+export default React.memo(HelpButton);

src/components/buttons/LogInButton.jsx

@@ -4,32 +4,28 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { MdPerson } from 'react-icons/md';
 import { t } from 'ttag';
 
 import { showUserAreaModal } from '../../actions';
 
 
-const LogInButton = ({ open }) => (
-  <div
-    id="loginbutton"
-    className="actionbuttons"
-    onClick={open}
-    role="button"
-    title={t`User Area`}
-    tabIndex={-1}
-  >
-    <MdPerson />
-  </div>
-);
+const LogInButton = () => {
+  const dispatch = useDispatch();
 
-function mapDispatchToProps(dispatch) {
-  return {
-    open() {
-      dispatch(showUserAreaModal());
-    },
-  };
-}
+  return (
+    <div
+      id="loginbutton"
+      className="actionbuttons"
+      onClick={() => dispatch(showUserAreaModal())}
+      role="button"
+      title={t`User Area`}
+      tabIndex={-1}
+    >
+      <MdPerson />
+    </div>
+  );
+};
 
-export default connect(null, mapDispatchToProps)(LogInButton);
+export default React.memo(LogInButton);

src/components/buttons/SettingsButton.jsx

@@ -4,32 +4,28 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { FaCog } from 'react-icons/fa';
 import { t } from 'ttag';
 
 import { showSettingsModal } from '../../actions';
 
 
-const SettingsButton = ({ open }) => (
-  <div
-    id="settingsbutton"
-    className="actionbuttons"
-    onClick={open}
-    role="button"
-    title={t`Settings`}
-    tabIndex={-1}
-  >
-    <FaCog />
-  </div>
-);
+const SettingsButton = () => {
+  const dispatch = useDispatch();
 
-function mapDispatchToProps(dispatch) {
-  return {
-    open() {
-      dispatch(showSettingsModal());
-    },
-  };
-}
+  return (
+    <div
+      id="settingsbutton"
+      className="actionbuttons"
+      onClick={() => dispatch(showSettingsModal())}
+      role="button"
+      title={t`Settings`}
+      tabIndex={-1}
+    >
+      <FaCog />
+    </div>
+  );
+};
 
-export default connect(null, mapDispatchToProps)(SettingsButton);
+export default React.memo(SettingsButton);

src/components/windows/CanvasSelect.jsx

@@ -3,12 +3,12 @@
  * @flow
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { t } from 'ttag';
 
 import CanvasItem from '../CanvasItem';
-import { changeWindowType } from '../../actions';
+import { changeWindowType, selectCanvas } from '../../actions';
 
 
 const CanvasSelect = ({ windowId }) => {
@@ -17,6 +17,8 @@ const CanvasSelect = ({ windowId }) => {
     state.canvas.showHiddenCanvases,
   ], shallowEqual);
   const dispatch = useDispatch();
+  const selCanvas = useCallback((canvasId) => dispatch(selectCanvas(canvasId)),
+    [dispatch]);
 
   return (
     <p style={{
@@ -39,9 +41,14 @@ const CanvasSelect = ({ windowId }) => {
       </p>
       {
           Object.keys(canvases).map((canvasId) => (
-            (canvases[canvasId].hid && !showHiddenCanvases)
-              ? null
-              : <CanvasItem canvasId={canvasId} canvas={canvases[canvasId]} />
+            (!canvases[canvasId].hid || showHiddenCanvases)
+              && (
+                <CanvasItem
+                  canvasId={canvasId}
+                  canvas={canvases[canvasId]}
+                  selCanvas={selCanvas}
+                />
+              )
           ))
         }
     </p>

src/styles/default.css

@@ -246,6 +246,27 @@ tr:nth-child(even) {
   color: #212121;
 }
 
+.cvbtn {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  border: #c5c5c5;
+  border-style: solid;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.cvbtn:hover {
+  background: #c2bebc26;
+}
+
+.cvimg {
+  max-width: 20%;
+  opacity: 0.3;
+  padding: 2;
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .channeldd {
   background-color: rgba(226, 226, 226);
   color: #212121;