mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-06 14:22:52 +00:00
375 lines
12 KiB
JavaScript
375 lines
12 KiB
JavaScript
require('./archivePage.less');
|
|
|
|
const React = require('react');
|
|
const createClass = require('create-react-class');
|
|
const _ = require('lodash');
|
|
const cx = require('classnames');
|
|
|
|
const Nav = require('naturalcrit/nav/nav.jsx');
|
|
const Navbar = require('../../navbar/navbar.jsx');
|
|
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
|
const Account = require('../../navbar/account.navitem.jsx');
|
|
const NewBrew = require('../../navbar/newbrew.navitem.jsx');
|
|
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
|
const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx');
|
|
//const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
|
|
|
|
const request = require('../../utils/request-middleware.js');
|
|
|
|
const ArchivePage = createClass({
|
|
displayName: 'ArchivePage',
|
|
getDefaultProps: function () {
|
|
return {};
|
|
},
|
|
getInitialState: function () {
|
|
return {
|
|
//request
|
|
title: this.props.query.title || '',
|
|
//tags : {},
|
|
legacy: `${this.props.query.legacy === 'false' ? false : true}`,
|
|
v3: `${this.props.query.v3 === 'false' ? false : true}`,
|
|
pageSize: this.props.query.size || 10,
|
|
page: parseInt(this.props.query.page) || 1,
|
|
|
|
//response
|
|
brewCollection: null,
|
|
totalPages: null,
|
|
totalBrews: null,
|
|
|
|
searching: false,
|
|
error: null,
|
|
};
|
|
},
|
|
componentDidMount: function () {
|
|
if (this.state.title !== '') {
|
|
this.loadPage(this.state.page, false);
|
|
}
|
|
},
|
|
|
|
updateStateWithBrews: function (brews, page, totalPages, totalBrews) {
|
|
this.setState({
|
|
brewCollection: brews || null,
|
|
page: parseInt(page) || 1,
|
|
totalPages: totalPages || 1,
|
|
totalBrews: totalBrews,
|
|
searching: false,
|
|
});
|
|
},
|
|
|
|
updateUrl: function (title, page, size, v3, legacy) {
|
|
const url = new URL(window.location.href);
|
|
const urlParams = new URLSearchParams(url.search);
|
|
|
|
//clean all params
|
|
urlParams.delete('title');
|
|
urlParams.delete('page');
|
|
urlParams.delete('size');
|
|
urlParams.delete('v3');
|
|
urlParams.delete('legacy');
|
|
|
|
urlParams.set('title', title);
|
|
urlParams.set('page', page);
|
|
urlParams.set('size', size);
|
|
urlParams.set('v3', v3);
|
|
urlParams.set('legacy', legacy);
|
|
|
|
url.search = urlParams.toString(); // Convert URLSearchParams to string
|
|
window.history.replaceState(null, null, url);
|
|
},
|
|
|
|
loadPage: async function (page, update) {
|
|
//load form data directly
|
|
const title = document.getElementById('title').value || '';
|
|
const size = document.getElementById('size').value || 10;
|
|
const v3 = document.getElementById('v3').checked;
|
|
const legacy = document.getElementById('legacy').checked;
|
|
|
|
// Update state with form data for later, only when first page
|
|
if (update === true) {
|
|
this.setState({
|
|
title: title,
|
|
pageSize: size,
|
|
v3: v3,
|
|
legacy: legacy,
|
|
});
|
|
this.updateUrl(title, page, size, v3, legacy);
|
|
}
|
|
|
|
if (title !== '') {
|
|
console.log('pagesize when querying: ', this.state.pageSize);
|
|
try {
|
|
this.setState({ searching: true, error: null });
|
|
|
|
await request
|
|
.get(
|
|
`/api/archive?title=${title}&page=${page}&size=${size}&v3=${v3}&legacy=${legacy}`
|
|
)
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
this.updateStateWithBrews(
|
|
response.body.brews,
|
|
page,
|
|
response.body.totalPages,
|
|
response.body.totalBrews
|
|
);
|
|
}
|
|
});
|
|
} catch (error) {
|
|
this.setState({ error: `${error.response.status}` });
|
|
this.updateStateWithBrews([], 1, 1, 0);
|
|
}
|
|
console.log('a',
|
|
!this.state.brewCollection || this.state.brewCollection.length === 0
|
|
);
|
|
if (!this.state.brewCollection) {
|
|
this.setState({ error: '404' });
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
|
|
renderNavItems: function () {
|
|
return (
|
|
<Navbar>
|
|
<Nav.section>
|
|
<Nav.item className="brewTitle">
|
|
Archive: Search for brews
|
|
</Nav.item>
|
|
</Nav.section>
|
|
<Nav.section>
|
|
<NewBrew />
|
|
<HelpNavItem />
|
|
<RecentNavItem />
|
|
<Account />
|
|
</Nav.section>
|
|
</Navbar>
|
|
);
|
|
},
|
|
|
|
renderForm: function () {
|
|
return (
|
|
<div className="brewLookup">
|
|
<h2 className="formTitle">Brew Lookup</h2>
|
|
<div className="formContents">
|
|
<label>
|
|
Title of the brew
|
|
<input
|
|
id="title"
|
|
type="text"
|
|
name="title"
|
|
defaultValue={this.state.title}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
this.loadPage(1, true);
|
|
}
|
|
}}
|
|
placeholder="v3 Reference Document"
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Results per page
|
|
<input
|
|
id="size"
|
|
type="number"
|
|
min="6"
|
|
step="2"
|
|
max="30"
|
|
defaultValue={this.state.pageSize}
|
|
name="pageSize"
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
<input
|
|
id="v3"
|
|
type="checkbox"
|
|
defaultChecked={this.state.v3}
|
|
/>
|
|
Search for v3 brews
|
|
</label>
|
|
|
|
<label>
|
|
<input
|
|
id="legacy"
|
|
type="checkbox"
|
|
defaultChecked={this.state.legacy}
|
|
/>
|
|
Search for legacy brews
|
|
</label>
|
|
|
|
{/* In the future, we should be able to filter the results by adding tags.
|
|
<<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
|
|
placeholder='add tag' unique={true}
|
|
values={this.state.tags}
|
|
onChange={(e)=>this.handleChange('tags', e)}/>
|
|
|
|
check metadataEditor.jsx L65
|
|
*/}
|
|
|
|
<button
|
|
className="search"
|
|
onClick={() => {
|
|
this.loadPage(1, true);
|
|
}}
|
|
>
|
|
Search
|
|
<i
|
|
className={cx('fas', {
|
|
'fa-search': !this.state.searching,
|
|
'fa-spin fa-spinner': this.state.searching,
|
|
})}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
|
|
renderPaginationControls() {
|
|
const title = encodeURIComponent(this.state.title);
|
|
const size = parseInt(this.state.pageSize);
|
|
const { page, totalPages, legacy, v3 } = this.state;
|
|
const pages = new Array(totalPages).fill().map((_, index) => (
|
|
<a
|
|
key={index}
|
|
className={`pageNumber ${
|
|
page == index + 1 ? 'currentPage' : ''
|
|
}`}
|
|
href={`/archive?title=${title}&page=${
|
|
index + 1
|
|
}&size=${size}&v3=${v3}&legacy=${legacy}`}
|
|
>
|
|
{index + 1}
|
|
</a>
|
|
));
|
|
|
|
if (totalPages === null) {
|
|
return;
|
|
}
|
|
|
|
return (
|
|
<div className="paginationControls">
|
|
{page > 1 && (
|
|
<button
|
|
className="previousPage"
|
|
onClick={() => this.loadPage(page - 1, false)}
|
|
>
|
|
<<
|
|
</button>
|
|
)}
|
|
<ol className="pages">{pages}</ol>
|
|
{page < totalPages && (
|
|
<button
|
|
className="nextPage"
|
|
onClick={() => this.loadPage(page + 1, false)}
|
|
>
|
|
>>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
|
|
renderFoundBrews() {
|
|
console.log('State when rendering:');
|
|
console.table(this.state);
|
|
const { title, brewCollection, page, totalPages, error, searching } =
|
|
this.state;
|
|
|
|
if (searching) {
|
|
return (
|
|
<div className="foundBrews searching">
|
|
<h3 className="searchAnim">Searching</h3>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (title === '') {
|
|
return (
|
|
<div className="foundBrews noBrews">
|
|
<h3>Whenever you want, just start typing...</h3>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
console.log('render Error: ', error);
|
|
let errorMessage;
|
|
switch (error.errorCode) {
|
|
case '404':
|
|
errorMessage = "404 - We didn't find any brew";
|
|
break;
|
|
case '503':
|
|
errorMessage =
|
|
' 503 - Your search is not specific enough. Too many brews meet this criteria for us to display them.';
|
|
break;
|
|
case '500':
|
|
errorMessage = "500 - We don't know what happened.";
|
|
default:
|
|
errorMessage = 'An unexpected error occurred';
|
|
}
|
|
|
|
return (
|
|
<div className="foundBrews noBrews">
|
|
<h3>Error: {errorMessage}</h3>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!brewCollection || brewCollection.length === 0) {
|
|
return (
|
|
<div className="foundBrews noBrews">
|
|
<h3>No brews found</h3>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="foundBrews">
|
|
<span className="totalBrews">
|
|
Brews found: {this.state.totalBrews}
|
|
</span>
|
|
{brewCollection.map((brew, index) => (
|
|
<BrewItem
|
|
brew={brew}
|
|
key={index}
|
|
reportError={this.props.reportError}
|
|
/>
|
|
))}
|
|
{this.renderPaginationControls()}
|
|
</div>
|
|
);
|
|
},
|
|
|
|
render: function () {
|
|
return (
|
|
<div className="archivePage">
|
|
<link href="/themes/V3/Blank/style.css" rel="stylesheet" />
|
|
<link href="/themes/V3/5ePHB/style.css" rel="stylesheet" />
|
|
{this.renderNavItems()}
|
|
|
|
<div className="content">
|
|
<div className="welcome">
|
|
<h1>Welcome to the Archive</h1>
|
|
</div>
|
|
<div className="flexGroup">
|
|
<div className="form dataGroup">
|
|
{this.renderForm()}
|
|
</div>
|
|
<div className="resultsContainer dataGroup">
|
|
<div className="title">
|
|
<h2>Your results, my lordship</h2>
|
|
</div>
|
|
{this.renderFoundBrews()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
module.exports = ArchivePage;
|