From d94a6cea5aa84071e0182685af5a05890a8ef080 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Fri, 12 Nov 2021 12:38:01 +0100
Subject: [PATCH] Added auth headers to api requests

---
 client/src/components/Apps/Apps.tsx           | 15 ++++--
 client/src/components/Bookmarks/Bookmarks.tsx | 53 ++++++++++---------
 client/src/components/Home/Home.tsx           |  4 +-
 .../Settings/AppDetails/AuthForm/AuthForm.tsx |  1 +
 .../Settings/StyleSettings/StyleSettings.tsx  |  9 +++-
 .../Widgets/WeatherWidget/WeatherWidget.tsx   |  2 +-
 client/src/store/action-creators/app.ts       | 34 +++++++++---
 client/src/store/action-creators/auth.ts      | 13 +++++
 client/src/store/action-creators/bookmark.ts  | 31 +++++++----
 client/src/store/action-creators/config.ts    | 24 +++++++--
 client/src/utility/applyAuth.ts               |  4 ++
 client/src/utility/index.ts                   |  1 +
 12 files changed, 135 insertions(+), 56 deletions(-)
 create mode 100644 client/src/utility/applyAuth.ts

diff --git a/client/src/components/Apps/Apps.tsx b/client/src/components/Apps/Apps.tsx
index 8d3a5df..2d2d588 100644
--- a/client/src/components/Apps/Apps.tsx
+++ b/client/src/components/Apps/Apps.tsx
@@ -29,7 +29,10 @@ interface Props {
 }
 
 export const Apps = (props: Props): JSX.Element => {
-  const { apps, loading } = useSelector((state: State) => state.apps);
+  const {
+    apps: { apps, loading },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
   const { getApps } = bindActionCreators(actionCreators, dispatch);
@@ -76,10 +79,12 @@ export const Apps = (props: Props): JSX.Element => {
         subtitle={<Link to="/">Go back</Link>}
       />
 
-      <div className={classes.ActionsContainer}>
-        <ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} />
-        <ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
-      </div>
+      {isAuthenticated && (
+        <div className={classes.ActionsContainer}>
+          <ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} />
+          <ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
+        </div>
+      )}
 
       <div className={classes.Apps}>
         {loading ? (
diff --git a/client/src/components/Bookmarks/Bookmarks.tsx b/client/src/components/Bookmarks/Bookmarks.tsx
index db6ec02..cee07fe 100644
--- a/client/src/components/Bookmarks/Bookmarks.tsx
+++ b/client/src/components/Bookmarks/Bookmarks.tsx
@@ -34,9 +34,10 @@ export enum ContentType {
 }
 
 export const Bookmarks = (props: Props): JSX.Element => {
-  const { loading, categories } = useSelector(
-    (state: State) => state.bookmarks
-  );
+  const {
+    bookmarks: { loading, categories },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
   const { getCategories } = bindActionCreators(actionCreators, dispatch);
@@ -109,28 +110,30 @@ export const Bookmarks = (props: Props): JSX.Element => {
 
       <Headline title="All Bookmarks" subtitle={<Link to="/">Go back</Link>} />
 
-      <div className={classes.ActionsContainer}>
-        <ActionButton
-          name="Add Category"
-          icon="mdiPlusBox"
-          handler={() => addActionHandler(ContentType.category)}
-        />
-        <ActionButton
-          name="Add Bookmark"
-          icon="mdiPlusBox"
-          handler={() => addActionHandler(ContentType.bookmark)}
-        />
-        <ActionButton
-          name="Edit Categories"
-          icon="mdiPencil"
-          handler={() => editActionHandler(ContentType.category)}
-        />
-        <ActionButton
-          name="Edit Bookmarks"
-          icon="mdiPencil"
-          handler={() => editActionHandler(ContentType.bookmark)}
-        />
-      </div>
+      {isAuthenticated && (
+        <div className={classes.ActionsContainer}>
+          <ActionButton
+            name="Add Category"
+            icon="mdiPlusBox"
+            handler={() => addActionHandler(ContentType.category)}
+          />
+          <ActionButton
+            name="Add Bookmark"
+            icon="mdiPlusBox"
+            handler={() => addActionHandler(ContentType.bookmark)}
+          />
+          <ActionButton
+            name="Edit Categories"
+            icon="mdiPencil"
+            handler={() => editActionHandler(ContentType.category)}
+          />
+          <ActionButton
+            name="Edit Bookmarks"
+            icon="mdiPencil"
+            handler={() => editActionHandler(ContentType.bookmark)}
+          />
+        </div>
+      )}
 
       {loading ? (
         <Spinner />
diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx
index f8652cb..1b96b66 100644
--- a/client/src/components/Home/Home.tsx
+++ b/client/src/components/Home/Home.tsx
@@ -124,7 +124,9 @@ export const Home = (): JSX.Element => {
             <BookmarkGrid
               categories={
                 !bookmarkSearchResult
-                  ? categories.filter(({ isPinned }) => isPinned)
+                  ? categories.filter(
+                      ({ isPinned, bookmarks }) => isPinned && bookmarks.length
+                    )
                   : bookmarkSearchResult
               }
               totalCategories={categories.length}
diff --git a/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx b/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx
index 3b54575..4c56838 100644
--- a/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx
+++ b/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx
@@ -51,6 +51,7 @@ export const AuthForm = (): JSX.Element => {
               id="password"
               name="password"
               placeholder="••••••"
+              autoComplete="current-password"
               value={formData.password}
               onChange={(e) =>
                 setFormData({ ...formData, password: e.target.value })
diff --git a/client/src/components/Settings/StyleSettings/StyleSettings.tsx b/client/src/components/Settings/StyleSettings/StyleSettings.tsx
index b2d7c8e..23d9ff3 100644
--- a/client/src/components/Settings/StyleSettings/StyleSettings.tsx
+++ b/client/src/components/Settings/StyleSettings/StyleSettings.tsx
@@ -9,8 +9,9 @@ import { actionCreators } from '../../../store';
 // Typescript
 import { ApiResponse } from '../../../interfaces';
 
-// UI
+// Other
 import { InputGroup, Button } from '../../UI';
+import { applyAuth } from '../../../utility';
 
 export const StyleSettings = (): JSX.Element => {
   const dispatch = useDispatch();
@@ -34,7 +35,11 @@ export const StyleSettings = (): JSX.Element => {
     e.preventDefault();
 
     axios
-      .put<ApiResponse<{}>>('/api/config/0/css', { styles: customStyles })
+      .put<ApiResponse<{}>>(
+        '/api/config/0/css',
+        { styles: customStyles },
+        { headers: applyAuth() }
+      )
       .then(() => {
         createNotification({
           title: 'Success',
diff --git a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
index 96edf97..7b84da8 100644
--- a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
+++ b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
@@ -5,7 +5,7 @@ import axios from 'axios';
 import { useSelector } from 'react-redux';
 
 // Typescript
-import { Weather, ApiResponse, Config } from '../../../interfaces';
+import { Weather, ApiResponse } from '../../../interfaces';
 
 // CSS
 import classes from './WeatherWidget.module.css';
diff --git a/client/src/store/action-creators/app.ts b/client/src/store/action-creators/app.ts
index f84bfbd..ddd88fa 100644
--- a/client/src/store/action-creators/app.ts
+++ b/client/src/store/action-creators/app.ts
@@ -11,6 +11,7 @@ import {
   UpdateAppAction,
 } from '../actions/app';
 import axios from 'axios';
+import { applyAuth } from '../../utility';
 
 export const getApps =
   () => async (dispatch: Dispatch<GetAppsAction<undefined | App[]>>) => {
@@ -20,7 +21,9 @@ export const getApps =
     });
 
     try {
-      const res = await axios.get<ApiResponse<App[]>>('/api/apps');
+      const res = await axios.get<ApiResponse<App[]>>('/api/apps', {
+        headers: applyAuth(),
+      });
 
       dispatch({
         type: ActionType.getAppsSuccess,
@@ -35,9 +38,15 @@ export const pinApp =
   (app: App) => async (dispatch: Dispatch<PinAppAction>) => {
     try {
       const { id, isPinned, name } = app;
-      const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, {
-        isPinned: !isPinned,
-      });
+      const res = await axios.put<ApiResponse<App>>(
+        `/api/apps/${id}`,
+        {
+          isPinned: !isPinned,
+        },
+        {
+          headers: applyAuth(),
+        }
+      );
 
       const status = isPinned
         ? 'unpinned from Homescreen'
@@ -63,7 +72,9 @@ export const pinApp =
 export const addApp =
   (formData: NewApp | FormData) => async (dispatch: Dispatch<AddAppAction>) => {
     try {
-      const res = await axios.post<ApiResponse<App>>('/api/apps', formData);
+      const res = await axios.post<ApiResponse<App>>('/api/apps', formData, {
+        headers: applyAuth(),
+      });
 
       dispatch<any>({
         type: ActionType.createNotification,
@@ -88,7 +99,9 @@ export const addApp =
 export const deleteApp =
   (id: number) => async (dispatch: Dispatch<DeleteAppAction>) => {
     try {
-      await axios.delete<ApiResponse<{}>>(`/api/apps/${id}`);
+      await axios.delete<ApiResponse<{}>>(`/api/apps/${id}`, {
+        headers: applyAuth(),
+      });
 
       dispatch<any>({
         type: ActionType.createNotification,
@@ -113,7 +126,10 @@ export const updateApp =
     try {
       const res = await axios.put<ApiResponse<App>>(
         `/api/apps/${id}`,
-        formData
+        formData,
+        {
+          headers: applyAuth(),
+        }
       );
 
       dispatch<any>({
@@ -155,7 +171,9 @@ export const reorderApps =
         })
       );
 
-      await axios.put<ApiResponse<{}>>('/api/apps/0/reorder', updateQuery);
+      await axios.put<ApiResponse<{}>>('/api/apps/0/reorder', updateQuery, {
+        headers: applyAuth(),
+      });
 
       dispatch({
         type: ActionType.reorderApps,
diff --git a/client/src/store/action-creators/auth.ts b/client/src/store/action-creators/auth.ts
index f27c447..038eebb 100644
--- a/client/src/store/action-creators/auth.ts
+++ b/client/src/store/action-creators/auth.ts
@@ -8,6 +8,7 @@ import {
   LogoutAction,
 } from '../actions/auth';
 import axios, { AxiosError } from 'axios';
+import { getApps, getCategories } from '.';
 
 export const login =
   (formData: { password: string; duration: string }) =>
@@ -24,6 +25,9 @@ export const login =
         type: ActionType.login,
         payload: res.data.data.token,
       });
+
+      dispatch<any>(getApps());
+      dispatch<any>(getCategories());
     } catch (err) {
       dispatch<any>(authError(err, true));
     }
@@ -35,6 +39,9 @@ export const logout = () => (dispatch: Dispatch<LogoutAction>) => {
   dispatch({
     type: ActionType.logout,
   });
+
+  dispatch<any>(getApps());
+  dispatch<any>(getCategories());
 };
 
 export const autoLogin = () => async (dispatch: Dispatch<AutoLoginAction>) => {
@@ -50,6 +57,9 @@ export const autoLogin = () => async (dispatch: Dispatch<AutoLoginAction>) => {
       type: ActionType.autoLogin,
       payload: token,
     });
+
+    dispatch<any>(getApps());
+    dispatch<any>(getCategories());
   } catch (err) {
     dispatch<any>(authError(err, false));
   }
@@ -69,4 +79,7 @@ export const authError =
         },
       });
     }
+
+    dispatch<any>(getApps());
+    dispatch<any>(getCategories());
   };
diff --git a/client/src/store/action-creators/bookmark.ts b/client/src/store/action-creators/bookmark.ts
index c299ec6..5010bd3 100644
--- a/client/src/store/action-creators/bookmark.ts
+++ b/client/src/store/action-creators/bookmark.ts
@@ -8,6 +8,7 @@ import {
   NewBookmark,
   NewCategory,
 } from '../../interfaces';
+import { applyAuth } from '../../utility';
 import { ActionType } from '../action-types';
 import {
   AddBookmarkAction,
@@ -31,7 +32,9 @@ export const getCategories =
     });
 
     try {
-      const res = await axios.get<ApiResponse<Category[]>>('/api/categories');
+      const res = await axios.get<ApiResponse<Category[]>>('/api/categories', {
+        headers: applyAuth(),
+      });
 
       dispatch({
         type: ActionType.getCategoriesSuccess,
@@ -47,7 +50,8 @@ export const addCategory =
     try {
       const res = await axios.post<ApiResponse<Category>>(
         '/api/categories',
-        formData
+        formData,
+        { headers: applyAuth() }
       );
 
       dispatch<any>({
@@ -75,7 +79,8 @@ export const addBookmark =
     try {
       const res = await axios.post<ApiResponse<Bookmark>>(
         '/api/bookmarks',
-        formData
+        formData,
+        { headers: applyAuth() }
       );
 
       dispatch<any>({
@@ -101,7 +106,8 @@ export const pinCategory =
       const { id, isPinned, name } = category;
       const res = await axios.put<ApiResponse<Category>>(
         `/api/categories/${id}`,
-        { isPinned: !isPinned }
+        { isPinned: !isPinned },
+        { headers: applyAuth() }
       );
 
       const status = isPinned
@@ -128,7 +134,9 @@ export const pinCategory =
 export const deleteCategory =
   (id: number) => async (dispatch: Dispatch<DeleteCategoryAction>) => {
     try {
-      await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`);
+      await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`, {
+        headers: applyAuth(),
+      });
 
       dispatch<any>({
         type: ActionType.createNotification,
@@ -153,7 +161,8 @@ export const updateCategory =
     try {
       const res = await axios.put<ApiResponse<Category>>(
         `/api/categories/${id}`,
-        formData
+        formData,
+        { headers: applyAuth() }
       );
 
       dispatch<any>({
@@ -179,7 +188,9 @@ export const deleteBookmark =
   (bookmarkId: number, categoryId: number) =>
   async (dispatch: Dispatch<DeleteBookmarkAction>) => {
     try {
-      await axios.delete<ApiResponse<{}>>(`/api/bookmarks/${bookmarkId}`);
+      await axios.delete<ApiResponse<{}>>(`/api/bookmarks/${bookmarkId}`, {
+        headers: applyAuth(),
+      });
 
       dispatch<any>({
         type: ActionType.createNotification,
@@ -218,7 +229,8 @@ export const updateBookmark =
     try {
       const res = await axios.put<ApiResponse<Bookmark>>(
         `/api/bookmarks/${bookmarkId}`,
-        formData
+        formData,
+        { headers: applyAuth() }
       );
 
       dispatch<any>({
@@ -295,7 +307,8 @@ export const reorderCategories =
 
       await axios.put<ApiResponse<{}>>(
         '/api/categories/0/reorder',
-        updateQuery
+        updateQuery,
+        { headers: applyAuth() }
       );
 
       dispatch({
diff --git a/client/src/store/action-creators/config.ts b/client/src/store/action-creators/config.ts
index d81a2a2..bcc41e4 100644
--- a/client/src/store/action-creators/config.ts
+++ b/client/src/store/action-creators/config.ts
@@ -18,7 +18,7 @@ import {
   WeatherForm,
 } from '../../interfaces';
 import { ActionType } from '../action-types';
-import { storeUIConfig } from '../../utility';
+import { storeUIConfig, applyAuth } from '../../utility';
 
 const keys: (keyof Config)[] = [
   'useAmericanDate',
@@ -55,7 +55,13 @@ export const updateConfig =
   ) =>
   async (dispatch: Dispatch<UpdateConfigAction>) => {
     try {
-      const res = await axios.put<ApiResponse<Config>>('/api/config', formData);
+      const res = await axios.put<ApiResponse<Config>>(
+        '/api/config',
+        formData,
+        {
+          headers: applyAuth(),
+        }
+      );
 
       dispatch<any>({
         type: ActionType.createNotification,
@@ -96,7 +102,9 @@ export const fetchQueries =
 export const addQuery =
   (query: Query) => async (dispatch: Dispatch<AddQueryAction>) => {
     try {
-      const res = await axios.post<ApiResponse<Query>>('/api/queries', query);
+      const res = await axios.post<ApiResponse<Query>>('/api/queries', query, {
+        headers: applyAuth(),
+      });
 
       dispatch({
         type: ActionType.addQuery,
@@ -111,7 +119,10 @@ export const deleteQuery =
   (prefix: string) => async (dispatch: Dispatch<DeleteQueryAction>) => {
     try {
       const res = await axios.delete<ApiResponse<Query[]>>(
-        `/api/queries/${prefix}`
+        `/api/queries/${prefix}`,
+        {
+          headers: applyAuth(),
+        }
       );
 
       dispatch({
@@ -129,7 +140,10 @@ export const updateQuery =
     try {
       const res = await axios.put<ApiResponse<Query[]>>(
         `/api/queries/${oldPrefix}`,
-        query
+        query,
+        {
+          headers: applyAuth(),
+        }
       );
 
       dispatch({
diff --git a/client/src/utility/applyAuth.ts b/client/src/utility/applyAuth.ts
new file mode 100644
index 0000000..95dcfb2
--- /dev/null
+++ b/client/src/utility/applyAuth.ts
@@ -0,0 +1,4 @@
+export const applyAuth = () => {
+  const token = localStorage.getItem('token') || '';
+  return { Authorization: `Bearer ${token}` };
+};
diff --git a/client/src/utility/index.ts b/client/src/utility/index.ts
index 0210d08..9ca9bba 100644
--- a/client/src/utility/index.ts
+++ b/client/src/utility/index.ts
@@ -10,3 +10,4 @@ export * from './storeUIConfig';
 export * from './validators';
 export * from './parseTime';
 export * from './decodeToken';
+export * from './applyAuth';