feat: added alerts counter and improved alerts list (#165)

* feat: added alerts counter and improved alerts list
librarian-org · Apr 8, 2022 · b0bc697 · b0bc697
1 parent 4f7f572
commit b0bc697
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 14 deletions.
diff --git a/src/app/components/AlertsPanel/index.tsx b/src/app/components/AlertsPanel/index.tsx
@@ -1,15 +1,18 @@
 import React, { useCallback } from 'react';
-import { FiX } from 'react-icons/fi';
+import { FiChevronDown, FiX } from 'react-icons/fi';
+import { CgPlayListRemove } from 'react-icons/cg';
 import { ToastMessage, useToast } from '../../hooks/toast';
+import i18n from '../../i18n';
 import Translator from '../I18n/Translator';
 
-import { AlertItem, AlertList, Container, Clear } from './style';
+import { AlertItem, AlertList, Container, Clear, AlertsActions } from './style';
 
 interface AlertPanelProps {
   alerts: ToastMessage[];
+  handleAlertPanelClick(): void;
 }
 
-const AlertsPanel: React.FC<AlertPanelProps> = ({ alerts }) => {
+const AlertsPanel: React.FC<AlertPanelProps> = ({ alerts, handleAlertPanelClick }) => {
   const { removeAlerts, removeAllAlerts } = useToast();
 
   const handleRemoveAlert = useCallback(
@@ -25,10 +28,14 @@ const AlertsPanel: React.FC<AlertPanelProps> = ({ alerts }) => {
 
   return (
     <Container>
-      <Clear onClick={handleRemoveAllAlert}>
-        <FiX size={10}  />
-        Limpar tudo
-      </Clear>
+      <AlertsActions>
+        <Clear onClick={handleRemoveAllAlert}>
+          <CgPlayListRemove size={20} title={i18n.t('notifications.clearAll')} />
+        </Clear>
+        <Clear onClick={handleAlertPanelClick}>
+          <FiChevronDown size={20} title={i18n.t('notifications.hide')} />
+        </Clear>
+      </AlertsActions>
       <AlertList>
         {alerts && alerts.length === 0 && (
           <AlertItem>

diff --git a/src/app/components/AlertsPanel/style.ts b/src/app/components/AlertsPanel/style.ts
@@ -75,9 +75,17 @@ export const Clear = styled.button`
   border: 0;
   font-size: 10px;
   color: ${(props) => props.theme.colors.text};
-  padding: 3px;
+  padding: 1px;
+  border-radius: 6px;
+  margin-left: 4px;
 
   &:hover {
-    color: ${(props) => props.theme.colors.primary.dark};
+    background-color: ${(props) => tint(0.4, props.theme.colors.background)};
   }
 `;
+
+export const AlertsActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px;
+`;
diff --git a/src/app/components/StatusBar/index.tsx b/src/app/components/StatusBar/index.tsx
@@ -4,7 +4,7 @@ import { on, off } from '../../util/EventHandler';
 import { ToastMessage, useToast } from '../../hooks/toast';
 import AlertsPanel from '../AlertsPanel';
 
-import { Container, StatusItem, StatusItemContainer } from './styles';
+import { Container, Counter, StatusItem, StatusItemContainer } from './styles';
 import i18n from '../../i18n';
 import LoggedUser from '../LoggedUser';
 
@@ -45,11 +45,20 @@ const StatusBar: React.FC = () => {
       <StatusItem>
         <StatusItemContainer onClick={handleAlertPanelClick}>
           <span>
-            {alerts && alerts.length > 0 ? <FaBell /> : <FaRegBell />}
+            {alerts && alerts.length > 0 ? (
+              <span>
+                <FaBell />
+                <Counter>{alerts.length}</Counter>
+              </span>
+            ) : (
+              <FaRegBell />
+            )}
           </span>
         </StatusItemContainer>
       </StatusItem>
-      {alertsPanel && <AlertsPanel alerts={alerts} />}
+      {alertsPanel && (
+        <AlertsPanel alerts={alerts} handleAlertPanelClick={handleAlertPanelClick} />
+      )}
     </Container>
   );
 };

diff --git a/src/app/components/StatusBar/styles.ts b/src/app/components/StatusBar/styles.ts
@@ -31,3 +31,24 @@ export const StatusItemContainer = styled.div`
     font-size: 12px;
   }
 `;
+
+export const Counter = styled.small`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  font-size: 8px;
+  font-weight: bold;
+
+  position: relative;
+
+  background-color: ${(props) => props.theme.colors.error};
+
+  border-radius: 50%;
+
+  height: 12px;
+  width: 12px;
+  left: -6px;
+  top: -6px;
+`;
diff --git a/src/locales/en-US/common.json b/src/locales/en-US/common.json
@@ -138,7 +138,9 @@
     "success": "Success",
     "warning": "Warning",
     "noNewNotifications": "No new notifications",
-    "restartFullEffect": "You'll need restart app for this changes take full effect"
+    "restartFullEffect": "You'll need restart app for this changes take full effect",
+    "clearAll": "Clear all notifications",
+    "hide": "Hide notifications"
   },
   "publisher": {
     "label": "Publisher",

diff --git a/src/locales/pt-BR/common.json b/src/locales/pt-BR/common.json
@@ -140,7 +140,9 @@
     "success": "Sucesso",
     "warning": "Aviso",
     "noNewNotifications": "Sem novas notificações",
-    "restartFullEffect": "É preciso reiniciar para que as alterações tenham efeito completo"
+    "restartFullEffect": "É preciso reiniciar para que as alterações tenham efeito completo",
+    "clearAll": "Limpar todas as notificações",
+    "hide": "Esconder as notificações"
   },
   "publisher": {
     "label": "Editora",