feat: improve track selection with SelectButton and group name parsing

Author: anyulled

src/2023/Talks/Talks2023.tsx

@@ -49,12 +49,17 @@ const Talks2023: FC<React.PropsWithChildren<unknown>> = () => {
 
   useSentryErrorReport(error);
 
+  // Helper function to remove text between parentheses
+  const removeParenthesesContent = (text: string): string => {
+    return text.replace(/\s*\([^)]*\)/g, '');
+  };
+
   const dropDownOptions = [
     { name: "All Tracks", code: undefined },
     ...(data !== undefined
       ? data.flatMap((group) => ({
           code: group.groupId.toString(),
-          name: group.groupName,
+          name: removeParenthesesContent(group.groupName),
         }))
       : []),
   ];

src/2024/Talks/Talks2024.tsx

@@ -50,12 +50,17 @@ const Talks2024: FC<React.PropsWithChildren<unknown>> = () => {
 
   useSentryErrorReport(error);
 
+  // Helper function to remove text between parentheses
+  const removeParenthesesContent = (text: string): string => {
+    return text.replace(/\s*\([^)]*\)/g, '');
+  };
+
   const dropDownOptions = [
     { name: "All Tracks", code: undefined },
     ...(data !== undefined
       ? data.flatMap((group) => ({
           code: group.groupId.toString(),
-          name: group.groupName,
+          name: removeParenthesesContent(group.groupName),
         }))
       : []),
   ];

src/views/Talks/Talks.style.ts

@@ -50,8 +50,6 @@ export const StyledSessionText = styled.div`
 `;
 export const StyledSessionCard = styled.div`
   align-items: center;
-  /*min-width: 20%;
-  max-width: 50%;*/
   margin: 0.3rem 1rem 1rem;
   flex-grow: 2;
   background-color: ${Color.DARK_BLUE};
@@ -86,12 +84,10 @@ export const StyledTalkTitle = styled(Link)`
   }
 `;
 export const StyledTrackInfo = styled.h2`
-   {
-    color: ${Color.DARK_BLUE};
-    margin-top: 50px;
-    margin-left: 40px;
-    margin-bottom: 20px;
-  }
+  color: ${Color.DARK_BLUE};
+  margin-top: 2rem;
+  margin-left: 40px;
+  margin-bottom: 1rem;
 `;
 export const StyledSessionSection = styled.section`
   display: flex;
@@ -106,32 +102,17 @@ export const StyledTalkSpeaker = styled.p`
   a:before {
     content: "🧑🏻‍💻 ";
   }
+
   a {
     text-decoration: none;
     transition: color ease-in-out 200ms;
     color: ${Color.WHITE};
   }
+
   a:hover {
     color: ${Color.LIGHT_BLUE};
   }
 `;
-
-export const StyledSelectTrack = styled.select`
-   {
-    padding: 5px;
-    color: ${Color.YELLOW};
-    background-color: ${Color.LIGHT_BLUE};
-    font-family: "Square 721 Regular", sans-serif;
-    border: none;
-    font-size: 1.2em;
-    max-width: 15%;
-  }
-`;
-export const StyledVoteTalkLink = styled.a`
-  text-decoration: none;
-  color: ${Color.WHITE};
-  font-size: 0.8rem;
-`;
 export const StyledMain = styled.main`
   padding-left: 2rem;
   padding-top: 4rem;

src/views/Talks/Talks.tsx

@@ -14,7 +14,7 @@ import {
 } from "./Talks.style";
 import TrackInformation from "../../components/common/TrackInformation";
 import { useFetchTalks } from "../../hooks/useFetchTalks";
-import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
+import { SelectButton, SelectButtonChangeEvent } from "primereact/selectbutton";
 import "primereact/resources/primereact.min.css";
 import "primereact/resources/themes/lara-light-indigo/theme.css";
 import "../../styles/theme.css";
@@ -49,21 +49,27 @@ const Talks: FC<React.PropsWithChildren<unknown>> = () => {
 
   useSentryErrorReport(error);
 
-  const dropDownOptions = [
+  const removeParenthesesContent = (text: string): string => {
+    return text.replace(/\s*\([^)]*\)/g, "");
+  };
+
+  const trackOptions = [
     { name: "All Tracks", code: undefined },
     ...(data !== undefined
-      ? data.flatMap((group) => ({
-          code: group.groupId.toString(),
-          name: group.groupName,
-        }))
+      ? data
+          .flatMap((group) => ({
+            code: group.groupId.toString(),
+            name: removeParenthesesContent(group.groupName),
+          }))
+          .sort((a, b) => a.name.localeCompare(b.name))
       : []),
   ];
 
   const filteredTalks = selectedGroupId?.code
     ? data?.filter((talk) => talk.groupId.toString() === selectedGroupId.code)
     : data;
 
-  const onChangeSelectedTrack = (e: DropdownChangeEvent) => {
+  const onChangeSelectedTrack = (e: SelectButtonChangeEvent) => {
     const value = e.value;
     setSelectedGroupId(value ?? null);
     sessionStorage.setItem("selectedGroupCode", value?.code ?? "");
@@ -104,7 +110,7 @@ const Talks: FC<React.PropsWithChildren<unknown>> = () => {
           {isLoading && <h1>Loading </h1>}
           {conferenceData.hideTalks ? (
             <p style={{ color: Color.WHITE, textAlign: "center" }}>
-              No talks selected yet. Keep in touch in our social media for
+              No talks selected yet. Keep in tap in our social media for
               upcoming announcements
             </p>
           ) : (
@@ -115,14 +121,46 @@ const Talks: FC<React.PropsWithChildren<unknown>> = () => {
                   <label htmlFor="group-id-select">
                     <strong>Filter by Track: </strong>
                   </label>
-                  <Dropdown
-                    value={selectedGroupId}
-                    onChange={onChangeSelectedTrack}
-                    options={dropDownOptions}
-                    placeholder="Select Track"
-                    optionLabel="name"
-                    className="w-full md:w-14rem"
-                  />
+                  <div
+                    style={{
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: "0.5rem",
+                      marginTop: "0.5rem",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <SelectButton
+                      value={selectedGroupId}
+                      onChange={onChangeSelectedTrack}
+                      options={trackOptions}
+                      optionLabel="name"
+                      style={{
+                        display: "flex",
+                        flexWrap: "wrap",
+                        gap: "0.5rem",
+                      }}
+                      itemTemplate={(option) => (
+                        <div
+                          style={{
+                            padding: "0.5rem 1rem",
+                            borderRadius: "2rem",
+                            backgroundColor:
+                              selectedGroupId?.code === option.code
+                                ? Color.LIGHT_BLUE
+                                : "transparent",
+                            color:
+                              selectedGroupId?.code === option.code
+                                ? Color.WHITE
+                                : Color.SKY_BLUE,
+                            cursor: "pointer",
+                          }}
+                        >
+                          {option.name}
+                        </div>
+                      )}
+                    />
+                  </div>
                 </div>
                 {filteredTalks.map((track) => (
                   <TrackInformation