jakub.kaniecki/izaac-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

filtry + ciastko
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Jakub Kaniecki 2024-07-09 22:37:54 +02:00
parent 256bd8a0ee
commit 97b7e8726d
8 changed files with 65 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -1880,9 +1880,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001620",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz",
"integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==",
"version": "1.0.30001640",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
"integrity": "sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==",
"dev": true,
"funding": [
{

2
package.json
View File

@ -6,7 +6,7 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"lint": "eslint -c eslint.config.js --ext .js,.jsx,.ts,.tsx .",
"preview": "vite preview"
},
"dependencies": {

8
src/App.jsx
View File

@ -7,20 +7,21 @@ import { Route, Routes } from "react-router-dom";
import Contact from "./components/Contact";
import Mininav from "./components/Mininav";
import AddJobListing from "./components/AddJobListing";
import Cookies from "./components/Cookies";
function App() {
return (
<Router>
<div className={`bg-white w-full`}>
<div className={`${styles.paddingX} ${styles.flexCenter} border-b-2 relative`}>
<div className={`${styles.paddingX} ${styles.flexCenter}`}>
{/* <Mininav /> */}
<div className={`${styles.boxWidth} mx-auto`}>
<div className={`${styles.boxWidth} `}>
<NavBar />
</div>
</div>
<div className={`${styles.flexStart} mt-18 sm:mt-0`}>
<div className={`${styles.flexStart} mt-18 sm:mt-[6.5rem]`}>
<div className={`${styles.boxWidth2} `}>
<Routes>
<Route path="/home" element={<Home />} />
@ -32,6 +33,7 @@ function App() {
{/* <Route path="/employerpanel" element={<EmployerPanel />} /> */}
{/* Add more routes as needed */}
</Routes>
<Cookies />
</div>
</div>
</div>

29
src/components/Cookies.jsx Normal file
View File

@ -0,0 +1,29 @@
import propTypes from 'prop-types'
import { useState } from 'react'
const Cookies = props => {
const handleCookies = () => {
localStorage.setItem('cookies', true)
}
const cookies = localStorage.getItem('cookies')
// if(cookies) return null
const [show, setShow] = useState(true)
if (cookies) return null;
if (!show) return null;
return (
<>
<div className='bg-gray-500 opacity-90 h-32 w-full fixed bottom-0 z-40 flex justify-center items-center'>
<p className=' text-black'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button className='bg-white px-4 py-2 rounded-md ml-4'
onClick={() => {handleCookies; setShow(!show)}}>
Zgoda</button>
</div>
</>
)
}
Cookies.propTypes = {
}
export default Cookies

75
src/components/Filter.jsx
View File

@ -7,66 +7,21 @@ import Selector from './Selector';
const Filter = (props) => {
useEffect(() => {
console.log(props.searchQuery)
console.log(selectedCategories)
console.log(selectedWorkFromHome)
console.log(selectedEmploymentTypes)
console.log(valueminSalary)
}, [props.searchQuery]);
const [selectedCategories, setSelectedCategories] = useState([]);
const [selectedWorkFromHome, setSelectedWorkFromHome] = useState([]);
const [selectedEmploymentTypes, setSelectedEmploymentTypes] = useState([]);
const [valueminSalary, setValueminSalary] = useState('');
const [valuemaxSalary, setValuemaxSalary] = useState('');
const [valueName, setValueName] = useState('');
const [valueLocalization, setValueLocalization] = useState('');
useEffect(() => {
setSelectedCategories([])
setSelectedWorkFromHome([])
setSelectedEmploymentTypes([])
setValueminSalary('')
setValuemaxSalary('')
setValueName('')
setValueLocalization('')
}, [props.clearSearchQuery])
const handle_checked_change = (e) => {
switch (e.target.name) {
case 'categories':
if (e.target.checked) {
setSelectedCategories([...selectedCategories, e.target.value]);
} else {
setSelectedCategories(selectedCategories.filter(category => category !== e.target.value));
}
props.setSearchQuery(prevState =>
({...prevState,
categories: e.target.checked ? [...(prevState.categories || []), e.target.value] : (prevState.categories || []).filter(category => category !== e.target.value)}));
break;
case 'work_from_home':
if (e.target.checked) {
setSelectedWorkFromHome([...selectedWorkFromHome, e.target.value]);
} else {
setSelectedWorkFromHome(selectedCategories.filter(work_from_home => work_from_home !== e.target.value));
}
props.setSearchQuery(prevState =>
({...prevState,
work_from_home: e.target.checked ? [...(prevState.work_from_home || []), e.target.value] : (prevState.work_from_home || []).filter(work_from_home => work_from_home !== e.target.value)}));
break;
case 'employment':
if (e.target.checked) {
setSelectedEmploymentTypes([...selectedEmploymentTypes, e.target.value]);
} else {
setSelectedEmploymentTypes(selectedCategories.filter(employment => employment !== e.target.value));
}
props.setSearchQuery(prevState =>
({...prevState,
employment: e.target.checked ? [...(prevState.employment || []), e.target.value] : (prevState.employment || []).filter(employment => employment !== e.target.value)}));
break;
}
const { name, value, checked } = e.target;
props.setSearchQuery(prevState => {
const newArray = checked
? [...(prevState[name] || []), value]
: (prevState[name] || []).filter(item => item !== value);
return { ...prevState, [name]: newArray };
});
}
return (
// idea - make the page whole page grayed out and only the filter is visible
<div className={`z-10 bg-dimWhite collapsible px-3 sm:px-4 ${!props.isOpen ? '' : 'expanded border-4'}`}>
@ -103,9 +58,9 @@ const Filter = (props) => {
setSearchQuery={props.setSearchQuery}
_type='text'
value={props.searchQuery.max_salary || ''}/>
<Selector value_to_map_from={categories} name='Kategorie' inputname='categories' onChange={handle_checked_change} state={selectedCategories}/>
<Selector value_to_map_from={work_from_home} s name='Praca zdalna' inputname='work_from_home' state={selectedWorkFromHome} onChange={handle_checked_change}/>
<Selector value_to_map_from={employment_types} name='Typ kontraktu' inputname='employment' state={selectedEmploymentTypes} onChange={handle_checked_change} />
<Selector value_to_map_from={categories} name='Kategorie' inputname='categories' onChange={handle_checked_change} state={props.searchQuery || {} }/>
<Selector value_to_map_from={work_from_home} s name='Praca zdalna' inputname='work_from_home' state={props.searchQuery || {}} onChange={handle_checked_change}/>
<Selector value_to_map_from={employment_types} name='Typ kontraktu' inputname='employment' state={props.searchQuery || {}} onChange={handle_checked_change} />
<button className='bg-gray-600 text-white py-1 sm:py-3 px-12 col-span-2 mx-auto rounded-md font-semibold text-xl hover:bg-gray-500 duration-150 my-3 sm:my-5 sm:min-h-full'
onClick={props.onClick}
@ -125,4 +80,12 @@ Filter.propTypes = {
onClick: propTypes.func
};
Filter.defaultProps = {
searchQuery: {
categories: [],
work_from_home: [],
employment: []
}
};
export default Filter;

6
src/components/NavBar.jsx
View File

@ -20,10 +20,10 @@ const NavBar = () => {
const currentLinks = getLinks()
return (
<nav className='fixed top-0 left-0 sm:relative z-30 w-full flex pt-4 justify-between items-center navbar bg-white px-8'>
<nav className='fixed top-0 left-0 z-30 w-full flex pt-4 justify-between items-center navbar bg-white px-8 border-b-2 xl:px-64'>
<a href='/' className='font-popins font-semibold text-[24px] text-slate-900'>
<img src={IzaacLOGO} alt="izaac" className='md:w-[200px] w-[120px]'/>
</a>
<ul className='list-none sm:flex hidden justify-end items-center flex-1'>
{currentLinks.map((nav, index) => (
<li

4
src/components/Selector.jsx
View File

@ -11,11 +11,9 @@ const Selector = (props) => {
<input type='checkbox' name={props.inputname} value={value_to_map_from.id}
onChange={props.onChange}
className='mr-2'
checked={props.state.includes(value_to_map_from.id)}
checked={props.state[props.inputname]?.includes(value_to_map_from.id)}
/>
{value_to_map_from.name}
</label>
))}
</div>

8
src/components/WorkApp.jsx
View File

@ -137,12 +137,12 @@ const WorkApp = () => {
}, []);
return (
<section className={`bg-white w-full`}>
<div className="h-[88vh] flex flex-row sm:px-12">
<section className={`bg-white`}>
<div className="h-[88vh] flex flex-row ">
<div
className={`relative bg-gray-100 w-full sm:w-[40%]
className={`relative bg-gray-100 w-full sm:w-[40%]
${isOpen ? 'h-[100vh] overflow-y-hidden' : 'sm:overflow-y-auto'}
sm:h-[89vh] ${
isDetailsVisible ? "hidden sm:block" : "block"
@ -199,7 +199,7 @@ const WorkApp = () => {
</div>
</div>
<div
className={`absolute sm:relative w-full sm:w-[60%] bg-gray-100 sm:h-[89vh] h-[100vh] top-16 sm:top-0 -left-4 right-0 overflow-y-auto p-4 mx-4 blur-transition ${
className={`absolute sm:relative w-full sm:w-[60%] bg-gray-100 sm:h-[89vh] h-[100vh] top-16 sm:top-0 -left-4 sm:left-0 right-0 overflow-y-auto p-8 sm:p-4 border-separate sm:border-l-8 blur-transition ${
isDetailsVisible ? "block" : "hidden sm:block"
} noblur ${isOpen ? 'blur' : ''}`}
>