Skip to content

Commit 195cbe9

Browse files
tujtuj
committed
2927: Split poster single up into components
1 parent bf3214f commit 195cbe9

File tree

3 files changed

+146
-88
lines changed

3 files changed

+146
-88
lines changed

‎src/components/slide/content/poster/poster-single-events.jsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Button } from "react-bootstrap";
2+
import { React } from "react";
3+
import PropTypes from "prop-types";
4+
import { useTranslation } from "react-i18next";
5+
import { formatDate } from "./poster-helper";
6+
7+
/**
8+
* @param {object} props The props.
9+
* @param {Array} props.events The events to present.
10+
* @param {Function} props.handleSelectEvent Handle select event.
11+
* @returns {React.JSX.Element} The events list component.
12+
*/
13+
function PosterSingleEvents({ events, handleSelectEvent }) {
14+
const { t } = useTranslation("common", { keyPrefix: "poster-selector-v2" });
15+
16+
return (
17+
<table className="table table-hover text-left">
18+
<thead>
19+
<tr>
20+
<th scope="col">{t("table-image")}</th>
21+
<th scope="col">{t("table-event")}</th>
22+
<th scope="col">{t("table-date")}</th>
23+
<th scope="col" aria-label={t("table-actions")} />
24+
</tr>
25+
</thead>
26+
<tbody>
27+
{events?.map(
28+
({ entityId, title, imageUrls, organizer, occurrences }) => (
29+
<tr key={entityId}>
30+
<td>
31+
{imageUrls?.small && (
32+
<img
33+
src={imageUrls?.small}
34+
alt={t("search-result-image")}
35+
style={{ maxWidth: "80px" }}
36+
/>
37+
)}
38+
</td>
39+
<td>
40+
<b>{title}</b>
41+
<br />
42+
{organizer?.name}
43+
</td>
44+
<td>
45+
{occurrences?.length > 0 && formatDate(occurrences[0]?.start)}
46+
{occurrences?.length > 1 && <span>, ...</span>}
47+
</td>
48+
<td>
49+
<Button
50+
onClick={() =>
51+
handleSelectEvent(
52+
entityId,
53+
occurrences.map(
54+
({ entityId: occurrenceEntityId }) => occurrenceEntityId
55+
)
56+
)
57+
}
58+
>
59+
{t("choose-event")}
60+
</Button>
61+
</td>
62+
</tr>
63+
)
64+
)}
65+
{events?.length === 0 && (
66+
<tr>
67+
<td colSpan="3">{t("no-results")}</td>
68+
</tr>
69+
)}
70+
</tbody>
71+
</table>
72+
);
73+
}
74+
75+
PosterSingleEvents.propTypes = {
76+
events: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
77+
handleSelectEvent: PropTypes.func.isRequired,
78+
};
79+
80+
export default PosterSingleEvents;

‎src/components/slide/content/poster/poster-single-occurences.jsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Button } from "react-bootstrap";
2+
import { React } from "react";
3+
import PropTypes from "prop-types";
4+
import { useTranslation } from "react-i18next";
5+
import { formatDate } from "./poster-helper";
6+
7+
/**
8+
* @param {object} props The props.
9+
* @param {Array} props.occurrences The occurrences.
10+
* @param {Function} props.handleSelectOccurrence The select callback.
11+
* @returns {React.JSX.Element} The occurrences list component.
12+
*/
13+
function PosterSingleOccurrences({ occurrences, handleSelectOccurrence }) {
14+
const { t } = useTranslation("common", { keyPrefix: "poster-selector-v2" });
15+
16+
return (
17+
<>
18+
<h5>{t("choose-an-occurrence")}</h5>
19+
<table className="table table-hover text-left">
20+
<thead>
21+
<tr>
22+
<th scope="col">{t("table-date")}</th>
23+
<th scope="col">{t("table-price")}</th>
24+
<th scope="col" aria-label={t("table-actions")} />
25+
</tr>
26+
</thead>
27+
<tbody>
28+
{occurrences.map(({ entityId, start, ticketPriceRange }) => (
29+
<tr key={entityId}>
30+
<td>{formatDate(start)}</td>
31+
<td>{ticketPriceRange}</td>
32+
<td>
33+
<Button onClick={() => handleSelectOccurrence(entityId)}>
34+
{t("choose-occurrence")}
35+
</Button>
36+
</td>
37+
</tr>
38+
))}
39+
</tbody>
40+
</table>
41+
</>
42+
);
43+
}
44+
45+
PosterSingleOccurrences.propTypes = {
46+
occurrences: PropTypes.arrayOf(
47+
PropTypes.shape({
48+
entityId: PropTypes.number.isRequired,
49+
start: PropTypes.string.isRequired,
50+
ticketPriceRange: PropTypes.string.isRequired,
51+
})
52+
).isRequired,
53+
handleSelectOccurrence: PropTypes.func.isRequired,
54+
};
55+
56+
export default PosterSingleOccurrences;

‎src/components/slide/content/poster/poster-single.jsx‎

Lines changed: 10 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Col from "react-bootstrap/Col";
66
import { formatDate, getHeaders } from "./poster-helper";
77
import PosterSingleOverride from "./poster-single-override";
88
import PosterSingleSearch from "./poster-single-search";
9+
import PosterSingleEvents from "./poster-single-events.jsx";
10+
import PosterSingleOccurrences from "./poster-single-occurences.jsx";
911

1012
/**
1113
* @param {object} props Props.
@@ -203,101 +205,21 @@ function PosterSingle({ configurationChange, feedSource, configuration }) {
203205

204206
{singleSearchEvents && (
205207
<Row className="mb-2">
206-
<table className="table table-hover text-left">
207-
<thead>
208-
<tr>
209-
<th scope="col">{t("table-image")}</th>
210-
<th scope="col">{t("table-event")}</th>
211-
<th scope="col">{t("table-date")}</th>
212-
<th scope="col" aria-label={t("table-actions")} />
213-
</tr>
214-
</thead>
215-
<tbody>
216-
{singleSearchEvents?.map(
217-
({
218-
entityId,
219-
title,
220-
imageUrls,
221-
organizer,
222-
occurrences,
223-
}) => (
224-
<tr key={entityId}>
225-
<td>
226-
{imageUrls?.small && (
227-
<img
228-
src={imageUrls?.small}
229-
alt={t("search-result-image")}
230-
style={{ maxWidth: "80px" }}
231-
/>
232-
)}
233-
</td>
234-
<td>
235-
<b>{title}</b>
236-
<br />
237-
{organizer?.name}
238-
</td>
239-
<td>
240-
{occurrences?.length > 0 &&
241-
formatDate(occurrences[0]?.start)}
242-
{occurrences?.length > 1 && <span>, ...</span>}
243-
</td>
244-
<td>
245-
<Button
246-
onClick={() =>
247-
handleSelectEvent(
248-
entityId,
249-
occurrences.map(
250-
({ entityId: occurrenceEntityId }) =>
251-
occurrenceEntityId
252-
)
253-
)
254-
}
255-
>
256-
{t("choose-event")}
257-
</Button>
258-
</td>
259-
</tr>
260-
)
261-
)}
262-
{singleSearchEvents?.length === 0 && (
263-
<tr>
264-
<td colSpan="3">{t("no-results")}</td>
265-
</tr>
266-
)}
267-
</tbody>
268-
</table>
208+
<PosterSingleEvents
209+
handleSelectEvent={handleSelectEvent}
210+
events={singleSearchEvents}
211+
/>
269212
</Row>
270213
)}
271214
</>
272215
)}
273216

274217
{singleSelectedEvent !== null && singleSelectedOccurrence === null && (
275218
<Row className="mb-2">
276-
<h5>{t("choose-an-occurrence")}</h5>
277-
<table className="table table-hover text-left">
278-
<thead>
279-
<tr>
280-
<th scope="col">{t("table-date")}</th>
281-
<th scope="col">{t("table-price")}</th>
282-
<th scope="col" aria-label={t("table-actions")} />
283-
</tr>
284-
</thead>
285-
<tbody>
286-
{singleSelectedEvent.occurrences.map(
287-
({ entityId, start, ticketPriceRange }) => (
288-
<tr key={entityId}>
289-
<td>{formatDate(start)}</td>
290-
<td>{ticketPriceRange}</td>
291-
<td>
292-
<Button onClick={() => handleSelectOccurrence(entityId)}>
293-
{t("choose-occurrence")}
294-
</Button>
295-
</td>
296-
</tr>
297-
)
298-
)}
299-
</tbody>
300-
</table>
219+
<PosterSingleOccurrences
220+
occurrences={singleSelectedEvent.occurrences}
221+
handleSelectOccurrence={handleSelectOccurrence}
222+
/>
301223
</Row>
302224
)}
303225
</>

0 commit comments

Comments
 (0)