Skip to content
This repository was archived by the owner on Sep 4, 2025. It is now read-only.

Commit dd107f7

Browse files
WrathfulSpatulaWrathfulSpatula
committed
Feedback from Will
1 parent 7bee1b8 commit dd107f7

File tree

8 files changed

+263
-169
lines changed

8 files changed

+263
-169
lines changed

‎src/App.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,17 +238,20 @@ form > span > .row > label {
238238
}
239239

240240
.submission {
241-
border-radius: 16px;
242241
padding: 8px;
243242
margin: 6px;
244243
background-color: #FFFFFF;
245-
box-shadow: 0 3px 12px rgba(33,33,33,.2);
246244
}
247245

248246
.submission:hover {
249247
box-shadow: 0 3px 16px rgba(33,33,33,.2);
250248
}
251249

250+
.submission-large {
251+
border-radius: 16px;
252+
box-shadow: 0 3px 12px rgba(33,33,33,.2);
253+
}
254+
252255
.category-item-box {
253256
display: inline-block;
254257
height: 128px;

‎src/MainRouter.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-d
22
import axios from 'axios'
33
import React, { useState } from 'react'
44
import config from './config'
5+
import Home from './views/Home'
56
import Submissions from './views/Submissions'
67
import LogIn from './views/LogIn'
78
import Register from './views/Register'
@@ -60,7 +61,7 @@ const MainRouter = (props) => {
6061
exact
6162
path='/'
6263
>
63-
<Tasks isLoggedIn={isLoggedIn} isHomepage />
64+
<Home isLoggedIn={isLoggedIn} isHomepage />
6465
</Route>
6566
<Route
6667
exact

‎src/components/CategoryItemBox.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const pickDetailUrl = (type, item) => {
2525
const CategoryItemBox = (props) => {
2626
return (
2727
<div className={'col-lg-4 col ' + (props.isPreview ? '' : 'submission-cell')}>
28-
<div className='submission'>
28+
<div className='submission submission-large'>
2929
<Link to={pickDetailUrl(props.type, props.item)} className='category-item-box'>
3030
{props.type !== 'tag' && props.item.description &&
3131
<div>

‎src/components/SubmissionBox.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const SubmissionBox = (props) => {
9696
}
9797

9898
return (
99-
<div className='submission'>
99+
<div className='submission submission-large'>
100100
<Link to={'/Submission/' + props.item.id}>
101101
<div className='row h-100'>
102102
<div className='col-md-2 col-sm-12 h-100'>

‎src/components/SubmissionBoxSmall.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22
import { Link } from 'react-router-dom'
33
import { library } from '@fortawesome/fontawesome-svg-core'
44
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
5-
import logo from './../images/metriq_logo_secondary_blue.png'
65

76
library.add(faExternalLinkAlt)
87

@@ -11,10 +10,7 @@ const SubmissionBoxSmall = (props) =>
1110
<div className='submission'>
1211
<Link to={'/Submission/' + props.item.id}>
1312
<div className='row'>
14-
<div className='col-md-3 col-sm-12'>
15-
<img src={props.item.thumbnailUrl ? props.item.thumbnailUrl : logo} alt='Submission thumbnail' className='submission-image-small' />
16-
</div>
17-
<div className='col-md-9 col-sm-12'>
13+
<div className='col col-md-12'>
1814
<div className='text-left submission-heading-small'>{(props.item.name.length > 80) ? (props.item.name.substring(0, 77) + '...') : props.item.name}</div>
1915
</div>
2016
</div>

‎src/components/SubmissionScroll.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,6 @@ class SubmissionScroll extends React.Component {
132132
key={index}
133133
isLoggedIn={this.props.isLoggedIn}
134134
isEditView={this.props.isEditView}
135-
isUnderReview={!(item.approvedAt)}
136-
isDraft={!(item.publishedAt)}
137135
/>)}
138136
{!this.props.isSmall && this.state.items.length && (
139137
<Suspense fallback={<div>Loading...</div>}>

‎src/views/Home.js‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
import axios from 'axios'
2+
import React from 'react'
3+
import { Button, Tab, Tabs } from 'react-bootstrap'
4+
import config from '../config'
5+
import ErrorHandler from '../components/ErrorHandler'
6+
import FormFieldValidator from '../components/FormFieldValidator'
7+
import FormFieldTypeaheadRow from '../components/FormFieldTypeaheadRow'
8+
import CategoryScroll from '../components/CategoryScroll'
9+
import CategoryItemIcon from '../components/CategoryItemIcon'
10+
import CategoryItemBox from '../components/CategoryItemBox'
11+
import SubscribeButton from '../components/SubscribeButton'
12+
import FormFieldAlertRow from '../components/FormFieldAlertRow'
13+
import FormFieldWideRow from '../components/FormFieldWideRow'
14+
import { sortCommon, sortAlphabetical } from '../components/SortFunctions'
15+
import SotaChart from '../components/SotaChart'
16+
import { withRouter, Link } from 'react-router-dom'
17+
import { library } from '@fortawesome/fontawesome-svg-core'
18+
import { faHeart, faExternalLinkAlt, faChartLine } from '@fortawesome/free-solid-svg-icons'
19+
import TopSubmitters from '../components/TopSubmitters'
20+
import SubmissionScroll from '../components/SubmissionScroll'
21+
22+
library.add(faHeart, faExternalLinkAlt, faChartLine)
23+
24+
const qedcIds = [34, 2, 97, 142, 150, 172, 173, 174, 175, 176, 177, 178, 179]
25+
26+
class Home extends React.Component {
27+
constructor (props) {
28+
super(props)
29+
this.state = {
30+
isLoading: true,
31+
alphabetical: [],
32+
allNames: [],
33+
platforms: [],
34+
featured: [],
35+
trending: [],
36+
popular: [],
37+
latest: [],
38+
topSubmitters: [],
39+
activeTab: 'Trending',
40+
filterId: null,
41+
requestFailedMessage: ''
42+
}
43+
44+
this.handleOnFilter = this.handleOnFilter.bind(this)
45+
this.handleOnSelect = this.handleOnSelect.bind(this)
46+
}
47+
48+
handleOnFilter (value) {
49+
if (value) {
50+
this.setState({ filterId: value.id })
51+
}
52+
}
53+
54+
handleOnSelect (value) {
55+
if (value) {
56+
this.props.history.push('/Task/' + value.id)
57+
}
58+
}
59+
60+
componentDidMount () {
61+
axios.get(config.api.getUriPrefix() + '/task/submissionCount')
62+
.then(res => {
63+
const alphabetical = res.data.data
64+
alphabetical.sort(sortAlphabetical)
65+
this.setState({ alphabetical, isLoading: false })
66+
})
67+
.catch(err => {
68+
this.setState({ requestFailedMessage: ErrorHandler(err) })
69+
})
70+
71+
axios.get(config.api.getUriPrefix() + '/task/names')
72+
.then(res => {
73+
this.setState({
74+
requestFailedMessage: '',
75+
allNames: res.data.data
76+
})
77+
})
78+
.catch(err => {
79+
this.setState({ requestFailedMessage: ErrorHandler(err) })
80+
})
81+
82+
axios.get(config.api.getUriPrefix() + '/platform/submissionCount')
83+
.then(res => {
84+
const common = [...res.data.data]
85+
common.sort(sortCommon)
86+
const rws = []
87+
for (let i = 0; i < 2; ++i) {
88+
const row = []
89+
for (let j = 0; j < 3; ++j) {
90+
row.push(common[3 * i + j])
91+
}
92+
rws.push(row)
93+
}
94+
this.setState({
95+
requestFailedMessage: '',
96+
platforms: rws
97+
})
98+
})
99+
.catch(err => {
100+
this.setState({ requestFailedMessage: ErrorHandler(err) })
101+
})
102+
103+
axios.get(config.api.getUriPrefix() + '/task/submissionCount/34')
104+
.then(res => {
105+
const featured = [res.data.data]
106+
107+
axios.get(config.api.getUriPrefix() + '/task/submissionCount/50')
108+
.then(res => {
109+
featured.push(res.data.data)
110+
111+
axios.get(config.api.getUriPrefix() + '/task/submissionCount/164')
112+
.then(res => {
113+
featured.push(res.data.data)
114+
this.setState({ featured })
115+
})
116+
.catch(err => {
117+
this.setState({ requestFailedMessage: ErrorHandler(err) })
118+
})
119+
})
120+
.catch(err => {
121+
this.setState({ requestFailedMessage: ErrorHandler(err) })
122+
})
123+
})
124+
.catch(err => {
125+
this.setState({ requestFailedMessage: ErrorHandler(err) })
126+
})
127+
}
128+
129+
render () {
130+
return (
131+
<div id='metriq-main-content'>
132+
<p className='text-left'>Metriq is a platform for tracking and sharing quantum technology benchmarks. Users can make new submissions (link) that show the performance of different methods (link) on platforms (link) against tasks (link).</p>
133+
<p className='text-left'>We have highlighted tasks here and you can search for more:</p>
134+
<br />
135+
<FormFieldTypeaheadRow
136+
className='search-bar'
137+
innerClassName='search-accent'
138+
options={this.state.allNames}
139+
labelKey='name'
140+
inputName='name'
141+
value=''
142+
placeholder='🔎'
143+
onChange={(field, value) => this.handleOnFilter(value)}
144+
onSelect={this.handleOnSelect}
145+
alignLabelRight
146+
isRow
147+
/>
148+
<FormFieldWideRow>
149+
<div className='row'>
150+
<div className='col'>
151+
<h4 align='left'>Featured Tasks</h4>
152+
</div>
153+
</div>
154+
<div className='row'>
155+
<div className='col-md-9'>
156+
{this.state.featured.map((item, index) =>
157+
<span key={index}>
158+
<div className='task card'>
159+
<div className='row h-100 text-left'>
160+
<div className='col-lg-3 col-md-5 col'>
161+
<Link to={'/Task/' + item.id} className='active-navlink'>
162+
<SotaChart
163+
isPreview
164+
chartId={index}
165+
xLabel='Time'
166+
taskId={item.id}
167+
key={index}
168+
isLog
169+
logBase={(index === 0) ? '2' : '10'}
170+
/>
171+
</Link>
172+
</div>
173+
<div className='col-lg-9 col-md-7 col'>
174+
<h5>
175+
<Link to={'/Task/' + item.id} className='active-navlink'>{item.name}</Link>
176+
{qedcIds.includes(parseInt(item.id)) &&
177+
<span> <Link to='/QEDC'><span className='link'>(QED-C)</span></Link></span>}
178+
<span className='float-right'><SubscribeButton item={item} type='task' isLoggedIn={this.props.isLoggedIn} /></span>
179+
</h5>
180+
<Link to={'/Task/' + item.id} className='active-navlink'>{item.description}</Link>
181+
</div>
182+
</div>
183+
<div className='row h-100'>
184+
<div className='col-lg-4 col text-left'>
185+
<Link to={'/Task/' + item.parentTask.id}>{item.parentTask.name}</Link>
186+
</div>
187+
<div className='col-lg-8 col'>
188+
<Link to={'/Task/' + item.id} className='active-navlink' style={{ width: 'auto' }}>
189+
<CategoryItemIcon count={item.resultCount} type='task' word='results' icon={faChartLine} />
190+
<CategoryItemIcon count={item.submissionCount} type='task' word='submissions' icon={faExternalLinkAlt} />
191+
<CategoryItemIcon count={item.upvoteTotal} type='task' word='up-votes' icon={faHeart} />
192+
</Link>
193+
</div>
194+
</div>
195+
</div>
196+
<br />
197+
</span>
198+
)}
199+
</div>
200+
<div className='col-md-3'>
201+
<div className='card top-submitters-card'>
202+
<TopSubmitters isOnlyAllTime />
203+
</div>
204+
<br />
205+
<div className='card top-submitters-card'>
206+
<h5>Top Submissions</h5>
207+
<Tabs id='top-submissions-tabs' activeKey={this.state.activeTab} onSelect={activeTab => this.setState({ activeTab })}>
208+
<Tab eventKey='Trending' title='Trending' className='metriq-nav-tab'>
209+
<SubmissionScroll isSmall sortType='trending' isLoggedIn={this.props.isLoggedIn} key={Math.random()} />
210+
</Tab>
211+
<Tab eventKey='Popular' title='Popular' className='metriq-nav-tab'>
212+
<SubmissionScroll isSmall sortType='popular' isLoggedIn={this.props.isLoggedIn} key={Math.random()} />
213+
</Tab>
214+
<Tab eventKey='Latest' title='Latest' className='metriq-nav-tab'>
215+
<SubmissionScroll isSmall sortType='latest' isLoggedIn={this.props.isLoggedIn} key={Math.random()} />
216+
</Tab>
217+
</Tabs>
218+
</div>
219+
</div>
220+
</div>
221+
</FormFieldWideRow>
222+
<br />
223+
<FormFieldWideRow className='centered-tabs'>
224+
<CategoryScroll className='col-lg-9 col' type='task' isLoading={this.state.isLoading} items={this.state.alphabetical} isLoggedIn={this.props.isLoggedIn} heading={<span>Platforms <Link to='/Tasks'><Button variant='outline-light' className='platforms-more-button'>Explore tasks</Button></Link></span>} />
225+
</FormFieldWideRow>
226+
<br />
227+
{(this.state.platforms.length > 0) &&
228+
<span>
229+
<FormFieldWideRow className='text-left'>
230+
<h4 align='left' style={{ display: 'inline-block' }}>Platforms</h4> <Link to='/Platforms'><Button variant='outline-light' className='platforms-more-button'>See more platforms</Button></Link>
231+
</FormFieldWideRow>
232+
<FormFieldWideRow>
233+
<div className='row h-100'>
234+
<div className='col-lg-9 col h-100'>
235+
{this.state.platforms.map((row, rid) => <div className='row' key={rid}>{row.map((item, id) => <CategoryItemBox item={item} key={3 * rid + id} isLoggedIn={this.props.isLoggedIn} type='platform' />)}</div>)}
236+
</div>
237+
</div>
238+
</FormFieldWideRow>
239+
<br />
240+
</span>}
241+
<FormFieldAlertRow>
242+
<FormFieldValidator invalid={!!this.state.requestFailedMessage} message={this.state.requestFailedMessage} />
243+
</FormFieldAlertRow>
244+
</div>
245+
)
246+
}
247+
}
248+
249+
export default withRouter(Home)

0 commit comments

Comments
 (0)