Refactor user list

src/components/users/UserConfig.js

@@ -1,73 +1,77 @@
 import React from "react";
-import { BlockPicker } from "react-color";
+import { SketchPicker } from "react-color";
 
 import styled from "styled-components";
 
+import Modal from "../../ui/Modal";
+
 const UserColor = styled.div`
   background-color: ${({ color }) => color};
   width: 30px;
   height: 30px;
   margin: 2px;
   margin-right: 0.5em;
+  border-radius: 100%;
   text-align: center;
   line-height: 30px;
-  cursor: ${({ editable }) => (editable ? "pointer" : "auto")};
+  cursor: ${({ editable }) => (editable ? "pointer" : "default")};
 `;
 
-const ColorPickerWrapper = styled.div`
-  position: absolute;
-  top: 45px;
-  left: -68px;
-  z-index: 1000;
-`;
-
-const StyledInputName = styled.input.attrs(() => ({ className: "uk-input" }))`
+const StyledInputName = styled.input`
   width: 7em;
 `;
 
-const StyledName = styled.span`
-  padding-left: 0.5em;
-`;
+const emptyStyle = {};
+const emptyColors = [];
 
 const UserConfig = ({ user, setUser, editable, index }) => {
   const [name, setName] = React.useState(user.name);
-  const [showPicker, setShowPicker] = React.useState(false);
+  const [color, setColor] = React.useState(user.color);
+  const [showDetails, setShowDetails] = React.useState(false);
 
-  const handleChange = (e) => {
-    setName(e.target.value);
-    setUser({ ...user, name: e.target.value });
-  };
+  const handleChange = React.useCallback(
+    (e) => {
+      setName(e.target.value);
+      setUser((prevUser) => ({ ...prevUser, name: e.target.value }));
+    },
+    [setUser]
+  );
 
-  const handleChangecolor = (newColor) => {
-    setUser({ ...user, color: newColor.hex });
-    setShowPicker(false);
-  };
+  const handleChangecolor = React.useCallback((newColor) => {
+    setColor(newColor.hex);
+  }, []);
 
-  const showColorPicker = () => {
-    if (editable) {
-      setShowPicker((prev) => !prev);
-    }
-  };
+  const handleChangecolorComplete = React.useCallback(
+    (newColor) => {
+      setColor(newColor.hex);
+      setUser((prevUser) => ({ ...prevUser, color: newColor.hex }));
+    },
+    [setUser]
+  );
 
   return (
     <>
       <UserColor
         color={user.color}
         editable={editable}
-        onClick={showColorPicker}
+        onClick={() => setShowDetails(true)}
+        title={user.name}
       >
-        {index}
+        {user.name ? user.name[0] : index}
+        {editable ? "*" : ""}
       </UserColor>
-      {showPicker && (
-        <ColorPickerWrapper>
-          <BlockPicker
-            color={user.color}
-            onChangeComplete={handleChangecolor}
-          />
-        </ColorPickerWrapper>
-      )}
-      {editable && <StyledInputName value={name} onChange={handleChange} />}
-      {!editable && <StyledName>{user.name}</StyledName>}
+      <Modal title={"User details"} show={showDetails} setShow={setShowDetails}>
+        <StyledInputName value={name} onChange={handleChange} />
+        <SketchPicker
+          disableAlpha
+          presetColors={emptyColors}
+          color={color}
+          onChange={handleChangecolor}
+          onChangeComplete={handleChangecolorComplete}
+          styles={emptyStyle}
+          width={160}
+        />
+      </Modal>
     </>
   );
 };

src/components/users/UserList.js

@@ -5,19 +5,13 @@ import useUsers from "./useUsers";
 import styled from "styled-components";
 
 const UserList = styled.ul.attrs(() => ({ className: "uk-card" }))`
-  position: absolute;
-  right: 0;
-  top: 4em;
-  background-color: #ffffff40;
-  padding: 0.2em;
   list-style: none;
   margin: 0;
-  z-index: 1;
+  display: flex;
 `;
 
 const UserListItem = styled.li`
   display: flex;
-  position: relative;
   align-items: center;
 `;
 

src/components/users/useUsers.js

@@ -7,9 +7,16 @@ const useUsers = () => {
   const users = useRecoilValue(usersAtom);
 
   const setCurrentUser = React.useCallback(
-    (newUser) => {
-      setCurrentUserState((prevUser) => ({ ...newUser, id: prevUser.id }));
-      persistUser(newUser);
+    (callbackOrUser) => {
+      let callback = callbackOrUser;
+      if (typeof callbackOrUser === "object") {
+        callback = () => callbackOrUser;
+      }
+      setCurrentUserState((prevUser) => {
+        const newUser = { ...callback(prevUser), id: prevUser.id };
+        persistUser(newUser);
+        return newUser;
+      });
     },
     [setCurrentUserState]
   );

src/ui/Modal.js

@@ -2,7 +2,9 @@ import React from "react";
 
 import styled from "styled-components";
 
-const StyledModal = styled.div`
+import { hasClass } from "../utils";
+
+const StyledModal = styled.div.attrs(() => ({ className: "overlay" }))`
   position: fixed;
   z-index: 20;
   left: 0;
@@ -37,17 +39,11 @@ export const Modal = ({ setShow, show, children, footer, title }) => {
 
   return (
     <StyledModal
-      onClick={() => {
-        setShow(false);
+      onClick={(e) => {
+        if (hasClass(e.target, "overlay")) setShow(false);
       }}
     >
       <div className="modal-content">
-        <div
-          className="overlay"
-          onClick={() => {
-            setShow(false);
-          }}
-        ></div>
         <article>
           <header>
             <h3 className="title">{title}</h3>

src/views/BoardView.js

@@ -33,19 +33,17 @@ export const BoardView = ({ namespace, edit: editMode = false }) => {
   const [showWelcomeModal, setShowWelcomeModal] = React.useState(
     SHOW_WELCOME && !editMode
   );
-  const [edit, setEdit] = React.useState(editMode);
 
   const { gameLoaded } = useGame();
 
   return (
     <StyledBoardView>
-      <NavBar setEditMode={setEdit} edit={edit} />
+      <NavBar editMode={editMode} />
       <WelcomeModal show={showWelcomeModal} setShow={setShowWelcomeModal} />
       <SubscribeUserEvents />
       <AutoSave />
       {gameLoaded && (
         <BoardContainer>
-          {!editMode && <UserList />}
           <ImageDropNPaste namespace={namespace}>
             <Board
               user={currentUser}
@@ -53,7 +51,7 @@ export const BoardView = ({ namespace, edit: editMode = false }) => {
               getComponent={getComponent}
             />
           </ImageDropNPaste>
-          <SelectedItemsPane edit={edit} />
+          <SelectedItemsPane />
         </BoardContainer>
       )}
       <AddItemButton />

src/views/NavBar.js

@@ -1,13 +1,12 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import { useTranslation } from "react-i18next";
-
 import styled from "styled-components";
 
 import HelpModal from "../views/HelpModal";
 import InfoModal from "../views/InfoModal";
 import LoadSaveModal from "../views/LoadSaveModal";
+import { UserList } from "../components/users";
 
 import logo from "../images/logo.png";
 
@@ -20,9 +19,7 @@ const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))`
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 `;
 
-const NavBar = () => {
-  const { t } = useTranslation();
-
+const NavBar = ({ editMode }) => {
   const [showLoadGameModal, setShowLoadGameModal] = React.useState(false);
   const [showHelpModal, setShowHelpModal] = React.useState(false);
   const [showInfoModal, setShowInfoModal] = React.useState(false);
@@ -53,6 +50,7 @@ const NavBar = () => {
         </div>
 
         <div className="nav-right">
+          {!editMode && <UserList />}
           <a
             className="button clear icon-only"
             onClick={() => setShowHelpModal((prev) => !prev)}