From 6c8acd6b91fc2584dabab8918e475c0b031f3393 Mon Sep 17 00:00:00 2001 From: "Evans K. Nyamekye" Date: Mon, 4 Mar 2024 05:06:37 +0000 Subject: [PATCH 01/24] Add detailsPage --- src/Components/DetailsPage.js | 45 +++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/Components/DetailsPage.js diff --git a/src/Components/DetailsPage.js b/src/Components/DetailsPage.js new file mode 100644 index 0000000..36b50d5 --- /dev/null +++ b/src/Components/DetailsPage.js @@ -0,0 +1,45 @@ +import React, { useEffect } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import { fetchDetailsPage } from '../Redux/places/detailsPageSlice'; +import '../DetailsPage.css'; +import '../Navigation.css'; + +function DetailsPage({ match }) { + const dispatch = useDispatch(); + const { id } = useParams(); + const detailsPage = useSelector((state) => state.detailsPage.detailsPage); + const status = useSelector((state) => state.detailsPage.status); + const error = useSelector((state) => state.detailsPage.error); + + useEffect(() => { + if (status === 'idle') { + dispatch(fetchDetailsPage(match.params.id)); + } + }, [status, dispatch, match.yparams.id]); + + if (status === 'loading') { + return
Loading...
; + } + + if (status === 'failed') { + return ( +
+ Error: + {error} +
+ ); + } + + return ( +
+ {detailsPage.name} +

{detailsPage.name}

+

{detailsPage.description}

+

{detailsPage.location}

+

{detailsPage.rate}

+

{detailsPage.address}

+
+ ); +} + +export default DetailsPage; From e30e72fbaa05d34931247452b20edbacb3630cef Mon Sep 17 00:00:00 2001 From: "Evans K. Nyamekye" Date: Mon, 4 Mar 2024 05:16:24 +0000 Subject: [PATCH 02/24] Add detailsPageSlice to Redux --- src/Redux/places/detailsPageSlice.js | 37 ++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/Redux/places/detailsPageSlice.js diff --git a/src/Redux/places/detailsPageSlice.js b/src/Redux/places/detailsPageSlice.js new file mode 100644 index 0000000..fe68bae --- /dev/null +++ b/src/Redux/places/detailsPageSlice.js @@ -0,0 +1,37 @@ +import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; +import axios from 'axios'; + +export const fetchDetailsPage = createAsyncThunk( + 'detailsPage/fetchDetailsPage', + async (placeId) => { + const userId = localStorage.getItem('userId'); + const response = await axios.get(`http://localhost:3000/api/v1/users/${userId}/places/${placeId}`); + return response.data; + }, +); + +const detailsPageSlice = createSlice({ + name: 'detailsPage', + initialState: { + detailsPage: {}, + status: 'idle', + error: null, + }, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(fetchDetailsPage.pending, (state) => { + state.status = 'loading'; + }) + .addCase(fetchDetailsPage.fulfilled, (state, action) => { + state.status = 'succeeded'; + state.detailsPage = action.payload; + }) + .addCase(fetchDetailsPage.rejected, (state, action) => { + state.status = 'failed'; + state.error = action.error.message; + }); + }, +}); + +export default detailsPageSlice.reducer; From 6a780fbbeac612867507ea8ac117383e3b778038 Mon Sep 17 00:00:00 2001 From: "Evans K. Nyamekye" Date: Mon, 4 Mar 2024 05:16:50 +0000 Subject: [PATCH 03/24] Add CSS styling for DetailsPage --- src/DetailsPage.css | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/DetailsPage.css diff --git a/src/DetailsPage.css b/src/DetailsPage.css new file mode 100644 index 0000000..866714e --- /dev/null +++ b/src/DetailsPage.css @@ -0,0 +1,3 @@ +* { + text-decoration: none; +} From 02859235125716a6bf637bae048c602169499fdb Mon Sep 17 00:00:00 2001 From: "Evans K. Nyamekye" Date: Mon, 4 Mar 2024 05:17:55 +0000 Subject: [PATCH 04/24] Add DetailsPage component to App.js --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index 3175314..95ba9d9 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import Layout from './Components/Layout'; import PlaceList from './Components/PlaceList'; import MyReservations from './Components/MyReservations'; import './App.css'; +import DetailsPage from './Components/DetailsPage'; function App() { const [loggedIn, setLoggedIn] = useState(false); @@ -28,6 +29,7 @@ function App() { element={} > } /> + } /> } /> ) : null} From 4e489133edb55f87e1d11071e6aa4a876a1677a0 Mon Sep 17 00:00:00 2001 From: "Evans K. Nyamekye" Date: Mon, 4 Mar 2024 05:19:59 +0000 Subject: [PATCH 05/24] Add Link to View Details in PlaceList component --- src/Components/PlaceList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/PlaceList.js b/src/Components/PlaceList.js index a06a87f..aeea1df 100644 --- a/src/Components/PlaceList.js +++ b/src/Components/PlaceList.js @@ -1,8 +1,8 @@ +import { Link } from 'react-router-dom'; import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import PropTypes from 'prop-types'; import { fetchPlaces } from '../Redux/places/placesSlice'; - import '../Placelist.css'; function PlacesList() { @@ -82,7 +82,7 @@ function PlacesList() {
  • instagram-icon
  • p-icon
    • - + View Details ))} From 96d649d3746ef262254b67906f04019c5376f8f4 Mon Sep 17 00:00:00 2001 From: "Evans K. Nyamekye" Date: Mon, 4 Mar 2024 05:22:06 +0000 Subject: [PATCH 06/24] Update Places.svg --- public/images/Places.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/images/Places.svg b/public/images/Places.svg index 00d2021..4b12ba2 100644 --- a/public/images/Places.svg +++ b/public/images/Places.svg @@ -1 +1 @@ - \ No newline at end of file + From baa2d0d43e07f1c81b174a68bd2e646e8a514368 Mon Sep 17 00:00:00 2001 From: Evans Kofi Nyamekye Date: Tue, 5 Mar 2024 09:19:32 +0000 Subject: [PATCH 07/24] Update: modified detailsPage functionalities --- src/Components/DetailsPage.js | 27 ++++++++++++++++++++++----- src/Components/PlaceList.js | 2 +- src/Redux/store.js | 2 ++ 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/Components/DetailsPage.js b/src/Components/DetailsPage.js index 36b50d5..a1cadb4 100644 --- a/src/Components/DetailsPage.js +++ b/src/Components/DetailsPage.js @@ -1,10 +1,11 @@ import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; +import { useParams } from 'react-router-dom'; import { fetchDetailsPage } from '../Redux/places/detailsPageSlice'; import '../DetailsPage.css'; import '../Navigation.css'; -function DetailsPage({ match }) { +function DetailsPage() { const dispatch = useDispatch(); const { id } = useParams(); const detailsPage = useSelector((state) => state.detailsPage.detailsPage); @@ -13,14 +14,17 @@ function DetailsPage({ match }) { useEffect(() => { if (status === 'idle') { - dispatch(fetchDetailsPage(match.params.id)); + dispatch(fetchDetailsPage(id)); } - }, [status, dispatch, match.yparams.id]); - + }, [status, dispatch, id]); if (status === 'loading') { return
    Loading...
    ; } + if (status === 'succeeded') { + return
    {detailsPage.name}
    ; + } + if (status === 'failed') { return (
    @@ -32,12 +36,25 @@ function DetailsPage({ match }) { return (
    - {detailsPage.name} +

    Details Page

    + {/* {detailsPage.name}

    {detailsPage.name}

    {detailsPage.description}

    {detailsPage.location}

    {detailsPage.rate}

    {detailsPage.address}

    +

    + User ID: + {detailsPage.user_id} +

    +

    + Created At: + {new Date(detailsPage.created_at).toLocaleString()} +

    +

    + Updated At: + {new Date(detailsPage.updated_at).toLocaleString()} +

    */}
    ); } diff --git a/src/Components/PlaceList.js b/src/Components/PlaceList.js index aeea1df..eed0094 100644 --- a/src/Components/PlaceList.js +++ b/src/Components/PlaceList.js @@ -82,7 +82,7 @@ function PlacesList() {
  • instagram-icon
  • p-icon
    • - View Details + View Details ))} diff --git a/src/Redux/store.js b/src/Redux/store.js index 5bb7a78..512ef46 100644 --- a/src/Redux/store.js +++ b/src/Redux/store.js @@ -1,10 +1,12 @@ import { configureStore } from '@reduxjs/toolkit'; import placesReducer from './places/placesSlice'; import addPlaceReducer from './places/addPlaceSlice'; +import detailsPageReducer from './places/detailsPageSlice'; export default configureStore({ reducer: { places: placesReducer, addPlace: addPlaceReducer, + detailsPage: detailsPageReducer, }, }); From 314401803b9cd980445683005fb8c69021e266ee Mon Sep 17 00:00:00 2001 From: Evans Kofi Nyamekye Date: Tue, 5 Mar 2024 09:21:26 +0000 Subject: [PATCH 08/24] fix linters --- src/DetailsPage.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DetailsPage.css b/src/DetailsPage.css index 866714e..2e44b1a 100644 --- a/src/DetailsPage.css +++ b/src/DetailsPage.css @@ -1,3 +1,3 @@ * { - text-decoration: none; + text-decoration: none; } From 48d6880e5fbd7cb87b1009777f15ab21a80d4a4b Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 16:15:41 +0200 Subject: [PATCH 09/24] Add Details Page component --- src/Components/DetailsPage.js | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/Components/DetailsPage.js b/src/Components/DetailsPage.js index a1cadb4..a84205e 100644 --- a/src/Components/DetailsPage.js +++ b/src/Components/DetailsPage.js @@ -2,8 +2,9 @@ import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { useParams } from 'react-router-dom'; import { fetchDetailsPage } from '../Redux/places/detailsPageSlice'; -import '../DetailsPage.css'; -import '../Navigation.css'; +import '../Placelist.css'; +// import '../DetailsPage.css'; +// import '../Navigation.css'; function DetailsPage() { const dispatch = useDispatch(); @@ -13,16 +14,11 @@ function DetailsPage() { const error = useSelector((state) => state.detailsPage.error); useEffect(() => { - if (status === 'idle') { - dispatch(fetchDetailsPage(id)); - } - }, [status, dispatch, id]); - if (status === 'loading') { - return
    Loading...
    ; - } + dispatch(fetchDetailsPage(id)); + }, [dispatch, id]); - if (status === 'succeeded') { - return
    {detailsPage.name}
    ; + if (status === 'loading' || status === 'idle') { + return
    Loading...
    ; } if (status === 'failed') { @@ -35,10 +31,10 @@ function DetailsPage() { } return ( -
    +

    Details Page

    - {/* {detailsPage.name} -

    {detailsPage.name}

    + {detailsPage.name} + {/*

    {detailsPage.name}

    */}

    {detailsPage.description}

    {detailsPage.location}

    {detailsPage.rate}

    @@ -54,7 +50,7 @@ function DetailsPage() {

    Updated At: {new Date(detailsPage.updated_at).toLocaleString()} -

    */} +

    ); } From 79db1f4377d4e548b5e19bedcd51f34e60ff38d3 Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 16:16:33 +0200 Subject: [PATCH 10/24] Add Slice --- src/Redux/places/detailsPageSlice.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Redux/places/detailsPageSlice.js b/src/Redux/places/detailsPageSlice.js index fe68bae..88b3f0e 100644 --- a/src/Redux/places/detailsPageSlice.js +++ b/src/Redux/places/detailsPageSlice.js @@ -3,10 +3,14 @@ import axios from 'axios'; export const fetchDetailsPage = createAsyncThunk( 'detailsPage/fetchDetailsPage', - async (placeId) => { - const userId = localStorage.getItem('userId'); - const response = await axios.get(`http://localhost:3000/api/v1/users/${userId}/places/${placeId}`); - return response.data; + async (placeId, thunkAPI) => { + try { + const userId = localStorage.getItem('userId'); + const response = await axios.get(`http://localhost:3000/api/v1/users/${userId}/places/${placeId}`); + return response.data; + } catch (error) { + return thunkAPI.rejectWithValue(error.response.data); + } }, ); From 8d765bdb6b2fa1fe0d430e9d5ae683903f336aed Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 16:22:32 +0200 Subject: [PATCH 11/24] Add fetchDetailsPage function and update View Details button --- src/Components/PlaceList.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/Components/PlaceList.js b/src/Components/PlaceList.js index eed0094..4b668ad 100644 --- a/src/Components/PlaceList.js +++ b/src/Components/PlaceList.js @@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import PropTypes from 'prop-types'; import { fetchPlaces } from '../Redux/places/placesSlice'; +import { fetchDetailsPage } from '../Redux/places/detailsPageSlice'; import '../Placelist.css'; function PlacesList() { @@ -15,6 +16,11 @@ function PlacesList() { const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 3; + // Fetch details page function + const handleViewDetails = (placeId) => { + dispatch(fetchDetailsPage(placeId)); + }; + useEffect(() => { if (status === 'idle') { dispatch(fetchPlaces()); @@ -82,7 +88,9 @@ function PlacesList() {
  • instagram-icon
  • p-icon
    • - View Details + ))} From 337c278f3e8ae3108c16789d9062bd96be75e4e1 Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 18:04:47 +0200 Subject: [PATCH 12/24] Add classNames for styling --- src/Components/DetailsPage.js | 62 ++++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 22 deletions(-) diff --git a/src/Components/DetailsPage.js b/src/Components/DetailsPage.js index a84205e..012b53e 100644 --- a/src/Components/DetailsPage.js +++ b/src/Components/DetailsPage.js @@ -1,9 +1,10 @@ import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; +import PropTypes from 'prop-types'; import { useParams } from 'react-router-dom'; import { fetchDetailsPage } from '../Redux/places/detailsPageSlice'; import '../Placelist.css'; -// import '../DetailsPage.css'; +import '../DetailsPage.css'; // import '../Navigation.css'; function DetailsPage() { @@ -31,28 +32,45 @@ function DetailsPage() { } return ( -
    -

    Details Page

    - {detailsPage.name} - {/*

    {detailsPage.name}

    */} -

    {detailsPage.description}

    -

    {detailsPage.location}

    -

    {detailsPage.rate}

    -

    {detailsPage.address}

    -

    - User ID: - {detailsPage.user_id} -

    -

    - Created At: - {new Date(detailsPage.created_at).toLocaleString()} -

    -

    - Updated At: - {new Date(detailsPage.updated_at).toLocaleString()} -

    -
    + <> +
    +
    +
    + {detailsPage.description} +
    +
    +

    {detailsPage.description}

    +

    + Location: + {detailsPage.location} +

    +

    + Rate: + +

    +

    + Address: + {detailsPage.address} +

    +
    +
    +
    + + ); } +const StarRating = ({ rating }) => { + const stars = Array.from({ length: 5 }, (_, index) => ( + {index + 1 <= rating ? '\u2605' : '\u2606'} + )); + + return
    {stars}
    ; +}; + +// Prop types validation for StarRating component +StarRating.propTypes = { + rating: PropTypes.number.isRequired, +}; + export default DetailsPage; From 5fd68a43a217b727b106772517e1c484f2af4231 Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 18:05:07 +0200 Subject: [PATCH 13/24] Add basic styles --- src/DetailsPage.css | 46 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/src/DetailsPage.css b/src/DetailsPage.css index 2e44b1a..8b6b7c4 100644 --- a/src/DetailsPage.css +++ b/src/DetailsPage.css @@ -1,3 +1,45 @@ -* { - text-decoration: none; +.item-details { + display: flex; + flex-direction: column; + + /* align-items: center; */ + justify-content: center; + transition: transform 2.5s ease; + padding: 1rem; +} + +.item-details:hover { + border: solid 2px #e2dddd; + border-radius: 2rem; + transform: scale(1.04); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + cursor: pointer; +} + +.main { + display: flex; + + /* align-items: center; */ + justify-content: space-evenly; + width: 80vw; +} + +.image { + width: 40vw; + height: 70vh; +} + +.title { + font-size: 2em; + margin-bottom: 10px; +} + +.price-section { + padding: 10px; + margin-bottom: 10px; + color: black; +} + +.price-section p { + color: black; } From 158d83ff5a4e30d19b2f604e4359105fbfdaa9c0 Mon Sep 17 00:00:00 2001 From: George Date: Tue, 5 Mar 2024 20:42:22 +0400 Subject: [PATCH 14/24] Add price per night and reservation button to DetailsPage --- src/Components/DetailsPage.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/Components/DetailsPage.js b/src/Components/DetailsPage.js index 012b53e..336c225 100644 --- a/src/Components/DetailsPage.js +++ b/src/Components/DetailsPage.js @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import PropTypes from 'prop-types'; -import { useParams } from 'react-router-dom'; +import { useParams, Link } from 'react-router-dom'; import { fetchDetailsPage } from '../Redux/places/detailsPageSlice'; import '../Placelist.css'; import '../DetailsPage.css'; @@ -52,6 +52,13 @@ function DetailsPage() { Address: {detailsPage.address}

    +

    + Price per night:$ + {detailsPage.pricepernight} +

    + + +
    From fd5215e39042f2fb48390bf8eef27a21f933c675 Mon Sep 17 00:00:00 2001 From: George Date: Tue, 5 Mar 2024 20:44:37 +0400 Subject: [PATCH 15/24] Update copyright notice in LICENSE file and add readme --- LICENSE | 2 +- README.md | 195 +++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 159 insertions(+), 38 deletions(-) diff --git a/LICENSE b/LICENSE index 95dbc7b..d533809 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 Gladwin Tshepo Ramantso +Copyright (c) 2024 Gladwin Tshepo Ramantso & George Hamman & Evans kofi Nyamekye Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 58beeac..e82f5cd 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,191 @@ -# Getting Started with Create React App + -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +
    + -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. +- **[React Components]** +- **[Redux]** +- **[Database]** +- **[Rails API]** -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. +

    (back to top)

    -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. + -## Learn More +## 🚀 Live Demo -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). +- Coming soon. -To learn React, check out the [React documentation](https://reactjs.org/). +

    (back to top)

    -### Code Splitting + -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) +## 💻 Getting Started -### Analyzing the Bundle Size +To get a local copy up and running, follow these steps. -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) +### Prerequisites -### Making a Progressive Web App +In order to run this project you need: -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) +- VScode +- Ruby +- Rails +- Postgres -### Advanced Configuration +### Setup + +Clone this repository to your desired folder: + +Make sure you setup and run the back-end first. + +```sh + git clone git@github.com:tsheporamantso/final-capstone-react-front-end.git + cd final-capstone-react-front-end +``` + +### Install + +Install this project with: + +```sh + npm install +``` + +```sh + rails db:create +``` + +```sh + rails db:migrate + rails db:seed +``` + +### Usage + +To run the project, execute the following command: + +```sh + npm start +``` -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) ### Deployment -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) +Not deployed + +

    (back to top)

    + + + +## 👥 Authors + +👤 **Gladwin Tshepo Ramantso** + +- GitHub: [@tsheporamantso](https://github.com/tsheporamantso) +- Twitter: [@ramgt001](https://twitter.com/ramgt001) +- LinkedIn: [Tshepo Gladwin Ramantso](https://www.linkedin.com/in/tshepo-ramantso-b6a35433/) + +👤 **George Hamman** + +- GitHub: [@githubhandle](https://github.com/George7h) +- LinkedIn: George Hamman + +👤 **Evans Kofi Nyamekye** +- GitHub: [evansnyamekye](https://github.com/evansnyamekye) +- Twitter: [@nyamekye2131](https://twitter.com/nyamekye2131) +- LinkedIn: [Evans Kofi Nyamekye](https://www.linkedin.com/in/evans-kofi-nyamekye-1980a4117/) + +

    (back to top)

    + + + +## 🔭 Future Features + +- [ ] **Improve Styling** +- [ ] **Spesific room selection with each place** +- [ ] **Check to see if a person can book the hotel if they have rooms available** + +

    (back to top)

    + + + +## 🤝 Contributing + +Contributions, issues, and feature requests are welcome! + +Feel free to check the [issues page](https://github.com/tsheporamantso/final-capstone-react-front-end/issues). + +

    (back to top)

    + + + +## ⭐️ Show your support + +If you like this project feel free to leave a star and/or follow me on Github. + +

    (back to top)

    + + + +## 🙏 Acknowledgments + +I would like to thank the code reviewers for taking the time to review our project and for Microverse for supplying it. +Also I would like to thank [Murat Korkmaz](https://www.behance.net/muratk) on Behance for the design inspiration. + +

    (back to top)

    + + + +## 📝 License -### `npm run build` fails to minify +This project is [MIT](./LICENSE) licensed. -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) +

    (back to top)

    \ No newline at end of file From 4a4d12e55cea4ce518b0bd1c080eb2ffead69188 Mon Sep 17 00:00:00 2001 From: Evans Kofi Nyamekye Date: Tue, 5 Mar 2024 17:58:02 +0000 Subject: [PATCH 16/24] Update: add media qurries to css-files --- src/AddPlace.css | 49 +++++++++++++ src/Components/PlaceList.js | 4 +- src/Placelist.css | 138 ++++++++++++++++++++++++++++-------- src/Sign-In.css | 42 +++++++++++ src/Sign-Up.css | 40 +++++++++++ 5 files changed, 241 insertions(+), 32 deletions(-) diff --git a/src/AddPlace.css b/src/AddPlace.css index 9928a6f..e468e93 100644 --- a/src/AddPlace.css +++ b/src/AddPlace.css @@ -36,3 +36,52 @@ color: #fff; border: none; } + +/* Mobile styles */ +@media only screen and (max-width: 600px) { + .form-container { + width: 80vw; + padding: 4vw; + } + + .container { + width: 100%; + } + + .form-container h2 { + font-size: 30px; + } + + .form-container input { + padding: 10px 5px; + } + + .button { + padding: 8px; + } + + .social-icons { + display: flex; + flex-direction: column; + } +} + +/* Desktop styles */ +@media only screen and (min-width: 601px) { + .form-container { + width: 50vw; + padding: 5vw; + } + + .form-container h2 { + font-size: 35px; + } + + .form-container input { + padding: 12px 20px; + } + + .button { + padding: 10px; + } +} diff --git a/src/Components/PlaceList.js b/src/Components/PlaceList.js index eed0094..0b3cca2 100644 --- a/src/Components/PlaceList.js +++ b/src/Components/PlaceList.js @@ -57,7 +57,7 @@ function PlacesList() {

    Accomodations

    Select Accomodations to Reserve
    -
      +
        {currentItems.map((place) => (
      • @@ -75,7 +75,7 @@ function PlacesList() { Address: {place.address.length > 10 ? `${place.address.substring(0, 30)}...` : place.address} -
          +
          • twitter-icon
          • facebook-icon
          • twitter-icon
            • diff --git a/src/Placelist.css b/src/Placelist.css index 33400d9..a392c62 100644 --- a/src/Placelist.css +++ b/src/Placelist.css @@ -45,31 +45,31 @@ ul { justify-content: space-between; padding: 0; width: 100%; +} - li { - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; - } +li { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} - .social-icons { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 10px; - } +.social-icons { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; +} - .social-icons li img { - gap: 10px; - width: 20px; - height: 20px; - border: solid 2px #e2dddd; - border-radius: 3rem; - display: flex; - padding: 3px; - } +.social-icons li img { + gap: 10px; + width: 20px; + height: 20px; + border: solid 2px #e2dddd; + border-radius: 3rem; + display: flex; + padding: 3px; } #previous { @@ -82,11 +82,11 @@ ul { color: #000; display: flex; align-self: center; +} - img { - width: 50px; - height: 50px; - } +#previous img { + width: 50px; + height: 50px; } #previous:hover { @@ -105,11 +105,11 @@ ul { color: #000; display: flex; align-self: center; +} - img { - width: 50px; - height: 50px; - } +#next img { + width: 50px; + height: 50px; } #next:hover { @@ -133,3 +133,81 @@ ul { transition: 2.5s; cursor: pointer; } + +/* Mobile styles */ +@media only screen and (max-width: 600px) { + h1 { + font-size: 2rem; + } + + h5 { + font-size: 0.8rem; + } + + .ul-list { + display: flex; + flex-direction: column; + gap: 40px; + width: 90%; + } + + .place-img { + width: 150px; + height: 150px; + } + + #previous, #next { + padding: 5px; + } + + #previous img, #next img { + width: 30px; + height: 30px; + } + + .pagination button { + padding: 5px; + } + + .social-icons-li { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + } + + .social-icons-li img { + width: 15px; + height: auto; + } +} + +/* Desktop styles */ +@media only screen and (min-width: 601px) { + h1 { + font-size: 3rem; + } + + h5 { + font-size: 1rem; + } + + .place-img { + width: 200px; + height: 200px; + } + + #previous, #next { + padding: 10px; + } + + #previous img, #next img { + width: 50px; + height: 50px; + } + + .pagination button { + padding: 10px; + } +} diff --git a/src/Sign-In.css b/src/Sign-In.css index 9308aa6..3aa2cd9 100644 --- a/src/Sign-In.css +++ b/src/Sign-In.css @@ -54,3 +54,45 @@ p { color: #fff; border: none; } + +/* Start of Mobile styles = All Mobile devices */ +@media only screen and (max-width: 600px) { + form { + padding: 25px; + width: 70%; + } + + form input { + padding: 5px; + width: 90%; + } + + form button { + padding: 5px 10px; + } + + .sign-up { + padding: 5px; + } +} + +/* Start of Desktop styles = All desktop devices */ +@media only screen and (min-width: 601px) { + form { + padding: 50px; + width: 25%; + } + + form input { + padding: 10px; + width: 200px; + } + + form button { + padding: 10px 20px; + } + + .sign-up { + padding: 10px; + } +} diff --git a/src/Sign-Up.css b/src/Sign-Up.css index e713f1a..7487ecc 100644 --- a/src/Sign-Up.css +++ b/src/Sign-Up.css @@ -14,3 +14,43 @@ color: #fff; border: none; } + +/* Mobile styles */ +@media only screen and (max-width: 600px) { + .mail-border { + border: #b6b9bd 1px solid; + } + + .sign-up { + border: rgb(155, 155, 163) 1px solid; + padding: 5px; + border-radius: 3px; + color: #000; + } + + .sign-up:hover { + background-color: rgb(168, 219, 25); + color: #fff; + border: none; + } +} + +/* Desktop styles */ +@media only screen and (min-width: 601px) { + .mail-border { + border: #b6b9bd 2px solid; + } + + .sign-up { + border: rgb(155, 155, 163) 2px solid; + padding: 10px; + border-radius: 5px; + color: #000; + } + + .sign-up:hover { + background-color: rgb(168, 219, 25); + color: #fff; + border: none; + } +} From c102cfdee86a7f0e7a0332779ae827f51f50fd18 Mon Sep 17 00:00:00 2001 From: Evans Kofi Nyamekye Date: Tue, 5 Mar 2024 18:16:57 +0000 Subject: [PATCH 17/24] Update: modify css properties --- src/AddReservation.css | 35 ++++++++++++++++++++++++++++++++++- src/DetailsPage.css | 39 +++++++++++++++++++++++++++++++++++---- src/Placelist.css | 42 +++++++++++++++++++++++------------------- 3 files changed, 92 insertions(+), 24 deletions(-) diff --git a/src/AddReservation.css b/src/AddReservation.css index 4112937..60634fe 100644 --- a/src/AddReservation.css +++ b/src/AddReservation.css @@ -1,6 +1,8 @@ .form-container { + display: flex; + justify-content: center; + align-items: center; width: 100%; - height: 100%; } select { @@ -12,3 +14,34 @@ select { border-radius: 5px; box-sizing: border-box; } + +/* start of Mobile styles */ +@media only screen and (max-width: 600px) { + .form-container { + display: flex; + align-items: center; + justify-content: center; + margin: auto; + width: 88%; + height: auto; + } + + select { + padding: 10px 10px; + } +} + +/* start of Desktop styles */ +@media only screen and (min-width: 601px) { + .form-container { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + } + + select { + padding: 12px 20px; + } +} diff --git a/src/DetailsPage.css b/src/DetailsPage.css index 8b6b7c4..ce7b70a 100644 --- a/src/DetailsPage.css +++ b/src/DetailsPage.css @@ -1,8 +1,6 @@ .item-details { display: flex; flex-direction: column; - - /* align-items: center; */ justify-content: center; transition: transform 2.5s ease; padding: 1rem; @@ -18,8 +16,6 @@ .main { display: flex; - - /* align-items: center; */ justify-content: space-evenly; width: 80vw; } @@ -43,3 +39,38 @@ .price-section p { color: black; } + +/* start of Mobile styles */ +@media only screen and (max-width: 600px) { + .main { + flex-direction: column; + align-items: center; + width: 100vw; + } + + .image { + width: 90vw; + height: auto; + } + + .title { + font-size: 1.5em; + } +} + +/* start of Desktop styles */ +@media only screen and (min-width: 601px) { + .main { + flex-direction: row; + width: 80vw; + } + + .image { + width: 40vw; + height: 70vh; + } + + .title { + font-size: 2em; + } +} diff --git a/src/Placelist.css b/src/Placelist.css index a392c62..6d5163a 100644 --- a/src/Placelist.css +++ b/src/Placelist.css @@ -134,7 +134,7 @@ li { cursor: pointer; } -/* Mobile styles */ +/* start of Mobile styles */ @media only screen and (max-width: 600px) { h1 { font-size: 2rem; @@ -156,11 +156,26 @@ li { height: 150px; } - #previous, #next { + .social-icons-li { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + } + + .social-icons-li img { + width: 15px; + height: auto; + } + + #previous, + #next { padding: 5px; } - #previous img, #next img { + #previous img, + #next img { width: 30px; height: 30px; } @@ -168,22 +183,9 @@ li { .pagination button { padding: 5px; } - - .social-icons-li { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 10px; - } - - .social-icons-li img { - width: 15px; - height: auto; - } } -/* Desktop styles */ +/* start of Desktop styles */ @media only screen and (min-width: 601px) { h1 { font-size: 3rem; @@ -198,11 +200,13 @@ li { height: 200px; } - #previous, #next { + #previous, + #next { padding: 10px; } - #previous img, #next img { + #previous img, + #next img { width: 50px; height: 50px; } From c423d33e573789184b8d8aac9c0cfcd71b1306bb Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 21:18:09 +0200 Subject: [PATCH 18/24] Add className --- src/Components/PlaceList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/PlaceList.js b/src/Components/PlaceList.js index 1674ef8..70f984f 100644 --- a/src/Components/PlaceList.js +++ b/src/Components/PlaceList.js @@ -91,7 +91,7 @@ function PlacesList() {
          • instagram-icon
          • p-icon
          - From 1d31630bbb87fd0a0f5bf11c41288547fa63b7e2 Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 21:18:41 +0200 Subject: [PATCH 19/24] Add styles for view details button and anchor tags --- src/DetailsPage.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/DetailsPage.css b/src/DetailsPage.css index 8b6b7c4..5425e78 100644 --- a/src/DetailsPage.css +++ b/src/DetailsPage.css @@ -43,3 +43,16 @@ .price-section p { color: black; } + +.view-details { + font-size: 15px; + padding: 10px; + border: none; + border-radius: 5px; + background-color: #a8db19; +} + +a { + text-decoration: none; + color: #000; +} From 0696a75a70655b94382a63ba8da18df79b8495be Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 21:19:20 +0200 Subject: [PATCH 20/24] Remove commented out code in DetailsPage.js --- src/Components/DetailsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/DetailsPage.js b/src/Components/DetailsPage.js index 336c225..5c38e3c 100644 --- a/src/Components/DetailsPage.js +++ b/src/Components/DetailsPage.js @@ -5,7 +5,6 @@ import { useParams, Link } from 'react-router-dom'; import { fetchDetailsPage } from '../Redux/places/detailsPageSlice'; import '../Placelist.css'; import '../DetailsPage.css'; -// import '../Navigation.css'; function DetailsPage() { const dispatch = useDispatch(); From da0339ce7b405603919ff578c9ec33a13039eb92 Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 21:37:17 +0200 Subject: [PATCH 21/24] Update Add Reservation button class name --- src/Components/DetailsPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/DetailsPage.js b/src/Components/DetailsPage.js index 5c38e3c..ec78257 100644 --- a/src/Components/DetailsPage.js +++ b/src/Components/DetailsPage.js @@ -51,12 +51,12 @@ function DetailsPage() { Address: {detailsPage.address}

          -

          +

          Price per night:$ {detailsPage.pricepernight}

          - +
    From 7e5d1c4346e60c977231802b9830fe72591c4f31 Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 21:38:23 +0200 Subject: [PATCH 22/24] Remove unused comments and add style for pricepernight and add res button class --- src/DetailsPage.css | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/DetailsPage.css b/src/DetailsPage.css index 5425e78..7928f18 100644 --- a/src/DetailsPage.css +++ b/src/DetailsPage.css @@ -1,8 +1,6 @@ .item-details { display: flex; flex-direction: column; - - /* align-items: center; */ justify-content: center; transition: transform 2.5s ease; padding: 1rem; @@ -18,8 +16,6 @@ .main { display: flex; - - /* align-items: center; */ justify-content: space-evenly; width: 80vw; } @@ -30,6 +26,7 @@ } .title { + text-align: center; font-size: 2em; margin-bottom: 10px; } @@ -40,10 +37,6 @@ color: black; } -.price-section p { - color: black; -} - .view-details { font-size: 15px; padding: 10px; @@ -56,3 +49,17 @@ a { text-decoration: none; color: #000; } + +.price-per-night { + background-color: lightgray; + padding: 10px; + width: 100%; +} + +.add-res-button { + font-size: 15px; + padding: 10px; + border: none; + border-radius: 5px; + background-color: #a8db19; +} From 1012050f1dd1a177d317f0a8c3b90ab76d956a7f Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 21:52:56 +0200 Subject: [PATCH 23/24] Fix alignment issue in AddReservation.css --- src/AddReservation.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/AddReservation.css b/src/AddReservation.css index 60634fe..bfb831c 100644 --- a/src/AddReservation.css +++ b/src/AddReservation.css @@ -20,12 +20,12 @@ select { .form-container { display: flex; align-items: center; - justify-content: center; + justify-content: center; margin: auto; width: 88%; height: auto; } - + select { padding: 10px 10px; } From aed1e6fda5f7e288f36ba64ce393afb75cce6f6b Mon Sep 17 00:00:00 2001 From: tsheporamantso Date: Tue, 5 Mar 2024 22:29:40 +0200 Subject: [PATCH 24/24] Add Link to back end repo on README file --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e82f5cd..43e0db9 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,8 @@ - Coming soon. +- [Link](https://github.com/tsheporamantso/final-capstone-rails-api) to Stay Sphere back-end repository +

    (back to top)

    @@ -186,6 +188,6 @@ Also I would like to thank [Murat Korkmaz](https://www.behance.net/muratk) on Be ## 📝 License -This project is [MIT](./LICENSE) licensed. +This project is [MIT](https://github.com/tsheporamantso/final-capstone-react-front-end/blob/1012050f1dd1a177d317f0a8c3b90ab76d956a7f/LICENSE) licensed.

    (back to top)

    \ No newline at end of file