Age Gate / 3.7.3

Age Gate v3.7.3

age-gate / src / Resources / assets / js / admin / modules / react / gallery.js

gallery.js in Age Gate 3.7.3, at src/Resources/assets/js/admin/modules/react/gallery.js

193 lines 5.5 KB

Raw Download Zip

1	import React, { useState, useEffect } from "react";
2	import { Error } from "./Error";
3
4
5	const Gallery = (type = null) => {
6	const [selected, setSelected] = useState();
7	const [items, setItems] = useState([]);
8	const [page, setPage] = useState(1);
9	const [perpage, setPerpage] = useState();
10	const [total, setTotal] = useState();
11	const [next, setNext] = useState(1);
12	const [types, setTypes] = useState(['image', 'video']);
13	const [search, setSearch] = useState('');
14	const [error, setError] = useState(false);
15	const [working, setWorking] = useState(false);
16
17	const update = () => {
18
19	const { agPreSelected } = window;
20	setSelected(agPreSelected);
21	}
22
23	useEffect(() => {
24	window.addEventListener('ag_gallery_update', update);
25
26	return () => {
27	window.removeEventListener('ag_gallery_update', update);
28	};
29	}, []);
30
31	useEffect(() => {
32	update();
33	}, []);
34
35	useEffect(() => {
36	setTypes(type);
37	}, []);
38
39	useEffect(() => {
40	if (search) {
41	return;
42	}
43	setWorking(true);
44	const { agPreSelected } = window;
45
46	const {
47	ag_admin: {
48	nonce,
49	rest_url,
50	}
51	} = window;
52
53
54	const url = new URL(rest_url);
55
56	url.searchParams.append('page', page);
57	url.searchParams.append('in', agPreSelected);
58
59	console.log(url);
60
61	fetch(url.href, {
62	headers: {
63	'X-WP-Nonce': nonce
64	}
65	})
66	.then(r => r.json())
67	.then((data) => {
68
69	const {
70	assets,
71	perPage,
72	total,
73	next,
74	data: {
75	status
76	}
77	} = data;
78
79	if (status !== 200) {
80	setError(true);
81	} else {
82
83	setItems(items.concat(assets));
84	setNext(next);
85	setTotal(total);
86	setPerpage(perPage);
87	}
88	setWorking(false);
89	})
90	.catch(err => setError(err));
91	}, [page, search]);
92
93	useEffect(() => {
94	if (search.length < 3) {
95	return;
96	}
97	setWorking(true);
98	const { ag_admin: { nonce, rest_url } } = window;
99
100	const url = new URL(rest_url);
101
102	url.searchParams.append('page', page);
103	url.searchParams.append('in', agPreSelected);
104
105	fetch(url.href, {
106	headers: {
107	'X-WP-Nonce': nonce
108	}
109	})
110	.then(r => r.json())
111	.then((data) => {
112	const {
113	assets,
114	} = data;
115
116	setItems(assets);
117	setWorking(false);
118	})
119	.catch(err => setError(true));
120	}, [search]);
121
122	const updateScroll = () => {
123	const element = document.querySelector(".age-gate-gallery__items");
124	element.scrollTop = element.scrollHeight;
125	}
126
127	const {
128	ag_admin: {
129	labels: {
130	search: searchLabel,
131	more,
132	loading,
133	}
134	}
135	} = window;
136
137
138	return (
139	<div className="age-gate-gallery">
140	<div className="age-gate-gallery__toolbar">
141	<input
142	type="search"
143	placeholder={searchLabel}
144	onChange={(e) => setSearch(e.target.value)}
145	/>
146	</div>
147	{ items && items.length ?
148	<>
149	<div className="age-gate-gallery__items">
150	{items.map((item) => {
151	const {
152	id,
153	thumbnail,
154	full,
155	type,
156	} = item;
157
158	return (
159	<div key={id} className="age-gate-gallery__item">
160	<label className="age-gate-gallery__label">
161	<input
162	type="radio"
163	name="media"
164	value={id}
165	onChange={() => setSelected(id)}
166	checked={selected == id}
167	data-full={full}
168	data-type={type}
169	/>
170	<span className="age-gate-gallery__inner">
171	<img
172	src={thumbnail}
173	alt=""
174	onLoad={() => updateScroll()}
175	/>
176	</span>
177	</label>
178	</div>
179	);
180	})}
181	</div>
182	<p>{Math.min(items.length, total)} / {total}</p>
183	{next ? <button type="button" className="button button-primary" disabled={working} onClick={() => setPage(page + 1)}>{working ? loading : more}</button> : ''}
184	</>
185	: ''}
186	{ error ? <Error /> : ''}
187	</div>
188	);
189	}
190
191	// export { setSelected };
192	export default Gallery;
193