Added auth headers to api requests

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 ? (

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 />

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}

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 })

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',

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';

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,

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());
   };

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({

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({

client/src/utility/applyAuth.ts

@@ -0,0 +1,4 @@
+export const applyAuth = () => {
+  const token = localStorage.getItem('token') || '';
+  return { Authorization: `Bearer ${token}` };
+};

client/src/utility/index.ts

@@ -10,3 +10,4 @@ export * from './storeUIConfig';
 export * from './validators';
 export * from './parseTime';
 export * from './decodeToken';
+export * from './applyAuth';