1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { uploadUri, formatDateTime } from 'app/utils'
import { SmallMenuButton, Loader } from 'app/common'
import actions from 'app/actions'
import UploadIndexOptions from './upload.indexOptions'
import UploadMenu from './upload.menu'
// const { result, collectionLookup } = this.props
export default class UploadIndex extends Component {
componentDidMount() {
this.fetch(false)
}
componentDidUpdate(prevProps) {
if (this.props.upload.options.sort !== prevProps.upload.options.sort) {
this.fetch(false)
}
}
fetch(load_more) {
const { options, index } = this.props.upload
const { order: index_order } = index
const [ sort, order ] = options.sort.split('-')
actions.upload.index({
sort, order, limit: 50, offset: load_more ? index_order.length : 0,
}, load_more)
}
render() {
const { searchOptions, uploadActions } = this.props
const { options } = this.props.upload
const { loading, lookup, order } = this.props.upload.index
if (loading) {
return (
<section>
<UploadIndexOptions />
<div className="row">
{order && !!order.length &&
<div className={'results ' + searchOptions.thumbnailSize}>
{order.map(id => <UploadItem key={id} data={lookup[id]} />)}
</div>
}
</div>
<Loader />
</section>
)
}
if (!lookup || !order.length) {
return (
<section>
<UploadIndexOptions />
<div className="row">
<UploadMenu uploadActions={uploadActions} />
<p className='gray'>
{"No uploads"}
</p>
</div>
</section>
)
}
return (
<section>
<UploadIndexOptions />
<div className="row">
<UploadMenu uploadActions={uploadActions} />
<div className={'results ' + searchOptions.thumbnailSize}>
{order.map(id => <UploadItem key={id} data={lookup[id]} />)}
</div>
</div>
{order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>}
</section>
)
}
}
const UploadItem = ({ data }) => {
// console.log(data)
const imageUri = uploadUri(data)
return (
<div className='cell'>
<div className='img'>
<Link to={"/upload/" + data.id + "/show/"}>
<img src={imageUri} alt={"Uploaded image"} />
</Link>
</div>
<div className='meta center'>
<div className='row'>
<SmallMenuButton name="search" href={"/search/upload/" + data.id + "/"} />
</div>
<div>
{data.username}
</div>
<div>
{formatDateTime(data.created_at)}
</div>
</div>
</div>
)
}
|
