Search admin and indexing improvements

src/client/components/pages/admin-panel-search.tsx

@@ -145,6 +145,7 @@ class AdminPanelSearchPage extends React.Component<Props, State> {
 				</Card.Header>
 				<Card.Body>
 					<div id="pageWithPagination">
+						<h3>User search</h3>
 						<AdminPanelSearchField
 							query={query}
 							onSearch={this.handleSearch}

src/client/components/pages/searchAdmin.tsx

@@ -0,0 +1,123 @@
+/* eslint-disable react/jsx-no-bind */
+
+import {Alert, Button, Card, Spinner} from 'react-bootstrap';
+import React, {useCallback, useState} from 'react';
+import {faCheck, faListCheck, faTriangleExclamation} from '@fortawesome/free-solid-svg-icons';
+import {ENTITY_TYPE_ICONS} from '../../helpers/entity';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
+
+export default function SearchAdminPage() {
+	const [loading, setLoading] = useState(false);
+	const [errorMessage, setErrorMessage] = useState<string>();
+	const [success, setSuccess] = useState(false);
+	const indexEntity = useCallback(async (entityType?:string) => {
+		let url = '/search/reindex';
+		if (entityType) {
+			url += `?type=${entityType}`;
+		}
+		setSuccess(false);
+		setLoading(true);
+		try {
+			const res = await fetch(url, {headers: {'Request-Timeout': '600'}});
+			if (!res.ok) {
+				const body = await res.json();
+				const err = body?.error;
+				throw new Error(err || res.statusText);
+			}
+			setSuccess(true);
+		}
+		catch (error) {
+			setErrorMessage(error.toString());
+		}
+		setLoading(false);
+	}, []);
+	return (
+		<Card>
+			<Card.Header as="h2">
+				Search indexing
+			</Card.Header>
+			<Card.Body>
+				<div
+					style={
+						{
+							display: 'flex',
+							flexWrap: 'wrap',
+							gap: '0.5em',
+							justifyContent: 'space-evenly'
+						}
+					}
+				>
+					<Button onClick={() => { indexEntity('Author'); }}>
+						<FontAwesomeIcon
+							icon={ENTITY_TYPE_ICONS.Author}
+							size="2x"
+						/>
+					</Button>
+
+					<Button onClick={() => { indexEntity('Work'); }}>
+						<FontAwesomeIcon
+							icon={ENTITY_TYPE_ICONS.Work}
+							size="2x"
+						/>
+					</Button>
+					<Button onClick={() => { indexEntity('Edition'); }}>
+						<FontAwesomeIcon
+							icon={ENTITY_TYPE_ICONS.Edition}
+							size="2x"
+						/>
+					</Button>
+					<Button onClick={() => { indexEntity('EditionGroup'); }}>
+						<FontAwesomeIcon
+							icon={ENTITY_TYPE_ICONS.EditionGroup}
+							size="2x"
+						/>
+					</Button>
+					<Button onClick={() => { indexEntity('Publisher'); }}>
+						<FontAwesomeIcon
+							icon={ENTITY_TYPE_ICONS.Publisher}
+							size="2x"
+						/>
+					</Button>
+					<Button onClick={() => { indexEntity('Series'); }}>
+						<FontAwesomeIcon
+							icon={ENTITY_TYPE_ICONS.Series}
+							size="2x"
+						/>
+					</Button>
+					<Button onClick={() => { indexEntity('Area'); }}>
+						<FontAwesomeIcon
+							icon={ENTITY_TYPE_ICONS.Area}
+							size="2x"
+						/>
+					</Button>
+					<Button onClick={() => { indexEntity('Collection'); }}>
+						<FontAwesomeIcon
+							icon={ENTITY_TYPE_ICONS.Collection}
+							size="2x"
+						/>
+					</Button>
+					<Button size="lg" variant="warning" onClick={() => { indexEntity(); }}>
+						<FontAwesomeIcon
+							icon={faListCheck}
+						/> All entities
+					</Button>
+				</div>
+				<br/>
+				<div>
+					{loading && <><Spinner animation="border"/> In progress...</>}
+					{success &&
+					<Alert dismissible variant="success" onClose={() => { setSuccess(false); }}>
+						<FontAwesomeIcon icon={faCheck}/> Success
+					</Alert>
+					}
+					{errorMessage &&
+					<Alert dismissible variant="danger" onClose={() => { setErrorMessage(''); }}>
+						<FontAwesomeIcon icon={faTriangleExclamation}/> {errorMessage}
+					</Alert>
+					}
+				</div>
+			</Card.Body>
+		</Card>
+	);
+}

src/client/containers/layout.js

@@ -197,9 +197,9 @@ class Layout extends React.Component {
 
 		const reindexSearchEngineOption = (
 			<>
-				<NavDropdown.Item href="/search/reindex">
+				<NavDropdown.Item href="/search-admin">
 					<FontAwesomeIcon fixedWidth className="margin-right-0-3" icon={faSearchengin}/>
-					Reindex Search Server
+					Search Admin
 				</NavDropdown.Item>
 			</>
 		);

src/client/controllers/admin/searchAdmin.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2023 Shivam Awasthi
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import {extractChildProps, extractLayoutProps} from '../../helpers/props';
+import {AppContainer} from 'react-hot-loader';
+import Layout from '../../containers/layout';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SearchAdminPage from '../../components/pages/searchAdmin';
+
+
+const propsTarget = document.getElementById('props');
+const props = propsTarget ? JSON.parse(propsTarget.innerHTML) : {};
+
+const markup = (
+	<AppContainer>
+		<Layout {...extractLayoutProps(props)}>
+			<SearchAdminPage
+				user={props.user}
+				{...extractChildProps(props)}
+			/>
+		</Layout>
+	</AppContainer>
+);
+
+ReactDOM.hydrate(markup, document.getElementById('target'));
+
+/*
+ * As we are not exporting a component,
+ * we cannot use the react-hot-loader module wrapper,
+ * but instead directly use webpack Hot Module Replacement API
+ */
+
+if (module.hot) {
+	module.hot.accept();
+}