refactor: remove duplication on fetch speaker logic

.junie/guidelines.md

@@ -0,0 +1,60 @@
+# DevBcn - Barcelona Developers Conference Website
+
+## Project Overview
+
+This repository contains the official website for the Barcelona Developers Conference (DevBcn), a tech conference held in Barcelona, Spain. The website serves as the primary platform for conference information, including schedules, speaker profiles, talk details, venue information, and registration.
+
+## Technology Stack
+
+- **Frontend Framework**: React 18 with TypeScript
+- **Routing**: React Router
+- **Data Fetching**: React Query and Axios
+- **Styling**: Styled Components and SASS
+- **UI Components**: PrimeReact, Swiper, Framer Motion
+- **Maps Integration**: Google Map React
+- **Testing**: Jest, React Testing Library
+- **Deployment**: GitHub Pages
+
+## Project Structure
+
+The project follows a standard React application structure:
+
+- `src/`: Source code
+  - `assets/`: Static assets like images
+  - `components/`: Reusable UI components
+  - `hooks/`: Custom React hooks (e.g., useFetchSpeakers, useFetchTalks)
+  - `views/`: Page components
+  - `2024/`: Components specific to the 2024 conference
+
+## Development Workflow
+
+### Getting Started
+
+1. Clone the repository
+2. Install dependencies with `npm install`
+3. Start the development server with `npm start`
+4. View the site at http://localhost:3000
+
+### Available Scripts
+
+- `npm start`: Run the development server
+- `npm test`: Run tests
+- `npm run test-coverage`: Run tests with coverage reporting
+- `npm run build`: Build for production
+- `npm run deploy`: Deploy to GitHub Pages
+
+## Contribution Guidelines
+
+When contributing to this project, please:
+
+1. Follow the existing code style and patterns
+2. Write tests for new features
+3. Ensure all tests pass before submitting pull requests
+4. Keep the UI consistent with the existing design
+5. Document any new components or significant changes
+
+## Contact
+
+For questions or issues related to the DevBcn website, please open an issue in this repository.
+
+Visit the live site at [https://www.devbcn.com](https://www.devbcn.com)

README.md

@@ -2,51 +2,69 @@
 
 ![](src/assets/images/1500x500.jpeg)
 
-# Barcelona Developers Conference - DevBcn
+# DevBcn - Barcelona Developers Conference Website
 
-## Getting Started with Create React App
+## Project Overview
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This repository contains the official website for the Barcelona Developers
+Conference (DevBcn), a tech conference held in Barcelona, Spain. The website
+serves as the primary platform for conference information, including schedules,
+speaker profiles, talk details, venue information, and registration.
 
-### Available Scripts
-
-In the project directory, you can run:
-
-#### `npm start`
+## Technology Stack
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- **Frontend Framework**: React 18 with TypeScript
+- **Routing**: React Router
+- **Data Fetching**: React Query and Axios
+- **Styling**: Styled Components and SASS
+- **UI Components**: PrimeReact, Swiper, Framer Motion
+- **Maps Integration**: Google Map React
+- **Testing**: Jest, React Testing Library
+- **Deployment**: GitHub Pages
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+## Project Structure
 
-#### `npm test`
+The project follows a standard React application structure:
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+- `src/`: Source code
+    - `assets/`: Static assets like images
+    - `components/`: Reusable UI components
+    - `hooks/`: Custom React hooks (e.g., useFetchSpeakers, useFetchTalks)
+    - `views/`: Page components
+    - `2024/`: Components specific to the 2024 conference edition
+    - `2023/`: Components specific to the 2023 conference edition
 
-#### `npm run build`
+## Development Workflow
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Getting Started
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+1. Clone the repository
+2. Install dependencies with `npm install`
+3. Start the development server with `npm start`
+4. View the site at http://localhost:3000
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-#### `npm run eject`
+### Available Scripts
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+- `npm start`: Run the development server
+- `npm test`: Run tests
+- `npm run test-coverage`: Run tests with coverage reporting
+- `npm run build`: Build for production
+- `npm run deploy`: Deploy to GitHub Pages
+- `npm run eject`: Eject from Create React App (not recommended)
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+## Contribution Guidelines
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+When contributing to this project, please:
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+1. Follow the existing code style and patterns
+2. Write tests for new features
+3. Ensure all tests pass before submitting pull requests
+4. Keep the UI consistent with the existing design
+5. Document any new components or significant changes
 
-### Learn More
+## Contact
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+For questions or issues related to the DevBcn website, please open an issue in
+this repository.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Visit the live site at [https://www.devbcn.com](https://www.devbcn.com)

src/2023/Diversity/Diversity.test.tsx

@@ -11,7 +11,7 @@ describe("Diversity component", () => {
           <Route path={"*"} element={<Diversity2023 />} />
         </Routes>
       </React.Suspense>,
-      { wrapper: BrowserRouter }
+      { wrapper: BrowserRouter },
     );
     const headingElement = screen.getByText("Diversity Sponsorship");
     expect(headingElement).toBeInTheDocument();
@@ -24,10 +24,10 @@ describe("Diversity component", () => {
           <Route path={"*"} element={<Diversity2023 />} />
         </Routes>
       </React.Suspense>,
-      { wrapper: BrowserRouter }
+      { wrapper: BrowserRouter },
     );
     const paragraphElement = screen.getByText(
-      /DevBcn, its volunteers, and staff consider that understanding/i
+      /DevBcn, its volunteers, and staff consider that understanding/i,
     );
     expect(paragraphElement).toBeInTheDocument();
   });
@@ -39,7 +39,7 @@ describe("Diversity component", () => {
           <Route path={"*"} element={<Diversity2023 />} />
         </Routes>
       </React.Suspense>,
-      { wrapper: BrowserRouter }
+      { wrapper: BrowserRouter },
     );
     const vepeeLogo = screen.getByAltText("Vepee");
     const adevintaLogo = screen.getByAltText("Adevinta");

src/2023/Diversity/Diversity2023.tsx

@@ -10,23 +10,23 @@ import {
 } from "../../constants/routes";
 
 const StyledSection = styled.section`
-   {
+{
     padding-top: 48px;
-  }
+}
 
-  .top {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
-    height: 51px;
-    background-color: ${Color.DARK_BLUE};
-    border-top: 1px solid ${Color.DARK_BLUE};
-  }
+    .top {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
+        height: 51px;
+        background-color: ${Color.DARK_BLUE};
+        border-top: 1px solid ${Color.DARK_BLUE};
+    }
 
-  .bottom {
-    clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
-    margin-top: -50px;
-    height: 50px;
-    background-color: ${Color.WHITE};
-  }
+    .bottom {
+        clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
+        margin-top: -50px;
+        height: 50px;
+        background-color: ${Color.WHITE};
+    }
 `;
 
 const StyledWave = styled.section`
@@ -36,15 +36,15 @@ const StyledWave = styled.section`
 `;
 
 const StyledLogo = styled.img`
-   {
+{
     max-width: 30vw;
     flex: 2 1 auto;
     padding-bottom: 50px;
-  }
-  @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
-    padding-bottom: 20px;
-    max-width: 65vw;
-  }
+}
+    @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
+        padding-bottom: 20px;
+        max-width: 65vw;
+    }
 `;
 
 const Heading = styled.h1`
@@ -68,17 +68,17 @@ const StyledP = styled.p`
 `;
 
 const FlexDiv = styled.div`
-   {
+{
     display: flex;
     width: 20%;
     margin: 0 auto;
     flex-direction: column;
     padding-bottom: 20px;
-  }
-  @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
-    width: 60%;
-    padding-bottom: 0.5rem;
-  }
+}
+    @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
+        width: 60%;
+        padding-bottom: 0.5rem;
+    }
 `;
 
 const StyledParagraph = styled.section`

src/2023/Home/components/SpeakersCarousel/SpeakerSwiper.tsx

@@ -7,7 +7,7 @@ import "swiper/swiper-bundle.min.css";
 import "./SpeakersCarousel.scss";
 import { Link } from "react-router";
 import { ROUTE_SPEAKER_DETAIL } from "../../../../constants/routes";
-import { useFetchSpeakers } from "../../../Speakers/UseFetchSpeakers";
+import { useFetchSpeakers } from "../../../../hooks/useFetchSpeakers";
 import * as Sentry from "@sentry/react";
 
 const StyledSlideImage = styled.img`
@@ -35,7 +35,7 @@ const StyledSlideText = styled.p`
   color: white;
 `;
 const SpeakerSwiper: FC<React.PropsWithChildren<unknown>> = () => {
-  const { isLoading, data, error } = useFetchSpeakers();
+  const { isLoading, data, error } = useFetchSpeakers("2023");
 
   const swiperSpeakers = data?.sort(() => 0.5 - Math.random()).slice(0, 20);
 

src/2023/SessionFeedback/SessionFeedback2023.tsx

@@ -18,9 +18,10 @@ import { ROUTE_TALK_DETAIL } from "../../constants/routes";
 
 const SessionFeedback2023: FC<React.PropsWithChildren<unknown>> = () => {
   const bodyTemplate = React.useCallback(
-    (field: keyof MeasurableSessionRating) => (session: SessionRating) =>
-      <Rating value={session[field]} readOnly cancel={false} />,
-    []
+    (field: keyof MeasurableSessionRating) => (session: SessionRating) => (
+      <Rating value={session[field]} readOnly cancel={false} />
+    ),
+    [],
   );
 
   const TitleTemplate = (session: SessionRating) =>

src/2023/SpeakerDetail/SpeakerDetailContainer2023.tsx

@@ -6,13 +6,13 @@ import SpeakerDetail2023 from "./SpeakerDetail2023";
 import { useParams } from "react-router";
 import { StyledContainer, StyledWaveContainer } from "./Speaker.style";
 import conferenceData from "../../data/2023.json";
-import { useFetchSpeakers } from "../Speakers/UseFetchSpeakers";
+import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
 import * as Sentry from "@sentry/react";
 
 const SpeakerDetailContainer2023: FC<React.PropsWithChildren<unknown>> = () => {
   const { id } = useParams<{ id: string }>();
 
-  const { isLoading, error, data } = useFetchSpeakers(id);
+  const { isLoading, error, data } = useFetchSpeakers("2023", id);
 
   if (error) {
     Sentry.captureException(error);