From 43b47a68631cea954c4fd48d131157f1b3738b50 Mon Sep 17 00:00:00 2001
From: Hugh Lilly <hughlilly@users.noreply.github.com>
Date: Thu, 14 Sep 2023 14:31:31 +1200
Subject: [PATCH] feat: settings button toggle between settings and
 notifications (#553)

Co-authored-by: Afonso Jorge Ramos <afonsojorgeramos@gmail.com>
---
 src/components/Sidebar.tsx                      | 16 +++++++++++++---
 src/hooks/useNotifications.ts                   |  8 ++++++--
 src/routes/LoginWithToken.tsx                   |  6 +++++-
 src/routes/Settings.test.tsx                    |  2 +-
 src/routes/__snapshots__/Settings.test.tsx.snap |  2 +-
 src/utils/auth.ts                               |  2 +-
 6 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c5cf4e712..5081e077b 100644
--- a/src/components/Sidebar.tsx
+++ b/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,7 +65,10 @@ 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" />
@@ -72,7 +76,13 @@ export const Sidebar: React.FC = () => {
 
             <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" />
diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts
index 82f8236cb..84b58754b 100644
--- a/src/hooks/useNotifications.ts
+++ b/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);
         });
       }
diff --git a/src/routes/LoginWithToken.tsx b/src/routes/LoginWithToken.tsx
index 59d9d4807..ab1659368 100644
--- a/src/routes/LoginWithToken.tsx
+++ b/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>{' '}
diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
index 517f55885..f5006abeb 100644
--- a/src/routes/Settings.test.tsx
+++ b/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 },
     });
 
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 1be030839..6f683026e 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/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>
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 506cf64df..c3c53ab54 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,4 +1,4 @@
-import { generateGitHubAPIUrl } from "./helpers";
+import { generateGitHubAPIUrl } from './helpers';
 
 const { remote } = require('electron');
 const BrowserWindow = remote.BrowserWindow;