From 99e6e227e322a634c1a6e5bdd4609db963c479f6 Mon Sep 17 00:00:00 2001 From: Jakub K Date: Sun, 28 Apr 2024 14:43:08 +0200 Subject: [PATCH] przezutka do nowego kompa --- src/components/Category.jsx | 6 +- src/components/Filter.jsx | 2 +- src/components/Search.jsx | 2 +- src/components/WorkApp.jsx | 351 ++++++++++++++++++++---------------- 4 files changed, 204 insertions(+), 157 deletions(-) diff --git a/src/components/Category.jsx b/src/components/Category.jsx index b3cf55d..1cf226d 100644 --- a/src/components/Category.jsx +++ b/src/components/Category.jsx @@ -3,14 +3,14 @@ import React from 'react' const Category = (props) => { return (
- {props.name} - +
+ ${props.small || props.last && !props.small ? 'hidden' : 'block'}`}>
) } diff --git a/src/components/Filter.jsx b/src/components/Filter.jsx index 2643df8..06ecb69 100644 --- a/src/components/Filter.jsx +++ b/src/components/Filter.jsx @@ -5,7 +5,7 @@ import Search from './Search' const Filter = (props) => { if (!props.isOpen) return null; return ( -
+
{
) diff --git a/src/components/WorkApp.jsx b/src/components/WorkApp.jsx index b6c1c61..f9591ec 100644 --- a/src/components/WorkApp.jsx +++ b/src/components/WorkApp.jsx @@ -1,163 +1,210 @@ -import React from 'react' +import React from "react"; -import { useState, useEffect } from 'react'; -import ListingSmall from './ListingSmall'; -import SkillRender from './SkillRender'; -import Search from './Search'; -import Filter from './Filter'; -import Category from './Category'; -import JobOfferContent from './JobOfferContent'; +import { useState, useEffect } from "react"; +import ListingSmall from "./ListingSmall"; +import SkillRender from "./SkillRender"; +import Search from "./Search"; +import Filter from "./Filter"; +import Category from "./Category"; +import JobOfferContent from "./JobOfferContent"; +import { categories } from "../consts"; +import axios from "axios"; -import axios from 'axios'; function renderCircles(level) { - let numberOfFilledCircles; + let numberOfFilledCircles; - switch (level) { - case 'Podstawowy': - numberOfFilledCircles = 1; - break; - case 'Zaawansowany': - numberOfFilledCircles = 3; - break; - case 'Ekspert': - numberOfFilledCircles = 5; - break; - default: - numberOfFilledCircles = 0; - } + switch (level) { + case "Podstawowy": + numberOfFilledCircles = 1; + break; + case "Zaawansowany": + numberOfFilledCircles = 3; + break; + case "Ekspert": + numberOfFilledCircles = 5; + break; + default: + numberOfFilledCircles = 0; + } - return ( - <> - {[...Array(5)].map((_, index) => ( -
- ))} - - ); -}; + return ( + <> + {[...Array(5)].map((_, index) => ( +
+ ))} + + ); +} const WorkApp = () => { - const [isDetailsVisible, setIsDetailsVisible] = useState(false); - // Czy szczegóły są widoczne - const [isOpen, setIsOpen] = useState(false); + const [isDetailsVisible, setIsDetailsVisible] = useState(false); + // Czy szczegóły są widoczne + const [isOpen, setIsOpen] = useState(false); - // Funkcja pobierająca dane z API - const [ogloszenia, setOgloszenia] = useState([]); - - const [skills, setSkills] = useState([]); + // Funkcja pobierająca dane z API + const [ogloszenia, setOgloszenia] = useState([]); - const getOgloszenia = async () => { - try { - const response = await axios.get('http://izaac.izaac.pl/api/jobposting/joboffers_list/'); - const data = response.data; - setOgloszenia(data); - // console.log(data); - if (data.length > 0) { - setSelectedOgloszenie(data[0]); - // console.log(data[0]) - } - } catch (error) { - console.error(error); - } + const [skills, setSkills] = useState([]); + + const getOgloszenia = async (queryParams = {}) => { + try { + const response = await axios.get( + "http://izaac.izaac.pl/api/jobposting/joboffers_list/", + { params: queryParams } + ); + const data = response.data; + setOgloszenia(data); + // console.log(data); + if (data.length > 0) { + setSelectedOgloszenie(data[0]); + // console.log(data[0]) + } + } catch (error) { + console.error(error); + } + }; + + const getSkills = async () => { + try { + const response = await axios.get( + `http://izaac.izaac.pl/api/jobposting/skills/` + ); + const data = response.data; + setSkills(data); + console.log(data); + } catch (error) { + console.error(error); + } + }; + + + const [searchQuery, setSearchQuery] = useState({}); + const [selectedOgloszenie, setSelectedOgloszenie] = useState(ogloszenia[0]); + + useEffect(() => { + getOgloszenia(); + getSkills(); + }, []); + + const handleOgloszenieClick = (ogloszenie) => { + setSelectedOgloszenie(ogloszenie); + setIsDetailsVisible(true); // Pokaż szczegóły na urządzeniach mobilnych + }; + const prevSlide = () => { + setCurrentSlide( + (prevSlide) => (prevSlide - 1 + categories.length) % categories.length + ); + }; + const nextSlide = () => { + setCurrentSlide((prevSlide) => (prevSlide + 1) % categories.length); + }; + const [currentSlide, setCurrentSlide] = React.useState(0); + // Funkcja do powrotu do listy ogłoszeń + const handleBackToList = () => { + setIsDetailsVisible(false); + }; + const [isSmallViewport, setIsSmallViewport] = React.useState(window.innerWidth <= 1025); + React.useEffect(() => { + const handleResize = () => { + setIsSmallViewport(window.innerWidth <= 1025); }; - - const getSkills = async () => { - try { - const response = await axios.get(`http://izaac.izaac.pl/api/jobposting/skills/`); - const data = response.data; - setSkills(data); - console.log(data); - } catch (error) { - console.error(error); - } + + window.addEventListener('resize', handleResize); + + // Clean up the event listener when the component unmounts + return () => { + window.removeEventListener('resize', handleResize); }; + }, []); - const [searchQuery, setSearchQuery] = useState(''); - const [selectedOgloszenie, setSelectedOgloszenie] = useState(ogloszenia[0]); - - - useEffect(() => { - getOgloszenia(); - getSkills(); - }, []); - - const handleOgloszenieClick = (ogloszenie) => { - setSelectedOgloszenie(ogloszenie); - setIsDetailsVisible(true); // Pokaż szczegóły na urządzeniach mobilnych - }; - - // Funkcja do powrotu do listy ogłoszeń - const handleBackToList = () => { - setIsDetailsVisible(false); - }; return ( -
+
+
+ {/*
+ + {categories.map((category, index) => ( +
+ { getOgloszenia({ category: category.id }); }} + /> +
+ ))} + +
*/} -
-
+
+
+

+ Oferty pracy +

+ +
+
+ {isOpen && } +
+ {ogloszenia.map((ogloszenie, index) => ( + handleOgloszenieClick(ogloszenie)} + /> + ))} +
+
+ {isDetailsVisible && ( +
+ +
+ )} - - - - - - - - - - -
-
- -
- -

Oferty pracy

- - -
-
- {isOpen && ()} -
- {ogloszenia.map((ogloszenie, index) => ( - handleOgloszenieClick(ogloszenie)} - /> - ))} -
-
- {isDetailsVisible && ( -
- -
- )} - - {selectedOgloszenie - && - } - {/*
+ {selectedOgloszenie && ( + + )} + {/*
{Object.entries(selectedOgloszenie.neededSkills).map(([skill, level]) => ( {
{selectedOgloszenie.tresc}
*/} -
-
-
- ) -} +
+
+ + ); +}; -export default WorkApp -export { renderCircles } \ No newline at end of file +export default WorkApp; +export { renderCircles };