diff --git a/index.html b/index.html index 4b26856..b7a44d1 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,9 @@ - + + + izaac frontend diff --git a/package-lock.json b/package-lock.json index c6c7353..3cfc64a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@ckeditor/ckeditor5-build-classic": "^40.0.0", "@ckeditor/ckeditor5-build-multi-root": "^40.0.0", "@ckeditor/ckeditor5-react": "^6.1.0", + "dompurify": "^3.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.18.0" @@ -2069,6 +2070,11 @@ "node": ">=6.0.0" } }, + "node_modules/dompurify": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz", + "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==" + }, "node_modules/electron-to-chromium": { "version": "1.4.574", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.574.tgz", diff --git a/package.json b/package.json index eaa2b9b..85b1800 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@ckeditor/ckeditor5-build-classic": "^40.0.0", "@ckeditor/ckeditor5-build-multi-root": "^40.0.0", "@ckeditor/ckeditor5-react": "^6.1.0", + "dompurify": "^3.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.18.0" diff --git a/src/App.jsx b/src/App.jsx index 3a91057..c98fc84 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,29 +5,35 @@ import Home from './components/Home'; import { BrowserRouter as Router } from 'react-router-dom'; import { Route, Routes } from 'react-router-dom'; import Contact from './components/Contact'; -import JobPosting from './components/JobPosting'; import Mininav from './components/Mininav'; -import Register from './components/Register'; +import AddJobListing from './components/AddJobListing'; function App() { + const loc = () =>{ + if (location.pathname.startsWith('work/jobposting')){ + return "" + } else { + return "overflow-hidden" + } +} return ( -
-
- +
+
+
-
+
} /> } /> - } /> + } /> } /> - } /> + } /> {/* Add more routes as needed */}
diff --git a/src/assets/index.js b/src/assets/index.js index d74f9af..cb9d1b1 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -2,9 +2,11 @@ import close from './close.svg' import menu from './menu.svg' import search from './search.svg' import IzaacLOGO from './IzaacLOGO.svg' +import placeholderImage from './placeholderImage.svg' export { close, menu, search, - IzaacLOGO + IzaacLOGO, + placeholderImage } \ No newline at end of file diff --git a/src/assets/placeholderImage.svg b/src/assets/placeholderImage.svg new file mode 100644 index 0000000..d18a6b2 --- /dev/null +++ b/src/assets/placeholderImage.svg @@ -0,0 +1,23 @@ + + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + + + + diff --git a/src/components/AddJobListing.jsx b/src/components/AddJobListing.jsx new file mode 100644 index 0000000..61275a4 --- /dev/null +++ b/src/components/AddJobListing.jsx @@ -0,0 +1,87 @@ +import React, { useState, useEffect } from 'react' +import StepOneJoblisting from './StepOneJoblisting'; +import StepTwoJoblisting from './StepTwoJoblisting'; +import StepThreeJoblisting from './StepThreeJoblisting'; +import StepFourJoblisting from './StepFourJoblisting' +const AddJobListing = () => { + const [currentStep, setCurrentStep] = useState(1) + const [formData, setFormData] = useState({ + 'postingOption': 'Opcja 2', + 'requireSalary': true + }) + const nextStep = () => { + setCurrentStep(currentStep + 1); + }; + + const prevStep = () => { + setCurrentStep(currentStep - 1); + }; + const removeFields = (fieldNames) => { + // Utwórz nowy obiekt, który początkowo jest kopią formData + let newFormData = { ...formData }; + + // Iteruj przez każde pole do usunięcia + fieldNames.forEach(fieldName => { + // Usuń pole z nowego obiektu danych + delete newFormData[fieldName]; + }); + + // Aktualizuj stan z nowym obiektem + setFormData(newFormData); +}; + + const handleChange = input => value => { + // Sprawdzenie, czy 'value' jest obiektem zdarzenia + const isEvent = value && value.target; + let newValue; + + if (isEvent) { + // Jeśli 'value' jest obiektem zdarzenia, użyj jego właściwości 'value' + newValue = value.target.value; + } else { + // W przeciwnym razie użyj 'value' bezpośrednio + newValue = value; + } + + setFormData({ ...formData, [input]: newValue }); + console.log('Aktualny stan formularza:', formData); +}; + + const handleSubmit = () => { + + } + useEffect(() => { + console.log('Aktualny stan formularza:', formData); + }, [formData]); + + switch (currentStep) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + default: + return
Unknown step
; + } +}; + + +export default AddJobListing; diff --git a/src/components/ImageUpload.jsx b/src/components/ImageUpload.jsx new file mode 100644 index 0000000..d14ae87 --- /dev/null +++ b/src/components/ImageUpload.jsx @@ -0,0 +1,62 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { IzaacLOGO, placeholderImage } from '../assets' + +const ImageUpload = ({setFormData}) => { + const [imageSrc, setImageSrc] = useState(placeholderImage); + const fileInputRef = useRef(); // Referencja do ukrytego inputu plików + + const handleImageChange = (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + setImageSrc(e.target.result); // Aktualizujemy stan obrazkiem użytkownika + }; + reader.readAsDataURL(file); + } + }; + + const handleDivClick = () => { + fileInputRef.current.click(); // Programowe kliknięcie na ukrytym inpucie plików + }; + + useEffect(() => { + // Aktualizujemy dane w hooku nadrzędnym za każdym razem, gdy zmienia się imageSrc + if (imageSrc !== placeholderImage) { + setFormData(prevFormData => ({ + ...prevFormData, + image: imageSrc + })); + } + }, [imageSrc, setFormData]); + + + return ( + <> +
+ +
+ + + ); +}; + +export default ImageUpload; diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index ad232da..1155468 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -4,7 +4,7 @@ import { close, search, menu, IzaacLOGO} from '../assets'; import { useState } from 'react'; import { useLocation } from 'react-router-dom'; import { Link } from 'react-router-dom'; - +import Mininav from './Mininav'; const NavBar = () => { const[toggle, setToggle] = useState(false) const[toggleSearch, setToggleSearch] = useState(false) @@ -20,8 +20,8 @@ const NavBar = () => { const currentLinks = getLinks() return ( -