linting and space issues

client/homebrew/pages/archivePage/archivePage.jsx

@@ -1,139 +1,178 @@
 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 Moment = require('moment');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
+const _           = require('lodash');
+const cx          = require('classnames');
+const Moment      = require('moment');
 
+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 Account       = require('../../navbar/account.navitem.jsx');
+const NewBrew       = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem   = require('../../navbar/help.navitem.jsx');
 
 const request = require('superagent');
 
 const ArchivePage = createClass({
-    displayName : 'ArchivePage',
-    getDefaultProps : function() {
-        return {};
-    },
-    getInitialState : function() {
-        return {
-            query     : '',
-			foundBrews : null,
-			searching : false,
-			error     : null
-        };
-    },
-    handleChange(e){
-		this.setState({ query: e.target.value });
-	},
-	lookup(){
-		this.setState({ searching: true, error: null });
+  displayName: 'ArchivePage',
+  getDefaultProps: function () {
+    return {};
+  },
+  getInitialState: function () {
+    return {
+      query      : '',
+      foundBrews : null,
+      searching  : false,
+      error      : null,
+    };
+  },
+  handleChange(e) {
+    this.setState({ query: e.target.value });
+  },
+  lookup() {
+    this.setState({ searching: true, error: null });
 
-		request.get(`/admin/archive/${this.state.query}`)
-			.then((res)=>this.setState({ foundBrews: res.body }))
-			.catch((err)=>this.setState({ error: err }))
-			.finally(()=>this.setState({ searching: false }));
-	},
-    renderFoundBrews() {
-        const brews = this.state.foundBrews;
-      
-        if (!brews || brews.length === 0) {
-          return <div>No brews found.</div>;
-        }
-      
-        return (
-          <div className='foundBrews'>
-            {brews.map((brew, index) => (
-              <div key={index} className='brewItem'>
-                <dl>
-                  <dt>Title:</dt>
-                  <dd>{brew.title}</dd>
-      
-                  <dt>Authors:</dt>
-                  <dd>
-                    {brew.authors.map((author, index) => (
-                        <span key={index}>
-                        <a href={`/user/${author}`} target='_blank' rel='noopener noreferrer'>
-                            {author}
-                        </a>
-                        {index < brew.authors.length - 1 && ', '}
+    request
+      .get(`/admin/archive/${this.state.query}`)
+      .then((res) => this.setState({ foundBrews: res.body }))
+      .catch((err) => this.setState({ error: err }))
+      .finally(() => this.setState({ searching: false }));
+  },
+  renderFoundBrews() {
+    const brews = this.state.foundBrews;
+
+    if (!brews || brews.length === 0) {
+      return <div>No brews found.</div>;
+    }
+
+    return (
+      <div className='foundBrews'>
+        {brews.map((brew, index) => (
+          <div key={index} className='brewItem'>
+            <dl>
+              <dt>Title:</dt>
+              <dd>{brew.title}</dd>
+
+              <dt>Authors:</dt>
+              <dd>
+                {brew.authors.map((author, index) => (
+                  <span key={index}>
+                    <a
+                      href={`/user/${author}`}
+                      target='_blank'
+                      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>
-                    ))}
-                    </dd>
-      
-                  <a href={`/share/${brew.shareId}`}>Check the brew</a>
-      
-                  <dt>Last Updated</dt>
-                  <dd>{Moment(brew.updatedAt).fromNow()}</dd>
-      
-                  <dt>Num of Views</dt>
-                  <dd>{brew.views}</dd>
-                </dl>
-              </div>
-            ))}
+                      );
+                    })}
+                  </div>
+                </>
+              ) : (
+                <></>
+              )}
+
+              <dt>Last Updated:</dt>
+              <dd>{Moment(brew.updatedAt).fromNow()}</dd>
+
+              <dt>Num of Views:</dt>
+              <dd>{brew.views}</dd>
+            </dl>
           </div>
-        );
-      },
+        ))}
+      </div>
+    );
+  },
 
-    renderForm: function() {
-        return <div className='brewLookup'>
-            <h2>Brew Lookup</h2>
-            <label>Title of the brew</label><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'/>
+  renderForm: function () {
+    return (
+      <div className='brewLookup'>
+        <h2>Brew Lookup</h2>
+        <label>Title of the brew</label>
+        <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}>
-                <i className={cx('fas', {
-                    'fa-search'          : !this.state.searching,
-                    'fa-spin fa-spinner' : this.state.searching,
-                })} />
-            </button>
-        </div>;
-    },
+        <button onClick={this.lookup}>
+          <i
+            className={cx('fas', {
+              'fa-search': !this.state.searching,
+              'fa-spin fa-spinner': this.state.searching,
+            })}
+          />
+        </button>
+      </div>
+    );
+  },
 
-    renderResults : function() {
+  renderResults: function () {},
 
-    },
-    
-    renderNavItems : function() {
-		return <Navbar>
-			<Nav.section>
-				<NewBrew />
-				<HelpNavItem />
-				<RecentNavItem />
-				<Account />
-			</Nav.section>
-		</Navbar>;
-	},
+  renderNavItems: function () {
+    return (
+      <Navbar>
+        <Nav.section>
+          <NewBrew />
+          <HelpNavItem />
+          <RecentNavItem />
+          <Account />
+        </Nav.section>
+      </Navbar>
+    );
+  },
 
-    render : function() {
-		return 	<div className='archivePage'>
-            {this.renderNavItems()}
+  render: function () {
+    return (
+      <div className='archivePage'>
+        {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 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;

client/homebrew/pages/archivePage/archivePage.less

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