feat(qr-code): integrate QR code generation for session tracks and talks

Author: anyulled

package-lock.json

@@ -33,6 +33,7 @@
     "react-countdown": "^2.3.6",
     "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",
+    "react-qr-code": "^2.0.18",
     "react-query": "^3.39.2",
     "react-router-dom": "^7.6.2",
     "react-use": "^17.6.0",

package.json

@@ -64,6 +64,7 @@ import { SessionFeedback2023 } from "./2023/SessionFeedback/SessionFeedback2023"
 import { AttendeeInformation2023 } from "./2023/Attendee/AttendeeInformation2023";
 import { Communities2023 } from "./2023/Communities/Communities2023";
 import { SpeakerInformation2023 } from "./2023/Speakers/SpeakerInformation2023";
+import QrCodeSection from "@views/QrCode/QrCodeSection";
 
 //<editor-fold desc="2025">
 const Talks = lazy(() => import("./views/Talks/Talks"));
@@ -379,6 +380,14 @@ const App: FC<React.PropsWithChildren<unknown>> = () => {
           />
           {/* </editor-fold> */}
           {/* <editor-fold desc="2024 edition> */}
+          <Route
+            path="/qr-code"
+            element={
+              <React.Suspense fallback={<Loading />}>
+                <QrCodeSection />
+              </React.Suspense>
+            }
+          />
           <Route
             path={ROUTE_2024_HOME}
             element={

src/App.tsx

@@ -4,7 +4,7 @@ import {
   QuestionAnswers,
   Session,
   SessionCategory,
-} from "../types/sessions";
+} from "@/types/sessions";
 
 export const extractSessionTags = (
   questionAnswers: QuestionAnswers[],

src/services/sessionsAdapter.ts

@@ -24,6 +24,8 @@ export interface SessionCategory {
 }
 
 export interface Session {
+  readonly room: string;
+  readonly roomId: number;
   readonly id: number;
   readonly title: string;
   readonly description: string;

src/types/sessions.ts

@@ -0,0 +1,118 @@
+import { ChangeEvent, FC, useMemo, useState } from "react";
+import QRCode from "react-qr-code";
+import { IGroup, Session } from "@/types/sessions";
+import { format, isWithinInterval, parseISO } from "date-fns";
+import { SectionWrapper } from "@components/SectionWrapper/SectionWrapper";
+import { Color } from "@styles/colors";
+
+interface QrCodeProps {
+  currentDateTime: Date;
+  openFeedbackId: string;
+  tracks?: Array<IGroup>;
+}
+
+interface Track {
+  name: string;
+  id: number;
+}
+
+const areTracksAvailable = (availableTracks: Set<Track>) =>
+  availableTracks.size > 0;
+
+const QrCode: FC<React.PropsWithChildren<QrCodeProps>> = ({
+  currentDateTime,
+  openFeedbackId,
+  tracks,
+}) => {
+  const availableTracks: Set<Track> = useMemo<Set<Track>>(() => {
+    const list: Track[] =
+      tracks
+        ?.flatMap((group) => group.sessions)
+        .filter((session) =>
+          isWithinInterval(currentDateTime, {
+            start: session.startsAt,
+            end: session.endsAt,
+          }),
+        )
+        ?.map((session) => ({
+          name: session.room,
+          id: session.roomId,
+        }))
+        .sort((a, b) => a.name.localeCompare(b.name)) ?? [];
+
+    return new Set(list);
+  }, [tracks, currentDateTime]);
+
+  const [selectedTrack, setSelectedTrack] = useState<number>(
+    Array.from(availableTracks)?.at(0)?.id ?? 0,
+  );
+  const availableTalks: Array<Session> | undefined = tracks
+    ?.map((track: IGroup) => track.sessions)
+    .flat(1)
+    .filter((talk) =>
+      isWithinInterval(currentDateTime, {
+        start: talk.startsAt,
+        end: talk.endsAt,
+      }),
+    );
+
+  const [session, setSession] = useState<Session | undefined>(
+    availableTalks?.at(0),
+  );
+
+  const [qrValue, setQrValue] = useState(
+    "https://openfeedback.io/TG4hBcL7iPtV2LecVdHu/2025-07-09/945091",
+  );
+
+  const setQrCodeHandler = (e: ChangeEvent<HTMLSelectElement>) => {
+    const qrCode: number = parseInt(e.target.value);
+    e.preventDefault();
+    setSelectedTrack(qrCode);
+    setSession(availableTalks?.filter((talk) => talk.roomId == qrCode)[0]);
+    if (session != undefined)
+      setQrValue(
+        `https://openfeedback.io/${openFeedbackId}/${format(parseISO(session.startsAt), "yyyy-MM-dd")}/${session.id}`,
+      );
+  };
+
+  return (
+    <SectionWrapper color={Color.WHITE} marginTop={8}>
+      <h1>OpenFeedback QR Code</h1>
+      <div
+        style={{
+          width: "85vh",
+          background: "white",
+          display: "flex",
+          flexDirection: "column",
+          margin: "0 auto 200px",
+          alignItems: "center",
+        }}
+      >
+        <p>{currentDateTime.toLocaleString()}</p>
+        {areTracksAvailable(availableTracks) && (
+          <>
+            <h2>Choose track</h2>
+            <select onChange={setQrCodeHandler} value={selectedTrack}>
+              {Array.from(availableTracks).map((option) => (
+                <option key={option.id} value={option.id}>
+                  {option.name}
+                </option>
+              ))}
+            </select>
+          </>
+        )}
+        <br />
+        {session && (
+          <p>
+            <strong>
+              {session.speakers.map((speaker) => speaker.name).join(", ")}
+            </strong>{" "}
+            — {session.title}
+          </p>
+        )}
+        <QRCode value={qrValue} size={512} />
+      </div>
+    </SectionWrapper>
+  );
+};
+export default QrCode;

src/views/QrCode/QrCode.tsx

@@ -0,0 +1,22 @@
+import QrCode from "@views/QrCode/QrCode";
+import { useMemo } from "react";
+import conferenceData from "@data/2025.json";
+import { useFetchTalks } from "@hooks/useFetchTalks";
+
+const QrCodeSection = () => {
+  const openFeedbackId = conferenceData.openFeedbackId;
+  const talks = useFetchTalks();
+  const currentDateTime: Date = useMemo(() => {
+    return new Date(2025, 6, 18, 10, 35, 0);
+  }, []);
+
+  return (
+    <QrCode
+      currentDateTime={currentDateTime}
+      openFeedbackId={openFeedbackId}
+      tracks={talks?.data}
+    />
+  );
+};
+
+export default QrCodeSection;