Places are now stored in Redux

src/Redux/slices/authenticationSlice.js

@@ -1,74 +1,48 @@
 import { loginUser } from '../../api';
 import { setError } from './errorSlice';
+import { requestPending, requestFailed } from './requestSlice';
 
 const initialState = {
   isAuthenticated: false,
   token: localStorage.getItem('token'),
   user: null,
-  isLoading: false,
 };
 
 export const authenticationReducer = (state = initialState, action) => {
   switch (action.type) {
-    case 'authentication/requestPending':
-      return {
-        ...state,
-        isLoading: true,
-      };
-    case 'authentication/requestFailed':
-      return {
-        ...state,
-        isLoading: false,
-      };
     case 'authentication/login':
       localStorage.setItem('token', action.token);
       return {
         ...state,
         isAuthenticated: true,
         token: action.token,
         user: action.user,
-        isLoading: false,
       };
     case 'authentication/logout':
       localStorage.removeItem('token');
       return {
         ...state,
         isAuthenticated: false,
         token: null,
-        isLoading: false,
       };
     case 'authentication/loadUser':
       return {
         ...state,
         isAuthenticated: true,
         token: action.payload,
-        isLoading: false,
       };
     case 'authentication/noUser':
       return {
         ...state,
         isAuthenticated: false,
         token: null,
-        isLoading: false,
       };
     default:
       return state;
   }
 };
 
 // Action creators
-export function requestPending() {
-  return {
-    type: 'authentication/requestPending',
-  };
-}
-
-export function requestFailed() {
-  return {
-    type: 'authentication/requestFailed',
-  };
-}
-
 export function login(payload) {
   return {
     type: 'authentication/login',

src/Redux/slices/placeSlice.js

@@ -0,0 +1,41 @@
+import { fetchPlaces } from '../../api';
+import { setError } from './errorSlice';
+import { requestPending, requestFailed } from './requestSlice';
+
+const initialState = [];
+
+export const placeReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'place/loadData':
+      return action.payload;
+    default:
+      return state;
+  }
+};
+
+// Action creators
+export function loadData(data) {
+  return {
+    type: 'place/loadData',
+    payload: data,
+  };
+}
+
+// Thunk action creators
+export function loadPlaces() {
+  return async (dispatch) => {
+    dispatch(requestPending());
+    try {
+      const res = await fetchPlaces();
+      if (res.status === 200) {
+        dispatch(loadData(res.data));
+      }
+    } catch (error) {
+      dispatch(requestFailed());
+      dispatch(setError(error));
+    }
+  };
+}
+
+// Selectors
+export const selectData = (state) => state.place;

src/Redux/slices/requestSlice.js

@@ -0,0 +1,36 @@
+const initialState = {
+  isLoading: false,
+};
+
+export const requestReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'request/pending':
+      return {
+        ...state,
+        isLoading: true,
+      };
+    case 'request/failed':
+      return {
+        ...state,
+        isLoading: false,
+      };
+    default:
+      return state;
+  }
+};
+
+// Action creators
+export function requestPending() {
+  return {
+    type: 'authentication/requestPending',
+  };
+}
+
+export function requestFailed() {
+  return {
+    type: 'authentication/requestFailed',
+  };
+}
+
+// Selectors
+export const selectRequestStatus = (state) => state.request;

src/Redux/store.js

@@ -1,12 +1,14 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { authenticationReducer } from './slices/authenticationSlice';
+import { placeReducer } from './slices/placeSlice';
 import { errorReducer } from './slices/errorSlice';
 
 // eslint-disable-next-line import/prefer-default-export
 export const store = createStore(
   combineReducers({
     authentication: authenticationReducer,
+    place: placeReducer,
     error: errorReducer,
   }),
   applyMiddleware(thunk)

src/api.js

@@ -8,8 +8,5 @@ export const loginUser = (email, password) =>
     password,
   });
 
-export const getPlaces = async () => null;
-//   await axios.post(`${API}/signin`, {
-//     email,
-//     password,
-//   });
+export const fetchPlaces = () => axios.get(`${API}/places`);
+export const fetchPlace = (id) => axios.get(`${API}/place/${id}`);

src/components/pages/Places.jsx

@@ -1,22 +1,21 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useEffect } from 'react';
 import { Breakpoint } from 'react-socks';
 
-import PlaceItem from '../PlaceItem';
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
+import { loadPlaces, selectData } from '../../Redux/slices/placeSlice';
 
-const API = process.env.REACT_APP_API;
+import PlaceItem from '../PlaceItem';
 
 const Home = () => {
-  const [places, setPlaces] = useState([]);
+  const dispatch = useDispatch();
 
   useEffect(() => {
-    const fetchPlaces = async () => {
-      const res = await axios(`${API}/places/`);
+    dispatch(loadPlaces());
+  }, [dispatch]);
+
+  const places = useSelector(selectData);
 
-      setPlaces(res.data);
-    };
-    fetchPlaces();
-  }, []);
   return (
     <>
       <Breakpoint small down>