MODIF: implementing Redux step 2

ArthurGuez · Apr 3, 2021 · 51867dc · 51867dc
1 parent 25719cb
commit 51867dc
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 93 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,7 +2,10 @@
   "extends": ["eslint:recommended", "airbnb", "prettier", "react-app", "plugin:react/recommended"],
   "plugins": ["prettier"],
   "rules": {
-    "prettier/prettier": "error",
+    "react/no-unescaped-entities": "warn",
+    "react/prop-types": "warn",
+    "react/jsx-one-expression-per-line": "warn",
+    "prettier/prettier": "warn",
     "no-unused-vars": "warn",
     "no-console": "off",
     "func-names": "off"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
     "react-socks": "^2.1.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.jsx b/src/App.jsx
@@ -52,28 +52,26 @@ function App() {
       }
     };
     fetchUser();
-  }, []);
+  });
 
   return (
     <BreakpointProvider>
       <div className="App">
         <Header />
         <Router>
-          <>
-            <BottomNav />
-            <Switch>
-              <Route exact path="/" component={Places} />
-              <Route exact path="/rooms/:id" component={Place} />
-              <Route exact path="/rooms/:id/reserver" component={Reserver} />
-              <Route exact path="/rooms/:id/booking" component={Booking} />
-              <Route exact path="/bookings" component={Bookings} />
-              <Route exact path="/signup" component={Signup} />
-              <Route exact path="/login" component={Login} />
-              <Route exact path="/wishlists" component={Enregistres} />
-              <Route exact path="/inbox" component={Messages} />
-              <Route exact path="/account-settings" component={Profil} />
-            </Switch>
-          </>
+          <BottomNav />
+          <Switch>
+            <Route exact path="/" component={Places} />
+            <Route exact path="/rooms/:id" component={Place} />
+            <Route exact path="/rooms/:id/reserver" component={Reserver} />
+            <Route exact path="/rooms/:id/booking" component={Booking} />
+            <Route exact path="/bookings" component={Bookings} />
+            <Route exact path="/signup" component={Signup} />
+            <Route exact path="/login" component={Login} />
+            <Route exact path="/wishlists" component={Enregistres} />
+            <Route exact path="/inbox" component={Messages} />
+            <Route exact path="/account-settings" component={Profil} />
+          </Switch>
         </Router>
 
         <Footer />

diff --git a/src/Redux/slices/authenticationSlice.js b/src/Redux/slices/authenticationSlice.js
@@ -1,18 +1,28 @@
+import axios from 'axios';
+
+const API = process.env.REACT_APP_API;
+
 const initialState = {
   isAuthenticated: false,
   token: localStorage.getItem('token'),
   user: null,
-  isFetching: true,
+  isFetching: false,
 };
 
 export const authenticationReducer = (state = initialState, action) => {
   switch (action.type) {
+    case 'authentication/fetch':
+      return {
+        ...state,
+        isFetching: true,
+      };
     case 'authentication/login':
-      localStorage.setItem('token', action.payload);
+      localStorage.setItem('token', action.token);
       return {
         ...state,
         isAuthenticated: true,
-        token: action.payload,
+        token: action.token,
+        user: action.user,
         isFetching: false,
       };
     case 'authentication/logout':
@@ -42,27 +52,57 @@ export const authenticationReducer = (state = initialState, action) => {
   }
 };
 
-export function login(token) {
+// Action creators
+export function fetch() {
+  return {
+    type: 'authentication/fetch',
+  };
+}
+
+export function login(payload) {
   return {
     type: 'authentication/login',
-    payload: token,
+    token: payload.token,
+    user: payload.user,
   };
 }
+
 export function logout() {
   return {
     type: 'authentication/logout',
   };
 }
+
 export function loadUser(token) {
   return {
     type: 'authentication/loadUser',
     payload: token,
   };
 }
+
 export function noUser() {
   return {
     type: 'authentication/noUser',
   };
 }
 
+// Thunk functions
+export function fetchUser(email, password) {
+  return async (dispatch) => {
+    dispatch(fetch());
+    try {
+      const res = await axios.post(`${API}/signin`, {
+        email,
+        password,
+      });
+      if (res.status === 200) {
+        dispatch(login(res.data));
+      }
+    } catch (error) {
+      console.log('to do');
+    }
+  };
+}
+
+// Selectors
 export const selectAuthStatus = (state) => state.authentication;
diff --git a/src/Redux/slices/errorSlice.js b/src/Redux/slices/errorSlice.js
@@ -0,0 +1,3 @@
+const initialState = {
+  error: '',
+};
diff --git a/src/Redux/store.js b/src/Redux/store.js
@@ -1,8 +1,11 @@
-import { createStore, combineReducers } from 'redux';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
 import { authenticationReducer } from './slices/authenticationSlice';
 
+// eslint-disable-next-line import/prefer-default-export
 export const store = createStore(
   combineReducers({
     authentication: authenticationReducer,
-  })
+  }),
+  applyMiddleware(thunk)
 );
diff --git a/src/components/LoginForm.jsx b/src/components/LoginForm.jsx
@@ -1,57 +1,54 @@
-import React from 'react';
-
-import axios from 'axios';
+import React, { useState } from 'react';
 
 // React-Router
 import { Link, useHistory } from 'react-router-dom';
 
 // Redux
 import { useDispatch } from 'react-redux';
-import { login } from '../Redux/slices/authenticationSlice';
+import { fetchUser } from '../Redux/slices/authenticationSlice';
 
 import useForm from './useForm';
 import validate from './validators/ValidateLogin';
 
-const API = process.env.REACT_APP_API;
-
 const initialState = {
   email: '',
   password: '',
-  isSubmitting: false,
-  errorMessage: null,
 };
 
 const LoginForm = () => {
   const dispatch = useDispatch();
 
+  const history = useHistory();
+
   const { handleChange, handleSubmit, data, setData, errors } = useForm(
     initialState,
-    submit,
-    validate
+    validate,
+    submit
   );
 
-  const history = useHistory();
+  // Témoin soumission formulaire
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   async function submit() {
-    try {
-      const res = await axios.post(`${API}/signin`, {
-        email: data.email,
-        password: data.password,
-      });
-      if (res.status === 200) {
-        console.log(res);
-        dispatch(login(res.data));
-        history.push('/');
-        return;
-      }
-      throw res;
-    } catch (error) {
-      setData({
-        ...data,
-        isSubmitting: false,
-        errorMessage: error.message,
-      });
-    }
+    setIsSubmitting(true);
+    dispatch(fetchUser(data.email, data.password));
+    setIsSubmitting(false);
+
+    // try {
+    //   const res = await axios.post(`${API}/signin`, {
+    //     email: data.email,
+    //     password: data.password,
+    //   });
+    //   if (res.status === 200) {
+    //     dispatch(login(res.data));
+    //     history.push('/');
+    //   }
+    // } catch (error) {
+    //   setData({
+    //     ...data,
+    //     serverError: error.response.data.description,
+    //   });
+    // }
   }
 
   return (
@@ -85,13 +82,14 @@ const LoginForm = () => {
           </label>
 
           {errors.password && <p className="form__error">{errors.password}</p>}
+          {data.serverError && <p className="form__error">{data.serverError}</p>}
 
-          <button type="submit" disabled={data.isSubmitting} className="form__submit">
+          <button type="submit" disabled={isSubmitting} className="form__submit">
             Se connecter
           </button>
         </form>
         <div className="login__redirection">
-          <p>Vous n'avez pas de compte ?</p>
+          <p>Vous n&apos;avez pas de compte ?</p>
           <Link to="/signup">
             <button type="button" className="redirection__button">
               Inscription

diff --git a/src/components/PlaceItem.jsx b/src/components/PlaceItem.jsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const PlaceItem = (props) => {
+const PlaceItem = ({ place }) => {
   const {
     id,
     name,
     city,
-    max_guests,
+    max_guests: maxGuests,
     rooms,
     bathrooms,
     image,
     price_by_night: priceByNight,
-  } = props.place;
+  } = place;
   // console.log(props.place)
 
   // PlaceItem.propTypes = {
@@ -28,7 +28,7 @@ const PlaceItem = (props) => {
         </p>
         <p className="place__moreinfos">
           {' '}
-          {max_guests} pers. max ∙ {rooms} chambres ∙ {bathrooms} salles de bain
+          {maxGuests} pers. max ∙ {rooms} chambres ∙ {bathrooms} salles de bain
         </p>
         <p className="place__price-night"> {priceByNight}€/nuit </p>
         <p className="place__price-month"> {priceByNight * 30}€ pour un mois </p>

diff --git a/src/components/ReserverForm.jsx b/src/components/ReserverForm.jsx
@@ -51,8 +51,8 @@ const ReserverForm = (callback) => {
         `${API}/bookings`,
         {
           place_id: id,
-          check_in: Moment(data.check_in).utc().format('YYYY-MM-DDTHH:mm:ss.SSS') + 'Z',
-          check_out: Moment(data.check_out).utc().format('YYYY-MM-DDTHH:mm:ss.SSS') + 'Z',
+          check_in: `${Moment(data.check_in).utc().format('YYYY-MM-DDTHH:mm:ss.SSS')}Z`,
+          check_out: `${Moment(data.check_out).utc().format('YYYY-MM-DDTHH:mm:ss.SSS')}Z`,
         },
         {
           headers: { Authorization: `Bearer ${authStatus.token}` },

diff --git a/src/components/nav/BottomNav.jsx b/src/components/nav/BottomNav.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
+import { Breakpoint } from 'react-socks';
+
 // Redux
 import { useSelector } from 'react-redux';
 import { selectAuthStatus } from '../../Redux/slices/authenticationSlice';
 
-import { Breakpoint } from 'react-socks';
-
 // Components
 import LoggedBottomNav from './LoggedBottomNav';
 import GuestBottomNav from './GuestBottomNav';