From 40ccfaf90f5476a1f9c719e6e05b6b12ea07924f Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 24 Apr 2020 15:00:54 +0200
Subject: [PATCH] header creation in http. Sample auth request to backend.

---
 client/src/components/List/index.jsx | 12 +++++++++---
 client/src/services/http/index.js    |  1 +
 client/src/store/itemSlice.js        | 20 ++++++++++++++------
 3 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 client/src/services/http/index.js

diff --git a/client/src/components/List/index.jsx b/client/src/components/List/index.jsx
index d2c7f1f..e1d4fb4 100644
--- a/client/src/components/List/index.jsx
+++ b/client/src/components/List/index.jsx
@@ -6,6 +6,7 @@ import {
   deleteItemAsync,
   getItemsAsync,
 } from "../../store/itemSlice";
+import { useFirebase } from "../../services/auth";
 
 const useStyles = () => ({
   removeBtn: {
@@ -20,12 +21,17 @@ export default function List() {
   const dispatch = useDispatch();
 
   const styles = useStyles();
-
+  const firebase = useFirebase();
   // UseEffect loads items from the db when component renders.
   // Precising dependencies so it doesn't render infinitely.
   useEffect(() => {
-    dispatch(getItemsAsync());
-  }, [dispatch]);
+    firebase.auth.onAuthStateChanged(async (user) => {
+      if (user) {
+        const token = await firebase.auth.currentUser.getIdToken();
+        dispatch(getItemsAsync(token));
+      }
+    });
+  }, [dispatch, firebase.auth]);
 
   return (
     <ListGroup>
diff --git a/client/src/services/http/index.js b/client/src/services/http/index.js
new file mode 100644
index 0000000..908301c
--- /dev/null
+++ b/client/src/services/http/index.js
@@ -0,0 +1 @@
+export const makeHeaders = (token) => ({ authorization: `Bearer ${token}` });
diff --git a/client/src/store/itemSlice.js b/client/src/store/itemSlice.js
index 0a43f62..f0596f5 100644
--- a/client/src/store/itemSlice.js
+++ b/client/src/store/itemSlice.js
@@ -1,6 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 import axios from "axios";
 import * as URL from "../constants/urls";
+import { makeHeaders } from "../services/http";
 
 export const itemSlice = createSlice({
   name: "item",
@@ -29,25 +30,32 @@ export const itemSlice = createSlice({
 /**
  * redux-thunk which fetches Items asynchronously from db.
  */
-export const getItemsAsync = () => async (dispatch) => {
+export const getItemsAsync = (token) => async (dispatch) => {
   dispatch(setItemsLoading);
-  const { data } = await axios.get(URL.ITEMS);
+  const { data } = await axios.get(URL.ITEMS, {
+    headers: makeHeaders(token),
+  });
+
   dispatch(getItems(data));
 };
 
 /**
  * Creates a new Item in the db.
  */
-export const addItemAsync = (name) => async (dispatch) => {
-  const { data } = await axios.post(URL.ITEMS, { name });
+export const addItemAsync = (name, token) => async (dispatch) => {
+  const { data } = await axios.post(
+    URL.ITEMS,
+    { name },
+    { headers: makeHeaders(token) }
+  );
   dispatch(addItem(data));
 };
 
 /**
  * Deletes Item _id from the db.
  */
-export const deleteItemAsync = (id) => async (dispatch) => {
-  await axios.delete(`${URL.ITEMS}/${id}`);
+export const deleteItemAsync = (id, token) => async (dispatch) => {
+  await axios.delete(`${URL.ITEMS}/${id}`, { headers: makeHeaders(token) });
   dispatch(deleteItem(id));
 };