Merge pull request #164 from Front-znad-zatoki/frontend/#161-add-loader

Frontend/#161 add loader
Front-znad-zatoki · Apr 13, 2021 · 4a1d398 · 4a1d398
2 parents a3c2676 + 0fc9455
commit 4a1d398
Show file tree

Hide file tree

Showing 17 changed files with 152 additions and 60 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -7,29 +7,30 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.1",
     "axios": "^0.21.1",
+    "eslint": "^7.21.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-compat": "^3.9.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
     "formik": "^2.2.6",
+    "husky": "^5.1.3",
     "moment": "^2.29.1",
     "node-sass": "^5.0.0",
+    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-date-picker": "^8.1.1",
     "react-dom": "^17.0.1",
+    "react-loader-spinner": "^4.0.0",
     "react-moment": "^1.1.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "react-slick": "^0.28.0",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.2.1",
-    "web-vitals": "^1.1.0",
-    "eslint": "^7.21.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-compat": "^3.9.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "husky": "^5.1.3",
-    "prettier": "^2.2.1"
+    "web-vitals": "^1.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/client/src/actions/Auth/index.js b/client/src/actions/Auth/index.js
@@ -143,7 +143,7 @@ export const login = async (formData, dispatch) => {
 };
 
 // Load User
-export const loadUser = async (dispatch) => {
+export const loadUser = async (dispatch, setLoading) => {
   try {
     const source = CancelToken.source();
     const res = await api.get('/users/me', {
@@ -155,6 +155,7 @@ export const loadUser = async (dispatch) => {
       payload: res.data,
     });
     source.cancel();
+    setLoading(false);
   } catch (err) {
     if (err.response) {
       console.log(err.response.data);

diff --git a/client/src/actions/Movies/index.js b/client/src/actions/Movies/index.js
@@ -3,10 +3,11 @@
 import api from '../../services/Api';
 
 // Get all movies
-export const getMovies = async (dispatch) => {
+export const getMovies = async (dispatch, setLoading) => {
   try {
     const res = await api.get(`movies`);
     dispatch(res.data);
+    setLoading(false);
     return res;
   } catch (error) {
     if (error.response) {
@@ -21,13 +22,14 @@ export const getMovies = async (dispatch) => {
 };
 
 // Get single movie screenings
-export const getMovieScreeningsByMovieId = async (id, dispatch) => {
+export const getMovieScreeningsByMovieId = async (id, dispatch, setLoading) => {
   try {
     const res = await api.get(`screenings`);
     const filteredScreenings = await res.data.filter((screening) => {
       return screening.movieId === id;
     });
     dispatch(filteredScreenings);
+    setLoading(false);
     return filteredScreenings;
   } catch (error) {
     if (error.response) {
@@ -42,12 +44,13 @@ export const getMovieScreeningsByMovieId = async (id, dispatch) => {
 };
 
 // Get single movie
-export const getMovieBySlug = async (slug) => {
+export const getMovieBySlug = async (slug, setLoading) => {
   try {
     const res = await api.get(`movies`);
     const movieFound = await res.data.find((movie) => {
       return movie.slug === slug;
     });
+    setLoading(false);
     return movieFound;
   } catch (error) {
     if (error.response) {
@@ -62,13 +65,18 @@ export const getMovieBySlug = async (slug) => {
 };
 
 // Get current cinema screenings
-export const getScreeningsForCurrentCinema = async (id, dispatch) => {
+export const getScreeningsForCurrentCinema = async (
+  id,
+  dispatch,
+  setLoading,
+) => {
   try {
     const res = await api.get(`screenings`);
     const filteredScreenings = await res.data.filter((screening) => {
       return screening.cinemaHallId.cinemaId._id.toString() === id;
     });
     dispatch(filteredScreenings);
+    setLoading(false);
     return filteredScreenings;
   } catch (error) {
     if (error.response) {
@@ -83,11 +91,12 @@ export const getScreeningsForCurrentCinema = async (id, dispatch) => {
 };
 
 // Get movie details
-export const getMovieDetails = (id, moviesInContext) => {
+export const getMovieDetails = (id, moviesInContext, setLoading) => {
   try {
     const res = moviesInContext.find((movie) => {
       return movie._id.toString() === id.toString();
     });
+    setLoading(false);
     return res;
   } catch (error) {
     console.log('Invalid data');

diff --git a/client/src/actions/Reservation/index.js b/client/src/actions/Reservation/index.js
@@ -42,7 +42,11 @@ export const getHallScreeningsByHallId = async (id, dispatch) => {
 };
 
 // Get single cinema hall screenings
-export const getOccupiedSeatsForScreening = async (id, dispatch) => {
+export const getOccupiedSeatsForScreening = async (
+  id,
+  dispatch,
+  setLoading,
+) => {
   try {
     const res = await api.get(`tickets`);
     const filteredTickets = await res.data.filter((ticket) => {
@@ -57,6 +61,7 @@ export const getOccupiedSeatsForScreening = async (id, dispatch) => {
       type: ADD_OCCUPIED_SEATS,
       payload: occupiedSeats,
     });
+    setLoading(false);
     return occupiedSeats;
   } catch (error) {
     if (error.response) {
@@ -71,7 +76,7 @@ export const getOccupiedSeatsForScreening = async (id, dispatch) => {
 };
 
 // Place Order
-export const placeOrder = async (formData, dispatch) => {
+export const placeOrder = async (formData, dispatch, setLoading) => {
   try {
     const orderDTO = {
       ...formData,
@@ -87,6 +92,7 @@ export const placeOrder = async (formData, dispatch) => {
       type: ADD_ORDER_DETAILS,
       payload: res.data.order,
     });
+    setLoading(false);
     return res;
   } catch (error) {
     if (error.response) {

diff --git a/client/src/components/CinemaHall/index.js b/client/src/components/CinemaHall/index.js
@@ -1,10 +1,12 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Seat from './Seat';
 import './style.scss';
 import { ReservationContext } from '../../context/Reservation';
 import { getOccupiedSeatsForScreening } from '../../actions/Reservation';
+import CustomLoader from '../Loader';
 
 const CinemaHall = () => {
+  const [loading, setLoading] = useState(false);
   const { reservation, dispatchReservation } = useContext(ReservationContext);
   const { cinemaHallId, _id } = reservation.screening;
   const nrOfRows = cinemaHallId.rows || 10;
@@ -13,14 +15,16 @@ const CinemaHall = () => {
   const rowsInLetter = [];
 
   useEffect(() => {
-    getOccupiedSeatsForScreening(_id, dispatchReservation);
+    setLoading(true);
+    getOccupiedSeatsForScreening(_id, dispatchReservation, setLoading);
   }, []);
   for (let i = 1; i <= nrOfColumns; i += 1) {
     columns.push(i);
   }
   for (let j = 1; j <= nrOfRows; j += 1) {
     rowsInLetter.push(String.fromCharCode(j + 64));
   }
+  if (loading) return <CustomLoader />;
 
   return (
     <div className="cinema__hall">

diff --git a/client/src/components/Loader/index.js b/client/src/components/Loader/index.js
@@ -0,0 +1,16 @@
+import Loader from 'react-loader-spinner';
+
+function CustomLoader() {
+  return (
+    <Loader
+      type="ThreeDots"
+      color="#6e093a"
+      height={100}
+      width={100}
+      //   timeout={2000}
+      style={{ textAlign: 'center' }}
+    />
+  );
+}
+
+export default CustomLoader;
diff --git a/client/src/domain/Auth/Login/index.js b/client/src/domain/Auth/Login/index.js
@@ -14,10 +14,11 @@ function Login() {
   const [alertMsg, setAlertMsg] = useState(null);
   const theme = useContext(ThemeContext)[0];
   const currentTheme = AppTheme[theme];
-  const [formData, setFormData] = useState({
+  const initialValue = {
     email: '',
     password: '',
-  });
+  };
+  const [formData, setFormData] = useState(initialValue);
   const history = useHistory();
   const { email, password } = formData;
   const { poster } = movies[1];
@@ -31,10 +32,13 @@ function Login() {
   const onSubmit = async (event) => {
     event.preventDefault();
     const isLoggedIn = await login({ email, password }, dispatchUserContext);
-    history.push('/');
-
-    if (!isLoggedIn) {
+    if (isLoggedIn) history.push('/');
+    else {
+      setFormData(initialValue);
       setAlertMsg('Could not login user. Try again');
+      setTimeout(() => {
+        setAlertMsg(null);
+      }, 2000);
     }
   };
 

diff --git a/client/src/domain/MovieInfoBar/index.js b/client/src/domain/MovieInfoBar/index.js
@@ -6,14 +6,15 @@ import { getMovieDetails } from '../../actions/Movies';
 import './style.scss';
 
 const MovieInfoBar = ({ screening }) => {
+  const [loading, setLoading] = useState(false);
   const { dispatchReservation } = useContext(ReservationContext);
   const [currentMovie, setCurrentMovie] = useState();
   const { movies } = useContext(MoviesContext);
   const history = useHistory();
   const screeningHour = new Date(screening.startDate).getHours();
   const screeningMinutes = new Date(screening.startDate).getMinutes();
   useEffect(() => {
-    const movieDetails = getMovieDetails(screening.movieId, movies);
+    const movieDetails = getMovieDetails(screening.movieId, movies, setLoading);
     setCurrentMovie((prevCurrentMovie) => movieDetails);
   }, []);
   useEffect(() => {}, [currentMovie]);