Skip to content

Commit dcab9a7

Browse files
anyulledanyulled
committed
feat: improve track selection with SelectButton and group name parsing
1 parent 43e7056 commit dcab9a7

File tree

4 files changed

+72
-43
lines changed

4 files changed

+72
-43
lines changed

‎src/2023/Talks/Talks2023.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,17 @@ const Talks2023: FC<React.PropsWithChildren<unknown>> = () => {
4949

5050
useSentryErrorReport(error);
5151

52+
// Helper function to remove text between parentheses
53+
const removeParenthesesContent = (text: string): string => {
54+
return text.replace(/\s*\([^)]*\)/g, '');
55+
};
56+
5257
const dropDownOptions = [
5358
{ name: "All Tracks", code: undefined },
5459
...(data !== undefined
5560
? data.flatMap((group) => ({
5661
code: group.groupId.toString(),
57-
name: group.groupName,
62+
name: removeParenthesesContent(group.groupName),
5863
}))
5964
: []),
6065
];

‎src/2024/Talks/Talks2024.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,17 @@ const Talks2024: FC<React.PropsWithChildren<unknown>> = () => {
5050

5151
useSentryErrorReport(error);
5252

53+
// Helper function to remove text between parentheses
54+
const removeParenthesesContent = (text: string): string => {
55+
return text.replace(/\s*\([^)]*\)/g, '');
56+
};
57+
5358
const dropDownOptions = [
5459
{ name: "All Tracks", code: undefined },
5560
...(data !== undefined
5661
? data.flatMap((group) => ({
5762
code: group.groupId.toString(),
58-
name: group.groupName,
63+
name: removeParenthesesContent(group.groupName),
5964
}))
6065
: []),
6166
];

‎src/views/Talks/Talks.style.ts

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,6 @@ export const StyledSessionText = styled.div`
5050
`;
5151
export const StyledSessionCard = styled.div`
5252
align-items: center;
53-
/*min-width: 20%;
54-
max-width: 50%;*/
5553
margin: 0.3rem 1rem 1rem;
5654
flex-grow: 2;
5755
background-color: ${Color.DARK_BLUE};
@@ -86,12 +84,10 @@ export const StyledTalkTitle = styled(Link)`
8684
}
8785
`;
8886
export const StyledTrackInfo = styled.h2`
89-
{
90-
color: ${Color.DARK_BLUE};
91-
margin-top: 50px;
92-
margin-left: 40px;
93-
margin-bottom: 20px;
94-
}
87+
color: ${Color.DARK_BLUE};
88+
margin-top: 2rem;
89+
margin-left: 40px;
90+
margin-bottom: 1rem;
9591
`;
9692
export const StyledSessionSection = styled.section`
9793
display: flex;
@@ -106,32 +102,17 @@ export const StyledTalkSpeaker = styled.p`
106102
a:before {
107103
content: "🧑🏻‍💻 ";
108104
}
105+
109106
a {
110107
text-decoration: none;
111108
transition: color ease-in-out 200ms;
112109
color: ${Color.WHITE};
113110
}
111+
114112
a:hover {
115113
color: ${Color.LIGHT_BLUE};
116114
}
117115
`;
118-
119-
export const StyledSelectTrack = styled.select`
120-
{
121-
padding: 5px;
122-
color: ${Color.YELLOW};
123-
background-color: ${Color.LIGHT_BLUE};
124-
font-family: "Square 721 Regular", sans-serif;
125-
border: none;
126-
font-size: 1.2em;
127-
max-width: 15%;
128-
}
129-
`;
130-
export const StyledVoteTalkLink = styled.a`
131-
text-decoration: none;
132-
color: ${Color.WHITE};
133-
font-size: 0.8rem;
134-
`;
135116
export const StyledMain = styled.main`
136117
padding-left: 2rem;
137118
padding-top: 4rem;

‎src/views/Talks/Talks.tsx

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from "./Talks.style";
1515
import TrackInformation from "../../components/common/TrackInformation";
1616
import { useFetchTalks } from "../../hooks/useFetchTalks";
17-
import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
17+
import { SelectButton, SelectButtonChangeEvent } from "primereact/selectbutton";
1818
import "primereact/resources/primereact.min.css";
1919
import "primereact/resources/themes/lara-light-indigo/theme.css";
2020
import "../../styles/theme.css";
@@ -49,21 +49,27 @@ const Talks: FC<React.PropsWithChildren<unknown>> = () => {
4949

5050
useSentryErrorReport(error);
5151

52-
const dropDownOptions = [
52+
const removeParenthesesContent = (text: string): string => {
53+
return text.replace(/\s*\([^)]*\)/g, "");
54+
};
55+
56+
const trackOptions = [
5357
{ name: "All Tracks", code: undefined },
5458
...(data !== undefined
55-
? data.flatMap((group) => ({
56-
code: group.groupId.toString(),
57-
name: group.groupName,
58-
}))
59+
? data
60+
.flatMap((group) => ({
61+
code: group.groupId.toString(),
62+
name: removeParenthesesContent(group.groupName),
63+
}))
64+
.sort((a, b) => a.name.localeCompare(b.name))
5965
: []),
6066
];
6167

6268
const filteredTalks = selectedGroupId?.code
6369
? data?.filter((talk) => talk.groupId.toString() === selectedGroupId.code)
6470
: data;
6571

66-
const onChangeSelectedTrack = (e: DropdownChangeEvent) => {
72+
const onChangeSelectedTrack = (e: SelectButtonChangeEvent) => {
6773
const value = e.value;
6874
setSelectedGroupId(value ?? null);
6975
sessionStorage.setItem("selectedGroupCode", value?.code ?? "");
@@ -104,7 +110,7 @@ const Talks: FC<React.PropsWithChildren<unknown>> = () => {
104110
{isLoading && <h1>Loading </h1>}
105111
{conferenceData.hideTalks ? (
106112
<p style={{ color: Color.WHITE, textAlign: "center" }}>
107-
No talks selected yet. Keep in touch in our social media for
113+
No talks selected yet. Keep in tap in our social media for
108114
upcoming announcements
109115
</p>
110116
) : (
@@ -115,14 +121,46 @@ const Talks: FC<React.PropsWithChildren<unknown>> = () => {
115121
<label htmlFor="group-id-select">
116122
<strong>Filter by Track: </strong>
117123
</label>
118-
<Dropdown
119-
value={selectedGroupId}
120-
onChange={onChangeSelectedTrack}
121-
options={dropDownOptions}
122-
placeholder="Select Track"
123-
optionLabel="name"
124-
className="w-full md:w-14rem"
125-
/>
124+
<div
125+
style={{
126+
display: "flex",
127+
flexWrap: "wrap",
128+
gap: "0.5rem",
129+
marginTop: "0.5rem",
130+
justifyContent: "center",
131+
}}
132+
>
133+
<SelectButton
134+
value={selectedGroupId}
135+
onChange={onChangeSelectedTrack}
136+
options={trackOptions}
137+
optionLabel="name"
138+
style={{
139+
display: "flex",
140+
flexWrap: "wrap",
141+
gap: "0.5rem",
142+
}}
143+
itemTemplate={(option) => (
144+
<div
145+
style={{
146+
padding: "0.5rem 1rem",
147+
borderRadius: "2rem",
148+
backgroundColor:
149+
selectedGroupId?.code === option.code
150+
? Color.LIGHT_BLUE
151+
: "transparent",
152+
color:
153+
selectedGroupId?.code === option.code
154+
? Color.WHITE
155+
: Color.SKY_BLUE,
156+
cursor: "pointer",
157+
}}
158+
>
159+
{option.name}
160+
</div>
161+
)}
162+
/>
163+
</div>
126164
</div>
127165
{filteredTalks.map((track) => (
128166
<TrackInformation

0 commit comments

Comments
 (0)