przezutka do nowego kompa

deployment.yml

@@ -31,7 +31,7 @@ spec:
     spec:
       containers:
       - name: izaac-frontend
-        image: registry.izaac.pl:5000/izaac-frontend:latest
+        image: registry.izaac.pl:5000/izaac-frontend-develop:latest
         ports:
         - containerPort: 80
         volumeMounts:

src/components/Category.jsx

@@ -3,14 +3,14 @@ import React from 'react'
 const Category = (props) => {
   return (
     <div className='flex flex-shrink-0 items-center gap-6 mr-6'>
-      <a className='mx-auto text-center text-l
+      <button onClick={props.func} className='mx-auto text-center text-l
        font-poppins font-semibold text-slate-800 
        py-4 hover:scale-125 duration-200' 
        href='' >
         {props.name}
-      </a>
+      </button>
       <div className={`w-0.5 h-6 bg-black opacity-10 
-      ${props.last ? 'hidden' : 'block'}`}></div>
+      ${props.small || props.last && !props.small  ? 'hidden' : 'block'}`}></div>
     </div>
   )
 }

src/components/Filter.jsx

@@ -5,7 +5,7 @@ import Search from './Search'
 const Filter = (props) => {
     if (!props.isOpen) return null;
   return (
-    <div className={`sticky top-24 z-20 bg-gray-100 grid grid-cols-2 slide-container my-6 py-5 ${!props.isOpen ? '' : 'expanded'}`}>
+    <div className={`sticky top-24 z-20 bg-gray-100 flex flex-wrap place-items-center items-center slide-container py-2 ${!props.isOpen ? '' : 'expanded'}`}>
     <Search label='Wyszukaj ogłoszenie' 
     placeholder='Wpisz nazwę stanowiska...' />
     <Search label='Lokalizacja'

src/components/JobOfferContent.jsx

@@ -47,7 +47,7 @@ const JobOfferContent = ({ id, skills }) => {
       {jobOffer && (
         <>
           <h1 className="my-4 mx-6 text-3xl font-bold text-slate-800">{jobOffer.name} w {jobOffer.company_name}</h1>
-          <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3  gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4">
             {jobOffer.skill_levels.map((skillLevel) => {
               const skill = skills.find((s) => s.id === parseInt(skillLevel.skill_id));
               return skill ? (

src/components/Search.jsx

@@ -10,7 +10,7 @@ const Search = (props) => {
         <input type="text" 
         placeholder={props.placeholder} 
         className="border-2 border-gray-300
-         bg-white h-10 px-5 pr-16 mx-3 rounded-lg 
+         bg-white h-8 px-5 pr-16 mx-3 rounded-lg 
          text-sm focus:outline-none" />
     </div>
   )

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) => (
-                <div 
-                    key={index} 
-                    className={`inline-block w-3.5 h-3.5 mr-1 rounded-full ${index < numberOfFilledCircles ? 'bg-red-300 hover:bg-red-700' : 'bg-gray-500 hover:bg-gray-600'}`} 
-                />
-            ))}
-        </>
-    );
-};
+  return (
+    <>
+      {[...Array(5)].map((_, index) => (
+        <div
+          key={index}
+          className={`inline-block w-3.5 h-3.5 mr-1 rounded-full ${
+            index < numberOfFilledCircles
+              ? "bg-red-300 hover:bg-red-700"
+              : "bg-gray-500 hover:bg-gray-600"
+          }`}
+        />
+      ))}
+    </>
+  );
+}
 
 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 (
-    <section className=' mx-auto bg-white w-full'>
+    <section className=" mx-auto bg-white w-full">
+      <div className="flex-grow h-5/6 grid grid-cols-10">
+        {/* <div className="px-3 flex col-span-11 sm:flex-wrap flex-shrink-0 items-center place-content-center">
+          <button onClick={prevSlide} className="lg:hidden mx-6 font-semibold place-self-start self-center leading-5">
+            Poprzednia <br/> kategoria
+          </button>
+          {categories.map((category, index) => (
+            <div
+              key={index}
+              className={`lg:block ${
+                index === currentSlide ? "block" : "hidden"
+              } lg:flex flex-grow lg:flex-none flex-basis-0"`}
+            >
+              <Category
+                name={category.name}
+                last={index === categories.length - 1}
+                small={isSmallViewport}
+                func={() => {   getOgloszenia({ category: category.id }); }}
+              />
+            </div>
+          ))}
+          <button onClick={nextSlide} className="lg:hidden font-semibold leading-5 place-self-end self-center mr-6">
+          Następna <br/> kategoria
+          </button>
+        </div> */}
 
-            <div className='flex-grow h-5/6 grid grid-cols-10'>
-                <div className='px-3 col-span-11 flex flex-wrap items-center place-content-center  '>
+        <div
+          className={`static rounded-xl col-span-11 sm:col-span-4 bg-gray-100  overflow-y-auto px-2 my-4 mx-2 sm:h-[84vh] h-[84vh] ${
+            isDetailsVisible ? "hidden sm:block" : "block"
+          }`}
+        >
+          <div className="z-10 sticky top-0 col-span-11 sm:cols-span-4 h-24 bg-slate-300 flex items-center place-content-center mb-2">
+            <h1 className="text-center text-3xl font-poppins font-semibold text-slate-800 py-4 mx-6">
+              Oferty pracy
+            </h1>
+            <button
+              className="block font-poppins text-white font-semibold 
+                    bg-gray-500 px-4 py-2 mx-6 rounded-md"
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              Pokaż filtry
+            </button>
+          </div>
+          <div className="z-10 sticky top-24 col-span-11 sm:cols-span-4  bg-slate-300 mb-2">
+            {isOpen && <Filter isOpen={isOpen} />}
+          </div>
+          {ogloszenia.map((ogloszenie, index) => (
+            <ListingSmall
+              key={ogloszenie.id}
+              name={ogloszenie.name}
+              company_name={ogloszenie.company_name}
+              min_salary={ogloszenie.min_salary}
+              max_salary={ogloszenie.max_salary}
+              require_salary={ogloszenie.require_salary}
+              image={ogloszenie.image}
+              index={index}
+              onClick={() => handleOgloszenieClick(ogloszenie)}
+            />
+          ))}
+        </div>
+        <div
+          className={`sm:col-span-6 col-span-11 bg-gray-100 sm:h-[84vh] h-[84vh] overflow-y-auto p-4 my-4 ${
+            isDetailsVisible ? "block" : "hidden sm:block"
+          }`}
+        >
+          {isDetailsVisible && (
+            <div className="grid grid-cols-6">
+              <button
+                onClick={handleBackToList}
+                className="sm:hidden block font-poppins text-white font-semibold bg-gray-500 px-4 py-2 rounded-md mx-4 col-span-4 col-start-2"
+              >
+                Powrót do listy
+              </button>
+            </div>
+          )}
 
-                    
-                    <Category name='Budownictwo' /> 
-                    <Category name='Elektryk' /> 
-                    <Category name='Okretownictwo' /> 
-                    <Category name='Energetyka' /> 
-                    <Category name='Lorem Ipsum' /> 
-                    <Category name='IT'/>
-                    <Category name='Budownictwo' 
-                    last={true} /> 
-
-
-                </div>
-                <div className={`static rounded-xl col-span-11 sm:col-span-4 bg-gray-100  overflow-y-auto px-2 my-4 mx-2 sm:h-[84vh] h-[84vh] ${isDetailsVisible ? 'hidden sm:block' : 'block'}`}>
-                
-                <div className='z-10 sticky top-0 col-span-11 sm:cols-span-4 h-24 bg-slate-300 flex items-center place-content-center mb-2'>
-
-                    <h1 className='text-center text-3xl font-poppins font-semibold text-slate-800 py-4 mx-6'>Oferty pracy</h1>
-                    <button 
-                    className='block font-poppins text-white font-semibold 
-                    bg-gray-500 px-4 py-2 mx-6 rounded-md'
-                    onClick={() => setIsOpen(!isOpen)}
-                    >Pokaż filtry</button>
-            
-                </div>
-                <div className='z-10 sticky top-24 col-span-11 sm:cols-span-4  bg-slate-300 mb-2'>
-                {isOpen && (<Filter isOpen={isOpen}/>)}
-                </div>
-                    {ogloszenia.map((ogloszenie, index) => (
-                        <ListingSmall 
-                        key={ogloszenie.id}
-                        name={ogloszenie.name}
-                        company_name={ogloszenie.company_name}
-                        min_salary={ogloszenie.min_salary}
-                        max_salary={ogloszenie.max_salary}
-                        require_salary={ogloszenie.require_salary}
-                        image={ogloszenie.image}
-                        index={index}
-                        onClick={() => handleOgloszenieClick(ogloszenie)}
-                    />
-                    ))}
-                </div>
-                <div className={`sm:col-span-6 col-span-11 bg-gray-100 sm:h-[84vh] h-[84vh] overflow-y-auto p-4 my-4 ${isDetailsVisible ? 'block' : 'hidden sm:block'}`}>
-                     {isDetailsVisible && (
-                 <div className='grid grid-cols-6'>
-                     <button 
-                         onClick={handleBackToList}
-                         className="sm:hidden block font-poppins text-white font-semibold bg-gray-500 px-4 py-2 rounded-md mx-4 col-span-4 col-start-2"
-                     >
-                         Powrót do listy
-                     </button>
-                 </div>
-                 )}
-        
-                {selectedOgloszenie 
-                && 
-                <JobOfferContent 
-                id={selectedOgloszenie.id}
-                skills={skills}
-                />}
-                    {/* <div className='grid sm:grid-cols-2 md:grid-cols-5 grid-cols-2'>
+          {selectedOgloszenie && (
+            <JobOfferContent id={selectedOgloszenie.id} skills={skills} />
+          )}
+          {/* <div className='grid sm:grid-cols-2 md:grid-cols-5 grid-cols-2'>
                         {Object.entries(selectedOgloszenie.neededSkills).map(([skill, level]) => (
                             <SkillRender 
                                 skill={skill}
@@ -168,11 +215,11 @@ const WorkApp = () => {
                     <div className='text-slate-800 font-medium mt-4'>
                         {selectedOgloszenie.tresc}
                     </div> */}
-                </div>
-            </div>
-        </section>
-  )
-}
+        </div>
+      </div>
+    </section>
+  );
+};
 
-export default WorkApp
-export { renderCircles }
+export default WorkApp;
+export { renderCircles };