Frontend/#062 user dashboard

.eslintrc.json

@@ -15,7 +15,8 @@
     "class-methods-use-this": "off",
     "import/extensions": "off",
     "object-curly-newline": "warn",
-    "consistent-return": "warn"
+    "consistent-return": "warn",
+    "no-underscore-dangle": "warn"
   },
   "env": {
     "browser": true,

api/order/Order.js

@@ -60,7 +60,7 @@ orderSchema.methods.createOrdersDependencies = async function createOrdersDepend
 };
 
 orderSchema.post(
-  'findOneAndDelete',
+  'remove',
   { query: true, document: true },
   async (doc) => {
     try {

api/user/userMeRoute.js

@@ -153,4 +153,70 @@ router.put(
   },
 );
 
+// @route    PUT api/users/me/email
+// @desc     Update profile
+// @access   Private
+router.put(
+  '/',
+  authMiddleware,
+  check('email', 'Insert correct email address')
+    .notEmpty()
+    .isEmail()
+    .normalizeEmail()
+    .trim(),
+  async (req, res) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    try {
+      const user = await User.findOneAndUpdate(
+        req.user.id,
+        { email: req.body.email },
+        { new: true },
+      ).select('-password');
+      if (!user) res.status(404).send('User not found');
+      await user.save();
+      res.status(200).json({ user: user, isAuthenticated: true });
+    } catch (err) {
+      console.error(err.message);
+      res.status(500).send('Server Error');
+    }
+  },
+);
+
+// @route    PUT api/users/me/name
+// @desc     Update name
+// @access   Private
+router.put(
+  '/name',
+  authMiddleware,
+  check('surname', 'Surame is required')
+    .notEmpty()
+    .isString()
+    .trim()
+    .isLength({ min: 5, max: 255 }),
+  async (req, res) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    try {
+      const user = await User.findOneAndUpdate(
+        req.user.id,
+        { surname: req.body.surname },
+        { new: true },
+      ).select('-password');
+      if (!user) res.status(404).send('User not found');
+      await user.save();
+      res.status(200).json({ user: user, isAuthenticated: true });
+    } catch (err) {
+      console.error(err.message);
+      res.status(500).send('Server Error');
+    }
+  },
+);
+
 export default router;

api/user/userOrdersRoute.js

@@ -45,6 +45,30 @@ router.get(
         {
           path: 'tickets',
           model: 'Ticket',
+          populate: [
+            {
+              path: 'screening',
+              model: 'Screening',
+              select: 'startDate cinemaHallId movieId',
+              populate: [
+                {
+                  path: 'cinemaHallId',
+                  model: 'CinemaHall',
+                  select: 'name',
+                },
+                {
+                  path: 'movieId',
+                  model: 'Movie',
+                  select: 'title',
+                },
+              ],
+            },
+            {
+              path: 'seat',
+              model: 'Seat',
+              select: 'row column',
+            },
+          ],
         },
       );
       const orderIds = orders.map((orderData) => orderData.id);

client/src/actions/Auth/index.js

@@ -13,7 +13,6 @@ import {
 
 // Register User
 export const register = async (formData, dispatch) => {
-  console.log('registering');
   try {
     const source = CancelToken.source();
     const res = await api.post('/users/signup', formData, {
@@ -27,9 +26,16 @@ export const register = async (formData, dispatch) => {
     source.cancel();
     return true;
   } catch (err) {
-    const { errors } = err.response.data;
-    if (errors) {
-      errors.forEach((error) => alert(error.msg, 'Something went wrong'));
+    if (err.response) {
+      const { errors } = err.response.data;
+      if (errors) {
+        errors.forEach((error) => alert(error.msg, 'Something went wrong'));
+      }
+    }
+    if (err.request) {
+      console.log(err.request);
+    } else {
+      console.log('Error', err.message);
     }
     dispatch({
       type: REGISTER_FAIL,
@@ -51,12 +57,18 @@ export const logout = async (dispatch) => {
     source.cancel();
     return true;
   } catch (err) {
-    const { errors } = err.response.data;
+    if (err.response) {
+      const { errors } = err.response.data;
 
-    if (errors) {
-      errors.forEach((error) => dispatch(alert(error.msg, 'danger')));
+      if (errors) {
+        errors.forEach((error) => alert(error.msg, 'danger'));
+      }
+    }
+    if (err.request) {
+      console.log(err.request);
+    } else {
+      console.log('Error', err.message);
     }
-
     dispatch({
       type: LOGOUT_FAIL,
     });
@@ -83,8 +95,17 @@ export const checkIfIsAuthenticated = async (dispatch) => {
       type: AUTH_ERROR,
     });
     return false;
-  } catch {
-    console.log('Cannot fetch at the moment');
+  } catch (err) {
+    if (err.response) {
+      console.log(err.response.data);
+      console.log(err.response.status);
+      console.log(err.response.headers);
+    } else if (err.request) {
+      console.log(err.request);
+    } else {
+      console.log('Error', err.message);
+    }
+    console.log(err.config);
   }
 };
 
@@ -105,20 +126,29 @@ export const login = async (formData, dispatch) => {
     });
     source.cancel();
   } catch (err) {
-    const { errors } = err.response.data;
+    if (err.response) {
+      const { errors } = err.response.data;
 
-    if (errors) {
-      errors.forEach((error) => dispatch(alert(error.msg, 'danger')));
+      if (errors) {
+        errors.forEach((error) => alert(error.msg, 'danger'));
+      }
+    } else if (err.request) {
+      console.log(err.request);
+    } else {
+      console.log('Error', err.message);
     }
-
+    console.log(err.config);
     dispatch({
       type: LOGIN_FAIL,
+      payload: null,
     });
+    alert('Login failed');
   }
 };
 
 // Load User
 export const loadUser = async (dispatch) => {
+  console.log(dispatch);
   try {
     const source = CancelToken.source();
     const res = await api.get('/users/me', {
@@ -131,8 +161,18 @@ export const loadUser = async (dispatch) => {
     });
     source.cancel();
   } catch (err) {
-    dispatch({
-      type: AUTH_ERROR,
-    });
+    if (err.response) {
+      console.log(err.response.data);
+      console.log(err.response.status);
+      console.log(err.response.headers);
+    } else if (err.request) {
+      console.log(err.request);
+    } else {
+      console.log('Error', err.message);
+    }
+    console.log(err.config);
+    // dispatch({
+    //   type: AUTH_ERROR,
+    // });
   }
 };

client/src/actions/Orders/index.js

@@ -0,0 +1,42 @@
+/* eslint-disable import/prefer-default-export */
+import api from '../../services/Api';
+import { ORDER_ERROR, GET_ORDER, DELETE_ORDER } from '../types';
+
+// Get order
+export const getUsersOrder = async (id) => {
+  try {
+    const res = await api.get(`users/me/orders/${id}`);
+    return res;
+    // TODO: define if there is a need for reducer
+  } catch (error) {
+    if (error.response) {
+      console.log(error.response.data);
+    } else if (error.request) {
+      console.log(error.request);
+    } else {
+      console.log('Error', error.message);
+    }
+    console.log(error.config);
+    return false;
+  }
+};
+
+// Delete order
+export const deleteUsersOrder = async (id, dispatch) => {
+  try {
+    await api.delete(`users/me/orders/${id}`);
+    const user = api.get(`users/me/`);
+    return user;
+    // TODO: define if there is a need for reducer
+  } catch (error) {
+    if (error.response) {
+      console.log(error.response.data);
+    } else if (error.request) {
+      console.log(error.request);
+    } else {
+      console.log('Error', error.message);
+    }
+    console.log(error.config);
+    return false;
+  }
+};

client/src/actions/types.js

@@ -15,4 +15,4 @@ export const GET_ORDERS = 'GET_ORDERS';
 export const GET_ORDER = 'GET_ORDER';
 export const ORDER_ERROR = 'ORDER_ERROR';
 export const DELETE_ORDER = 'DELETE_ORDER';
-export const ADD_ORDER = 'ADD_POST';
+export const ADD_ORDER = 'ADD_ORDER';

client/src/components/App/index.js

@@ -1,18 +1,15 @@
 import './style.scss';
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Landing from '../../domain/Landing';
 import SignUp from '../../domain/Auth/SignUp';
 import Login from '../../domain/Auth/Login';
 import MovieList from '../../domain/MovieList';
-import MovieView from '../../domain/MovieView';
 import { ThemeContext } from '../../context/Theme';
 import Navbar from '../Navbar/index';
-import MovieDetails from '../../domain/MovieDetails/index';
-import MovieSlider from '../../domain/MovieSlider';
 import MoviesContextProvider from '../../context/Movies';
 import AuthContextProvider from '../../context/Auth';
-import moviesMock from '../../mock/moviesMock';
+import UserDashboard from '../../domain/User';
 
 function App() {
   const themeHook = useState('light');
@@ -32,10 +29,8 @@ function App() {
                   <Route exact path="/signup" component={SignUp} />
                   {/* http://localhost:3000/login */}
                   <Route exact path="/login" component={Login} />
-                  {/* http://localhost:3000/logout */}
-                  {/* <Route exact path='/login' component={ Logout }/> */}
                   {/* http://localhost:3000/users/me */}
-                  {/* <Route exact path='/users/me' component={ UserProfile }/> */}
+                  <Route exact path="/users/me" component={UserDashboard} />
                   {/* http://localhost:3000/reservation/pre/:screeningId */}
                   {/* <Route path='/reservation/pre/:screeningId' component={ ReservationPreview }/> */}
                   {/* http://localhost:3000/reservation/chooseSeats/:screeningId */}

client/src/components/Navbar/index.js

@@ -1,13 +1,13 @@
 import { useContext, useState } from 'react';
 import './style.scss';
-import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import { logout } from '../../actions/Auth';
 import { AuthContext } from '../../context/Auth';
 import { ThemeContext } from '../../context/Theme';
 import AppTheme from '../../context/Theme/themeColors';
 import ThemeToggler from '../ThemeToggler';
 
-function Navbar() {
+function Navbar(props) {
   const { userContext, dispatchUserContext } = useContext(AuthContext);
   const { isAuthenticated, user } = userContext;
   const theme = useContext(ThemeContext)[0];
@@ -18,8 +18,8 @@ function Navbar() {
     if (!isLoggedOut) {
       alert('Could not log out user. Try again');
     }
+    return <Redirect to="/movies" />;
   };
-  // console.log(isAuthenticated);
   const unauthenticatedNavBar = () => {
     return (
       <>
@@ -39,10 +39,7 @@ function Navbar() {
         <Link to="/users/me">
           <li className="navbar__list-item">Me</li>
         </Link>
-        <Link to="/users/orders">
-          <li className="navbar__list-item">Orders</li>
-        </Link>
-        {user.isAdmin ? (
+        {user && user.isAdmin ? (
           <Link to="/admin">
             <li className="navbar__list-item">Admin</li>
           </Link>

client/src/components/Navbar/style.scss

@@ -1,6 +1,5 @@
 @import '../../styles/variables';
 .navbar {
-  background-color: $color-secondary;
   font-family: $font-primary;
   font-size: $font-size-secondary;
 }