Accessing Protected Resources by Setting Up Rules in Firebase

README.md

@@ -142,3 +142,4 @@ Dependency Installation: **`npm i --save redux-thunk`**
 5. Storing the Response Token from Sing-In/Sign-Up: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/674882c777eda0514e1432aa4a85ebd1a328ff08)
 6. Adding a `<Spinner />` UI Component for Sign-In & Showing Errors on the View: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/9e2332b6ecde73b692cdb532e8344d4517b68ac5)
 7. Logging Users Out: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/4dae4c4f481f2727a40da9c9f59f4fd989508fb9)
+8. Accessing Protected Resources by Setting Up Rules in Firebase 🔥: [Commit Details]()

src/components/UI/Modal/Modal.component.jsx

@@ -11,12 +11,12 @@ const StyledModal = styled.div`
   z-index: 500;
   background-color: white;
   width: 70%;
-  height: calc(100vh - 45%);
+  /* height: calc(100vh - 60%); */
   border: 1px solid #ccc;
   box-shadow: 1px 1px 1px black;
   padding: 16px;
   left: 15%;
-  top: 30%;
+  top: 15%;
   box-sizing: border-box;
   transition: all 0.3s ease-out;
   overflow-y: auto;

src/containers/Orders/Orders.component.jsx

@@ -13,7 +13,7 @@ class Orders extends Component {
   state = { orders: [], loading: true, }
 
   componentDidMount() {
-    this.props.onFetchOrders();
+    this.props.onFetchOrders(this.props.token);
   }
 
   render() {
@@ -35,7 +35,7 @@ class Orders extends Component {
   }
 }
 
-const mapStateToProps = state => ({ orders: state.order.orders, loading: state.order.loading, });
-const mapDispatchToProps = dispatch => ({ onFetchOrders: () => dispatch(actions.fetchOrdersAsync()) });
+const mapStateToProps = state => ({ orders: state.order.orders, loading: state.order.loading, token: state.auth.token, });
+const mapDispatchToProps = dispatch => ({ onFetchOrders: token => dispatch(actions.fetchOrdersAsync(token)) });
 
 export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(Orders, axios));

src/store/actions/order.js

@@ -22,11 +22,16 @@ export const purchaseBurgerStart = () => {
   };
 };
 
+// We can get the token from the Redux STORE in 2 ways:
+//  1. Using getState method passed along with dispatch.
+//  2. Passing the token to action creator through React.
+
+// #1: Using getState method passed along with dispatch.
 export const purchaseBurgerAsync = orderData => (
-  dispatch => {
+  (dispatch, getState) => {
     dispatch(purchaseBurgerStart());
     axios
-      .post("/orders.json", orderData)
+      .post(`/orders.json?auth=${getState().auth.token}`, orderData)
       .then(response => {
         console.log(response.data);
         dispatch(purchaseBurgerSuccess(response.data.name, orderData));
@@ -47,10 +52,11 @@ export const fetchOrdersSuccess = orders => ({ type: actionTypes.FETCH_ORDERS_SU
 export const fetchOrdersFail = error => ({ type: actionTypes.FETCH_ORDERS_FAIL, error });
 export const fetchOrdersStart = () => ({ type: actionTypes.FETCH_ORDERS_START, });
 
-export const fetchOrdersAsync = () => dispatch => {
+// #2: Passing the token to fetchOrdersAsync() through React.
+export const fetchOrdersAsync = token => dispatch => {
   dispatch(fetchOrdersStart());
   axios
-    .get("/orders.json")
+    .get(`/orders.json?auth=${token}`)
     .then(res => {
       const fetchedOrders = [];
       for (let key in res.data) {