From 46ace1c02191d77f0d7de7578257e251e0bafd8a Mon Sep 17 00:00:00 2001
From: Mykola <53128883+Nikolaus-B@users.noreply.github.com>
Date: Fri, 22 Mar 2024 03:16:36 +0200
Subject: [PATCH] finish popups without form
---
package-lock.json | 120 +++++++++++++-
package.json | 4 +-
src/assets/sprite.svg | 154 ++++++++++--------
src/components/Car/Car.jsx | 44 ++---
src/components/Car/Car.styled.js | 11 --
src/components/CarModal/CarModal.jsx | 10 +-
src/components/CarModal/CarModal.styled.js | 1 +
src/components/CarsList/CarsList.jsx | 1 -
src/components/Details/Details.jsx | 38 +++++
src/components/Details/Details.styled.js | 12 ++
.../FeaturesPopUp/FeaturesPopUp.jsx | 52 +++++-
.../FeaturesPopUp/FeaturesPopUp.styled.js | 35 ++++
src/components/Filters/Filters.jsx | 6 +-
src/components/ReviewsPopUp/ReviewsPopUp.jsx | 41 ++++-
.../ReviewsPopUp/ReviewsPopUp.styled.js | 41 +++++
src/theme.js | 8 +-
16 files changed, 449 insertions(+), 129 deletions(-)
create mode 100644 src/components/Details/Details.jsx
create mode 100644 src/components/Details/Details.styled.js
diff --git a/package-lock.json b/package-lock.json
index f3a2822..a5c3c37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@reduxjs/toolkit": "^2.2.2",
"axios": "^1.6.8",
+ "formik": "^2.4.5",
"modern-normalize": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -17,7 +18,8 @@
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.3",
"styled-components": "^6.1.8",
- "uid": "^2.0.2"
+ "uid": "^2.0.2",
+ "yup": "^1.4.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
@@ -1208,17 +1210,24 @@
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true
},
+ "node_modules/@types/hoist-non-react-statics": {
+ "version": "3.3.5",
+ "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+ "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+ "dependencies": {
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0"
+ }
+ },
"node_modules/@types/prop-types": {
"version": "15.7.11",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
- "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
- "devOptional": true
+ "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
},
"node_modules/@types/react": {
"version": "18.2.67",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.67.tgz",
"integrity": "sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==",
- "devOptional": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -1237,8 +1246,7 @@
"node_modules/@types/scheduler": {
"version": "0.16.8",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
- "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
- "devOptional": true
+ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
},
"node_modules/@types/stylis": {
"version": "4.2.0",
@@ -1699,8 +1707,7 @@
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
- "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
- "devOptional": true
+ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/data-view-buffer": {
"version": "1.0.1",
@@ -1776,6 +1783,14 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true
},
+ "node_modules/deepmerge": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+ "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/define-data-property": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -2475,6 +2490,30 @@
"node": ">= 6"
}
},
+ "node_modules/formik": {
+ "version": "2.4.5",
+ "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.5.tgz",
+ "integrity": "sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://opencollective.com/formik"
+ }
+ ],
+ "dependencies": {
+ "@types/hoist-non-react-statics": "^3.3.1",
+ "deepmerge": "^2.1.1",
+ "hoist-non-react-statics": "^3.3.0",
+ "lodash": "^4.17.21",
+ "lodash-es": "^4.17.21",
+ "react-fast-compare": "^2.0.1",
+ "tiny-warning": "^1.0.2",
+ "tslib": "^2.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0"
+ }
+ },
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2731,6 +2770,14 @@
"node": ">= 0.4"
}
},
+ "node_modules/hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+ "dependencies": {
+ "react-is": "^16.7.0"
+ }
+ },
"node_modules/ignore": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3277,6 +3324,16 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+ },
+ "node_modules/lodash-es": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+ "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+ },
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3653,6 +3710,11 @@
"react-is": "^16.13.1"
}
},
+ "node_modules/property-expr": {
+ "version": "2.0.6",
+ "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+ "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+ },
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3710,6 +3772,11 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-fast-compare": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+ "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4292,6 +4359,16 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true
},
+ "node_modules/tiny-case": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+ "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+ },
+ "node_modules/tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+ },
"node_modules/to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -4301,6 +4378,11 @@
"node": ">=4"
}
},
+ "node_modules/toposort": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+ "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+ },
"node_modules/tslib": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
@@ -4656,6 +4738,28 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
+ },
+ "node_modules/yup": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
+ "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
+ "dependencies": {
+ "property-expr": "^2.0.5",
+ "tiny-case": "^1.0.3",
+ "toposort": "^2.0.2",
+ "type-fest": "^2.19.0"
+ }
+ },
+ "node_modules/yup/node_modules/type-fest": {
+ "version": "2.19.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+ "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+ "engines": {
+ "node": ">=12.20"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
}
}
}
diff --git a/package.json b/package.json
index 1705164..e1fc662 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"dependencies": {
"@reduxjs/toolkit": "^2.2.2",
"axios": "^1.6.8",
+ "formik": "^2.4.5",
"modern-normalize": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -19,7 +20,8 @@
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.3",
"styled-components": "^6.1.8",
- "uid": "^2.0.2"
+ "uid": "^2.0.2",
+ "yup": "^1.4.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg
index cbbf64e..67ba4cd 100644
--- a/src/assets/sprite.svg
+++ b/src/assets/sprite.svg
@@ -1,98 +1,112 @@
+
\ No newline at end of file
diff --git a/src/components/Car/Car.jsx b/src/components/Car/Car.jsx
index 7a3a1f0..330c151 100644
--- a/src/components/Car/Car.jsx
+++ b/src/components/Car/Car.jsx
@@ -1,4 +1,3 @@
-import { uid } from "uid";
import { Icon } from "../Icon/Icon";
import {
CarImage,
@@ -9,12 +8,11 @@ import {
LocationAndRating,
PriceContainer,
ShowMoreBtn,
- TagContainer,
- TagText,
TagsContainer,
} from "./Car.styled";
import { CarModal } from "../CarModal/CarModal";
import { useState } from "react";
+import { Details } from "../Details/Details";
export const Car = ({ car }) => {
const [modalIsOpen, setIsOpen] = useState(false);
@@ -27,17 +25,6 @@ export const Car = ({ car }) => {
setIsOpen(false);
}
- const defineTabs = (tab, value) => {
- if (tab === "beds") {
- return value;
- } else if (tab === "hob") {
- return value;
- } else if (tab === "adult") {
- return value;
- }
- return value === 1 ? "" : value;
- };
-
return (
{
{car.description}
- {Object.entries(car.details).map(([key, value]) => {
- return value === 0 ? (
-
- ) : (
-
- {/* */}
-
- {defineTabs(key, value)} {key}
-
-
- );
- })}
+ {car.location}
€{car.price}.00
-
{car.gallery.map((el) => {
return ;
})}
-
{car.description}
-
setShowPopUp(!showPopUp)}
@@ -101,6 +100,11 @@ export const CarModal = ({ modalIsOpen, closeModal, car }) => {
Reviews
+ {showPopUp ? (
+
+ ) : (
+
+ )}
);
diff --git a/src/components/CarModal/CarModal.styled.js b/src/components/CarModal/CarModal.styled.js
index d0247eb..fd37714 100644
--- a/src/components/CarModal/CarModal.styled.js
+++ b/src/components/CarModal/CarModal.styled.js
@@ -34,6 +34,7 @@ export const PopUpsBtnContainer = styled.div`
display: flex;
gap: 40px;
margin-top: 44px;
+ margin-bottom: 44px;
border-bottom: 1px solid ${(p) => p.theme.colors.borderColor};
`;
diff --git a/src/components/CarsList/CarsList.jsx b/src/components/CarsList/CarsList.jsx
index 5469398..61a30a9 100644
--- a/src/components/CarsList/CarsList.jsx
+++ b/src/components/CarsList/CarsList.jsx
@@ -10,7 +10,6 @@ export const CarsList = () => {
{cars.map((car) => {
- console.log(car);
return ;
})}
diff --git a/src/components/Details/Details.jsx b/src/components/Details/Details.jsx
new file mode 100644
index 0000000..6d98984
--- /dev/null
+++ b/src/components/Details/Details.jsx
@@ -0,0 +1,38 @@
+import { uid } from "uid";
+import { TagContainer, TagText } from "./Details.styled";
+
+export const Details = ({ details }) => {
+ const defineTabs = (tab, value) => {
+ if (tab === "beds") {
+ return value;
+ } else if (tab === "hob") {
+ return value;
+ } else if (tab === "airConditioner") {
+ return value;
+ }
+ return value === 1 ? "" : value;
+ };
+
+ const convertString = (string) => {
+ const firstPart = string.charAt(0).toUpperCase() + string.slice(1, 3);
+ const secondPart = string.slice(3).toLowerCase();
+ return firstPart + " " + secondPart;
+ };
+ return (
+ <>
+ {Object.entries(details).map(([key, value]) => {
+ return value === 0 ? (
+
+ ) : (
+
+ {/* */}
+
+ {defineTabs(key, value)}{" "}
+ {key === "airConditioner" ? convertString(key) : key}
+
+
+ );
+ })}
+
+ );
+};
diff --git a/src/components/Details/Details.styled.js b/src/components/Details/Details.styled.js
new file mode 100644
index 0000000..8df4ecb
--- /dev/null
+++ b/src/components/Details/Details.styled.js
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const TagContainer = styled.div`
+ padding: 12px 18px;
+ background-color: ${(p) => p.theme.colors.mainWhite};
+ border-radius: ${(p) => p.theme.radius.lg};
+`;
+
+export const TagText = styled.p`
+ line-height: 20px;
+ background-color: ${(p) => p.theme.colors.mainWhite};
+`;
diff --git a/src/components/FeaturesPopUp/FeaturesPopUp.jsx b/src/components/FeaturesPopUp/FeaturesPopUp.jsx
index d186b87..79052f3 100644
--- a/src/components/FeaturesPopUp/FeaturesPopUp.jsx
+++ b/src/components/FeaturesPopUp/FeaturesPopUp.jsx
@@ -1,3 +1,51 @@
-export const FeaturesPopUp = () => {
- return FeaturesPopUp
;
+import { Details } from "../Details/Details";
+import {
+ DetailsContainer,
+ FeaturedHead,
+ FeaturesContainer,
+ FeaturesWrapper,
+ InfoContainer,
+ InfoText,
+ InfoWrapper,
+} from "./FeaturesPopUp.styled";
+
+export const FeaturesPopUp = ({ car }) => {
+ const notSpecified = "not specified";
+
+ return (
+
+
+
+ ReviewsPopUp
;
+import { uid } from "uid";
+import {
+ Review,
+ ReviewComment,
+ ReviewHeader,
+ ReviewHeaderWrapper,
+ ReviewImageLetter,
+ ReviewList,
+ ReviewerName,
+} from "./ReviewsPopUp.styled";
+
+export const ReviewsPopUp = ({ reviews }) => {
+ return (
+
+
+ {reviews.map((review) => {
+ console.log(review);
+ return (
+
+
+
+ {review.reviewer_name
+ ? review.reviewer_name.charAt(0).toUpperCase()
+ : "A"}
+
+
+
+ {review.reviewer_name ? review.reviewer_name : "anonim"}
+
+
+
+
+ {review.comment}
+
+ );
+ })}
+
+