Simplify components code

packages/ui/src/FlexOne.js

@@ -13,11 +13,12 @@ const FlexOne = forwardRef(function FlexOne({ children, is, ...props }, ref) {
 });
 
 FlexOne.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   is: PropTypes.elementType,
 };
 
 FlexOne.defaultProps = {
+  children: '',
   is: '',
 };
 

src/components/Chat.js

@@ -1,33 +1,37 @@
-import { memo, useState } from 'react';
+import { memo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { reverse } from 'ramda';
 import Box from 'ui-box';
 import { FlexCol, FlexOne, TextBox, Text, Scroll } from 'ui/es';
 import { Turn } from 'chess/es';
-
-const KeyCode = {
-  enter: 13,
-};
+import { KeyCode } from '~/presets';
 
 const Chat = ({ data, sendMessage }) => {
   // TODO use redux
   const [text, setText] = useState('');
 
+  const handleChange = useCallback((evt) => setText(evt.target.value), []);
+  const handleKeyDown = useCallback(
+    (evt) => {
+      if (evt.keyCode === KeyCode.enter) {
+        sendMessage(text, +new Date());
+        setText('');
+      }
+    },
+    [text, sendMessage]
+  );
+
   return (
     <FlexCol width="100%">
       <FlexOne
         is={TextBox}
-        placeholder="leave message here!"
         padding={5}
         value={text}
-        onChange={(evt) => setText(evt.target.value)}
-        onKeyDown={(evt) => {
-          if (evt.keyCode === KeyCode.enter) {
-            sendMessage(text, +new Date());
-            setText('');
-          }
-        }}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder="leave message here!"
       />
+
       <Scroll is="ul" height={60} margin={10} padding={0} listStyle="none">
         {reverse(data).map(({ side, message }, idx) => {
           // TODO color

src/components/Diagram.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { FlexCol } from 'ui/es';
-import Rank from './internal/Rank';
+import Rank from './diagram/Rank';
 import { DiagramProvider } from '~/hooks';
 
 const Diagram = ({

src/components/Menu.js

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import { Hr } from 'ui/es';
-import SubMenu from './internal/SubMenu';
+import MenuItems from './menu/MenuItems';
 
 const Menu = ({ ingameMenu, mainMenu }) => {
   return (
     <>
-      <SubMenu data={ingameMenu} />
+      <MenuItems data={ingameMenu} />
       <Hr is="p" marginTop={10} marginBottom={10} />
-      <SubMenu data={mainMenu} />
+      <MenuItems data={mainMenu} />
     </>
   );
 };

src/components/NotiBar.js

@@ -1,28 +1,26 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { Flex, FlexOne, FlexRow, Text, Loading } from 'ui/es';
+import { Flex, FlexOne, FlexRow, FlexMiddle, Text, Loading } from 'ui/es';
 import { useTheme } from '~/hooks';
 
 function NotiBar({ turn, connected, awaiting, thinking }) {
   const { border, color } = useTheme();
-  const cs = color.reflect[turn];
+  const cs = color.invert[turn];
   const isAwaiting = connected && awaiting;
   const isTurn = connected && !awaiting;
 
   return (
     <FlexRow borderTop={border}>
-      <Flex
+      <FlexMiddle
         flexBasis={30}
-        alignItems="center"
-        justifyContent="center"
         backgroundColor={cs.bgColor}
         color={cs.color}
         textTransform="uppercase"
         fontWeight="bold"
         borderRight={border}
       >
-        {cs.text}
-      </Flex>
+        {turn.substring(0, 1)}
+      </FlexMiddle>
 
       <FlexOne
         is={Flex}

src/components/PeerId.js

@@ -8,6 +8,7 @@ const PeerId = ({ peerId }) => {
       <Text marginBottom={5} fontWeight="bold" flexBasis={60}>
         Peer Id:
       </Text>
+
       {peerId && (
         <FlexOne is={Text} wordBreak="break-all">
           {peerId}

src/components/Sheet.js

@@ -2,54 +2,31 @@ import { memo } from 'react';
 import PropTypes from 'prop-types';
 import { reverse } from 'ramda';
 import equal from 'fast-deep-equal/es6/react';
-import Box from 'ui-box';
-import { FlexRow, FlexOne, Text, Sticky } from 'ui/es';
 import { useTheme } from '~/hooks';
-import Notation from './internal/Notation';
+import NotationHeader from './sheet/NotationHeader';
+import NotationBody from './sheet/NotationBody';
+import Notation from './sheet/Notation';
 
 const Sheet = ({ data }) => {
-  const { border, color } = useTheme();
+  const { color } = useTheme();
 
   return (
     <>
-      <Sticky borderBottom={border} backgroundColor={color.white}>
-        <FlexRow justifyContent="space-between">
-          {['White', 'Black'].map((side) => {
-            const reColor = color.reflect[side.toLowerCase()];
-
-            return (
-              <FlexOne
-                key={side}
-                textAlign="center"
-                backgroundColor={reColor.bgColor}
-                color={reColor.color}
-                padding={5}
-              >
-                <Text fontWeight="bold">{side}</Text>
-              </FlexOne>
-            );
-          })}
-        </FlexRow>
-      </Sticky>
-
-      <Box>
-        {reverse(data).map(({ white, black }, idx) => {
+      <NotationHeader data={['White', 'Black']} />
+      <NotationBody data={reverse(data)}>
+        {({ white, black }) => {
           return (
-            <FlexRow
-              key={idx}
-              justifyContent="space-between"
-              borderBottom={border}
-            >
+            <>
               <Notation sideData={white} />
               <Notation
                 sideData={black}
                 backgroundColor={color.black}
                 color={color.white}
               />
-            </FlexRow>
+            </>
           );
-        })}
-      </Box>
+        }}
+      </NotationBody>
     </>
   );
 };

src/components/internal/Piece.js → src/components/diagram/Piece.js

@@ -14,7 +14,7 @@ const Piece = ({ pKey, pretendCode }) => {
   const [styles, api] = useSpring(() => {
     let opacity = 1;
 
-    // mostly, it has to be set to opacity = 1,
+    // mostly, it has to be setted as opacity = 1,
     // but when a piece moved, it has to be set to opacity = 0
     // because previous component is removed because of snapshot changed
     // and creating a piece component new (not update),

src/components/internal/SubMenu.js → src/components/menu/MenuItems.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { identity } from 'ramda';
 import { FlexCol, Button } from 'ui/es';
 
-const SubMenu = ({ data }) => {
+const MenuItems = ({ data }) => {
   return (
     <FlexCol gap={10} alignItems="center">
       {data.map(
@@ -23,14 +23,16 @@ const SubMenu = ({ data }) => {
   );
 };
 
-SubMenu.propTypes = {
+MenuItems.propTypes = {
   data: PropTypes.arrayOf(
     PropTypes.shape({
       key: PropTypes.string,
       title: PropTypes.string,
+      onClick: PropTypes.func,
       disabled: PropTypes.bool,
+      children: PropTypes.elementType,
     })
   ).isRequired,
 };
 
-export default SubMenu;
+export default MenuItems;

src/components/sheet/NotationBody.js

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import Box from 'ui-box';
+import { FlexRow } from 'ui/es';
+import { useTheme } from '~/hooks';
+
+const NotationBody = ({ data, children }) => {
+  const { border } = useTheme();
+
+  return (
+    <Box>
+      {data.map((item, idx) => {
+        return (
+          <FlexRow
+            key={idx}
+            justifyContent="space-between"
+            borderBottom={border}
+          >
+            {children(item)}
+          </FlexRow>
+        );
+      })}
+    </Box>
+  );
+};
+
+NotationBody.propTypes = {
+  children: PropTypes.func.isRequired,
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      white: PropTypes.shape({
+        from: PropTypes.arrayOf(PropTypes.string),
+        to: PropTypes.arrayOf(PropTypes.string),
+        check: PropTypes.shape({
+          attackerCode: PropTypes.string,
+          defenders: PropTypes.arrayOf(PropTypes.string),
+          defendTiles: PropTypes.arrayOf(PropTypes.string),
+          dodgeableTiles: PropTypes.arrayOf(PropTypes.string),
+        }),
+      }),
+      black: PropTypes.shape({
+        from: PropTypes.arrayOf(PropTypes.string),
+        to: PropTypes.arrayOf(PropTypes.string),
+        check: PropTypes.shape({
+          attackerCode: PropTypes.string,
+          defenders: PropTypes.arrayOf(PropTypes.string),
+          defendTiles: PropTypes.arrayOf(PropTypes.string),
+          dodgeableTiles: PropTypes.arrayOf(PropTypes.string),
+        }),
+      }),
+    })
+  ),
+};
+
+NotationBody.defaultProps = {
+  sideData: null,
+};
+
+export default NotationBody;

src/components/sheet/NotationHeader.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import { FlexRow, FlexOne, Sticky, Text } from 'ui/es';
+import { useTheme } from '~/hooks';
+
+const NotationHeader = ({ data }) => {
+  const { border, color } = useTheme();
+
+  return (
+    <Sticky borderBottom={border} backgroundColor={color.white}>
+      <FlexRow justifyContent="space-between">
+        {data.map((side) => {
+          const reColor = color.invert[side.toLowerCase()];
+
+          return (
+            <FlexOne
+              key={side}
+              textAlign="center"
+              backgroundColor={reColor.bgColor}
+              color={reColor.color}
+              padding={5}
+            >
+              <Text fontWeight="bold">{side}</Text>
+            </FlexOne>
+          );
+        })}
+      </FlexRow>
+    </Sticky>
+  );
+};
+
+NotationHeader.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.oneOf(['White', 'Black'])).isRequired,
+};
+
+NotationHeader.defaultProps = {};
+
+export default NotationHeader;

src/hooks/useTheme.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { Turn, Side } from 'chess/es';
+import { Turn } from 'chess/es';
 
 const ColorSet = {
   white: '#fff',
@@ -10,17 +10,15 @@ const ColorSet = {
   gray2: '#ccc',
   gray3: '#cacaca',
   gray4: '#aaa',
-  reflect: {
-    // TODO remove text
+  // TODO https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
+  invert: {
     [Turn.w]: {
       bgColor: '#fff',
       color: '#000',
-      text: Side[Turn.w],
     },
     [Turn.b]: {
       bgColor: '#000',
       color: '#fff',
-      text: Side[Turn.b],
     },
   },
 };

src/presets/index.js

@@ -1,3 +1,7 @@
 export * from './env';
 export * from './menuKeys';
 export * from './storageKeys';
+
+export const KeyCode = {
+  enter: 13,
+};