fix: display 2024 job offers on 2024 route

Author: anyulled

src/2023/JobOffers/CompanyOffers.tsx

@@ -10,30 +10,19 @@ import TitleSection from "../../components/SectionTitle/TitleSection";
 import { useWindowSize } from "react-use";
 import data from "../../data/2023.json";
 import {
-  Companies,
-  CompanyNameLink,
-  StyledLessIcon,
-  StyledMoreIcon,
-  StyledTitleContainer,
-} from "./JobOffers.Style";
-import CompanyOffers from "./CompanyOffers";
+  Companies, CompanyNameLink, StyledLessIcon, StyledMoreIcon,
+  StyledTitleContainer
+} from "../../styles/JobOffers/JobOffers.Style";
+import CompanyOffers from "../../components/JobOffers/CompanyOffers";
 
 const NoOffersAvailable = () => (
-  <>
-    {!data.jobOffers.enabled && (
       <h4 style={{ color: Color.DARK_BLUE }}>No job offers available yet</h4>
-    )}
-  </>
 );
 
 const MoreThanLessThan = (props: { width: number }) => (
-  <>
-    {props.width > MOBILE_BREAKPOINT && (
-      <>
+<>
         <StyledLessIcon src={LessThanBlueIcon} />
         <StyledMoreIcon src={MoreThanBlueIcon} />
-      </>
-    )}
   </>
 );
 
@@ -54,8 +43,8 @@ const JobOffers2023: FC<React.PropsWithChildren<unknown>> = () => {
             color={Color.BLACK_BLUE}
           />
         </StyledTitleContainer>
-        <MoreThanLessThan width={width} />
-        <NoOffersAvailable />
+        {width > MOBILE_BREAKPOINT && <MoreThanLessThan width={width} />}
+        {!data.jobOffers.enabled && <NoOffersAvailable />}
         {data.jobOffers.enabled && (
           <div id="job-offers">
             <Companies id="companies">

src/2023/JobOffers/JobOffers.Style.ts

@@ -1,4 +1,4 @@
-import { Company } from "../../views/JobOffers/JobsData";
+import {Company} from "../../types/jobOffers";
 
 export const jobOffers: Company[] = [
   {
@@ -727,6 +727,3 @@ export const jobOffers: Company[] = [
   },
 ];
 
-export interface CompanyProps {
-  company: Company;
-}

src/2023/JobOffers/JobOffers2023.tsx

@@ -1,6 +1,5 @@
 import React, {FC} from "react";
 import {Link} from "react-router";
-import {StyledJobsInfo} from "../../JobOffers/components/JobsCard";
 import {Tag} from "../../../components/Tag/Tag";
 import {
     ROUTE_2023_TALK_DETAIL,
@@ -24,6 +23,7 @@ import {
     SessionCategory,
     SessionSpeaker
 } from "../../../types/sessions";
+import {StyledJobsInfo} from "../../../components/JobOffers/JobsCard";
 
 interface TalkCardProps {
     index: number;

src/2023/JobOffers/JobsData.ts

@@ -0,0 +1,75 @@
+import { MOBILE_BREAKPOINT } from "../../constants/BreakPoints";
+import { Color } from "../../styles/colors";
+import { jobOffers } from "./JobsData";
+
+import React, { FC } from "react";
+import LessThanBlueIcon from "../../assets/images/LessThanBlueIcon.svg";
+import MoreThanBlueIcon from "../../assets/images/MoreThanBlueIcon.svg";
+import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
+import TitleSection from "../../components/SectionTitle/TitleSection";
+import { useWindowSize } from "react-use";
+import data from "../../data/2024.json";
+import {
+  Companies,
+  CompanyNameLink,
+  StyledLessIcon,
+  StyledMoreIcon,
+  StyledTitleContainer,
+} from "../../styles/JobOffers/JobOffers.Style";
+import CompanyOffers from "../../components/JobOffers/CompanyOffers";
+
+const NoOffersAvailable = () => (
+  <h4 style={{ color: Color.DARK_BLUE }}>No job offers available yet</h4>
+);
+
+const MoreThanLessThan = () => (
+  <>
+    <StyledLessIcon src={LessThanBlueIcon} />
+    <StyledMoreIcon src={MoreThanBlueIcon} />
+  </>
+);
+
+const JobOffers2024: FC<React.PropsWithChildren<unknown>> = () => {
+  const { width } = useWindowSize();
+
+  React.useEffect(() => {
+    document.title = `Job Offers - ${data.title} - ${data.edition}`;
+  }, []);
+
+  return (
+    <SectionWrapper color={Color.WHITE} marginTop={6} paddingBottom={100}>
+      <section>
+        <StyledTitleContainer>
+          <TitleSection
+            title="JOB OFFERS"
+            subtitle="Have a look at some opportunities"
+            color={Color.BLACK_BLUE}
+          />
+        </StyledTitleContainer>
+        {width > MOBILE_BREAKPOINT && <MoreThanLessThan/>}
+        {!data.jobOffers.enabled && <NoOffersAvailable />}
+        {data.jobOffers.enabled && (
+          <div id="job-offers">
+            <Companies id="companies">
+              {jobOffers.map((company) => (
+                <CompanyNameLink
+                  href={` #${company.name.replaceAll(" ", "-").toLowerCase()}`}
+                  key={company.id}
+                >
+                  {company.name}
+                </CompanyNameLink>
+              ))}
+            </Companies>
+            <div id="offers">
+              {jobOffers.map((company) => (
+                <CompanyOffers company={company} key={company.id} />
+              ))}
+            </div>
+          </div>
+        )}
+      </section>
+    </SectionWrapper>
+  );
+};
+
+export default JobOffers2024;