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:
@@ -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;
|
||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user