feat: remove gh icon & keep notifications icon

src/components/Sidebar.test.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import * as TestRenderer from 'react-test-renderer';
 import { fireEvent, render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import * as React from 'react';
 import { Router } from 'react-router';
 import { MemoryRouter } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import * as TestRenderer from 'react-test-renderer';
 
 const { shell, ipcRenderer } = require('electron');
 
-import { Sidebar } from './Sidebar';
 import { mockSettings } from '../__mocks__/mock-state';
-import { AppContext } from '../context/App';
 import { mockedAccountNotifications } from '../__mocks__/mockedData';
+import { AppContext } from '../context/App';
+import { Sidebar } from './Sidebar';
 
 describe('components/Sidebar.tsx', () => {
   const fetchNotifications = jest.fn();
@@ -102,18 +102,41 @@ describe('components/Sidebar.tsx', () => {
     );
   });
 
-  it('opens the gitify repo in browser', () => {
-    const { getByLabelText } = render(
-      <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
-        <MemoryRouter>
-          <Sidebar />
-        </MemoryRouter>
-      </AppContext.Provider>
-    );
-    fireEvent.click(getByLabelText('View project on GitHub'));
-    expect(shell.openExternal).toHaveBeenCalledTimes(1);
-    expect(shell.openExternal).toHaveBeenCalledWith(
-      'https://github.com/manosim/gitify'
-    );
+  describe('should render the notifications icon', () => {
+    it('when there are 0 notifications', () => {
+      const { getByLabelText } = render(
+        <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
+          <MemoryRouter>
+            <Sidebar />
+          </MemoryRouter>
+        </AppContext.Provider>
+      );
+
+      const notificationsIcon = getByLabelText('0 Unread Notifications');
+      expect(notificationsIcon.className).toContain('text-white');
+      expect(notificationsIcon.childNodes.length).toBe(1);
+      expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
+    });
+
+    it('when there are more than 0 notifications', () => {
+      const { getByLabelText } = render(
+        <AppContext.Provider
+          value={{
+            isLoggedIn: true,
+            notifications: mockedAccountNotifications,
+          }}
+        >
+          <MemoryRouter>
+            <Sidebar />
+          </MemoryRouter>
+        </AppContext.Provider>
+      );
+
+      const notificationsIcon = getByLabelText('4 Unread Notifications');
+      expect(notificationsIcon.className).toContain('text-green-500');
+      expect(notificationsIcon.childNodes.length).toBe(2);
+      expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
+      expect(notificationsIcon.childNodes[1].nodeValue).toBe('4');
+    });
   });
 });

src/components/Sidebar.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useContext, useMemo } from 'react';
-import { shell, ipcRenderer } from 'electron';
 import * as Octicons from '@primer/octicons-react';
+import { ipcRenderer, shell } from 'electron';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
+import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
-import { Constants } from '../utils/constants';
 import { IconCog } from '../icons/Cog';
-import { IconRefresh } from '../icons/Refresh';
-import { Logo } from '../components/Logo';
 import { IconQuit } from '../icons/Quit';
+import { IconRefresh } from '../icons/Refresh';
+import { Constants } from '../utils/constants';
 
 export const Sidebar: React.FC = () => {
   const history = useHistory();
@@ -46,16 +46,16 @@ export const Sidebar: React.FC = () => {
           onClick={onOpenBrowser}
         />
 
-        {notificationsCount > 0 && (
-          <div
-            className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
-            onClick={onOpenGitHubNotifications}
-            aria-label={`${notificationsCount} Unread Notifications`}
-          >
-            <Octicons.BellIcon size={12} />
-            {notificationsCount}
-          </div>
-        )}
+        <div
+          className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
+            notificationsCount > 0 ? 'text-green-500' : 'text-white'
+          }`}
+          onClick={onOpenGitHubNotifications}
+          aria-label={`${notificationsCount} Unread Notifications`}
+        >
+          <Octicons.BellIcon size={12} />
+          {notificationsCount > 0 && notificationsCount}
+        </div>
       </div>
 
       <div className="py-4 px-3">
@@ -88,14 +88,6 @@ export const Sidebar: React.FC = () => {
             <IconQuit className="w-3.5 h-3.5" />
           </button>
         )}
-
-        <div
-          className={footerButtonClasses}
-          onClick={onOpenBrowser}
-          aria-label="View project on GitHub"
-        >
-          <Octicons.MarkGithubIcon size={15} />
-        </div>
       </div>
     </div>
   );

src/components/__snapshots__/Sidebar.test.tsx.snap

@@ -53,7 +53,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
     </svg>
     <div
       aria-label="4 Unread Notifications"
-      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
+      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
       onClick={[Function]}
     >
       <svg
@@ -114,33 +114,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         </g>
       </svg>
     </button>
-    <div
-      aria-label="View project on GitHub"
-      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
-      onClick={[Function]}
-    >
-      <svg
-        aria-hidden="true"
-        className="octicon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </div>
   </div>
 </div>
 `;
@@ -198,7 +171,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
     </svg>
     <div
       aria-label="4 Unread Notifications"
-      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
+      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
       onClick={[Function]}
     >
       <svg
@@ -259,33 +232,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         </g>
       </svg>
     </button>
-    <div
-      aria-label="View project on GitHub"
-      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
-      onClick={[Function]}
-    >
-      <svg
-        aria-hidden="true"
-        className="octicon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </div>
   </div>
 </div>
 `;