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,25 +1,26 @@
-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;
 
   switch (level) {
-        case 'Podstawowy':
+    case "Podstawowy":
       numberOfFilledCircles = 1;
       break;
-        case 'Zaawansowany':
+    case "Zaawansowany":
       numberOfFilledCircles = 3;
       break;
-        case 'Ekspert':
+    case "Ekspert":
       numberOfFilledCircles = 5;
       break;
     default:
@@ -31,12 +32,16 @@ function renderCircles(level) {
       {[...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'}`} 
+          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);
@@ -48,9 +53,12 @@ const WorkApp = () => {
 
   const [skills, setSkills] = useState([]);
 
-    const getOgloszenia = async () => {
+  const getOgloszenia = async (queryParams = {}) => {
     try {
-            const response = await axios.get('http://izaac.izaac.pl/api/jobposting/joboffers_list/');
+      const response = await axios.get(
+        "http://izaac.izaac.pl/api/jobposting/joboffers_list/",
+        { params: queryParams }
+      );
       const data = response.data;
       setOgloszenia(data);
       // console.log(data);
@@ -65,7 +73,9 @@ const WorkApp = () => {
 
   const getSkills = async () => {
     try {
-            const response = await axios.get(`http://izaac.izaac.pl/api/jobposting/skills/`);
+      const response = await axios.get(
+        `http://izaac.izaac.pl/api/jobposting/skills/`
+      );
       const data = response.data;
       setSkills(data);
       console.log(data);
@@ -74,9 +84,9 @@ const WorkApp = () => {
     }
   };
   
-    const [searchQuery, setSearchQuery] = useState('');
-    const [selectedOgloszenie, setSelectedOgloszenie] = useState(ogloszenia[0]);
 
+  const [searchQuery, setSearchQuery] = useState({});
+  const [selectedOgloszenie, setSelectedOgloszenie] = useState(ogloszenia[0]);
 
   useEffect(() => {
     getOgloszenia();
@@ -87,43 +97,79 @@ const WorkApp = () => {
     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);
+    };
+  
+    window.addEventListener('resize', handleResize);
+  
+    // Clean up the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
-    <section className=' mx-auto bg-white w-full'>
-
-            <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  '>
-
-                    
-                    <Category name='Budownictwo' /> 
-                    <Category name='Elektryk' /> 
-                    <Category name='Okretownictwo' /> 
-                    <Category name='Energetyka' /> 
-                    <Category name='Lorem Ipsum' /> 
-                    <Category name='IT'/>
-                    <Category name='Budownictwo' 
-                    last={true} /> 
-
-
+    <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>
-                <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'}`}>
+          ))}
+          <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='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>
+        <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'
+              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>
-            
+            >
+              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 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
@@ -139,9 +185,13 @@ const WorkApp = () => {
             />
           ))}
         </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'}`}>
+        <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'>
+            <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"
@@ -151,12 +201,9 @@ const WorkApp = () => {
             </div>
           )}
 
-                {selectedOgloszenie 
-                && 
-                <JobOfferContent 
-                id={selectedOgloszenie.id}
-                skills={skills}
-                />}
+          {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 
@@ -171,8 +218,8 @@ const WorkApp = () => {
         </div>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default WorkApp
-export { renderCircles }
+export default WorkApp;
+export { renderCircles };