0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 22:52:39 +00:00

linting and space issues

This commit is contained in:
Víctor Losada Hernández
2024-01-23 08:07:51 +01:00
parent 7951c4a03a
commit 0dff59d793
2 changed files with 158 additions and 119 deletions

View File

@@ -1,139 +1,178 @@
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 Moment = require('moment'); const Moment = require('moment');
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 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 request = require('superagent'); const request = require('superagent');
const ArchivePage = createClass({ const ArchivePage = createClass({
displayName : 'ArchivePage', displayName: 'ArchivePage',
getDefaultProps : function() { getDefaultProps: function () {
return {}; return {};
}, },
getInitialState : function() { getInitialState: function () {
return { return {
query : '', query : '',
foundBrews : null, foundBrews : null,
searching : false, searching : false,
error : null error : null,
}; };
}, },
handleChange(e){ handleChange(e) {
this.setState({ query: e.target.value }); this.setState({ query: e.target.value });
}, },
lookup(){ lookup() {
this.setState({ searching: true, error: null }); this.setState({ searching: true, error: null });
request.get(`/admin/archive/${this.state.query}`) request
.then((res)=>this.setState({ foundBrews: res.body })) .get(`/admin/archive/${this.state.query}`)
.catch((err)=>this.setState({ error: err })) .then((res) => this.setState({ foundBrews: res.body }))
.finally(()=>this.setState({ searching: false })); .catch((err) => this.setState({ error: err }))
}, .finally(() => this.setState({ searching: false }));
renderFoundBrews() { },
const brews = this.state.foundBrews; renderFoundBrews() {
const brews = this.state.foundBrews;
if (!brews || brews.length === 0) { if (!brews || brews.length === 0) {
return <div>No brews found.</div>; return <div>No brews found.</div>;
} }
return ( return (
<div className='foundBrews'> <div className='foundBrews'>
{brews.map((brew, index) => ( {brews.map((brew, index) => (
<div key={index} className='brewItem'> <div key={index} className='brewItem'>
<dl> <dl>
<dt>Title:</dt> <dt>Title:</dt>
<dd>{brew.title}</dd> <dd>{brew.title}</dd>
<dt>Authors:</dt> <dt>Authors:</dt>
<dd> <dd>
{brew.authors.map((author, index) => ( {brew.authors.map((author, index) => (
<span key={index}> <span key={index}>
<a href={`/user/${author}`} target='_blank' rel='noopener noreferrer'> <a
{author} href={`/user/${author}`}
</a> target='_blank'
{index < brew.authors.length - 1 && ', '} rel='noopener noreferrer'
>
{author}
</a>
{index < brew.authors.length - 1 && ', '}
</span>
))}
</dd>
<a href={`/share/${brew.shareId}`}>
Check the brew <i className='fas fa-external-link-alt'></i>
</a>
<dt>Systems:</dt>
<dd>{brew.systems.join(', ')}</dd>
{brew.tags?.length ? (
<>
<div
className='brewTags'
title={`Tags:\n${brew.tags.join('\n')}`}
>
<i className='fas fa-tags' />
{brew.tags.map((tag, idx) => {
const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
return (
<span key={idx} className={matches[1]}>
{matches[2]}
</span> </span>
))} );
</dd> })}
</div>
</>
) : (
<></>
)}
<a href={`/share/${brew.shareId}`}>Check the brew</a> <dt>Last Updated:</dt>
<dd>{Moment(brew.updatedAt).fromNow()}</dd>
<dt>Last Updated</dt> <dt>Num of Views:</dt>
<dd>{Moment(brew.updatedAt).fromNow()}</dd> <dd>{brew.views}</dd>
</dl>
<dt>Num of Views</dt>
<dd>{brew.views}</dd>
</dl>
</div>
))}
</div> </div>
); ))}
}, </div>
);
},
renderForm: function() { renderForm: function () {
return <div className='brewLookup'> return (
<h2>Brew Lookup</h2> <div className='brewLookup'>
<label>Title of the brew</label><input type='text' value={this.state.query} onChange={this.handleChange} placeholder='v3 Reference Document'/> <h2>Brew Lookup</h2>
{/* In the future, we should be able to filter the results by adding tags. <label>Title of the brew</label>
<label>Tags</label><input type="text" value={this.state.query} placeholder='add a tag to filter'/> <input
type='text'
value={this.state.query}
onChange={this.handleChange}
placeholder='v3 Reference Document'
/>
{/* In the future, we should be able to filter the results by adding tags.
<label>Tags</label><input type='text' value={this.state.query} placeholder='add a tag to filter'/>
*/} */}
<button onClick={this.lookup}> <button onClick={this.lookup}>
<i 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>
);
},
renderResults : function() { renderResults: function () {},
}, renderNavItems: function () {
return (
<Navbar>
<Nav.section>
<NewBrew />
<HelpNavItem />
<RecentNavItem />
<Account />
</Nav.section>
</Navbar>
);
},
renderNavItems : function() { render: function () {
return <Navbar> return (
<Nav.section> <div className='archivePage'>
<NewBrew /> {this.renderNavItems()}
<HelpNavItem />
<RecentNavItem />
<Account />
</Nav.section>
</Navbar>;
},
render : function() { <div className='content'>
return <div className='archivePage'> <div className='welcome'>
{this.renderNavItems()} <h1>Welcome to the Archive</h1>
</div>
<div className='content'> <div className='flexGroup'>
<div className='welcome'> <div className='form dataGroup'>{this.renderForm()}</div>
<h1>Welcome to the Archive</h1> <div className='resultsContainer dataGroup'>
</div> <div className='title'>
<div className='flexGroup'> <h2>Your results, my lordship</h2>
<div className='form dataGroup'> </div>
{this.renderForm()} {this.renderFoundBrews()}
</div>
<div className='resultsContainer dataGroup'>
<div className='title'>
<h2>Your results, my lordship</h2>
</div>
{this.renderFoundBrews()}
</div>
</div>
</div> </div>
</div>
</div> </div>
} </div>
);
},
}); });
module.exports = ArchivePage; module.exports = ArchivePage;

View File

@@ -83,7 +83,7 @@
.brewItem { .brewItem {
background-image: url('/assets/parchmentBackground.jpg'); background-image: url('/assets/parchmentBackground.jpg');
width:500px; width:450px;
height:auto; height:auto;
min-height:unset; min-height:unset;
overflow:visible; overflow:visible;