fix(socket): save settings correctly and add socket hoc to colorpicker

ph1p · Apr 25, 2020 · 5d2be34 · 5d2be34
1 parent d0f4597
commit 5d2be34
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 44 deletions.
diff --git a/src/assets/css/ui.css b/src/assets/css/ui.css
@@ -19,7 +19,6 @@ body {
 
 ::-webkit-scrollbar-track {
   background-color: transparent;
-  padding-bottom: 20px;
   margin-bottom: 15px;
 }
 

diff --git a/src/components/Chatbar.tsx b/src/components/Chatbar.tsx
@@ -7,7 +7,6 @@ import ColorPicker from './ColorPicker';
 import { ConnectionEnum } from '../shared/interfaces';
 
 interface ChatProps {
-  socket: SocketIOClient.Socket;
   sendMessage: (event: any) => void;
   setTextMessage: (text: string) => void;
   textMessage: string;
@@ -97,7 +96,7 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
               props.selectionIsChecked ? '(optional)' : ''
             }`}
           />
-          <ColorPicker socket={props.socket} />
+          <ColorPicker />
         </ChatInput>
         <SelectionCheckbox
           checked={props.selectionIsChecked}

diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { state, view } from '../shared/state';
 import { colors } from '../shared/constants';
+import { withSocketContext } from '../shared/SocketProvider';
 
 interface Props {
   socket?: SocketIOClient.Socket;
@@ -120,4 +121,4 @@ const Picker = styled.div`
   }
 `;
 
-export default ColorPicker;
+export default withSocketContext(ColorPicker);
diff --git a/src/shared/state.ts b/src/shared/state.ts
@@ -65,17 +65,14 @@ const state = store({
     }
   },
   persistSettings(settings, socket, init) {
-    // save user settings in main
-    sendMainMessage(
-      'save-user-settings',
-      Object.assign({}, state.settings, settings)
-    );
-
     state.settings = {
       ...state.settings,
       ...settings,
     };
 
+    // save user settings in main
+    sendMainMessage('save-user-settings', Object.assign({}, state.settings));
+
     if (settings.url && settings.url !== state.url) {
       // set server URL
       sendMainMessage('set-server-url', settings.url);

diff --git a/src/views/Chat.tsx b/src/views/Chat.tsx
@@ -175,33 +175,36 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
             more
           </MoreButton>
         )}
-
-        <Messages
-          onAnimationEnd={() => setContainerIsHidden(!containerIsHidden)}
-          animationEnabled={animationEnabled}
+        <MessagesContainer
           isSettings={isSettings}
-          ref={state.messagesRef}
-          onWheel={() => {
-            const { current } = state.messagesRef;
-
-            state.disableAutoScroll =
-              current.scrollHeight -
-                (current.scrollTop + current.clientHeight) >
-              0;
-          }}
+          animationEnabled={animationEnabled}
         >
-          {chatState.filteredMessages.map((m, i) => (
-            <Fragment key={i}>
-              <Message data={m} instanceId={state.instanceId} />
-              {(i + 1) % MAX_MESSAGES === 0 &&
-              i + 1 !== chatState.filteredMessages.length ? (
-                <MessageSeperator />
-              ) : (
-                ''
-              )}
-            </Fragment>
-          ))}
-
+          <Messages
+            onAnimationEnd={() => setContainerIsHidden(!containerIsHidden)}
+            animationEnabled={animationEnabled}
+            isSettings={isSettings}
+            ref={state.messagesRef}
+            onWheel={() => {
+              const { current } = state.messagesRef;
+
+              state.disableAutoScroll =
+                current.scrollHeight -
+                  (current.scrollTop + current.clientHeight) >
+                0;
+            }}
+          >
+            {chatState.filteredMessages.map((m, i) => (
+              <Fragment key={i}>
+                <Message data={m} instanceId={state.instanceId} />
+                {(i + 1) % MAX_MESSAGES === 0 &&
+                i + 1 !== chatState.filteredMessages.length ? (
+                  <MessageSeperator />
+                ) : (
+                  ''
+                )}
+              </Fragment>
+            ))}
+          </Messages>
           <SettingsArrow
             isSettings={isSettings}
             onClick={() => {
@@ -231,15 +234,14 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
               </svg>
             )}
           </SettingsArrow>
-        </Messages>
+        </MessagesContainer>
 
         {(isSettings || (!isSettings && !containerIsHidden)) && (
           <SettingsView init={props.init} />
         )}
 
         <Chatbar
           init={props.init}
-          socket={props.socket}
           sendMessage={sendMessage}
           setTextMessage={(text) => (chatState.textMessage = text)}
           textMessage={chatState.textMessage}
@@ -283,8 +285,7 @@ const FloatingButtonRight = styled.div`
 `;
 
 const SettingsArrow = styled.div`
-  position: sticky;
-  left: 0;
+  position: absolute;
   bottom: 0;
   padding-top: 10px;
   padding-bottom: 10px;
@@ -315,7 +316,7 @@ const MessageSeperator = styled.div`
   border-width: 1px 0 0 0;
   border-color: #ececec;
   border-style: dotted;
-  margin: -5px 0 10px;
+  margin: 5px 0 10px;
 `;
 
 const Chat = styled.div`
@@ -324,12 +325,12 @@ const Chat = styled.div`
   background-color: ${({ color }) => color};
 `;
 
-const Messages = styled.div`
+const MessagesContainer = styled.div`
+  /* display: grid;
+  grid-template-rows: auto 26px; */
   position: relative;
   z-index: 2;
   margin: 0;
-  overflow: ${({ isSettings }) => (isSettings ? 'hidden' : 'auto')};
-  padding: 55px 10px 0;
   background-color: #fff;
   border-radius: 0 0 15px 15px;
   transition: transform 0.4s;
@@ -341,6 +342,13 @@ const Messages = styled.div`
     animationEnabled ? 0.2 : 0}s;
 `;
 
+const Messages = styled.div`
+  padding: 55px 10px 0;
+  overflow: ${({ isSettings }) => (isSettings ? 'hidden' : 'auto')};
+  align-self: end;
+  height: 100%;
+`;
+
 const Online = styled.div`
   position: relative;
   padding: 8px 0 8px 24px;

diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
@@ -53,7 +53,7 @@ const SettingsView: FunctionComponent<SettingsProps> = (props) => {
     settings.url = state.settings.url;
     settings.enableNotificationTooltip =
       state.settings.enableNotificationTooltip;
-  }, [settings]);
+  }, [state.settings]);
 
   return (
     <>