ruidy/MERN_sample_app
1
0
Fork 0
mirror of https://github.com/rjNemo/MERN_sample_app synced 2026-06-12 11:36:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

header creation in http. Sample auth request to backend.

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-24 15:00:54 +02:00
parent 85e8067b6c
commit 40ccfaf90f
3 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/List/index.jsx
View file

@ -6,6 +6,7 @@ import {
deleteItemAsync, deleteItemAsync,
getItemsAsync, getItemsAsync,
} from "../../store/itemSlice"; } from "../../store/itemSlice";
import { useFirebase } from "../../services/auth";
const useStyles = () => ({ const useStyles = () => ({
removeBtn: { removeBtn: {
@ -20,12 +21,17 @@ export default function List() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const styles = useStyles(); const styles = useStyles();
const firebase = useFirebase();
// UseEffect loads items from the db when component renders. // UseEffect loads items from the db when component renders.
// Precising dependencies so it doesn't render infinitely. // Precising dependencies so it doesn't render infinitely.
useEffect(() => { useEffect(() => {
dispatch(getItemsAsync()); firebase.auth.onAuthStateChanged(async (user) => {
}, [dispatch]); if (user) {
const token = await firebase.auth.currentUser.getIdToken();
dispatch(getItemsAsync(token));
}
});
}, [dispatch, firebase.auth]);
return ( return (
<ListGroup> <ListGroup>

1
client/src/services/http/index.js Normal file
View file

@ -0,0 +1 @@
export const makeHeaders = (token) => ({ authorization: `Bearer ${token}` });

20
client/src/store/itemSlice.js
View file

@ -1,6 +1,7 @@
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
import axios from "axios"; import axios from "axios";
import * as URL from "../constants/urls"; import * as URL from "../constants/urls";
import { makeHeaders } from "../services/http";
export const itemSlice = createSlice({ export const itemSlice = createSlice({
name: "item", name: "item",
@ -29,25 +30,32 @@ export const itemSlice = createSlice({
/** /**
* redux-thunk which fetches Items asynchronously from db. * redux-thunk which fetches Items asynchronously from db.
*/ */
export const getItemsAsync = () => async (dispatch) => { export const getItemsAsync = (token) => async (dispatch) => {
dispatch(setItemsLoading); dispatch(setItemsLoading);
const { data } = await axios.get(URL.ITEMS); const { data } = await axios.get(URL.ITEMS, {
headers: makeHeaders(token),
});
dispatch(getItems(data)); dispatch(getItems(data));
}; };
/** /**
* Creates a new Item in the db. * Creates a new Item in the db.
*/ */
export const addItemAsync = (name) => async (dispatch) => { export const addItemAsync = (name, token) => async (dispatch) => {
const { data } = await axios.post(URL.ITEMS, { name }); const { data } = await axios.post(
URL.ITEMS,
{ name },
{ headers: makeHeaders(token) }
);
dispatch(addItem(data)); dispatch(addItem(data));
}; };
/** /**
* Deletes Item _id from the db. * Deletes Item _id from the db.
*/ */
export const deleteItemAsync = (id) => async (dispatch) => { export const deleteItemAsync = (id, token) => async (dispatch) => {
await axios.delete(`${URL.ITEMS}/${id}`); await axios.delete(`${URL.ITEMS}/${id}`, { headers: makeHeaders(token) });
dispatch(deleteItem(id)); dispatch(deleteItem(id));
}; };