feat(notifications): update design and positioning

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

Hide file tree

Showing 6 changed files with 82 additions and 38 deletions.
diff --git a/src/Ui.tsx b/src/Ui.tsx
@@ -54,16 +54,16 @@ const AppWrapper = styled.div`
 
 let socket: SocketIOClient.Socket;
 
-const init = (serverUrl) => {
-  state.url = serverUrl;
+const initSocketConnection = function (url) {
   state.status = ConnectionEnum.NONE;
+  state.settings.url = url;
 
-  if(socket) {
+  if (socket) {
     socket.removeAllListeners();
     socket.disconnect();
   }
 
-  socket = io(serverUrl, {
+  socket = io(url, {
     reconnectionAttempts: 3,
     forceNew: true,
     transports: ['websocket'],
@@ -106,6 +106,10 @@ const init = (serverUrl) => {
   socket.on('online', (data) => (state.online = data));
 
   sendMainMessage('get-root-data');
+};
+
+const init = (serverUrl) => {
+  initSocketConnection(serverUrl);
 
   // check focus
   window.addEventListener('focus', () => {
@@ -135,7 +139,7 @@ const init = (serverUrl) => {
                 <UserListView />
               </Route>
               <Route path="/">
-                <ChatView init={init} />
+                <ChatView init={initSocketConnection} />
               </Route>
             </Switch>
           </Router>

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
@@ -2,9 +2,11 @@ import React, { FunctionComponent, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { NotificationParams } from '../shared/interfaces';
 
-const Notification: FunctionComponent<NotificationParams & {
-  deleteNotification: (id: string) => any;
-}> = props => {
+const Notification: FunctionComponent<
+  NotificationParams & {
+    deleteNotification: (id: string) => any;
+  }
+> = (props) => {
   const [tm, setTm] = useState(null);
   const hideNotification = () => props.deleteNotification(props.id);
 
@@ -23,26 +25,26 @@ const Notification: FunctionComponent<NotificationParams & {
   }
 
   return (
-    <NotificationContainer
-      className={`visual-bell ${typeClass}`}
-      onClick={hideNotification}
-    >
-      <span className="visual-bell__msg">{props.text}</span>
+    <NotificationContainer className={typeClass} onClick={hideNotification}>
+      <span>{props.text}</span>
     </NotificationContainer>
   );
 };
 
 const NotificationContainer = styled.div`
   cursor: pointer;
-  padding: 8px 16px;
+  padding: 8px 12px;
+  border-radius: 5px;
   height: auto;
   margin-bottom: 5px;
   width: 100%;
+  background-color: #000;
   &.success {
     background-color: #1bc47d;
   }
   span {
-    font-size: 13px;
+    color: #fff;
+    font-size: 12px;
   }
 `;
 

diff --git a/src/components/Notifications.tsx b/src/components/Notifications.tsx
@@ -7,7 +7,7 @@ import Notification from './Notification';
 const Notifications: FunctionComponent = () => {
   const deleteNotification = (id: string) =>
     state.notifications.splice(
-      state.notifications.findIndex(n => n.id === id),
+      state.notifications.findIndex((n) => n.id === id),
       1
     );
 
@@ -27,8 +27,10 @@ const Notifications: FunctionComponent = () => {
 };
 
 const NotificationsContainer = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
   position: absolute;
-  top: 0;
+  bottom: 39px;
   z-index: 11;
   padding: 10px;
   width: 100%;

diff --git a/src/shared/state.ts b/src/shared/state.ts
@@ -65,6 +65,7 @@ const state = store({
     }
   },
   persistSettings(settings, socket, init) {
+    const oldUrl = state.settings.url;
     state.settings = {
       ...state.settings,
       ...settings,
@@ -73,7 +74,7 @@ const state = store({
     // save user settings in main
     sendMainMessage('save-user-settings', Object.assign({}, state.settings));
 
-    if (settings.url && settings.url !== state.url) {
+    if (settings.url && settings.url !== oldUrl) {
       // set server URL
       sendMainMessage('set-server-url', settings.url);
 

diff --git a/src/views/Chat.tsx b/src/views/Chat.tsx
@@ -178,9 +178,9 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
         <MessagesContainer
           isSettings={isSettings}
           animationEnabled={animationEnabled}
+          onAnimationEnd={() => setContainerIsHidden(!containerIsHidden)}
         >
           <Messages
-            onAnimationEnd={() => setContainerIsHidden(!containerIsHidden)}
             animationEnabled={animationEnabled}
             isSettings={isSettings}
             ref={state.messagesRef}
@@ -347,6 +347,11 @@ const Messages = styled.div`
   overflow: ${({ isSettings }) => (isSettings ? 'hidden' : 'auto')};
   align-self: end;
   height: 100%;
+  > div {
+    &:last-child {
+      margin-bottom: 22px;
+    }
+  }
 `;
 
 const Online = styled.div`

diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect } from 'react';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 import { store } from 'react-easy-state';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
@@ -16,8 +16,25 @@ interface SettingsProps {
   init?: (serverUrl: any) => void;
 }
 
+const Flag = (props) => {
+  return props.flags[props.type] ? (
+    <SavedFlag
+      onClick={() =>
+        props.reset({
+          ...props.flags,
+          [props.type]: false,
+        })
+      }
+    >
+      saved!
+    </SavedFlag>
+  ) : null;
+};
+
 const SettingsView: FunctionComponent<SettingsProps> = (props) => {
-  const isConnected = state.status === ConnectionEnum.CONNECTED;
+  const [flags, setFlag] = useState({
+    username: false,
+  });
 
   const history = useHistory();
   const settings = store({
@@ -30,36 +47,42 @@ const SettingsView: FunctionComponent<SettingsProps> = (props) => {
     if (state.isMinimized) {
       state.toggleMinimizeChat();
     }
+
+    return () =>
+      setFlag({
+        username: true,
+      });
   }, []);
 
+  useEffect(() => {
+    settings.name = state.settings.name;
+    settings.url = state.settings.url;
+    settings.enableNotificationTooltip =
+      state.settings.enableNotificationTooltip;
+  }, [state.settings]);
+
   const saveSettings = (shouldClose: boolean = true) => {
-    if (
-      state.settings.name !== settings.name ||
-      state.settings.enableNotificationTooltip !==
-        settings.enableNotificationTooltip
-    ) {
-      state.addNotification('Successfully updated settings', 'success');
+    if (state.settings.name !== settings.name) {
+      setFlag({
+        ...flags,
+        username: true,
+      });
     }
 
     state.persistSettings(settings, props.socket, props.init);
 
-    if (isConnected && shouldClose) {
+    if (shouldClose) {
       history.push('/');
     }
   };
 
-  useEffect(() => {
-    settings.name = state.settings.name;
-    settings.url = state.settings.url;
-    settings.enableNotificationTooltip =
-      state.settings.enableNotificationTooltip;
-  }, [state.settings]);
-
   return (
     <>
       <Settings>
         <div className="fields">
-          <h4>Username</h4>
+          <h4>
+            Username <Flag reset={setFlag} flags={flags} type="username" />
+          </h4>
           <input
             type="text"
             value={settings.name}
@@ -84,7 +107,7 @@ const SettingsView: FunctionComponent<SettingsProps> = (props) => {
           </Checkboxes>
 
           <h4>
-            Server URL
+            Server URL <Flag reset={setFlag} flags={flags} type="url" />
             <span onClick={() => (settings.url = DEFAULT_SERVER_URL)}>
               reset
             </span>
@@ -93,7 +116,7 @@ const SettingsView: FunctionComponent<SettingsProps> = (props) => {
           <input
             type="text"
             value={settings.url}
-            onBlur={() => saveSettings(false)}
+            onBlur={() => saveSettings()}
             onChange={({ target }: any) =>
               (settings.url = target.value.substr(0, 255))
             }
@@ -119,6 +142,13 @@ const SettingsView: FunctionComponent<SettingsProps> = (props) => {
   );
 };
 
+const SavedFlag = styled.span`
+  background-color: #fff;
+  color: #000;
+  padding: 4px 7px;
+  border-radius: 5px;
+`;
+
 const VersionNote = styled.a`
   margin-top: 5px;
   width: 100%;