From 0810d46a94f64dabd739f35ec9e849f5250f332a Mon Sep 17 00:00:00 2001 From: Yura <113457886+Yura-Platonov@users.noreply.github.com> Date: Fri, 29 Dec 2023 19:48:57 +0200 Subject: [PATCH 1/6] made button clear form --- src/pages/AdvertisementPage/AdvertisementPage.jsx | 6 +++--- src/pages/AdvertisementPage/AdvertisementPage.styled.jsx | 8 +++++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/pages/AdvertisementPage/AdvertisementPage.jsx b/src/pages/AdvertisementPage/AdvertisementPage.jsx index abfb566..f9f3309 100644 --- a/src/pages/AdvertisementPage/AdvertisementPage.jsx +++ b/src/pages/AdvertisementPage/AdvertisementPage.jsx @@ -91,6 +91,9 @@ const regionsAndCities = { innerRef={formik => (formikRef.current = formik)} >
+ Етапи розміщення оголошення @@ -558,9 +561,6 @@ const regionsAndCities = { -
diff --git a/src/pages/AdvertisementPage/AdvertisementPage.styled.jsx b/src/pages/AdvertisementPage/AdvertisementPage.styled.jsx index 5816a8a..38afd99 100644 --- a/src/pages/AdvertisementPage/AdvertisementPage.styled.jsx +++ b/src/pages/AdvertisementPage/AdvertisementPage.styled.jsx @@ -11,10 +11,12 @@ export const Container = styled.section` margin-right: auto; .form{ + position: relative; display: flex; flex-direction: column; width: 100%; gap: 25px; + } select { @@ -185,8 +187,12 @@ export const Container = styled.section` justify-content: space-between; } .clearButton { + position: absolute; + top: -1.2%; + right: 0%; + display: flex; - gap: 2px; + width: 125px; justify-content: center; align-items: center; border: 0; From 9c4755080c6bd5587d958b8a0152b129e4aede52 Mon Sep 17 00:00:00 2001 From: Yura <113457886+Yura-Platonov@users.noreply.github.com> Date: Fri, 29 Dec 2023 20:40:12 +0200 Subject: [PATCH 2/6] add photo --- package-lock.json | 59 +++++++++++++++++++ package.json | 1 + src/components/Footer/Footer.jsx | 6 +- .../AdvertisementPage/AdvertisementPage.jsx | 33 ++++++++++- 4 files changed, 97 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1bdf772..6c49625 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "query-string": "^8.1.0", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-dropzone": "^14.2.3", "react-loader-spinner": "^5.4.5", "react-redux": "^8.1.3", "react-router-dom": "^6.17.0", @@ -4149,6 +4150,14 @@ "node": ">= 4.5.0" } }, + "node_modules/attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==", + "engines": { + "node": ">=4" + } + }, "node_modules/autoprefixer": { "version": "10.4.4", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz", @@ -7059,6 +7068,17 @@ "webpack": "^4.0.0 || ^5.0.0" } }, + "node_modules/file-selector": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", + "dependencies": { + "tslib": "^2.4.0" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/filelist": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", @@ -11850,6 +11870,22 @@ "react": "^18.1.0" } }, + "node_modules/react-dropzone": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", + "dependencies": { + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", @@ -17812,6 +17848,11 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, + "attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==" + }, "autoprefixer": { "version": "10.4.4", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz", @@ -19966,6 +20007,14 @@ "schema-utils": "^3.0.0" } }, + "file-selector": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", + "requires": { + "tslib": "^2.4.0" + } + }, "filelist": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", @@ -23290,6 +23339,16 @@ "scheduler": "^0.22.0" } }, + "react-dropzone": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", + "requires": { + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" + } + }, "react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", diff --git a/package.json b/package.json index ea69f8b..a5f080c 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "query-string": "^8.1.0", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-dropzone": "^14.2.3", "react-loader-spinner": "^5.4.5", "react-redux": "^8.1.3", "react-router-dom": "^6.17.0", diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 81d1b80..67cc96b 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -1,12 +1,16 @@ import React from 'react'; import {Container, FooterWrapper, FooterContainer,ListContainer, StyledYoutubeSVG, StyledInstagramSVG, StyledFacebookSVG } from './Footer.styled'; import Logo from '../../images/Footer/Group 99footer.png'; +import { NavLink } from 'react-router-dom'; + const Footer = () => { return ( - Logo + + Logo +
    diff --git a/src/pages/AdvertisementPage/AdvertisementPage.jsx b/src/pages/AdvertisementPage/AdvertisementPage.jsx index f9f3309..2755523 100644 --- a/src/pages/AdvertisementPage/AdvertisementPage.jsx +++ b/src/pages/AdvertisementPage/AdvertisementPage.jsx @@ -1,10 +1,12 @@ -import {useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import {Container, Title, RequiredMarker, Paragraph,SectionTitle, SectionContainer } from '../AdvertisementPage/AdvertisementPage.styled.jsx'; import { Formik, Field, Form } from 'formik'; import { useDispatch } from 'react-redux'; import { setIsOpen } from 'redux/modal/modalSlice'; import { DropArrow } from '../../components/SearchForm/SearchFormSVG'; import Modal from '../../modal/modal'; +import { useDropzone } from 'react-dropzone'; + @@ -49,6 +51,8 @@ const regionsAndCities = { const [availableModels, setAvailableModels] = useState([]); const [selectedRegion, setSelectedRegion] = useState(''); const [selectedCity, setSelectedCity] = useState(''); + const [photos, setPhotos] = useState([]); + useEffect(() => { if (formikRef.current) { @@ -60,6 +64,13 @@ const regionsAndCities = { dispatch(setIsOpen(true)); } + const onDrop = (acceptedFiles) => { + setPhotos([...photos, ...acceptedFiles]); + formikRef.current.setFieldValue('photos', [...photos, ...acceptedFiles]); + }; + + const { getRootProps, getInputProps } = useDropzone({ onDrop, accept: 'image/*', multiple: true }); + const handleBrandChange = (event) => { const selectedBrand = event.target.value; @@ -103,6 +114,26 @@ const regionsAndCities = { Перше фото є головним. Максимальний розмір фотографії до 5 МБ. Формат фотографії: JPG, PNG. Мінімальна кількість фотографій - 6. + {/*
    + + {photos.map((file) => ( + {file.name} + ))} +
    */} +
    + + +
    + +
    + {photos.map((file, index) => ( +
    + {file.name} +
    + ))} +
    From 3f27e1c55b414501d4e0d0b22adb6e4e2c6cad15 Mon Sep 17 00:00:00 2001 From: Yura <113457886+Yura-Platonov@users.noreply.github.com> Date: Tue, 2 Jan 2024 22:28:54 +0200 Subject: [PATCH 3/6] update --- .../AdvertisementPage/AdvertisementPage.jsx | 387 ++++++++++-------- 1 file changed, 216 insertions(+), 171 deletions(-) diff --git a/src/pages/AdvertisementPage/AdvertisementPage.jsx b/src/pages/AdvertisementPage/AdvertisementPage.jsx index 2755523..4bd8986 100644 --- a/src/pages/AdvertisementPage/AdvertisementPage.jsx +++ b/src/pages/AdvertisementPage/AdvertisementPage.jsx @@ -6,9 +6,7 @@ import { setIsOpen } from 'redux/modal/modalSlice'; import { DropArrow } from '../../components/SearchForm/SearchFormSVG'; import Modal from '../../modal/modal'; import { useDropzone } from 'react-dropzone'; - - - +import axios from 'axios'; const brandsAndModels = { BMW: ['X5', 'M3', 'X3'], @@ -43,8 +41,7 @@ const regionsAndCities = { 'Хмельницька': ['Хмельницький', 'Камʼянець-Подільський', 'Шепетівка'], }; - - const AdvertisementForm = ({ initialValues, onSubmit}) => { +const AdvertisementForm = ({ initialValues}) => { const dispatch = useDispatch(); const formikRef = useRef(null); @@ -52,7 +49,47 @@ const regionsAndCities = { const [selectedRegion, setSelectedRegion] = useState(''); const [selectedCity, setSelectedCity] = useState(''); const [photos, setPhotos] = useState([]); - + // const [values, setValues] = useState({ + // // category: 'All', + // 'advertisementDTO.carDTO.carMark.name': '', + // 'advertisementDTO.carDTO.carMark.carModel.name': '', + // 'advertisementDTO.carDTO.carNumber': '', + // 'advertisementDTO.region.name': '', + // 'advertisementDTO.region.city.name': '', + // 'advertisementDTO.carDTO.mileage': '', + // 'advertisementDTO.carDTO.yearToCreate': '', + // 'advertisementDTO.price': '', + // 'advertisementDTO.carDTO.bodyType.name': '', + // 'advertisementDTO.carDTO.engine.name': '', + // 'advertisementDTO.carDTO.engine.volume': '', + // 'advertisementDTO.carDTO.driveType.name': '', + // 'advertisementDTO.carDTO.transmission.name': '', + // 'advertisementDTO.carDTO.technicalState.name': '', + // 'advertisementDTO.carDTO.color.name': '', + // 'advertisementDTO.carDTO.vinNumber': '', + // 'advertisementDTO.description': '', + // 'advertisementDTO.ownerName': '', + // 'advertisementDTO.ownerPhone': '', + // }); + + const onSubmit = async (values) => { + try { + const formData = new FormData(); + + formData.append('advertisementDTO', JSON.stringify(values.advertisementDTO)); + + + const response = await axios.post('https://185.69.153.118:8443/api/advertisements/create', formData, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }); + + console.log('Response:', response.data); + } catch (error) { + console.error('Error:', error); + } + }; useEffect(() => { if (formikRef.current) { @@ -114,13 +151,7 @@ const regionsAndCities = { Перше фото є головним. Максимальний розмір фотографії до 5 МБ. Формат фотографії: JPG, PNG. Мінімальна кількість фотографій - 6. - {/*
    - - {photos.map((file) => ( - {file.name} - ))} -
    */} -
    +
    @@ -149,7 +180,7 @@ const regionsAndCities = { as="select" name="category" > - {/* */} + @@ -159,52 +190,53 @@ const regionsAndCities = {
    - -