From f9f2e604c07e536811f01bb957ecaaa1a5865cd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 7 May 2024 10:14:46 +0200 Subject: [PATCH] linting and remove async conflict --- .../pages/archivePage/archivePage.jsx | 617 ++++++++++-------- server/archive.api.js | 31 +- 2 files changed, 353 insertions(+), 295 deletions(-) diff --git a/client/homebrew/pages/archivePage/archivePage.jsx b/client/homebrew/pages/archivePage/archivePage.jsx index 37923dd5d..9f5068a28 100644 --- a/client/homebrew/pages/archivePage/archivePage.jsx +++ b/client/homebrew/pages/archivePage/archivePage.jsx @@ -1,197 +1,203 @@ require('./archivePage.less'); -const React = require('react'); +const React = require('react'); const createClass = require('create-react-class'); -const _ = require('lodash'); -const cx = require('classnames'); +const _ = require('lodash'); +const cx = require('classnames'); -const Nav = require('naturalcrit/nav/nav.jsx'); -const Navbar = require('../../navbar/navbar.jsx'); +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 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, + 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, + //response + brewCollection: null, + totalPages: null, + totalBrews: null, - searching : false, - error : null, - }; - }, - componentDidMount : function() { - if (this.state.title !== '') { - this.loadPage(this.state.page, false); - } - - }, + 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 - }); - }, + updateStateWithBrews: function (brews, page, totalPages, totalBrews) { + this.setState({ + brewCollection: brews || null, + page: parseInt(page) || 1, + totalPages: totalPages || 1, + totalBrews: totalBrews, + searching: false, + }); + }, - updateStateWithForm : function() { - const title = document.getElementById( 'title' ).value || ""; - const size = document.getElementById( 'size' ).value || 10; - const page = 1; - const v3 = document.getElementById('v3').checked; - const legacy = document.getElementById('legacy').checked; + updateUrl: function (title, page, size, v3, legacy) { + const url = new URL(window.location.href); + const urlParams = new URLSearchParams(url.search); - this.setState({ - title: title, - pageSize: size, - v3: v3, - legacy: legacy - }); - this.updateUrl(title, page, size, v3, legacy); - }, + //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); - updateUrl : function(title, page, size, v3, legacy) { - const url = new URL(window.location.href); - const urlParams = new URLSearchParams(url.search); + url.search = urlParams.toString(); // Convert URLSearchParams to string + window.history.replaceState(null, null, url); + }, - //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); - + 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; - url.search = urlParams.toString(); // Convert URLSearchParams to string - window.history.replaceState(null, null, url); - }, + // 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); + } - loadPage : async function(page, update) { - if(update === true) { - this.updateStateWithForm(); - }; - if (title !== '') { - try { - this.setState({ searching: true, error: null }); - - const title = encodeURIComponent(this.state.title); - 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'}); - } - } - - }, + if (title !== '') { + try { + this.setState({ searching: true, error: null }); - renderNavItems : function () { - return ( - - - Archive: Search for brews - - - - - - - - - ); - }, + 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' }); + } + } - renderForm : function () { - return ( -
-

Brew Lookup

-
- - - + + }, - + renderNavItems: function () { + return ( + + + + Archive: Search for brews + + + + + + + + + + ); + }, - - + renderForm: function () { + return ( +
+

Brew Lookup

+
+ - {/* In the future, we should be able to filter the results by adding tags. + + + + + + + {/* In the future, we should be able to filter the results by adding tags. <{ - this.loadPage(1, true); - }}> - Search - - -
-
- ); - }, + +
+
+ ); + }, - 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) => ( - {index + 1} - )); - - if(totalPages === null) {return;} - - return ( -
- {page > 1 && ( - - )} -
    {pages}
- {page < totalPages && ( - - )} -
- ); - }, + 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) => ( + + {index + 1} + + )); - renderFoundBrews() { - console.table(this.state); - const { title, brewCollection, page, totalPages, error, searching } = this.state; - - if(searching) { - return ( -
-

Searching

-
- ); - }; + if (totalPages === null) { + return; + } + return ( +
+ {page > 1 && ( + + )} +
    {pages}
+ {page < totalPages && ( + + )} +
+ ); + }, + renderFoundBrews() { + console.log('State when rendering:'); + console.table(this.state); + const { title, brewCollection, page, totalPages, error, searching } = + this.state; - if(title === '') {return (

Whenever you want, just start typing...

);} + if (searching) { + return ( +
+

Searching

+
+ ); + } - 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 ( -
-

Error: {errorMessage}

-
- ); - }; + if (title === '') { + return ( +
+

Whenever you want, just start typing...

+
+ ); + } - if (!brewCollection || brewCollection.length === 0) { - return ( -
-

No brews found

-
- ); - }; - - return ( -
- Brews found: {this.state.totalBrews} - {brewCollection.map((brew, index)=>( - - ))} - {this.renderPaginationControls()} -
- ); - }, + 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'; + } - render : function () { - return ( -
- - - {this.renderNavItems()} + return ( +
+

Error: {errorMessage}

+
+ ); + } -
-
-

Welcome to the Archive

-
-
-
{this.renderForm()}
-
-
-

Your results, my lordship

-
- {this.renderFoundBrews()} -
-
-
-
- ); - }, + if (!brewCollection || brewCollection.length === 0) { + return ( +
+

No brews found

+
+ ); + } + + return ( +
+ + Brews found: {this.state.totalBrews} + + {brewCollection.map((brew, index) => ( + + ))} + {this.renderPaginationControls()} +
+ ); + }, + + render: function () { + return ( +
+ + + {this.renderNavItems()} + +
+
+

Welcome to the Archive

+
+
+
+ {this.renderForm()} +
+
+
+

Your results, my lordship

+
+ {this.renderFoundBrews()} +
+
+
+
+ ); + }, }); module.exports = ArchivePage; diff --git a/server/archive.api.js b/server/archive.api.js index 9fa87eb80..ee1be4b7a 100644 --- a/server/archive.api.js +++ b/server/archive.api.js @@ -8,12 +8,18 @@ const archive = { findBrews: async (req, res, next) => { try { /* + //log db name and collection name, for local purposes const dbName = HomebrewModel.db.name; console.log("Database Name:", dbName); const collectionName = HomebrewModel.collection.name; 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); const title = req.query.title || ''; @@ -88,11 +94,26 @@ const archive = { return res.json({ brews, page, totalPages, totalBrews }); } catch (error) { console.error(error); - console.log('error status number: ', error.response.status); - if (error.response && error.response.status === 503) { - return res - .status(503) - .json({ errorCode: '503', message: 'Service Unavailable' }); + + if (error.response && error.response.status) { + const status = error.response.status; + + 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 { return res.status(500).json({ errorCode: '500',