f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-02 21:32:42 +00:00
Code Wiki Activity

linting and remove async conflict

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-05-07 10:14:46 +02:00
parent 40ac8b1909
commit f9f2e604c0
2 changed files with 353 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

613
client/homebrew/pages/archivePage/archivePage.jsx
View File

@@ -1,197 +1,203 @@
require('./archivePage.less'); require('./archivePage.less');
const React = require('react'); const React = require('react');
const createClass = require('create-react-class'); const createClass = require('create-react-class');
const _ = require('lodash'); const _ = require('lodash');
const cx = require('classnames'); const cx = require('classnames');
const Nav = require('naturalcrit/nav/nav.jsx'); const Nav = require('naturalcrit/nav/nav.jsx');
const Navbar = require('../../navbar/navbar.jsx'); const Navbar = require('../../navbar/navbar.jsx');
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both; const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
const Account = require('../../navbar/account.navitem.jsx'); const Account = require('../../navbar/account.navitem.jsx');
const NewBrew = require('../../navbar/newbrew.navitem.jsx'); const NewBrew = require('../../navbar/newbrew.navitem.jsx');
const HelpNavItem = require('../../navbar/help.navitem.jsx'); const HelpNavItem = require('../../navbar/help.navitem.jsx');
const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx'); const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx');
//const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx'); //const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
const request = require('../../utils/request-middleware.js'); const request = require('../../utils/request-middleware.js');
const ArchivePage = createClass({ const ArchivePage = createClass({
displayName : 'ArchivePage', displayName: 'ArchivePage',
getDefaultProps : function () { getDefaultProps: function () {
return {}; return {};
}, },
getInitialState : function () { getInitialState: function () {
return { return {
//request //request
title : this.props.query.title || '', title: this.props.query.title || '',
//tags : {}, //tags : {},
legacy : `${this.props.query.legacy === 'false' ? false : true }`, legacy: `${this.props.query.legacy === 'false' ? false : true}`,
v3 : `${this.props.query.v3 === 'false' ? false : true }`, v3: `${this.props.query.v3 === 'false' ? false : true}`,
pageSize : this.props.query.size || 10, pageSize: this.props.query.size || 10,
page : parseInt(this.props.query.page) || 1, page: parseInt(this.props.query.page) || 1,
//response //response
brewCollection : null, brewCollection: null,
totalPages : null, totalPages: null,
totalBrews : null, totalBrews: null,
searching : false, searching: false,
error : null, error: null,
}; };
}, },
componentDidMount : function() { componentDidMount: function () {
if (this.state.title !== '') { if (this.state.title !== '') {
this.loadPage(this.state.page, false); 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,
});
},
updateStateWithBrews : function (brews, page, totalPages, totalBrews) { updateUrl: function (title, page, size, v3, legacy) {
this.setState({ const url = new URL(window.location.href);
brewCollection : brews || null, const urlParams = new URLSearchParams(url.search);
page : parseInt(page) || 1,
totalPages : totalPages || 1,
totalBrews : totalBrews,
searching : false
});
},
updateStateWithForm : function() { //clean all params
const title = document.getElementById( 'title' ).value || ""; urlParams.delete('title');
const size = document.getElementById( 'size' ).value || 10; urlParams.delete('page');
const page = 1; urlParams.delete('size');
const v3 = document.getElementById('v3').checked; urlParams.delete('v3');
const legacy = document.getElementById('legacy').checked; urlParams.delete('legacy');
this.setState({ urlParams.set('title', title);
title: title, urlParams.set('page', page);
pageSize: size, urlParams.set('size', size);
v3: v3, urlParams.set('v3', v3);
legacy: legacy urlParams.set('legacy', legacy);
});
this.updateUrl(title, page, size, v3, 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 !== '') {
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 || brewCollection.length === 0
);
if (!this.state.brewCollection) {
this.setState({ error: '404' });
}
}
updateUrl : function(title, page, size, v3, legacy) { },
const url = new URL(window.location.href);
const urlParams = new URLSearchParams(url.search);
//clean all params renderNavItems: function () {
urlParams.delete('title'); return (
urlParams.delete('page'); <Navbar>
urlParams.delete('size'); <Nav.section>
urlParams.delete('v3'); <Nav.item className="brewTitle">
urlParams.delete('legacy'); Archive: Search for brews
</Nav.item>
</Nav.section>
<Nav.section>
<NewBrew />
<HelpNavItem />
<RecentNavItem />
<Account />
</Nav.section>
</Navbar>
);
},
urlParams.set('title', title); renderForm: function () {
urlParams.set('page', page); return (
urlParams.set('size', size); <div className="brewLookup">
urlParams.set('v3', v3); <h2 className="formTitle">Brew Lookup</h2>
urlParams.set('legacy', legacy); <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"
name="pageSize"
/>
</label>
url.search = urlParams.toString(); // Convert URLSearchParams to string <label>
window.history.replaceState(null, null, url); <input
}, id="v3"
type="checkbox"
defaultChecked={this.state.v3}
/>
Search for v3 brews
</label>
loadPage : async function(page, update) { <label>
if(update === true) { <input
this.updateStateWithForm(); id="legacy"
}; type="checkbox"
if (title !== '') { defaultChecked={this.state.legacy}
try { />
this.setState({ searching: true, error: null }); Search for legacy brews
</label>
const title = encodeURIComponent(this.state.title); {/* In the future, we should be able to filter the results by adding tags.
const size = parseInt(this.state.pageSize);
const {legacy, v3} = this.state;
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(!this.state.brewCollection || 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"
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}$/]} <<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
placeholder='add tag' unique={true} placeholder='add tag' unique={true}
values={this.state.tags} values={this.state.tags}
@@ -200,136 +206,167 @@ const ArchivePage = createClass({
check metadataEditor.jsx L65 check metadataEditor.jsx L65
*/} */}
<button <button
className='search' className="search"
onClick={()=>{ onClick={() => {
this.loadPage(1, true); this.loadPage(1, true);
}}> }}
Search >
<i Search
className={cx('fas', { <i
'fa-search' : !this.state.searching, className={cx('fas', {
'fa-spin fa-spinner' : this.state.searching, 'fa-search': !this.state.searching,
})} 'fa-spin fa-spinner': this.state.searching,
/> })}
</button> />
</div> </button>
</div> </div>
); </div>
}, );
},
renderPaginationControls() { renderPaginationControls() {
const title = encodeURIComponent(this.state.title); const title = encodeURIComponent(this.state.title);
const size = parseInt(this.state.pageSize); const size = parseInt(this.state.pageSize);
const {page, totalPages, legacy, v3} = this.state; const { page, totalPages, legacy, v3 } = this.state;
const pages = new Array(totalPages).fill().map((_, index) => ( 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> <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;} if (totalPages === null) {
return;
}
return ( return (
<div className="paginationControls"> <div className="paginationControls">
{page > 1 && ( {page > 1 && (
<button <button
className="previousPage" className="previousPage"
onClick={() => this.loadPage(page - 1, false)} onClick={() => this.loadPage(page - 1, false)}
> >
&lt;&lt; &lt;&lt;
</button> </button>
)} )}
<ol className='pages'>{pages}</ol> <ol className="pages">{pages}</ol>
{page < totalPages && ( {page < totalPages && (
<button className="nextPage" onClick={() => this.loadPage(page + 1, false)}> <button
&gt;&gt; className="nextPage"
</button> onClick={() => this.loadPage(page + 1, false)}
)} >
</div> &gt;&gt;
); </button>
}, )}
</div>
);
},
renderFoundBrews() { renderFoundBrews() {
console.table(this.state); console.log('State when rendering:');
const { title, brewCollection, page, totalPages, error, searching } = this.state; console.table(this.state);
const { title, brewCollection, page, totalPages, error, searching } =
this.state;
if(searching) { if (searching) {
return ( return (
<div className='foundBrews searching'> <div className="foundBrews searching">
<h3 className='searchAnim'>Searching</h3> <h3 className="searchAnim">Searching</h3>
</div> </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';
}
if(title === '') {return (<div className='foundBrews noBrews'><h3>Whenever you want, just start typing...</h3></div>);} return (
<div className="foundBrews noBrews">
<h3>Error: {errorMessage}</h3>
</div>
);
}
if (error) { if (!brewCollection || brewCollection.length === 0) {
console.log('render Error: ', error); return (
let errorMessage; <div className="foundBrews noBrews">
switch (error.errorCode) { <h3>No brews found</h3>
case '404': </div>
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 ( return (
<div className='foundBrews noBrews'> <div className="foundBrews">
<h3>Error: {errorMessage}</h3> <span className="totalBrews">
</div> Brews found: {this.state.totalBrews}
); </span>
}; {brewCollection.map((brew, index) => (
<BrewItem
brew={brew}
key={index}
reportError={this.props.reportError}
/>
))}
{this.renderPaginationControls()}
</div>
);
},
if (!brewCollection || brewCollection.length === 0) { render: function () {
return ( return (
<div className='foundBrews noBrews'> <div className="archivePage">
<h3>No brews found</h3> <link href="/themes/V3/Blank/style.css" rel="stylesheet" />
</div> <link href="/themes/V3/5ePHB/style.css" rel="stylesheet" />
); {this.renderNavItems()}
};
return ( <div className="content">
<div className='foundBrews'> <div className="welcome">
<span className='totalBrews'>Brews found: {this.state.totalBrews}</span> <h1>Welcome to the Archive</h1>
{brewCollection.map((brew, index)=>( </div>
<BrewItem brew={brew} key={index} reportError={this.props.reportError} /> <div className="flexGroup">
))} <div className="form dataGroup">
{this.renderPaginationControls()} {this.renderForm()}
</div> </div>
); <div className="resultsContainer dataGroup">
}, <div className="title">
<h2>Your results, my lordship</h2>
render : function () { </div>
return ( {this.renderFoundBrews()}
<div className='archivePage'> </div>
<link href='/themes/V3/Blank/style.css' rel='stylesheet'/> </div>
<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/> </div>
{this.renderNavItems()} </div>
);
<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; module.exports = ArchivePage;

31
server/archive.api.js
View File

@@ -8,12 +8,18 @@ const archive = {
findBrews: async (req, res, next) => { findBrews: async (req, res, next) => {
try { try {
/* /*
//log db name and collection name, for local purposes
const dbName = HomebrewModel.db.name; const dbName = HomebrewModel.db.name;
console.log("Database Name:", dbName); console.log("Database Name:", dbName);
const collectionName = HomebrewModel.collection.name; const collectionName = HomebrewModel.collection.name;
console.log("Collection Name:", collectionName); console.log("Collection Name:", collectionName);
*/ */
const bright = '\x1b[1m'; // Bright (bold) style
const yellow = '\x1b[93m'; // yellow color
const reset = '\x1b[0m'; // Reset to default style
console.log(`Query as received in ${bright + yellow}archive api${reset}:`);
console.table(req.query); console.table(req.query);
const title = req.query.title || ''; const title = req.query.title || '';
@@ -88,11 +94,26 @@ const archive = {
return res.json({ brews, page, totalPages, totalBrews }); return res.json({ brews, page, totalPages, totalBrews });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
console.log('error status number: ', error.response.status);
if (error.response && error.response.status === 503) { if (error.response && error.response.status) {
return res const status = error.response.status;
.status(503)
.json({ errorCode: '503', message: 'Service Unavailable' }); if (status === 500) {
return res.status(500).json({
errorCode: '500',
message: 'Internal Server Error',
});
} else if (status === 503) {
return res.status(503).json({
errorCode: '503',
message: 'Service Unavailable',
});
} else {
return res.status(status).json({
errorCode: status.toString(),
message: 'Internal Server Error',
});
}
} else { } else {
return res.status(500).json({ return res.status(500).json({
errorCode: '500', errorCode: '500',