feat: Add link to GitHub Notifications page (#473)

Author: manosim

src/components/Sidebar.test.tsx

@@ -82,7 +82,27 @@ describe('components/Sidebar.tsx', () => {
     expect(pushMock).toHaveBeenCalledTimes(1);
   });
 
-  it('open the gitify repo in browser', () => {
+  it('opens github in the notifications page', () => {
+    const { getByLabelText } = render(
+      <AppContext.Provider
+        value={{
+          isLoggedIn: true,
+          notifications: mockedAccountNotifications,
+        }}
+      >
+        <MemoryRouter>
+          <Sidebar />
+        </MemoryRouter>
+      </AppContext.Provider>
+    );
+    fireEvent.click(getByLabelText('4 Unread Notifications'));
+    expect(shell.openExternal).toHaveBeenCalledTimes(1);
+    expect(shell.openExternal).toHaveBeenCalledWith(
+      'https://github.com/notifications'
+    );
+  });
+
+  it('opens the gitify repo in browser', () => {
     const { getByLabelText } = render(
       <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
         <MemoryRouter>
@@ -92,5 +112,8 @@ describe('components/Sidebar.tsx', () => {
     );
     fireEvent.click(getByLabelText('View project on GitHub'));
     expect(shell.openExternal).toHaveBeenCalledTimes(1);
+    expect(shell.openExternal).toHaveBeenCalledWith(
+      'https://github.com/manosim/gitify'
+    );
   });
 });

src/components/Sidebar.tsx

@@ -20,6 +20,10 @@ export const Sidebar: React.FC = () => {
     shell.openExternal(`https://github.com/${Constants.REPO_SLUG}`);
   }, []);
 
+  const onOpenGitHubNotifications = useCallback(() => {
+    shell.openExternal(`https://github.com/notifications`);
+  }, []);
+
   const quitApp = useCallback(() => {
     ipcRenderer.send('app-quit');
   }, []);
@@ -43,7 +47,11 @@ export const Sidebar: React.FC = () => {
         />
 
         {notificationsCount > 0 && (
-          <div className="flex justify-around	self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold">
+          <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>

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

@@ -52,7 +52,9 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
       </g>
     </svg>
     <div
-      className="flex justify-around	self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold"
+      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"
+      onClick={[Function]}
     >
       <svg
         aria-hidden="true"
@@ -195,7 +197,9 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
       </g>
     </svg>
     <div
-      className="flex justify-around	self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold"
+      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"
+      onClick={[Function]}
     >
       <svg
         aria-hidden="true"