Skip to content

Commit 4bab571

Browse files
tujtuj
committed
2927: Fixes to subscription
1 parent 829e8fc commit 4bab571

File tree

1 file changed

+130
-138
lines changed

1 file changed

+130
-138
lines changed

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

Lines changed: 130 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ function PosterSubscription({
3838

3939
const [loadingResults, setLoadingResults] = useState(false);
4040

41+
const searchEndpoint = feedSource.admin[0].endpointSearch ?? null;
42+
43+
const numberOptions = Array.from(Array(10).keys());
44+
4145
useEffect(() => {
4246
if (subscriptionPlaceValue) {
4347
configurationChange({
@@ -81,19 +85,19 @@ function PosterSubscription({
8185

8286
const query = new URLSearchParams({
8387
type: "events",
84-
items_per_page: subscriptionNumberValue,
88+
itemsPerPage: subscriptionNumberValue,
8589
});
8690

8791
const places = subscriptionPlaceValue.map((option) => option.value);
8892

8993
places.forEach((place) => {
90-
query.append("place", place);
94+
query.append("location", place);
9195
});
9296

9397
const organizers = subscriptionOrganizerValue.map((option) => option.value);
9498

9599
organizers.forEach((organizer) => {
96-
query.append("organizer", organizer);
100+
query.append("organization", organizer);
97101
});
98102

99103
const tags = subscriptionTagValue.map((option) => option.value);
@@ -104,7 +108,7 @@ function PosterSubscription({
104108

105109
setLoadingResults(true);
106110

107-
fetch(`${url}${query}`, {
111+
fetch(`${url}?${query}`, {
108112
headers: getHeaders(),
109113
})
110114
.then((response) => response.json())
@@ -129,10 +133,6 @@ function PosterSubscription({
129133
subscriptionNumberValue,
130134
]);
131135

132-
const searchEndpoint = feedSource.admin[0].endpointSearch ?? null;
133-
134-
const numberOptions = Array.from(Array(10).keys());
135-
136136
return (
137137
<>
138138
<Row>
@@ -141,147 +141,140 @@ function PosterSubscription({
141141
<small className="form-text">{t("subscription-helptext")}</small>
142142

143143
<Row>
144-
<Col md="3" className="bg-light">
145-
<h5 className="mt-3">{t("filters")}</h5>
146-
<div className="mb-2">
147-
<div className="form-group">
148-
<label htmlFor="os2display-poster--select-subscription-places">
149-
{t("filters-place")}
150-
</label>
151-
<AsyncSelect
152-
id="subscription-search-place"
153-
isClearable
154-
isSearchable
155-
defaultOptions
156-
isMulti
157-
loadOptions={(inputValue, callback) =>
158-
loadDropdownOptions(
159-
searchEndpoint,
160-
headers,
161-
inputValue,
162-
callback,
163-
"places"
164-
)
165-
}
166-
value={subscriptionPlaceValue}
167-
onChange={(newValue) => {
168-
setSubscriptionPlaceValue(newValue);
169-
}}
170-
/>
171-
<small className="form-text">
172-
{t("filter-place-helptext")}
173-
</small>
174-
</div>
144+
<h5 className="mt-3">{t("filters")}</h5>
145+
<div className="mb-2">
146+
<div className="form-group">
147+
<label htmlFor="os2display-poster--select-subscription-places">
148+
{t("filters-place")}
149+
</label>
150+
<AsyncSelect
151+
id="subscription-search-place"
152+
isClearable
153+
isSearchable
154+
defaultOptions
155+
isMulti
156+
loadOptions={(inputValue, callback) =>
157+
loadDropdownOptions(
158+
searchEndpoint,
159+
getHeaders(),
160+
inputValue,
161+
callback,
162+
"locations"
163+
)
164+
}
165+
value={subscriptionPlaceValue}
166+
onChange={(newValue) => {
167+
setSubscriptionPlaceValue(newValue);
168+
}}
169+
/>
175170
</div>
171+
</div>
176172

177-
<div className="mb-2">
178-
<div className="form-group">
179-
<label htmlFor="os2display-poster--select-subscription-organizers">
180-
{t("filters-organizer")}
181-
</label>
182-
<AsyncSelect
183-
id="subscription-search-place"
184-
isClearable
185-
isSearchable
186-
defaultOptions
187-
isMulti
188-
loadOptions={(inputValue, callback) =>
189-
loadDropdownOptions(
190-
searchEndpoint,
191-
headers,
192-
inputValue,
193-
callback,
194-
"organizers"
195-
)
196-
}
197-
value={subscriptionOrganizerValue}
198-
onChange={(newValue) => {
199-
setSubscriptionOrganizerValue(newValue);
200-
}}
201-
/>
202-
<small className="form-text">
203-
{t("filter-organizer-helptext")}
204-
</small>
205-
</div>
173+
<div className="mb-2">
174+
<div className="form-group">
175+
<label htmlFor="os2display-poster--select-subscription-organizers">
176+
{t("filters-organizer")}
177+
</label>
178+
<AsyncSelect
179+
id="subscription-search-place"
180+
isClearable
181+
isSearchable
182+
defaultOptions
183+
isMulti
184+
loadOptions={(inputValue, callback) =>
185+
loadDropdownOptions(
186+
searchEndpoint,
187+
getHeaders(),
188+
inputValue,
189+
callback,
190+
"organizations"
191+
)
192+
}
193+
value={subscriptionOrganizerValue}
194+
onChange={(newValue) => {
195+
setSubscriptionOrganizerValue(newValue);
196+
}}
197+
/>
206198
</div>
199+
</div>
207200

208-
<div className="mb-2">
209-
<div className="form-group">
210-
<label htmlFor="os2display-poster--select-subscription-tags">
211-
{t("filters-tag")}
212-
</label>
213-
<AsyncSelect
214-
id="subscription-search-place"
215-
isClearable
216-
isSearchable
217-
defaultOptions
218-
isMulti
219-
loadOptions={(inputValue, callback) =>
220-
loadDropdownOptions(
221-
searchEndpoint,
222-
headers,
223-
inputValue,
224-
callback,
225-
"tags"
226-
)
227-
}
228-
value={subscriptionTagValue}
229-
onChange={(newValue) => {
230-
setSubscriptionTagValue(newValue);
231-
}}
232-
/>
233-
<small className="form-text">
234-
{t("filter-tag-helptext")}
235-
</small>
236-
</div>
201+
<div className="mb-2">
202+
<div className="form-group">
203+
<label htmlFor="os2display-poster--select-subscription-tags">
204+
{t("filters-tag")}
205+
</label>
206+
<AsyncSelect
207+
id="subscription-search-place"
208+
isClearable
209+
isSearchable
210+
defaultOptions
211+
isMulti
212+
loadOptions={(inputValue, callback) =>
213+
loadDropdownOptions(
214+
searchEndpoint,
215+
getHeaders(),
216+
inputValue,
217+
callback,
218+
"tags"
219+
)
220+
}
221+
value={subscriptionTagValue}
222+
onChange={(newValue) => {
223+
setSubscriptionTagValue(newValue);
224+
}}
225+
/>
237226
</div>
227+
</div>
238228

239-
<div>
240-
<div className="form-group">
241-
<div>
242-
<label htmlFor="os2display-poster--select-number">
243-
{t("number-of-slides")}
244-
<select
245-
id="os2display-poster--select-number"
246-
value={subscriptionNumberValue}
247-
onChange={({ target }) =>
248-
setSubscriptionNumberValue(target.value)
249-
}
250-
>
251-
{numberOptions?.map((i) => (
252-
<option value={i + 1}>{i + 1}</option>
253-
))}
254-
</select>
255-
</label>
256-
</div>
257-
<span className="small text-muted">
258-
{t("number-of-slides-helptext")}
259-
</span>
229+
<div>
230+
<div className="form-group">
231+
<div>
232+
<label htmlFor="os2display-poster--select-number">
233+
{t("number-of-slides")}
234+
<select
235+
id="os2display-poster--select-number"
236+
value={subscriptionNumberValue}
237+
onChange={({ target }) =>
238+
setSubscriptionNumberValue(target.value)
239+
}
240+
>
241+
{numberOptions?.map((i) => (
242+
<option
243+
value={i + 1}
244+
key={`number-of-slides-option-${i}`}
245+
>
246+
{i + 1}
247+
</option>
248+
))}
249+
</select>
250+
</label>
260251
</div>
261252
</div>
262-
</Col>
263-
<div className="col-md-9">
264-
<div>
265-
<h5 className="mt-3">{t("preview-of-events")}</h5>
266-
<table className="table table-hover text-left">
267-
<thead>
268-
<tr>
269-
<th scope="col">{t("table-image")}</th>
270-
<th scope="col">{t("table-event")}</th>
271-
<th scope="col">{t("table-place")}</th>
272-
<th scope="col">{t("table-date")}</th>
273-
</tr>
274-
</thead>
275-
<tbody>
276-
{loadingResults && <Spinner animation="border" />}
277-
{subscriptionEvents?.map((event) => {
253+
</div>
254+
</Row>
255+
<Row>
256+
<div>
257+
<h5 className="mt-3">{t("preview-of-events")}</h5>
258+
{loadingResults && <Spinner animation="border" />}
259+
<table className="table table-hover text-left">
260+
<thead>
261+
<tr>
262+
<th scope="col">{t("table-image")}</th>
263+
<th scope="col">{t("table-event")}</th>
264+
<th scope="col">{t("table-place")}</th>
265+
<th scope="col">{t("table-date")}</th>
266+
</tr>
267+
</thead>
268+
<tbody>
269+
{subscriptionEvents?.length > 0 &&
270+
subscriptionEvents?.map((event) => {
278271
const firstOccurrence =
279272
event?.occurrences.length > 0
280273
? event.occurrences[0]
281274
: null;
282275

283276
return (
284-
<tr>
277+
<tr key={`event-${event.entityId}`}>
285278
<td>
286279
<img
287280
src={event?.imageUrls?.small}
@@ -310,9 +303,8 @@ function PosterSubscription({
310303
</tr>
311304
);
312305
})}
313-
</tbody>
314-
</table>
315-
</div>
306+
</tbody>
307+
</table>
316308
</div>
317309
</Row>
318310
</Col>

0 commit comments

Comments
 (0)