feat: settings button toggle between settings and notifications (#553)

Co-authored-by: Afonso Jorge Ramos <[email protected]>

Author: hughlilly

src/components/Sidebar.tsx

@@ -1,7 +1,7 @@
 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 { useHistory, useLocation } from 'react-router-dom';
 
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
@@ -12,6 +12,7 @@ import { Constants } from '../utils/constants';
 
 export const Sidebar: React.FC = () => {
   const history = useHistory();
+  const location = useLocation();
 
   const { isLoggedIn } = useContext(AppContext);
   const { notifications, fetchNotifications } = useContext(AppContext);
@@ -64,15 +65,24 @@ export const Sidebar: React.FC = () => {
           <>
             <button
               className={footerButtonClasses}
-              onClick={fetchNotifications}
+              onClick={() => {
+                history.replace('/');
+                fetchNotifications();
+              }}
               aria-label="Refresh Notifications"
             >
               <IconRefresh className="w-3.5 h-3.5" />
             </button>
 
             <button
               className={footerButtonClasses}
-              onClick={() => history.push('/settings')}
+              onClick={() => {
+                if (location.pathname.startsWith('/settings')) {
+                  history.replace('/');
+                } else {
+                  history.push('/settings');
+                }
+              }}
               aria-label="Settings"
             >
               <IconCog className="w-4 h-4" />

src/hooks/useNotifications.ts

@@ -57,13 +57,17 @@ export const useNotifications = (): NotificationsState => {
         if (!isGitHubLoggedIn) {
           return;
         }
-        const url = `${generateGitHubAPIUrl(Constants.DEFAULT_AUTH_OPTIONS.hostname)}${endpointSuffix}`;
+        const url = `${generateGitHubAPIUrl(
+          Constants.DEFAULT_AUTH_OPTIONS.hostname
+        )}${endpointSuffix}`;
         return apiRequestAuth(url, 'GET', accounts.token);
       }
 
       function getEnterpriseNotifications() {
         return accounts.enterpriseAccounts.map((account) => {
-          const url = `${generateGitHubAPIUrl(account.hostname)}${endpointSuffix}`;
+          const url = `${generateGitHubAPIUrl(
+            account.hostname
+          )}${endpointSuffix}`;
           return apiRequestAuth(url, 'GET', account.token);
         });
       }

src/routes/LoginWithToken.tsx

@@ -63,7 +63,11 @@ export const LoginWithToken: React.FC = () => {
               To generate a token, go to GitHub,{' '}
               <a
                 className="underline hover:text-gray-500 dark:hover:text-gray-300  cursor-pointer"
-                onClick={() => openLink('https://github.com/settings/tokens/new?scopes=notifications,read:user&description=gitify_token')}
+                onClick={() =>
+                  openLink(
+                    'https://github.com/settings/tokens/new?scopes=notifications,read:user&description=gitify_token'
+                  )
+                }
               >
                 personal access tokens
               </a>{' '}

src/routes/Settings.test.tsx

@@ -127,7 +127,7 @@ describe('routes/Settings.tsx', () => {
       </AppContext.Provider>
     );
 
-    fireEvent.click(getByLabelText('On Click, Mark as Read'), {
+    fireEvent.click(getByLabelText('Mark as read on click'), {
       target: { checked: true },
     });
 

src/routes/__snapshots__/Settings.test.tsx.snap

@@ -214,7 +214,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           className="font-medium text-gray-700 dark:text-gray-200"
           htmlFor="onClickMarkAsRead"
         >
-          On Click, Mark as Read
+          Mark as read on click
         </label>
       </div>
     </div>

src/utils/auth.ts

@@ -1,4 +1,4 @@
-import { generateGitHubAPIUrl } from "./helpers";
+import { generateGitHubAPIUrl } from './helpers';
 
 const { remote } = require('electron');
 const BrowserWindow = remote.BrowserWindow;