From 68ba67b987056c8e12c537be21da71886a06d824 Mon Sep 17 00:00:00 2001 From: Mykola <53128883+Nikolaus-B@users.noreply.github.com> Date: Thu, 21 Mar 2024 18:12:20 +0200 Subject: [PATCH] create List,Filters --- .eslintrc.cjs | 25 ++--- package-lock.json | 61 +++++++++++- package.json | 4 +- src/App.css | 42 -------- src/App.jsx | 48 +++------ src/assets/sprite.svg | 98 +++++++++++++++++++ src/components/AppLayout/AppLayout.jsx | 23 +++++ src/components/AppLayout/AppLayout.styled.js | 0 src/components/Car/Car.jsx | 30 ++++++ src/components/Car/Car.styled.js | 0 src/components/CarModal/CarModal.jsx | 0 src/components/CarModal/CarModal.styled.js | 0 src/components/CarsList/CarsList.jsx | 17 ++++ src/components/CarsList/CarsList.styled.js | 0 src/components/FilterButton/FilterButton.jsx | 14 +++ .../FilterButton/FilterButton.styled.js | 0 src/components/Filters/Filters.jsx | 48 +++++++++ src/components/Filters/Filters.styled.js | 0 src/components/GlobalStyle.jsx | 88 +++++++++++++++++ src/components/Icon/Icon.jsx | 11 +++ src/components/Icon/Icon.styled.js | 0 src/index.css | 4 +- src/main.jsx | 13 ++- src/pages/HomePage.jsx | 11 +++ src/pages/NotFoundPage.jsx | 9 ++ src/theme.js | 17 ++++ 26 files changed, 466 insertions(+), 97 deletions(-) create mode 100644 src/assets/sprite.svg create mode 100644 src/components/AppLayout/AppLayout.jsx create mode 100644 src/components/AppLayout/AppLayout.styled.js create mode 100644 src/components/Car/Car.jsx create mode 100644 src/components/Car/Car.styled.js create mode 100644 src/components/CarModal/CarModal.jsx create mode 100644 src/components/CarModal/CarModal.styled.js create mode 100644 src/components/CarsList/CarsList.jsx create mode 100644 src/components/CarsList/CarsList.styled.js create mode 100644 src/components/FilterButton/FilterButton.jsx create mode 100644 src/components/FilterButton/FilterButton.styled.js create mode 100644 src/components/Filters/Filters.jsx create mode 100644 src/components/Filters/Filters.styled.js create mode 100644 src/components/GlobalStyle.jsx create mode 100644 src/components/Icon/Icon.jsx create mode 100644 src/components/Icon/Icon.styled.js create mode 100644 src/pages/HomePage.jsx create mode 100644 src/pages/NotFoundPage.jsx create mode 100644 src/theme.js diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3e212e1..d5a5d48 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -2,20 +2,21 @@ module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:react/jsx-runtime', - 'plugin:react-hooks/recommended', + "eslint:recommended", + "plugin:react/recommended", + "plugin:react/jsx-runtime", + "plugin:react-hooks/recommended", ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, - settings: { react: { version: '18.2' } }, - plugins: ['react-refresh'], + ignorePatterns: ["dist", ".eslintrc.cjs"], + parserOptions: { ecmaVersion: "latest", sourceType: "module" }, + settings: { react: { version: "18.2" } }, + plugins: ["react-refresh"], rules: { - 'react/jsx-no-target-blank': 'off', - 'react-refresh/only-export-components': [ - 'warn', + "react/prop-types": "off", + "react/jsx-no-target-blank": "off", + "react-refresh/only-export-components": [ + "warn", { allowConstantExport: true }, ], }, -} +}; diff --git a/package-lock.json b/package-lock.json index b8b9273..54432a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,9 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", - "styled-components": "^6.1.8" + "react-router-dom": "^6.22.3", + "styled-components": "^6.1.8", + "uid": "^2.0.2" }, "devDependencies": { "@types/react": "^18.2.66", @@ -915,6 +917,14 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lukeed/csprng": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@lukeed/csprng/-/csprng-1.1.0.tgz", + "integrity": "sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==", + "engines": { + "node": ">=8" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -973,6 +983,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.13.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz", @@ -3729,6 +3747,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/redux": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", @@ -4329,6 +4377,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uid": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/uid/-/uid-2.0.2.tgz", + "integrity": "sha512-u3xV3X7uzvi5b1MncmZo3i2Aw222Zk1keqLA1YkHldREkAhAqi65wuPfe7lHx8H/Wzy+8CE7S7uS3jekIM5s8g==", + "dependencies": { + "@lukeed/csprng": "^1.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index 640cb18..fca9547 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,9 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", - "styled-components": "^6.1.8" + "react-router-dom": "^6.22.3", + "styled-components": "^6.1.8", + "uid": "^2.0.2" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/src/App.css b/src/App.css index b9d355d..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.jsx b/src/App.jsx index 6a9eeb6..2d32a20 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,42 +1,18 @@ -import { useEffect, useState } from "react"; -import reactLogo from "./assets/react.svg"; -import viteLogo from "/vite.svg"; -import "./App.css"; -import { useDispatch } from "react-redux"; -import { fetchCars } from "./redux/cars/operations"; -// import { selectCars } from "./redux/cars/carsSelectors"; +import { lazy } from "react"; +import { Route, Routes } from "react-router-dom"; +import { AppLayout } from "./components/AppLayout/AppLayout"; -function App() { - const [count, setCount] = useState(0); - const dispatch = useDispatch(); - // const cars = useSelector(selectCars); - useEffect(() => { - dispatch(fetchCars()); - }, [dispatch]); +const HomePage = lazy(() => import("./pages/HomePage")); +const NotFoundPage = lazy(() => import("./pages/NotFoundPage")); +function App() { return ( - <> -
-
- Edit src/App.jsx
and save to test HMR
-
- Click on the Vite and React logos to learn more -
- > +{car.name}
+€{car.price}.00
++ {car.rating} {car.reviews.length || 0} Reviews +
+{car.location}
+{car.description}
+Location
+ +Filters
+Vehicle equipment
+ +Vehicle type
+ +NotFoundPage
+