Merge pull request #512 from unitaryfund/452_architecture

#452: "Platforms"

Author: WrathfulSpatula

src/App.css

@@ -195,7 +195,7 @@ form > .row > label {
 }
 
 .task-method-item {
-  display: inline-block;
+  width: 100%;
   text-align: left;
 }
 

src/MainRouter.js

@@ -16,10 +16,12 @@ import Token from './views/Token'
 import Password from './views/Password'
 import Methods from './views/Methods'
 import Tasks from './views/Tasks'
+import Platforms from './views/Platforms'
 import Tags from './views/Tags'
 import Submission from './views/Submission'
 import Method from './views/Method'
 import Task from './views/Task'
+import Platform from './views/Platform'
 import NotFound from './views/NotFound'
 
 const MainRouter = (props) => {
@@ -44,6 +46,12 @@ const MainRouter = (props) => {
         >
           <Tasks isLoggedIn={props.isLoggedIn} />
         </Route>
+        <Route
+          exact
+          path='/Platforms'
+        >
+          <Platforms isLoggedIn={props.isLoggedIn} />
+        </Route>
         <Route
           exact
           path='/Tags'
@@ -155,6 +163,11 @@ const MainRouter = (props) => {
           path='/Task/:id'
           render={(p) => <Task {...p} isLoggedIn={props.isLoggedIn} onLogin={props.onLogin} />}
         />
+        <Route
+          exact
+          path='/Platform/:id'
+          render={(p) => <Platform {...p} isLoggedIn={props.isLoggedIn} onLogin={props.onLogin} />}
+        />
         <Route component={NotFound} />
       </Switch>
     </Router>

src/components/CategoryItemBox.js

@@ -8,13 +8,29 @@ import { faHeart, faExternalLinkAlt, faChartLine } from '@fortawesome/free-solid
 library.add(faHeart, faExternalLinkAlt, faChartLine)
 
 class CategoryItemBox extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      detailUrl: ''
+    }
+    if (this.props.type === 'tag') {
+      this.state.detailUrl = ('/Tag/' + this.props.item.name)
+    } else if (this.props.type === 'task') {
+      this.state.detailUrl = ('/Task/' + this.props.item.id)
+    } else if (this.props.type === 'method') {
+      this.state.detailUrl = ('/Method/' + this.props.item.id)
+    } else if (this.props.type === 'platform') {
+      this.state.detailUrl = ('/Platform/' + this.props.item.id)
+    }
+  }
+
   render () {
     return (
       <tr>
         <td>
           <div className='row submission'>
             <div className='col-md-9'>
-              <a href={(this.props.type === 'tag') ? ('/Tag/' + this.props.item.name) : (((this.props.type === 'task') ? '/Task/' : '/Method/') + this.props.item.id)}>
+              <a href={this.state.detailUrl}>
                 {this.props.type !== 'tag' && this.props.item.description &&
                   <div>
                     <div className='submission-heading'>{this.props.item.name}</div>
@@ -25,17 +41,17 @@ class CategoryItemBox extends React.Component {
               </a>
             </div>
             <div className='col-md-1'>
-              <OverlayTrigger placement='top' overlay={props => <Tooltip {...props}>Count of results, with {(this.props.type === 'tag') ? ('tag') : (((this.props.type === 'task') ? 'task' : 'method'))}</Tooltip>}>
+              <OverlayTrigger placement='top' overlay={props => <Tooltip {...props}>Count of results, with {this.props.type}</Tooltip>}>
                 <span><FontAwesomeIcon icon={faChartLine} /><br />{this.props.item.resultCount}</span>
               </OverlayTrigger>
             </div>
             <div className='col-md-1'>
-              <OverlayTrigger placement='top' overlay={props => <Tooltip {...props}>Count of submissions, with {(this.props.type === 'tag') ? ('tag') : (((this.props.type === 'task') ? 'task' : 'method'))}</Tooltip>}>
+              <OverlayTrigger placement='top' overlay={props => <Tooltip {...props}>Count of submissions, with {this.props.type}</Tooltip>}>
                 <span><FontAwesomeIcon icon={faExternalLinkAlt} /><br />{this.props.item.submissionCount}</span>
               </OverlayTrigger>
             </div>
             <div className='col-md-1'>
-              <OverlayTrigger placement='top' overlay={props => <Tooltip {...props}>Count of up-votes, for all submissions with {(this.props.type === 'tag') ? ('tag') : (((this.props.type === 'task') ? 'task' : 'method'))}</Tooltip>}>
+              <OverlayTrigger placement='top' overlay={props => <Tooltip {...props}>Count of up-votes, for all submissions with {this.props.type}</Tooltip>}>
                 <span><FontAwesomeIcon icon={faHeart} /><br />{this.props.item.upvoteTotal}</span>
               </OverlayTrigger>
             </div>

src/components/CategoryScroll.js

@@ -23,7 +23,7 @@ class CategoryScroll extends React.Component {
         <div className='row'>
           <div className='col-md-12'>
             {!this.props.items.length && <p><b>There are no approved items, yet.</b></p>}
-            {this.props.items.length &&
+            {(this.props.items.length > 0) &&
               <div className='task'>
                 <div className='row h-100'>
                   <div className='col-md col h-100'>

src/components/MainNavLeft.js

@@ -6,6 +6,7 @@ const MainNavLeft = () => {
     <Nav className='metriq-navbar'>
       <Nav.Link href='/Tasks' className='metriq-navbar-text'>Tasks</Nav.Link>
       <Nav.Link href='/Methods' className='metriq-navbar-text'>Methods</Nav.Link>
+      <Nav.Link href='/Platforms' className='metriq-navbar-text'>Platforms</Nav.Link>
       <Nav.Link href='/Tags' className='metriq-navbar-text'>Tags</Nav.Link>
       <NavDropdown title='About' active='true' className='metriq-navbar-text' alignRight>
         <NavDropdown.Item href='/About'><p class='font-weight-bold'>About</p></NavDropdown.Item>

src/views/Method.js

@@ -259,7 +259,7 @@ class Method extends React.Component {
           centered
         >
           <Modal.Header closeButton>
-            <Modal.Title>Edit Submission</Modal.Title>
+            <Modal.Title>Edit Method</Modal.Title>
           </Modal.Header>
           <Modal.Body>
             {(this.state.modalMode === 'Login') &&