├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   ├── house.jpg
    │   └── house.png
    ├── constants
    │   └── index.js
    ├── index.js
    ├── redux
    │   ├── store.js
    │   ├── users
    │   │   └── usersSlice.js
    │   ├── houses
    │   │   ├── deleteHouseSlice.js
    │   │   └── housesSlice.js
    │   ├── login
    │   │   └── loginSlice.js
    │   ├── logout
    │   │   └── logoutSlice.js
    │   ├── signup
    │   │   └── signupSlice.js
    │   └── reservations
    │   │   └── reservationsSlice.js
    ├── index.css
    ├── components
    │   ├── HousesList.jsx
    │   ├── MyReservations.jsx
    │   ├── DeleteReservationButton.jsx
    │   ├── House.jsx
    │   ├── Splash.jsx
    │   ├── ReservationCard.jsx
    │   ├── Logout.jsx
    │   ├── HouseSlider.jsx
    │   ├── HouseReservations.jsx
    │   ├── ShowHouse.jsx
    │   ├── LoginForm.jsx
    │   ├── Navbar.jsx
    │   ├── Reservation.jsx
    │   ├── SignupForm.jsx
    │   ├── DeleteHouse.jsx
    │   └── AddHouse.jsx
    └── App.jsx
├── .babelrc
├── .gitignore
├── .stylelintrc.json
├── .eslintrc.json
├── tailwind.config.js
├── LICENSE
├── README.md
├── package.json
└── .github
    └── workflows
        └── linters.yml


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGideon/Alpha-Reservation/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGideon/Alpha-Reservation/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGideon/Alpha-Reservation/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/assets/house.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGideon/Alpha-Reservation/HEAD/src/assets/house.jpg


--------------------------------------------------------------------------------
/src/assets/house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGideon/Alpha-Reservation/HEAD/src/assets/house.png


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |       "@babel/preset-react"
4 |   ],
5 |   "plugins": ["@babel/plugin-syntax-jsx"]
6 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/constants/index.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable quotes */
 2 | const links = [
 3 |   { path: "/home", text: "Houses" },
 4 |   { path: "/reserve", text: "Reserve" },
 5 |   { path: "/myReservations", text: "My Reservations" },
 6 |   { path: "/addHouse", text: "Add House" },
 7 |   { path: "/deleteHouse", text: "Delete House" },
 8 |   { path: "/logout", text: "Logout" },
 9 | ];
10 | 
11 | const backendLink = "https://alpha-reservation-a6eafb83816b.herokuapp.com/";
12 | 
13 | export { links, backendLink };
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import { BrowserRouter } from 'react-router-dom';
 4 | import { Provider } from 'react-redux';
 5 | import App from './App';
 6 | import store from './redux/store';
 7 | import './index.css';
 8 | 
 9 | const root = ReactDOM.createRoot(document.getElementById('root'));
10 | root.render(
11 |   <React.StrictMode>
12 |     <BrowserRouter>
13 |       <Provider store={store}>
14 |         <App />
15 |       </Provider>
16 |     </BrowserRouter>
17 |   </React.StrictMode>,
18 | );
19 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit';
 2 | import housesReducer from './houses/housesSlice';
 3 | import reservationsReducer from './reservations/reservationsSlice';
 4 | import loginReducer from './login/loginSlice';
 5 | import logoutReducer from './logout/logoutSlice';
 6 | import signupReducer from './signup/signupSlice';
 7 | 
 8 | const store = configureStore({
 9 |   reducer: {
10 |     houses: housesReducer,
11 |     reservations: reservationsReducer,
12 |     login: loginReducer,
13 |     logout: logoutReducer,
14 |     signup: signupReducer,
15 |   },
16 | });
17 | 
18 | export default store;
19 | 


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["stylelint-config-standard"],
 3 |   "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
 4 |   "rules": {
 5 |     "at-rule-no-unknown": [
 6 |       true,
 7 |       {
 8 |         "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
 9 |       }
10 |     ],
11 |     "scss/at-rule-no-unknown":  [
12 |       true,
13 |       {
14 |         "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
15 |       }
16 |     ],
17 |     "csstree/validator": true
18 |   },
19 |   "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
20 | }


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Noto+Sans+Display:wght@400;500;900&family=Ubuntu:wght@400;700&display=swap');
 6 | 
 7 | * {
 8 |   scroll-behavior: smooth;
 9 | }
10 | 
11 | *::-webkit-scrollbar {
12 |   width: 8px;
13 | }
14 | 
15 | *::-webkit-scrollbar-track {
16 |   background-color: #f1f1f1;
17 | }
18 | 
19 | *::-webkit-scrollbar-thumb {
20 |   background-color: #888;
21 |   border-radius: 10px;
22 | }
23 | 
24 | *::-webkit-scrollbar-thumb:hover {
25 |   background-color: #555;
26 | }
27 | 
28 | .house-background {
29 |   background-image: url("https://rb.gy/paine");
30 | }
31 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true,
 5 |     "jest": true
 6 |   },
 7 |   "parser": "@babel/eslint-parser",
 8 |   "parserOptions": {
 9 |     "ecmaFeatures": {
10 |       "jsx": true
11 |     },
12 |     "ecmaVersion": 2018,
13 |     "sourceType": "module"
14 |   },
15 |   "extends": ["airbnb", "plugin:react/recommended", "plugin:react-hooks/recommended"],
16 |   "plugins": ["react"],
17 |   "rules": {
18 |     "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
19 |     "react/react-in-jsx-scope": "off",
20 |     "import/no-unresolved": "off",
21 |     "no-shadow": "off"
22 |   },
23 |   "ignorePatterns": [
24 |     "dist/",
25 |     "build/"
26 |   ]
27 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './src/**/*.{js,jsx,ts,tsx}',
 5 |   ],
 6 |   theme: {
 7 |     extend: {
 8 |       colors: {
 9 |         mustard: '#ffb400',
10 |         lime: '#97bf0f',
11 |         limelight: '#96bf01',
12 |         'black-100': '#101010',
13 |         'white-100': '#f5f5f5',
14 |         'gray-100': '#b6b6b6',
15 |       },
16 |       fontFamily: {
17 |         noto: ['Noto Sans Display', 'sans-serif'],
18 |         kaushan: ['Kaushan Script', 'cursive'],
19 |         ubuntu: ['Ubuntu', 'sans-serif'],
20 |       },
21 |       animation: {
22 |         'pulse-slow': 'pulse 3s linear infinite',
23 |       },
24 |       screens: {
25 |         tablet: '1640px',
26 |         xl: '1340px',
27 |       },
28 |     },
29 |   },
30 |   plugins: [],
31 | };
32 | 


--------------------------------------------------------------------------------
/src/redux/users/usersSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | import { backendLink } from '../../constants';
 4 | 
 5 | const initialState = {
 6 |   usersList: [],
 7 |   isLoading: false,
 8 | };
 9 | 
10 | export const fetchUsers = createAsyncThunk('users/fetchUsers',
11 |   async () => {
12 |     const response = await axios(`${backendLink}users`);
13 |     return response.data;
14 |   });
15 | 
16 | const usersSlice = createSlice({
17 |   name: 'users',
18 |   initialState,
19 |   extraReducers: (builder) => {
20 |     builder
21 |       .addCase(fetchUsers.pending, (state) => ({
22 |         ...state,
23 |         isLoading: true,
24 |       }))
25 |       .addCase(fetchUsers.fulfilled, (state, action) => ({
26 |         ...state,
27 |         usersList: action.payload,
28 |         isLoading: false,
29 |       }))
30 |       .addCase(fetchUsers.rejected, (state) => ({
31 |         ...state,
32 |         isLoading: false,
33 |       }));
34 |   },
35 | });
36 | 
37 | export default usersSlice.reducer;
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 José Montoya, Mohamed Abd Elmohsen Saleh, Simon Gideon, Bryan Hurtado.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/redux/houses/deleteHouseSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | 
 4 | import { backendLink } from '../../constants';
 5 | 
 6 | const initialState = {
 7 |   house: null,
 8 |   isLoading: false,
 9 | };
10 | 
11 | export const deleteHouse = createAsyncThunk(
12 |   'houses/deleteHouse',
13 |   async (houseId) => {
14 |     const token = localStorage.getItem('token');
15 | 
16 |     await axios.delete(`${backendLink}houses/${houseId}`, {
17 |       headers: {
18 |         Authorization: token,
19 |       },
20 |     });
21 |     return houseId;
22 |   },
23 | );
24 | 
25 | const deleteHouseSlice = createSlice({
26 |   name: 'deleteHouse',
27 |   initialState,
28 |   extraReducers: (builder) => {
29 |     builder
30 |       .addCase(deleteHouse.pending, (state) => ({
31 |         ...state,
32 |         isLoading: true,
33 |       }))
34 |       .addCase(deleteHouse.fulfilled, (state, action) => ({
35 |         ...state,
36 |         house: action.payload,
37 |         isLoading: false,
38 |       }))
39 |       .addCase(deleteHouse.rejected, (state) => ({
40 |         ...state,
41 |         isLoading: false,
42 |       }));
43 |   },
44 | });
45 | 
46 | export default deleteHouseSlice.reducer;
47 | 


--------------------------------------------------------------------------------
/src/components/HousesList.jsx:
--------------------------------------------------------------------------------
 1 | import { RxDotFilled } from 'react-icons/rx';
 2 | import { useNavigate } from 'react-router-dom';
 3 | import { useEffect } from 'react';
 4 | import PropTypes from 'prop-types';
 5 | import HouseSlider from './HouseSlider';
 6 | 
 7 | const HousesList = (props) => {
 8 |   const { authorized } = props;
 9 |   const navigate = useNavigate();
10 |   useEffect(() => {
11 |     if (!authorized) {
12 |       navigate('/');
13 |     }
14 |   }, [authorized, navigate]);
15 |   if (!authorized) {
16 |     return (
17 |       <>
18 |       </>
19 |     );
20 |   }
21 | 
22 |   return (
23 |     <div className="h-screen w-full xl:w-5/6 2xl:w-full  flex flex-col justify-center">
24 |       <h1 className="text-center text-4xl font-black tracking-wider mt-10">LATEST HOUSES</h1>
25 |       <p className="mb-4 md:mb-10 text-center text-gray-100 text-md font-medium mt-4">Please select a House</p>
26 |       <ul className="flex top-4 justify-center py-2 list-none mb-8 md:mb-20">
27 |         {Array.from({ length: 20 }, (_, i) => (
28 |           <li className="text-sm text-gray-100" key={i}><RxDotFilled /></li>
29 |         ))}
30 |       </ul>
31 |       <HouseSlider />
32 |     </div>
33 |   );
34 | };
35 | 
36 | HousesList.propTypes = {
37 |   authorized: PropTypes.bool.isRequired,
38 | };
39 | export default HousesList;
40 | 


--------------------------------------------------------------------------------
/src/redux/login/loginSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | import { backendLink } from '../../constants';
 4 | 
 5 | // Define the async thunk for logging in
 6 | export const login = createAsyncThunk('auth/login', async (credentials) => {
 7 |   try {
 8 |     const response = await axios.post(`${backendLink}login`, { user: { email: credentials.email, password: credentials.password } });
 9 |     return response.headers.authorization;
10 |   } catch (error) {
11 |     throw new Error('Login failed');
12 |   }
13 | });
14 | 
15 | // Create the login slice
16 | const loginSlice = createSlice({
17 |   name: 'auth',
18 |   initialState: {
19 |     loginToken: null,
20 |     loading: false,
21 |     error: null,
22 |   },
23 |   reducers: {},
24 |   extraReducers: (builder) => {
25 |     builder
26 |       .addCase(login.pending, (state) => ({
27 |         ...state,
28 |         isLoading: true,
29 |         error: null,
30 |       }))
31 |       .addCase(login.fulfilled, (state, action) => ({
32 |         ...state,
33 |         isLoading: false,
34 |         loginToken: action.payload,
35 |       }))
36 |       .addCase(login.rejected, (state, action) => ({
37 |         ...state,
38 |         isLoading: false,
39 |         error: action.error.message,
40 |       }));
41 |   },
42 | });
43 | 
44 | // Export the async thunk and the slice reducer
45 | export default loginSlice.reducer;
46 | 


--------------------------------------------------------------------------------
/src/redux/logout/logoutSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | import { backendLink } from '../../constants';
 4 | 
 5 | export const logoutUser = createAsyncThunk(
 6 |   'auth/logoutUser',
 7 |   async () => {
 8 |     const token = localStorage.getItem('token');
 9 | 
10 |     // Clear the token from local storage
11 |     localStorage.removeItem('token');
12 | 
13 |     // Make the logout request to the backend
14 |     await axios.delete(`${backendLink}logout`, {
15 |       headers: {
16 |         Accept: 'application/json',
17 |         Authorization: token,
18 |       },
19 |     });
20 |   },
21 | );
22 | 
23 | const logoutSlice = createSlice({
24 |   name: 'auth',
25 |   initialState: {
26 |     logoutToken: localStorage.getItem('token') || null,
27 |     loading: false,
28 |     error: null,
29 |   },
30 |   reducers: {},
31 |   extraReducers: (builder) => {
32 |     builder
33 |       .addCase(logoutUser.pending, (state) => ({
34 |         ...state,
35 |         loading: true,
36 |         error: null,
37 |       }))
38 |       .addCase(logoutUser.fulfilled, (state) => ({
39 |         ...state,
40 |         loading: false,
41 |         logoutToken: null,
42 |       }))
43 |       .addCase(logoutUser.rejected, (state, action) => ({
44 |         ...state,
45 |         loading: false,
46 |         error: action.error.message,
47 |       }));
48 |   },
49 | });
50 | 
51 | export default logoutSlice.reducer;
52 | 


--------------------------------------------------------------------------------
/src/components/MyReservations.jsx:
--------------------------------------------------------------------------------
 1 | import { useSelector, useDispatch } from 'react-redux';
 2 | import { useEffect } from 'react';
 3 | import { useNavigate } from 'react-router-dom';
 4 | import PropTypes from 'prop-types';
 5 | import { fetchReservations } from '../redux/reservations/reservationsSlice';
 6 | import ReservationCard from './ReservationCard';
 7 | 
 8 | const MyReservations = (props) => {
 9 |   const dispatch = useDispatch();
10 |   const { reservationsList } = useSelector((store) => store.reservations);
11 |   const { authorized } = props;
12 |   const navigate = useNavigate();
13 |   useEffect(() => {
14 |     if (!authorized) {
15 |       navigate('/');
16 |     }
17 |   }, [authorized, navigate]);
18 | 
19 |   useEffect(() => {
20 |     dispatch(fetchReservations());
21 |   }, [dispatch]);
22 |   return (
23 |     <div className="h-full w-full items-center flex-col flex">
24 |       <h2 className="mt-28 text-center text-4xl font-black tracking-widest">MY RESERVATIONS</h2>
25 |       {reservationsList.map((reservation) => (
26 |         <div key={reservation.id}>
27 |           <ReservationCard
28 |             houseId={reservation.house_id}
29 |             checkIn={reservation.check_in}
30 |             checkOut={reservation.check_out}
31 |             reservationId={reservation.id}
32 |           />
33 |           <hr />
34 |         </div>
35 |       ))}
36 |     </div>
37 |   );
38 | };
39 | MyReservations.propTypes = {
40 |   authorized: PropTypes.bool.isRequired,
41 | };
42 | 
43 | export default MyReservations;
44 | 


--------------------------------------------------------------------------------
/src/components/DeleteReservationButton.jsx:
--------------------------------------------------------------------------------
 1 | import { useDispatch } from 'react-redux';
 2 | import Swal from 'sweetalert2';
 3 | import PropTypes from 'prop-types';
 4 | import { deleteReservation } from '../redux/reservations/reservationsSlice';
 5 | 
 6 | const DeleteReservationButton = (props) => {
 7 |   const dispatch = useDispatch();
 8 |   const { reservationId } = props;
 9 |   const handleDelete = () => {
10 |     Swal.fire({
11 |       title: 'Are you sure?',
12 |       text: 'Once canceled, you will not be able to recover this reservation!',
13 |       icon: 'warning',
14 |       confirmButtonColor: '#96BF01',
15 |       showCancelButton: true,
16 |       confirmButtonText: 'Cancel',
17 |       cancelButtonText: 'Back',
18 |       reverseButtons: true,
19 |     }).then((result) => {
20 |       if (result.isConfirmed) {
21 |         dispatch(deleteReservation(reservationId)).then(() => {
22 |           Swal.fire('Canceled!', 'The Reservation has been canceled.', 'success').then(() => {
23 |             window.location.reload();
24 |           });
25 |         });
26 |       }
27 |     });
28 |   };
29 |   return (
30 |     <button
31 |       type="button"
32 |       onClick={handleDelete}
33 |       className="bg-lime border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-md hover:bg-mustard text-white rounded-full px-4 py-2 mt-4"
34 |     >
35 |       Cancel
36 |     </button>
37 |   );
38 | };
39 | 
40 | DeleteReservationButton.propTypes = {
41 |   reservationId: PropTypes.number.isRequired,
42 | };
43 | export default DeleteReservationButton;
44 | 


--------------------------------------------------------------------------------
/src/redux/signup/signupSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | import { backendLink } from '../../constants';
 4 | // Define the async thunk for logging in
 5 | export const signup = createAsyncThunk('auth/signup', async (credentials) => {
 6 |   try {
 7 |     const response = await axios.post(`${backendLink}signup`, {
 8 |       user: {
 9 |         name: credentials.name,
10 |         email: credentials.email,
11 |         password: credentials.password,
12 |         password_confirmation: credentials.password_confirmation,
13 |       },
14 |     });
15 |     return response.headers.authorization;
16 |   } catch (error) {
17 |     throw new Error('Signup failed');
18 |   }
19 | });
20 | 
21 | // Create the login slice
22 | const signupSlice = createSlice({
23 |   name: 'auth',
24 |   initialState: {
25 |     signupToken: null,
26 |     loading: false,
27 |     error: null,
28 |   },
29 |   reducers: {},
30 |   extraReducers: (builder) => {
31 |     builder
32 |       .addCase(signup.pending, (state) => ({
33 |         ...state,
34 |         isLoading: true,
35 |         error: null,
36 |       }))
37 |       .addCase(signup.fulfilled, (state, action) => ({
38 |         ...state,
39 |         isLoading: false,
40 |         loginToken: action.payload,
41 |       }))
42 |       .addCase(signup.rejected, (state, action) => ({
43 |         ...state,
44 |         isLoading: false,
45 |         error: action.error.message,
46 |       }));
47 |   },
48 | });
49 | 
50 | // Export the async thunk and the slice reducer
51 | export default signupSlice.reducer;
52 | 


--------------------------------------------------------------------------------
/src/components/House.jsx:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import { MdLocationOn } from 'react-icons/md';
 3 | import { RxDotFilled } from 'react-icons/rx';
 4 | 
 5 | const House = ({ house }) => (
 6 |   <div className="group hover:cursor-pointer hover:shadow-lg min-w-[250px] rounded-md hover:scale-105 duration-500 pb-6 w-full flex flex-col items-center">
 7 |     <div
 8 |       className="group-hover:rounded-none group-hover:w-full lg:group-hover:w-[370px] w-[220px] h-[220px] lg:w-[370px] lg:h-[370px] rounded-full bg-center bg-cover duration-500"
 9 |       style={{ backgroundImage: `url(${house.photo})` }}
10 |     />
11 |     <h2 className="text-center mt-10 font-black text-2xl tracking-wider">{house.name}</h2>
12 |     <ul className="flex top-4 justify-center py-2 list-none">
13 |       {Array.from({ length: 10 }, (_, i) => (
14 |         <li className="text-sm text-gray-100" key={i}><RxDotFilled /></li>
15 |       ))}
16 |     </ul>
17 |     <p className="text-center text-gray-100 mt-4">{house.description}</p>
18 |     <div className="mx-auto w-full max-w-[320px] flex flex-col items-center lg:flex-row lg:justify-between text-gray-100 mt-4 text-lg">
19 |       <div className="flex gap-2 items-center">
20 |         <MdLocationOn size={22} />
21 |         <p>{house.city}</p>
22 |       </div>
23 |       <p>-</p>
24 |       <div className="flex justify-evenly">
25 |         <p>{house.address}</p>
26 |       </div>
27 |     </div>
28 |   </div>
29 | );
30 | 
31 | House.propTypes = {
32 |   house: PropTypes.shape({
33 |     photo: PropTypes.string.isRequired,
34 |     name: PropTypes.string.isRequired,
35 |     description: PropTypes.string.isRequired,
36 |     city: PropTypes.string.isRequired,
37 |     address: PropTypes.string.isRequired,
38 |   }).isRequired,
39 | };
40 | 
41 | export default House;
42 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Alpha Reservations</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # <b>Alpha Reservations</b>
 2 | 
 3 | ## <b>Table of Contents</b>
 4 | 
 5 | - [About the Project](#about-project)
 6 |   - [Built With:](#built-with)
 7 |     - [Tech Stack](#tech-stack)
 8 |     - [Key Features](#key-features)
 9 |   - [Live Demo](#live-demo)
10 | - [Getting Started](#getting-started)
11 |   - [Setup](#setup)
12 |   - [Kanbanboards](#kanbanboards)
13 |   - [Prerequisites](#prerequisites)
14 |   - [Install](#install)
15 |   - [Usage](#usage)
16 | - [Authors](#authors)
17 | - [Future Features](#future-features)
18 | - [Contributing](#contributing)
19 | - [Show your support](#support)
20 | - [Acknowledgements](#acknowledgements)
21 | - [FAQ](#faq)
22 | - [License](#license)
23 | 
24 | ## <b>Alpha Reservations</b> <a name="about-project"></a>
25 | 
26 | This is a full stack app built with React, Redux, Tailwind CSS, and Ruby on Rails.<br>
27 | The application features authentication to access it, promps the user with a selection of houses, and a navigation bar, allowing the user to reserve, create, and delete houses.
28 | 
29 | ## <b>Built With</b> <a name="built-with"></a>
30 | 
31 | ### Tech Stack : <a name="tech-stack"></a>
32 | Client
33 | - <a href="https://react.dev/">React</a>
34 | 
35 | Server
36 | - <a href="https://rubyonrails.org/">Ruby on Rails</a>
37 | 
38 | Database
39 | - <a href="https://www.postgresql.org/">PostgreSQL</a>
40 | 
41 | ### Key Features : <a name="key-features"></a>
42 | - Authentication
43 | - Manage reservations per user
44 | - API calls to reserve, create and delete entities
45 | - Responsive design
46 | 
47 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
48 | 
49 | ### Kanbanboards
50 | 1. [Initial Kanbanboard](https://github.com/jmonto55/book-an-appointment-backend/issues/1)
51 | 2. [Final Kanbanboard](https://github.com/jmonto55/book-an-appointment-backend/projects/2)
52 | <!-- LIVE DEMO -->
53 | 
54 | ## <b>Live Demo</b> <a name="live-demo"></a>
55 | 
56 | - [Live Demo](https://alpha-reservation.vercel.app/)
57 | 
58 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
59 | 


--------------------------------------------------------------------------------
/src/components/Splash.jsx:
--------------------------------------------------------------------------------
 1 | import { BiChevronRightCircle } from 'react-icons/bi';
 2 | import { useNavigate } from 'react-router-dom';
 3 | import PropTypes from 'prop-types';
 4 | import { useEffect } from 'react';
 5 | import houseImage from '../assets/house.png';
 6 | 
 7 | const Splash = (props) => {
 8 |   const navigate = useNavigate();
 9 |   const { authorized } = props;
10 |   useEffect(
11 |     () => {
12 |       if (authorized) {
13 |         navigate('/home');
14 |       }
15 |     },
16 |   );
17 |   const loginNavagtion = () => {
18 |     navigate('/login');
19 |   };
20 | 
21 |   const signupNavagtion = () => {
22 |     navigate('/signup');
23 |   };
24 | 
25 |   return (
26 |     <div className="w-screen h-screen bg-center bg-no-repeat" style={{ backgroundImage: `url(${houseImage})` }}>
27 |       <div
28 |         className="w-full h-full bg-mustard bg-opacity-80 flex flex-col items-center justify-center"
29 |       >
30 |         <h2 className="mb-12 uppercase text-4xl sm:text-5xl font-black text-white-100 tracking-widest font-ubuntu text-center">alpha  reservations</h2>
31 |         <div className="flex flex-col sm:flex-row gap-8">
32 |           <button type="button" onClick={loginNavagtion} className="text-lg border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-md hover:bg-opacity-100 bg-lime rounded-full px-4 py-2 color text-white flex justify-evenly items-center">
33 |             Log In
34 |             <BiChevronRightCircle size={20} className="ml-4" />
35 |           </button>
36 |           <button type="button" onClick={signupNavagtion} className="text-lg border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-md hover:bg-opacity-100 bg-lime rounded-full px-5 py-2 color text-white flex justify-evenly items-center">
37 |             Sign Up
38 |             <BiChevronRightCircle size={20} className="ml-4" />
39 |           </button>
40 |         </div>
41 |       </div>
42 |     </div>
43 |   );
44 | };
45 | Splash.propTypes = {
46 |   authorized: PropTypes.bool.isRequired,
47 | };
48 | export default Splash;
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "book-an-appointment-frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@reduxjs/toolkit": "^1.9.5",
 7 |     "@testing-library/jest-dom": "^5.16.5",
 8 |     "@testing-library/react": "^13.4.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "axios": "^1.4.0",
11 |     "cross-env": "^7.0.3",
12 |     "prop-types": "^15.8.1",
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0",
15 |     "react-icons": "^4.9.0",
16 |     "react-redux": "^8.0.7",
17 |     "react-router": "^6.12.1",
18 |     "react-router-dom": "^6.12.1",
19 |     "react-scripts": "5.0.1",
20 |     "redux": "^4.2.1",
21 |     "redux-devtools-extension": "^2.13.9",
22 |     "redux-thunk": "^2.4.2",
23 |     "sweetalert": "^2.1.2",
24 |     "sweetalert2": "^11.7.12",
25 |     "web-vitals": "^2.1.4"
26 |   },
27 |   "scripts": {
28 |     "start": "cross-env PORT=3001 react-scripts start",
29 |     "build": "react-scripts build",
30 |     "test": "react-scripts test",
31 |     "eject": "react-scripts eject"
32 |   },
33 |   "eslintConfig": {
34 |     "extends": [
35 |       "react-app",
36 |       "react-app/jest"
37 |     ]
38 |   },
39 |   "browserslist": {
40 |     "production": [
41 |       ">0.2%",
42 |       "not dead",
43 |       "not op_mini all"
44 |     ],
45 |     "development": [
46 |       "last 1 chrome version",
47 |       "last 1 firefox version",
48 |       "last 1 safari version"
49 |     ]
50 |   },
51 |   "devDependencies": {
52 |     "@babel/core": "^7.22.5",
53 |     "@babel/eslint-parser": "^7.22.5",
54 |     "@babel/plugin-syntax-jsx": "^7.22.5",
55 |     "@babel/preset-react": "^7.22.5",
56 |     "eslint": "^7.32.0",
57 |     "eslint-config-airbnb": "^18.2.1",
58 |     "eslint-plugin-import": "^2.27.5",
59 |     "eslint-plugin-jsx-a11y": "^6.7.1",
60 |     "eslint-plugin-react": "^7.32.2",
61 |     "eslint-plugin-react-hooks": "^4.6.0",
62 |     "stylelint": "^13.13.1",
63 |     "stylelint-config-standard": "^21.0.0",
64 |     "stylelint-csstree-validator": "^1.9.0",
65 |     "stylelint-scss": "^3.21.0",
66 |     "tailwindcss": "^3.3.2"
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { Routes, Route } from 'react-router-dom';
 2 | import { useSelector } from 'react-redux';
 3 | import Navbar from './components/Navbar';
 4 | import HousesList from './components/HousesList';
 5 | import Reservation from './components/Reservation';
 6 | import MyReservations from './components/MyReservations';
 7 | import HouseReservations from './components/HouseReservations';
 8 | import AddHouse from './components/AddHouse';
 9 | import DeleteHouse from './components/DeleteHouse';
10 | import ShowHouse from './components/ShowHouse';
11 | import LoginForm from './components/LoginForm';
12 | import Splash from './components/Splash';
13 | import Logout from './components/Logout';
14 | import SignupForm from './components/SignupForm';
15 | 
16 | function App() {
17 |   const { loginToken } = useSelector((store) => store.login);
18 |   const { logoutToken } = useSelector((store) => store.logout);
19 |   let isAuthorized = false;
20 |   if (loginToken || logoutToken) {
21 |     isAuthorized = true;
22 |   }
23 |   return (
24 |     <div className="flex w-full overflow-x-hidden">
25 |       <Navbar />
26 |       <Routes>
27 |         <Route path="/login" element={<LoginForm authorized={isAuthorized} />} />
28 |         <Route path="/signup" element={<SignupForm authorized={isAuthorized} />} />
29 |         <Route path="/logout" element={<Logout authorized={isAuthorized} />} />
30 |         <Route path="/home" element={<HousesList authorized={isAuthorized} />} />
31 |         <Route path="/reserve" element={<Reservation authorized={isAuthorized} />} />
32 |         <Route path="/myReservations" element={<MyReservations authorized={isAuthorized} />} />
33 |         <Route path="/house/:id/reservations" element={<HouseReservations authorized={isAuthorized} />} />
34 |         <Route path="/addHouse" element={<AddHouse authorized={isAuthorized} />} />
35 |         <Route path="/deleteHouse" element={<DeleteHouse authorized={isAuthorized} />} />
36 |         <Route path="/house" element={<ShowHouse authorized={isAuthorized} />} />
37 |         <Route path="/" element={<Splash authorized={isAuthorized} />} />
38 |       </Routes>
39 |     </div>
40 |   );
41 | }
42 | 
43 | export default App;
44 | 


--------------------------------------------------------------------------------
/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
 1 | name: Linters
 2 | 
 3 | on: pull_request
 4 | 
 5 | env:
 6 |   FORCE_COLOR: 1
 7 | 
 8 | jobs:
 9 |   eslint:
10 |     name: ESLint
11 |     runs-on: ubuntu-22.04
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: "12.x"
17 |       - name: Setup ESLint
18 |         run: |
19 |           npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x  @babel/plugin-syntax-jsx@7.x @babel/preset-env@7.x  @babel/preset-react@7.x
20 |           [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.eslintrc.json
21 |           [ -f .babelrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.babelrc
22 |       - name: ESLint Report
23 |         run: npx eslint "**/*.{js,jsx}"
24 |   stylelint:
25 |     name: Stylelint
26 |     runs-on: ubuntu-22.04
27 |     steps:
28 |       - uses: actions/checkout@v2
29 |       - uses: actions/setup-node@v1
30 |         with:
31 |           node-version: "12.x"
32 |       - name: Setup Stylelint
33 |         run: |
34 |           npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
35 |           [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.stylelintrc.json
36 |       - name: Stylelint Report
37 |         run: npx stylelint "**/*.{css,scss}"
38 |   nodechecker:
39 |     name: node_modules checker
40 |     runs-on: ubuntu-22.04
41 |     steps:
42 |       - uses: actions/checkout@v2
43 |       - name: Check node_modules existence
44 |         run: |
45 |           if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi


--------------------------------------------------------------------------------
/src/components/ReservationCard.jsx:
--------------------------------------------------------------------------------
 1 | import { useSelector, useDispatch } from 'react-redux';
 2 | import { useEffect } from 'react';
 3 | import { MdLocationOn } from 'react-icons/md';
 4 | import PropTypes from 'prop-types';
 5 | import { fetchHouses } from '../redux/houses/housesSlice';
 6 | import DeleteReservationButton from './DeleteReservationButton';
 7 | 
 8 | const ReservationCard = (props) => {
 9 |   const dispatch = useDispatch();
10 |   useEffect(() => {
11 |     dispatch(fetchHouses());
12 |   }, [dispatch]);
13 | 
14 |   const { housesList } = useSelector((store) => store.houses);
15 |   const {
16 |     houseId, checkIn, checkOut, reservationId,
17 |   } = props;
18 |   const house = housesList.find((house) => house.id === houseId);
19 |   return (
20 |     <div className="h-full mt-20 w-full p-4 flex gap-x-10 flex-wrap justify-center">
21 |       <div className="w-[375px] md:w-[600px]">
22 |         <img src={house ? house.photo : 'loading...'} alt="house" />
23 |       </div>
24 |       <div className="flex flex-col justify-between gap-8">
25 |         <p className="font-black text-2xl tracking-wider">{house ? house.name : 'loading...'}</p>
26 |         <p className="bg-gray-200 p-4">{house ? house.description : 'loading...'}</p>
27 |         <p className="bg-gray-200 p-4 flex">
28 |           <MdLocationOn size={22} />
29 |           {' '}
30 |           {house ? house.city : 'loading...'}
31 |           ,
32 |           {' '}
33 |           {house ? house.address : 'loading...'}
34 |         </p>
35 |         <p>
36 |           {' '}
37 |           <span className="bg-blue-500 text-white-100 p-3 rounded-full">Reservation period</span>
38 |           {' '}
39 |           <span className="bg-yellow-500 text-white-100 p-3 rounded">{checkIn}</span>
40 |           {' '}
41 |           to
42 |           {' '}
43 |           <span className="bg-yellow-500 text-white-100 p-3 rounded">{checkOut}</span>
44 |         </p>
45 |         <DeleteReservationButton reservationId={reservationId} />
46 |       </div>
47 |     </div>
48 |   );
49 | };
50 | ReservationCard.propTypes = {
51 |   reservationId: PropTypes.number.isRequired,
52 |   houseId: PropTypes.number.isRequired,
53 |   checkIn: PropTypes.string.isRequired,
54 |   checkOut: PropTypes.string.isRequired,
55 | };
56 | 
57 | export default ReservationCard;
58 | 


--------------------------------------------------------------------------------
/src/components/Logout.jsx:
--------------------------------------------------------------------------------
 1 | import { React, useEffect } from 'react';
 2 | import { useDispatch } from 'react-redux';
 3 | import { useNavigate, NavLink } from 'react-router-dom';
 4 | import PropTypes from 'prop-types';
 5 | import { BiLeftArrow } from 'react-icons/bi';
 6 | import { logoutUser } from '../redux/logout/logoutSlice';
 7 | import houseImage from '../assets/house.jpg';
 8 | 
 9 | const LogoutButton = (props) => {
10 |   const dispatch = useDispatch();
11 |   const navigate = useNavigate();
12 |   const { authorized } = props;
13 |   useEffect(
14 |     () => {
15 |       if (!authorized) {
16 |         navigate('/');
17 |       }
18 |     },
19 |   );
20 |   const handleLogout = () => {
21 |     dispatch(logoutUser());
22 |     navigate('/');
23 |   };
24 | 
25 |   return (
26 |     <div className="relative w-full bg-center bg-cover" style={{ backgroundImage: `url(${houseImage})` }}>
27 |       <div className="z-50 hover:bg-opacity-100 shadow-lg bg-mustard p-6 pl-4 md:pl-12 rounded-r-full absolute top-14 md:top-10 left-0 border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-70">
28 |         <NavLink to="/home">
29 |           <BiLeftArrow size={20} className="cursor-pointer text-white" />
30 |         </NavLink>
31 |       </div>
32 |       <div className="p-8 h-screen w-full flex flex-col justify-center gap-2 bg-gray-100 bg-opacity-80">
33 |         <h2 className="font-black uppercase mx-auto text-center text-3xl text-white tracking-wider">Log out?</h2>
34 |         <div className="mx-auto w-full flex justify-center gap-10">
35 |           <NavLink
36 |             type="button"
37 |             to="/home"
38 |             className="mt-4 text-lg border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-md hover:bg-opacity-100 bg-gray-100 rounded-full px-4 py-2 color text-white flex justify-evenly items-center w-24"
39 |           >
40 |             Cancel
41 |           </NavLink>
42 |           <button
43 |             type="button"
44 |             onClick={handleLogout}
45 |             className="mt-4 text-lg border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-md hover:bg-opacity-100 bg-mustard rounded-full px-4 py-2 color text-white flex justify-evenly items-center w-24"
46 |           >
47 |             Logout
48 |           </button>
49 |         </div>
50 |       </div>
51 |     </div>
52 |   );
53 | };
54 | LogoutButton.propTypes = {
55 |   authorized: PropTypes.bool.isRequired,
56 | };
57 | export default LogoutButton;
58 | 


--------------------------------------------------------------------------------
/src/components/HouseSlider.jsx:
--------------------------------------------------------------------------------
 1 | import { useSelector, useDispatch } from 'react-redux';
 2 | import { useEffect, useState } from 'react';
 3 | import { NavLink } from 'react-router-dom';
 4 | import { BiLeftArrow, BiRightArrow } from 'react-icons/bi';
 5 | import { fetchHouses, fetchHouse } from '../redux/houses/housesSlice';
 6 | import House from './House';
 7 | 
 8 | const HouseSlider = () => {
 9 |   const dispatch = useDispatch();
10 |   const { housesList } = useSelector((store) => store.houses);
11 | 
12 |   const [indexOne, setIndexOne] = useState(0);
13 |   const [indexTwo, setIndexTwo] = useState(1);
14 |   const [indexThree, setIndexThree] = useState(2);
15 | 
16 |   const nextSlide = () => {
17 |     setIndexOne((indexOne - 1 + housesList.length) % housesList.length);
18 |     setIndexTwo((indexTwo - 1 + housesList.length) % housesList.length);
19 |     setIndexThree((indexThree - 1 + housesList.length) % housesList.length);
20 |   };
21 | 
22 |   const prevSlide = () => {
23 |     setIndexOne((indexOne + 1) % housesList.length);
24 |     setIndexTwo((indexTwo + 1) % housesList.length);
25 |     setIndexThree((indexThree + 1) % housesList.length);
26 |   };
27 | 
28 |   useEffect(() => {
29 |     dispatch(fetchHouses());
30 |   }, [dispatch]);
31 | 
32 |   return (
33 |     <div className="flex w-full justify-between">
34 |       <div className="hover:bg-opacity-100 mt-36 h-[70px] p-6 md:pl-12 bg-lime text-white-100 rounded-r-full border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-lg">
35 |         <BiLeftArrow onClick={prevSlide} size={20} className="cursor-pointer" />
36 |       </div>
37 |       <div>
38 |         <ul className="flex gap-2 md:gap-14">
39 |           {housesList.length > 0 && (
40 |             <>
41 |               <NavLink
42 |                 to="/house"
43 |                 onClick={() => {
44 |                   dispatch(fetchHouse(housesList[indexOne].id));
45 |                 }}
46 |               >
47 |                 <House house={housesList[indexOne]} />
48 |               </NavLink>
49 |               <NavLink
50 |                 to="/house"
51 |                 className="hidden sm:block"
52 |                 onClick={() => {
53 |                   dispatch(fetchHouse(housesList[indexTwo].id));
54 |                 }}
55 |               >
56 |                 <House house={housesList[indexTwo]} />
57 |               </NavLink>
58 |               <NavLink
59 |                 to="/house"
60 |                 className="hidden tablet:block"
61 |                 onClick={() => {
62 |                   dispatch(fetchHouse(housesList[indexThree].id));
63 |                 }}
64 |               >
65 |                 <House house={housesList[indexThree]} />
66 |               </NavLink>
67 |             </>
68 |           )}
69 |         </ul>
70 |       </div>
71 |       <div className="hover:bg-opacity-100 h-[70px] mt-36 p-6 md:pr-12  bg-lime text-white-100 rounded-l-full border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-lg">
72 |         <BiRightArrow onClick={nextSlide} size={20} className="cursor-pointer" />
73 |       </div>
74 |     </div>
75 |   );
76 | };
77 | 
78 | export default HouseSlider;
79 | 


--------------------------------------------------------------------------------
/src/redux/houses/housesSlice.js:
--------------------------------------------------------------------------------
  1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
  2 | import axios from 'axios';
  3 | import { backendLink } from '../../constants';
  4 | 
  5 | const initialState = {
  6 |   housesList: [],
  7 |   currentHouse: {},
  8 |   isLoading: false,
  9 |   status: null,
 10 | };
 11 | 
 12 | export const fetchHouses = createAsyncThunk(
 13 |   'houses/fetchHouses',
 14 |   async () => {
 15 |     const token = localStorage.getItem('token');
 16 |     const response = await axios.get(`${backendLink}houses`, {
 17 |       headers: {
 18 |         authorization: token, // Include the token in the Authorization header
 19 |       },
 20 |     });
 21 |     return response.data;
 22 |   },
 23 | );
 24 | 
 25 | export const createHouse = createAsyncThunk(
 26 |   'houses/createHouse',
 27 |   async (houseData) => {
 28 |     const token = localStorage.getItem('token');
 29 |     const response = await axios.post(`${backendLink}houses`, houseData, {
 30 |       headers: {
 31 |         authorization: token, // Include the token in the Authorization header
 32 |       },
 33 |     });
 34 |     return response.data;
 35 |   },
 36 | );
 37 | 
 38 | export const fetchHouse = createAsyncThunk('houses/fetchHouse',
 39 |   async (id) => {
 40 |     const token = localStorage.getItem('token');
 41 |     const response = await axios(`${backendLink}houses/${id}`, {
 42 |       headers: {
 43 |         authorization: token, // Include the token in the Authorization header
 44 |       },
 45 |     });
 46 |     return response.data;
 47 |   });
 48 | 
 49 | const housesSlice = createSlice({
 50 |   name: 'houses',
 51 |   initialState,
 52 |   extraReducers: (builder) => {
 53 |     builder
 54 |       .addCase(fetchHouses.pending, (state) => ({
 55 |         ...state,
 56 |         isLoading: true,
 57 |       }))
 58 |       .addCase(fetchHouses.fulfilled, (state, action) => ({
 59 |         ...state,
 60 |         housesList: action.payload,
 61 |         isLoading: false,
 62 |       }))
 63 |       .addCase(fetchHouses.rejected, (state, action) => ({
 64 |         ...state,
 65 |         isLoading: false,
 66 |         error: action.error.message,
 67 |       }));
 68 | 
 69 |     builder
 70 |       .addCase(fetchHouse.pending, (state) => ({
 71 |         ...state,
 72 |         isLoading: true,
 73 |       }))
 74 |       .addCase(fetchHouse.fulfilled, (state, action) => ({
 75 |         ...state,
 76 |         currentHouse: action.payload,
 77 |         isLoading: false,
 78 |       }))
 79 |       .addCase(fetchHouse.rejected, (state, action) => ({
 80 |         ...state,
 81 |         isLoading: false,
 82 |         error: action.error.message,
 83 |       }));
 84 |     builder
 85 |       .addCase(createHouse.pending, (state) => ({
 86 |         ...state,
 87 |         isLoading: true,
 88 |       }))
 89 |       .addCase(createHouse.fulfilled, (state, action) => ({
 90 |         ...state,
 91 |         housesList: [...state.housesList, action.payload],
 92 |         isLoading: false,
 93 |       }))
 94 |       .addCase(createHouse.rejected, (state, action) => ({
 95 |         ...state,
 96 |         isLoading: false,
 97 |         error: action.error.message,
 98 |       }));
 99 |   },
100 | });
101 | 
102 | export default housesSlice.reducer;
103 | 


--------------------------------------------------------------------------------
/src/components/HouseReservations.jsx:
--------------------------------------------------------------------------------
 1 | import { useSelector, useDispatch } from 'react-redux';
 2 | import { useEffect } from 'react';
 3 | import { MdLocationOn } from 'react-icons/md';
 4 | import { useNavigate } from 'react-router-dom';
 5 | import PropTypes from 'prop-types';
 6 | import { fetchHouseReservations } from '../redux/reservations/reservationsSlice';
 7 | import { fetchHouse } from '../redux/houses/housesSlice';
 8 | 
 9 | const HouseReservations = (props) => {
10 |   const dispatch = useDispatch();
11 |   const { houseReservationsList } = useSelector((store) => store.reservations);
12 |   const { currentHouse } = useSelector((store) => store.houses);
13 |   const { authorized } = props;
14 |   const houseId = window.location.href.split('/')[4];
15 |   const navigate = useNavigate();
16 |   useEffect(() => {
17 |     if (!authorized) {
18 |       navigate('/');
19 |     }
20 |   }, [authorized, navigate]);
21 | 
22 |   useEffect(() => {
23 |     dispatch(fetchHouseReservations(houseId));
24 |   }, [dispatch, houseId]);
25 |   useEffect(() => {
26 |     dispatch(fetchHouse(houseId));
27 |   }, [dispatch, houseId]);
28 |   return (
29 |     <div className="w-full flex flex-col items-center py-[20px]">
30 |       <h1 className="font-black text-4xl text-center my-[20px]">
31 |         {`${currentHouse.name} `}
32 |         Reservations Details
33 |       </h1>
34 |       <img src={currentHouse ? currentHouse.photo : 'loading...'} alt="house" />
35 |       <p className="p-4 text-2xl">
36 |         Description:
37 |         {' '}
38 |         {currentHouse ? currentHouse.description : 'loading...'}
39 |       </p>
40 |       <p className=" p-4 text-2xl flex">
41 |         Location:
42 |         {' '}
43 |         <MdLocationOn size={22} />
44 |         {' '}
45 |         {currentHouse ? currentHouse.city : 'loading...'}
46 |         ,
47 |         {' '}
48 |         {currentHouse ? currentHouse.address : 'loading...'}
49 |       </p>
50 |       <p className="text-[20px] p-3 font-semibold">
51 |         Important Note: Here is all the reserved information for
52 |         {' '}
53 |         {currentHouse.name}
54 |         {' '}
55 |         House that will help you choose an empty time slots to reserve
56 |       </p>
57 |       <table className="w-[50%] border-collapse border border-gray-300">
58 |         <thead>
59 |           <tr>
60 |             <th className="py-2 px-4 border border-gray-300  text-center">Check-in</th>
61 |             <th className="py-2 px-4 border border-gray-300 text-center">Check-out</th>
62 |           </tr>
63 |         </thead>
64 |         <tbody>
65 | 
66 |           {houseReservationsList ? houseReservationsList.map((reservation) => (
67 |             <tr key={`house-reservation-${reservation.id}`}>
68 |               <td className="py-8 px-4 border border-gray-300 text-center"><span className="bg-green-500 text-white-100 p-3 rounded-full">{reservation.check_in}</span></td>
69 |               <td className="py-8 px-4 border border-gray-300 text-center"><span className="bg-red-500 text-white-100 p-3 rounded-full">{reservation.check_out}</span></td>
70 |             </tr>
71 |           )) : '...loading'}
72 | 
73 |         </tbody>
74 |       </table>
75 |     </div>
76 |   );
77 | };
78 | HouseReservations.propTypes = {
79 |   authorized: PropTypes.bool.isRequired,
80 | };
81 | 
82 | export default HouseReservations;
83 | 


--------------------------------------------------------------------------------
/src/components/ShowHouse.jsx:
--------------------------------------------------------------------------------
 1 | import { useSelector } from 'react-redux';
 2 | import { BiLeftArrow } from 'react-icons/bi';
 3 | import { NavLink, useNavigate } from 'react-router-dom';
 4 | import { MdLocationOn, MdAdsClick } from 'react-icons/md';
 5 | import PropTypes from 'prop-types';
 6 | import { useEffect } from 'react';
 7 | 
 8 | const ShowHouse = (props) => {
 9 |   const { currentHouse } = useSelector((store) => store.houses);
10 |   const { authorized } = props;
11 |   const navigate = useNavigate();
12 |   useEffect(() => {
13 |     if (!authorized) {
14 |       navigate('/');
15 |     }
16 |   }, [authorized, navigate]);
17 |   if (!authorized) {
18 |     return (<></>);
19 |   }
20 | 
21 |   return (
22 |     <div type="button" className="w-full relative">
23 |       <h2 className="mt-[120px] md:mt-[70px] text-center font-black text-4xl tracking-wider">HOUSE DETAILS</h2>
24 |       <div className="pb-28 mx-auto xl:mt-[140px] mt-6 max-w-[1840px] flex w-full flex-col items-center xl:flex-row justify-evenly">
25 |         <div className="hover:bg-opacity-100 z-20 bg-lime p-6 pl-4 md:pl-12 rounded-r-full absolute bottom-8 md:bottom-10 left-0 border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-lg">
26 |           <NavLink to="/home">
27 |             <BiLeftArrow size={20} className="cursor-pointer text-white-100" />
28 |           </NavLink>
29 |         </div>
30 |         <div
31 |           className="mt-4 xl:mt-0 w-[370px] h-[185px] sm:w-[550px] sm:h-[275px] xl:w-[700px] xl:h-[400px] bg-center bg-cover rounded-lg"
32 |           style={{ backgroundImage: `url(${currentHouse.photo})` }}
33 |         />
34 |         <div className="flex flex-col items-start justify-between min-w-[375px] max-w-[700px] h-[400px]">
35 |           <h2 className="mt-8 xl:mt-0 text-start font-black text-4xl tracking-wider">
36 |             {currentHouse.name}
37 |             <p className="font-medium text-[14px]">*$45 deposit upon any reservation.</p>
38 |           </h2>
39 |           <p className="w-full text-start text-black-100 mt-4 text-lg bg-gray-200 p-2">{currentHouse.description}</p>
40 |           <div className="w-full mx-auto flex bg-gray-200 p-2 items-center lg:flex-row lg:justify-between text-black-100 mt-4 text-lg">
41 |             <div className="flex gap-2 items-center">
42 |               <MdLocationOn size={22} />
43 |               <p>{currentHouse.city}</p>
44 |             </div>
45 |             <p>-</p>
46 |             <div className="flex justify-evenly">
47 |               <p>{currentHouse.address}</p>
48 |             </div>
49 |           </div>
50 |           <div className="flex ml-auto justify-center gap-2 items-center">
51 |             $
52 |             <span className="text-4xl font-medium">{currentHouse.night_price}</span>
53 |             night
54 |           </div>
55 | 
56 |           <button type="button" onClick={() => navigate(`/reserve?id=${currentHouse.id}`)} className="ml-auto flex bg-lime text-white-100 p-2 px-4 rounded-full">
57 |             <NavLink className="flex items-center">
58 |               Reserve
59 |               <MdAdsClick className="ml-4" />
60 |             </NavLink>
61 |           </button>
62 |         </div>
63 |       </div>
64 |     </div>
65 |   );
66 | };
67 | ShowHouse.propTypes = {
68 |   authorized: PropTypes.bool.isRequired,
69 | };
70 | export default ShowHouse;
71 | 


--------------------------------------------------------------------------------
/src/components/LoginForm.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { useDispatch } from 'react-redux';
 3 | import { useNavigate, NavLink } from 'react-router-dom';
 4 | import { BiLeftArrow } from 'react-icons/bi';
 5 | import PropTypes from 'prop-types';
 6 | import houseImage from '../assets/house.jpg';
 7 | import { login } from '../redux/login/loginSlice';
 8 | 
 9 | const LoginForm = (props) => {
10 |   const { authorized } = props;
11 |   const dispatch = useDispatch();
12 |   const [email, setEmail] = useState('');
13 |   const [password, setPassword] = useState('');
14 |   const navigate = useNavigate();
15 | 
16 |   useEffect(() => {
17 |     if (authorized) {
18 |       navigate('/home');
19 |     }
20 |   }, [authorized, navigate]);
21 | 
22 |   useEffect(() => {
23 |     setEmail('simon20163858@gmail.com');
24 |     setPassword('momo123456');
25 |   }, []);
26 | 
27 |   const handleSubmit = (e) => {
28 |     e.preventDefault();
29 | 
30 |     dispatch(login({ email, password }))
31 |       .unwrap()
32 |       .then((token) => {
33 |         localStorage.setItem('token', token);
34 |         navigate('/home');
35 |       });
36 |   };
37 | 
38 |   return (
39 |     <div className="relative w-full bg-center bg-cover" style={{ backgroundImage: `url(${houseImage})` }}>
40 |       <div className="z-50 hover:bg-opacity-100 shadow-lg bg-gray-100 p-6 pl-4 md:pl-12 rounded-r-full absolute top-14 md:top-10 left-0 border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-70">
41 |         <NavLink to="/">
42 |           <BiLeftArrow size={20} className="cursor-pointer text-white" />
43 |         </NavLink>
44 |       </div>
45 |       <div className="p-8 h-screen w-full flex flex-col justify-center gap-2 bg-lime bg-opacity-80">
46 |         <h2 className="font-black uppercase mx-auto text-center text-3xl text-white tracking-wider">Log in</h2>
47 |         <form
48 |           onSubmit={handleSubmit}
49 |           className="border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg gap-2 bg-opacity-70 shadow-xl flex flex-col items-end container mx-auto px-6 py-6 max-w-md mt-6 bg-gray-100 rounded-md"
50 |         >
51 |           <input
52 |             type="email"
53 |             value={email}
54 |             onChange={(e) => setEmail(e.target.value)}
55 |             placeholder="simon20163858@gmail.com"
56 |             required
57 |             className="mt-2 w-full p-2 border border-slate-300 rounded text-sm shadow-sm
58 |               focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
59 |           />
60 |           <input
61 |             type="password"
62 |             value={password}
63 |             onChange={(e) => setPassword(e.target.value)}
64 |             placeholder="momo123456"
65 |             required
66 |             className="mt-2 w-full p-2 border border-slate-300 rounded text-sm shadow-sm
67 |               focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
68 |           />
69 |           <button className="mt-4 text-lg border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-md hover:bg-opacity-100 bg-lime rounded-full px-4 py-2 color text-white flex justify-evenly items-center" type="submit">Log in</button>
70 |         </form>
71 |       </div>
72 |     </div>
73 |   );
74 | };
75 | 
76 | LoginForm.propTypes = {
77 |   authorized: PropTypes.bool.isRequired,
78 | };
79 | 
80 | export default LoginForm;
81 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useCallback } from 'react';
  2 | import { NavLink, useLocation } from 'react-router-dom';
  3 | import { HiOutlineMenuAlt4 } from 'react-icons/hi';
  4 | import { IoMdClose } from 'react-icons/io';
  5 | import { links } from '../constants';
  6 | 
  7 | const Navbar = () => {
  8 |   const [open, setOpen] = useState(true);
  9 |   const location = useLocation();
 10 | 
 11 |   const openMenu = () => {
 12 |     setOpen(!open);
 13 |     const nav = document.querySelector('nav');
 14 |     nav.style.display = 'flex';
 15 |   };
 16 | 
 17 |   const closeMenu = useCallback(() => {
 18 |     setOpen(!open);
 19 |     if (window.innerWidth < 1340) {
 20 |       const nav = document.querySelector('nav');
 21 |       nav.style.display = 'none';
 22 |       nav.style.position = 'absolute';
 23 |     }
 24 |   }, [open]);
 25 | 
 26 |   useEffect(() => {
 27 |     closeMenu();
 28 |     setOpen(true);
 29 |   }, [location, closeMenu]);
 30 | 
 31 |   useEffect(() => {
 32 |     const mediaQuery1 = window.matchMedia('(min-width: 1340px)');
 33 | 
 34 |     const handleMediaQueryChange = (event) => {
 35 |       if (event.matches) {
 36 |         const nav = document.querySelector('nav');
 37 |         nav.style.display = 'flex';
 38 |         nav.style.position = 'static';
 39 |       }
 40 |     };
 41 | 
 42 |     mediaQuery1.addEventListener('change', handleMediaQueryChange);
 43 | 
 44 |     return () => {
 45 |       mediaQuery1.removeEventListener('change', handleMediaQueryChange);
 46 |     };
 47 |   }, []);
 48 | 
 49 |   useEffect(() => {
 50 |     const mediaQuery1 = window.matchMedia('(max-width: 1340px)');
 51 | 
 52 |     const handleMediaQueryChange = (event) => {
 53 |       if (event.matches) {
 54 |         const nav = document.querySelector('nav');
 55 |         nav.style.display = 'none';
 56 |         setOpen(true);
 57 |       }
 58 |     };
 59 | 
 60 |     mediaQuery1.addEventListener('change', handleMediaQueryChange);
 61 | 
 62 |     return () => {
 63 |       mediaQuery1.removeEventListener('change', handleMediaQueryChange);
 64 |     };
 65 |   }, []);
 66 | 
 67 |   return (
 68 |     <>
 69 |       {open ? (
 70 |         <HiOutlineMenuAlt4
 71 |           id="menu"
 72 |           size={30}
 73 |           className="absolute z-20 top-8 left-8 xl:hidden cursor-pointer"
 74 |           onClick={openMenu}
 75 |         />
 76 |       ) : (
 77 |         <IoMdClose
 78 |           id="close"
 79 |           size={30}
 80 |           className="xl:hidden z-20 absolute top-4 left-52 cursor-pointer"
 81 |           onClick={closeMenu}
 82 |         />
 83 |       )}
 84 |       <nav className={`${window.innerWidth < 1340 ? 'absolute' : 'static'} bg-white z-10 w-1/6 min-w-[250px] max-w-[280px] h-screen flex-col p-2 pl-6 pt-28 border-r-2 hidden xl:flex`}>
 85 |         <div className="w-1/4">
 86 |           <h1 className="font-kaushan text-3xl font-bold -rotate-12 mb-20 pl-4 underline decoration-4 underline-offset-4">Alpha Reservations</h1>
 87 |         </div>
 88 |         <ul className="flex flex-col w-full justify-evenly gap-5">
 89 |           {links.map((link) => (
 90 |             <button
 91 |               type="button"
 92 |               className="w-[210px] flex justify-start"
 93 |               key={link.text}
 94 |             >
 95 |               <NavLink
 96 |                 to={link.path}
 97 |                 onClick={() => {
 98 |                   closeMenu();
 99 |                 }}
100 |                 style={({ isActive }) => ({
101 |                   backgroundColor: isActive ? '#97bf0f' : '#fff',
102 |                   color: isActive ? '#fff' : '#000',
103 |                 })}
104 |                 className="text-start w-full text-xl font-black py-2 px-2 uppercase"
105 |               >
106 |                 {link.text}
107 |               </NavLink>
108 |             </button>
109 |           ))}
110 |         </ul>
111 |       </nav>
112 |     </>
113 |   );
114 | };
115 | 
116 | export default Navbar;
117 | 


--------------------------------------------------------------------------------
/src/redux/reservations/reservationsSlice.js:
--------------------------------------------------------------------------------
  1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
  2 | import axios from 'axios';
  3 | import { backendLink } from '../../constants';
  4 | 
  5 | const initialState = {
  6 |   reservationsList: [],
  7 |   isLoading: false,
  8 |   reserveError: null,
  9 |   houseReservationsList: [],
 10 | };
 11 | 
 12 | export const fetchReservations = createAsyncThunk('reservations/fetchReservations',
 13 |   async () => {
 14 |     const token = localStorage.getItem('token');
 15 |     const response = await axios(`${backendLink}reservations`, {
 16 |       headers: {
 17 |         Accept: 'application/json',
 18 |         authorization: token, // Include the token in the Authorization header
 19 |       },
 20 |     });
 21 |     return response.data;
 22 |   });
 23 | 
 24 | export const fetchHouseReservations = createAsyncThunk('reservations/fetchHouseReservations',
 25 |   async (houseId) => {
 26 |     const token = localStorage.getItem('token');
 27 |     const response = await axios(`${backendLink}house/${houseId}/reservations`, {
 28 |       headers: {
 29 |         Accept: 'application/json',
 30 |         authorization: token, // Include the token in the Authorization header
 31 |       },
 32 |     });
 33 |     return response.data;
 34 |   });
 35 | 
 36 | export const deleteReservation = createAsyncThunk(
 37 |   'reservations/deleteReservation',
 38 |   async (reservationId) => {
 39 |     const token = localStorage.getItem('token');
 40 | 
 41 |     await axios.delete(`${backendLink}reservations/${reservationId}`, {
 42 |       headers: {
 43 |         Accept: 'application/json',
 44 |         Authorization: token,
 45 |       },
 46 |     });
 47 |     return reservationId;
 48 |   },
 49 | );
 50 | 
 51 | export const reserve = createAsyncThunk(
 52 |   'reservations/reserve',
 53 |   async (credentials, { rejectWithValue }) => {
 54 |     const token = localStorage.getItem('token');
 55 |     try {
 56 |       const response = await axios.post(
 57 |         `${backendLink}reservations`,
 58 |         {
 59 |           reservation: {
 60 |             house_id: credentials.houseId,
 61 |             check_in: credentials.checkIn,
 62 |             check_out: credentials.checkOut,
 63 |           },
 64 |         },
 65 |         {
 66 |           headers: {
 67 |             Accept: 'application/json',
 68 |             Authorization: token,
 69 |           },
 70 |         },
 71 |       );
 72 |       return response.data;
 73 |     } catch (error) {
 74 |       if (error.response) {
 75 |         // Handle error with response from Rails
 76 |         return rejectWithValue(error.response.data.base);
 77 |       }
 78 | 
 79 |       // Handle other errors
 80 |       return rejectWithValue(error.message);
 81 |     }
 82 |   },
 83 | );
 84 | 
 85 | const reservationsSlice = createSlice({
 86 |   name: 'reservations',
 87 |   initialState,
 88 |   extraReducers: (builder) => {
 89 |     builder
 90 |       .addCase(fetchReservations.pending, (state) => ({
 91 |         ...state,
 92 |         status: 'loading',
 93 |         reserveError: null,
 94 |       }))
 95 |       .addCase(fetchReservations.fulfilled, (state, action) => ({
 96 |         ...state,
 97 |         reservationsList: action.payload,
 98 |         status: 'succeeded',
 99 |         reserveError: null,
100 |       }))
101 |       .addCase(fetchHouseReservations.fulfilled, (state, action) => ({
102 |         ...state,
103 |         houseReservationsList: action.payload,
104 |         reserveError: null,
105 |       }))
106 |       .addCase(fetchReservations.rejected, (state) => ({
107 |         ...state,
108 |         status: 'error',
109 |         reserveError: null,
110 |       }))
111 |       .addCase(reserve.rejected, (state, action) => ({
112 |         ...state,
113 |         reserveError: action.payload,
114 |       }))
115 |       .addCase(reserve.fulfilled, (state) => ({
116 |         ...state,
117 |         reserveError: 'Your reservation has been done go check my reservations page!',
118 |       }));
119 |   },
120 | });
121 | 
122 | export default reservationsSlice.reducer;
123 | 


--------------------------------------------------------------------------------
/src/components/Reservation.jsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from 'react';
  2 | import { useDispatch, useSelector } from 'react-redux';
  3 | import { useNavigate, useLocation } from 'react-router-dom';
  4 | import PropTypes from 'prop-types';
  5 | import { fetchHouses } from '../redux/houses/housesSlice';
  6 | import { reserve } from '../redux/reservations/reservationsSlice';
  7 | 
  8 | const Reservation = (props) => {
  9 |   const { authorized } = props;
 10 |   const dispatch = useDispatch();
 11 |   const location = useLocation();
 12 |   const queryParams = new URLSearchParams(location.search);
 13 |   const id = queryParams.get('id');
 14 |   const [houseId, setHouseId] = useState(id || 1);
 15 |   const [checkIn, setCheckIn] = useState('');
 16 |   const [checkOut, setCheckOut] = useState('');
 17 |   const { housesList } = useSelector((store) => store.houses);
 18 |   const { reserveError } = useSelector((store) => store.reservations);
 19 |   const navigate = useNavigate();
 20 |   useEffect(() => {
 21 |     if (!authorized) {
 22 |       navigate('/');
 23 |     }
 24 |   }, [authorized, navigate]);
 25 |   useEffect(() => {
 26 |     dispatch(fetchHouses());
 27 |   }, [dispatch]);
 28 |   const handleSubmit = async (e) => {
 29 |     e.preventDefault();
 30 |     dispatch(reserve({ houseId, checkIn, checkOut }));
 31 |   };
 32 |   useEffect(() => {
 33 |     if (!reserveError) {
 34 |       // navigate('/myReservations');
 35 |     }
 36 |   }, [reserveError, navigate]);
 37 | 
 38 |   if (!authorized) {
 39 |     return (<></>);
 40 |   }
 41 | 
 42 |   return (
 43 |     <div className="bg-center bg-cover house-background w-full">
 44 |       <div className="w-full h-full flex flex-col items-center bg-lime bg-opacity-80 bg-cover py-[150px]">
 45 |         <h1 className="text-center text-white-100 font-extrabold text-5xl"> ADD A NEW RESERVATION </h1>
 46 |         <form className="flex flex-col justify-center items-center mt-[200px] bg-gray-100 bg-opacity-70 w-[400px] p-[30px]" onSubmit={handleSubmit}>
 47 |           <div className="my-[20px] w-full">
 48 |             <p className="text-white-100 font-bold text-2xl">Select House:</p>
 49 |             <select
 50 |               id="house-select"
 51 |               onChange={(e) => setHouseId(e.target.value)}
 52 |               value={houseId}
 53 |               className="w-full"
 54 |             >
 55 |               {housesList.map((house) => (
 56 |                 <option key={house.id} value={house.id}>
 57 |                   { house.name }
 58 |                 </option>
 59 |               ))}
 60 |             </select>
 61 |           </div>
 62 | 
 63 |           <div className="my-[20px] w-full">
 64 |             <p className="text-white-100 font-bold text-2xl">Check in:</p>
 65 |             <input
 66 |               id="check-in"
 67 |               type="date"
 68 |               value={checkIn}
 69 |               onChange={(e) => setCheckIn(e.target.value)}
 70 |               className="w-full"
 71 |             />
 72 |           </div>
 73 | 
 74 |           <div className="my-[20px] w-full">
 75 |             <p className="text-white-100 font-bold text-2xl">Check out:</p>
 76 |             <input
 77 |               id="check-out"
 78 |               type="date"
 79 |               value={checkOut}
 80 |               onChange={(e) => setCheckOut(e.target.value)}
 81 |               className="w-full"
 82 |             />
 83 |           </div>
 84 |           <a href={`house\\${houseId}\\reservations`} className="bg-lime rounded-full px-6 py-2 mt-6 color text-white flex items-center" type="submit">Show house reservations</a>
 85 |           <button className="bg-lime rounded-full px-6 py-2 mt-6 color text-white flex items-center" type="submit">Submit</button>
 86 |         </form>
 87 |         {reserveError && (
 88 |         <p style={{ color: reserveError === 'Your reservation has been done go check my reservations page!' ? 'green' : 'red' }}>
 89 |           {reserveError}
 90 |         </p>
 91 |         )}
 92 |       </div>
 93 |     </div>
 94 |   );
 95 | };
 96 | 
 97 | Reservation.propTypes = {
 98 |   authorized: PropTypes.bool.isRequired,
 99 | };
100 | export default Reservation;
101 | 


--------------------------------------------------------------------------------
/src/components/SignupForm.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { useDispatch } from 'react-redux';
 3 | import { useNavigate, NavLink } from 'react-router-dom';
 4 | import { BiLeftArrow } from 'react-icons/bi';
 5 | import PropTypes from 'prop-types';
 6 | import houseImage from '../assets/house.jpg';
 7 | import { signup } from '../redux/signup/signupSlice';
 8 | 
 9 | const SignupForm = (props) => {
10 |   const { authorized } = props;
11 |   const dispatch = useDispatch();
12 |   const [name, setName] = useState('');
13 |   const [email, setEmail] = useState('');
14 |   const [password, setPassword] = useState('');
15 |   const [passwordConfirmation, setPasswordConfirmation] = useState('');
16 |   const navigate = useNavigate();
17 | 
18 |   useEffect(() => {
19 |     if (authorized) {
20 |       navigate('/home');
21 |     }
22 |   }, [authorized, navigate]);
23 |   const handleSubmit = (e) => {
24 |     e.preventDefault();
25 | 
26 |     dispatch(signup({
27 |       name, email, password, passwordConfirmation,
28 |     }))
29 |       .unwrap()
30 |       .then((token) => {
31 |         // Handle successful login
32 |         localStorage.setItem('token', token);
33 |         navigate('/login');
34 |       });
35 |   };
36 | 
37 |   return (
38 |     <div className="relative w-full bg-center bg-cover" style={{ backgroundImage: `url(${houseImage})` }}>
39 |       <div className="z-50 hover:bg-opacity-100 shadow-lg bg-gray-100 p-6 pl-4 md:pl-12 rounded-r-full absolute top-14 md:top-10 left-0 border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-70">
40 |         <NavLink to="/">
41 |           <BiLeftArrow size={20} className="cursor-pointer text-white" />
42 |         </NavLink>
43 |       </div>
44 |       <div className="p-8 h-screen w-full flex flex-col justify-center gap-2 bg-mustard bg-opacity-80">
45 |         <h2 className="font-black uppercase mx-auto text-center text-3xl text-white tracking-wider">Sign up</h2>
46 |         <form
47 |           onSubmit={handleSubmit}
48 |           className="border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg gap-2 bg-opacity-70 shadow-xl flex flex-col items-end container mx-auto px-6 py-6 max-w-md mt-6 bg-gray-100 rounded-md"
49 |         >
50 |           <input
51 |             type="text"
52 |             value={name}
53 |             onChange={(e) => setName(e.target.value)}
54 |             placeholder="name"
55 |             required
56 |             className="mt-2 w-full p-2 border border-slate-300 rounded text-sm shadow-sm
57 |               focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
58 |           />
59 |           <input
60 |             type="email"
61 |             value={email}
62 |             onChange={(e) => setEmail(e.target.value)}
63 |             placeholder="Email"
64 |             required
65 |             className="mt-2 w-full p-2 border border-slate-300 rounded text-sm shadow-sm
66 |               focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
67 |           />
68 |           <input
69 |             type="password"
70 |             value={password}
71 |             onChange={(e) => setPassword(e.target.value)}
72 |             placeholder="Password"
73 |             required
74 |             className="mt-2 w-full p-2 border border-slate-300 rounded text-sm shadow-sm
75 |               focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
76 |           />
77 |           <input
78 |             type="password"
79 |             value={passwordConfirmation}
80 |             onChange={(e) => setPasswordConfirmation(e.target.value)}
81 |             placeholder="Password Confirmation"
82 |             required
83 |             className="mt-2 w-full p-2 border border-slate-300 rounded text-sm shadow-sm
84 |               focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
85 |           />
86 |           <button className="mt-4 text-lg border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-md hover:bg-opacity-100 bg-mustard rounded-full px-4 py-2 color text-white flex justify-evenly items-center" type="submit">Sign up</button>
87 |         </form>
88 |       </div>
89 |     </div>
90 |   );
91 | };
92 | SignupForm.propTypes = {
93 |   authorized: PropTypes.bool.isRequired,
94 | };
95 | export default SignupForm;
96 | 


--------------------------------------------------------------------------------
/src/components/DeleteHouse.jsx:
--------------------------------------------------------------------------------
  1 | import { FaMapMarkerAlt, FaCity } from 'react-icons/fa';
  2 | import { FiInfo } from 'react-icons/fi';
  3 | import { BiLeftArrow } from 'react-icons/bi';
  4 | import { NavLink, useNavigate } from 'react-router-dom';
  5 | import { useSelector, useDispatch } from 'react-redux';
  6 | import { useEffect } from 'react';
  7 | import Swal from 'sweetalert2';
  8 | import PropTypes from 'prop-types';
  9 | import { fetchHouses } from '../redux/houses/housesSlice';
 10 | import { deleteHouse } from '../redux/houses/deleteHouseSlice';
 11 | 
 12 | const DeleteHouse = (props) => {
 13 |   const dispatch = useDispatch();
 14 |   const { housesList } = useSelector((store) => store.houses);
 15 |   const { authorized } = props;
 16 | 
 17 |   const navigate = useNavigate();
 18 |   useEffect(() => {
 19 |     if (!authorized) {
 20 |       navigate('/');
 21 |     }
 22 |   }, [authorized, navigate]);
 23 | 
 24 |   useEffect(() => {
 25 |     dispatch(fetchHouses());
 26 |   }, [dispatch]);
 27 | 
 28 |   const handleDelete = (houseId) => {
 29 |     Swal.fire({
 30 |       title: 'Are you sure?',
 31 |       text: 'Once deleted, you will not be able to recover this house!',
 32 |       icon: 'warning',
 33 |       confirmButtonColor: '#96BF01',
 34 |       showCancelButton: true,
 35 |       confirmButtonText: 'Delete',
 36 |       cancelButtonText: 'Cancel',
 37 |       reverseButtons: true,
 38 |     }).then((result) => {
 39 |       if (result.isConfirmed) {
 40 |         dispatch(deleteHouse(houseId)).then(() => {
 41 |           Swal.fire('Deleted!', 'The house has been deleted.', 'success').then(() => {
 42 |             window.location.reload();
 43 |           });
 44 |         });
 45 |       }
 46 |     });
 47 |   };
 48 |   if (authorized) {
 49 |     return (
 50 |       <div className="h-screen w-screen mx-auto ">
 51 |         <div className="hover:bg-opacity-100 z-20 bg-lime p-6 pl-4 md:pl-12 rounded-r-full fixed bottom-8 md:bottom-10 left-0 border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-lg">
 52 |           <NavLink to="/home">
 53 |             <BiLeftArrow size={20} className="cursor-pointer text-white-100" />
 54 |           </NavLink>
 55 |         </div>
 56 |         <div className="h-full overflow-auto">
 57 |           <h2 className="mt-28 text-center text-4xl font-black tracking-widest">SELECT HOUSE TO DELETE</h2>
 58 |           <ul className="flex flex-col justify-center gap-8 items-center py-20">
 59 |             {housesList.map((house) => (
 60 |               <div key={house.id} className="bg-white shadow rounded-lg p-4 relative">
 61 |                 <div className="relative inline-flex">
 62 |                   <img className="rounded-lg h-auto mb-4" src={house.photo} alt={house.name} />
 63 |                   <div className="absolute top-6 right-5 bg-mustard text-white p-1 rounded-lg">
 64 |                     <span className="font-bold">
 65 |                       $
 66 |                       {house.night_price}
 67 |                     </span>
 68 |                   </div>
 69 |                 </div>
 70 |                 <div className="flex flex-col justify-between">
 71 |                   <div>
 72 |                     <h1 className="uppercase text-xl font-bold mb-2">{house.name}</h1>
 73 |                     <p className="mb-2">
 74 |                       <span className="mr-1 rounded-lg">
 75 |                         <FiInfo className="inline fill-white text-[#96BF01] mr-1" />
 76 |                       </span>
 77 |                       {house.description}
 78 | 
 79 |                     </p>
 80 |                     <p className="mb-2">
 81 |                       <span className="mr-1 rounded-lg">
 82 |                         <FaMapMarkerAlt className="inline fill-[#96BF01] mr-1" />
 83 |                       </span>
 84 |                       {house.address}
 85 |                     </p>
 86 |                     <p className="mb-2">
 87 |                       <span className="m-1 rounded-lg">
 88 |                         <FaCity className="inline fill-[#96BF01]" />
 89 |                       </span>
 90 |                       {house.city}
 91 |                     </p>
 92 |                     <button
 93 |                       type="button"
 94 |                       onClick={() => handleDelete(house.id)}
 95 |                       className="bg-lime border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-80 shadow-md hover:bg-mustard text-white rounded-full px-4 py-2 mt-4"
 96 |                     >
 97 |                       Delete
 98 |                     </button>
 99 |                   </div>
100 |                 </div>
101 |               </div>
102 |             ))}
103 |           </ul>
104 |         </div>
105 |       </div>
106 |     );
107 |   }
108 | 
109 |   return (
110 |     <>
111 |     </>
112 |   );
113 | };
114 | DeleteHouse.propTypes = {
115 |   authorized: PropTypes.bool.isRequired,
116 | };
117 | export default DeleteHouse;
118 | 


--------------------------------------------------------------------------------
/src/components/AddHouse.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useRef } from 'react';
  2 | import { useDispatch } from 'react-redux';
  3 | import { BiLeftArrow } from 'react-icons/bi';
  4 | import { NavLink, useNavigate } from 'react-router-dom';
  5 | import { MdAdsClick } from 'react-icons/md';
  6 | import PropTypes from 'prop-types';
  7 | import { createHouse } from '../redux/houses/housesSlice';
  8 | import houseImage from '../assets/house.jpg';
  9 | 
 10 | const AddHouse = (props) => {
 11 |   const { authorized } = props;
 12 |   const navigate = useNavigate();
 13 |   useEffect(() => {
 14 |     if (!authorized) {
 15 |       navigate('/');
 16 |     }
 17 |   }, [authorized, navigate]);
 18 |   const dispatch = useDispatch();
 19 |   const initialFormData = [
 20 |     { name: 'name', value: '' },
 21 |     { name: 'address', value: '' },
 22 |     { name: 'description', value: '' },
 23 |     { name: 'city', value: '' },
 24 |     { name: 'photo', value: '' },
 25 |     { name: 'night_price', value: '' },
 26 |   ];
 27 |   const [formData, setFormData] = useState(initialFormData);
 28 |   const [isSubmitted, setIsSubmitted] = useState(false);
 29 |   const successMessageRef = useRef(null);
 30 | 
 31 |   const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
 32 | 
 33 |   const handleChange = (e) => {
 34 |     const { name, value } = e.target;
 35 |     setFormData((prevFormData) => prevFormData.map((field) => (
 36 |       field.name === name ? { ...field, value } : field)));
 37 |   };
 38 | 
 39 |   const handleSubmit = (e) => {
 40 |     e.preventDefault();
 41 |     const houseData = formData.reduce(
 42 |       (data, field) => ({ ...data, [field.name]: field.value }),
 43 |       {},
 44 |     );
 45 |     dispatch(createHouse(houseData));
 46 |     setFormData(initialFormData);
 47 |     setIsSubmitted(true);
 48 |   };
 49 | 
 50 |   useEffect(() => {
 51 |     const handleClickOutside = (event) => {
 52 |       if (successMessageRef.current && !successMessageRef.current.contains(event.target)) {
 53 |         setIsSubmitted(false);
 54 |       }
 55 |     };
 56 | 
 57 |     document.addEventListener('click', handleClickOutside);
 58 | 
 59 |     return () => {
 60 |       document.removeEventListener('click', handleClickOutside);
 61 |     };
 62 |   }, []);
 63 |   if (!authorized) {
 64 |     return (<></>);
 65 |   }
 66 | 
 67 |   return (
 68 |     <div className="relative w-full bg-center bg-cover" style={{ backgroundImage: `url(${houseImage})` }}>
 69 |       <div className="hover:bg-opacity-100 shadow-lg z-20 bg-gray-100 p-6 pl-4 md:pl-12 rounded-r-full absolute bottom-14 md:bottom-10 left-0 border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-70">
 70 |         <NavLink to="/home">
 71 |           <BiLeftArrow size={20} className="cursor-pointer text-white" />
 72 |         </NavLink>
 73 |       </div>
 74 |       <div className="p-8 h-screen w-full flex flex-col justify-center gap-14 bg-lime bg-opacity-80">
 75 |         <h2 className="font-black uppercase mx-auto text-center text-4xl text-white tracking-wider">ADD A NEW HOUSE</h2>
 76 |         <form
 77 |           onSubmit={handleSubmit}
 78 |           className="border-2 border-t-0 border-l-0 border-white/25 backdrop-filter backdrop-blur-lg bg-opacity-70 shadow-xl flex flex-col items-end container mx-auto px-6 py-8 max-w-md mt-6 bg-gray-100 rounded-md"
 79 |         >
 80 |           {formData.map((field) => (
 81 |             <input
 82 |               key={field.name}
 83 |               type={field.name === 'night_price' ? 'number' : 'text'}
 84 |               name={field.name}
 85 |               placeholder={field.name === 'night_price' ? 'Price per Night' : capitalize(field.name)}
 86 |               value={field.value}
 87 |               onChange={handleChange}
 88 |               className="mt-2 w-full p-2 border border-slate-300 rounded text-sm shadow-sm
 89 |               focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
 90 |               required
 91 |               minLength={field.name === 'name' || field.name === 'address' || field.name === 'city' ? 3 : undefined}
 92 |               maxLength={field.name === 'name' || field.name === 'city' ? 16 : undefined}
 93 |               min={field.name === 'night_price' ? 0 : undefined}
 94 |               step={field.name === 'night_price' ? 1 : undefined}
 95 |               pattern={field.name === 'night_price' ? '[0-9]*' : undefined}
 96 |             />
 97 |           ))}
 98 |           {isSubmitted && (
 99 |           <p ref={successMessageRef} className="text-green-500 mt-2">
100 |             Successfully created!
101 |           </p>
102 |           )}
103 |           <button
104 |             type="submit"
105 |             className="bg-lime rounded-full px-6 py-2 mt-6 color text-white flex items-center"
106 |           >
107 |             Submit
108 |             <MdAdsClick className="ml-4" />
109 |           </button>
110 |         </form>
111 |       </div>
112 |     </div>
113 |   );
114 | };
115 | 
116 | AddHouse.propTypes = {
117 |   authorized: PropTypes.bool.isRequired,
118 | };
119 | export default AddHouse;
120 | 


--------------------------------------------------------------------------------