Skip to content

Commit d9190e8

Browse files
melvincarvalhomelvincarvalho
committed
test for maker
1 parent 0a9d2c8 commit d9190e8

File tree

1 file changed

+169
-96
lines changed

1 file changed

+169
-96
lines changed

‎v2/src/components/Bookmark.jsx‎

Lines changed: 169 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -6,85 +6,141 @@ UI.store = $rdf.graph()
66
UI.fetcher = new $rdf.Fetcher(UI.store)
77
UI.updater = new $rdf.UpdateManager(UI.store)
88

9-
10-
function BookmarkItem(props) {
9+
function BookmarkItem (props) {
1110
const AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i
1211
const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v|mkv)($|\?)/i
1312
const IMAGE_EXTENSIONS = /\.(png|gif|bmp|svg|jpeg|jpg)($|\?)/i
1413
const URL = /http/i
1514

16-
1715
if (props.recalls.match(IMAGE_EXTENSIONS)) {
1816
return (
19-
<div className="box">
17+
<div className='box'>
2018
<table>
2119
<tbody>
2220
<tr>
2321
<td>{props.id + 1}.&nbsp;</td>
24-
<td><a target="_blank" href={props.recalls}>{props.title}</a> <a target="_blank" href={props.subject}><img height="10" width="10" src="./image/External.svg" /></a></td>
22+
<td>
23+
<a target='_blank' href={props.recalls}>
24+
{props.title}
25+
</a>{' '}
26+
<a target='_blank' href={props.subject}>
27+
<img height='10' width='10' src='./image/External.svg' />
28+
</a>
29+
</td>
2530
</tr>
2631
<tr>
27-
<td></td>
28-
<td><sup>{moment.utc(props.created).fromNow()} by <a href={props.maker} target="_blank" style={{ color : 'inherit' }}>{props.maker}</a></sup></td>
32+
<td></td>
33+
<td>
34+
<sup>
35+
{moment.utc(props.created).fromNow()} by{' '}
36+
<a
37+
href={props.maker}
38+
target='_blank'
39+
style={{ color: 'inherit' }}
40+
>
41+
{props.maker}
42+
</a>
43+
</sup>
44+
</td>
2945
</tr>
3046
<tr>
31-
<td></td>
32-
<td><img src={props.recalls} /></td>
33-
47+
<td></td>
48+
<td>
49+
<img src={props.recalls} />
50+
</td>
3451
</tr>
35-
3652
</tbody>
3753
</table>
38-
39-
</div>)
54+
</div>
55+
)
4056
} else if (props.recalls.match(VIDEO_EXTENSIONS)) {
4157
return (
42-
<div>{props.id + 1}. <video controls autoplay='true' loop src={props.recalls} /></div>)
58+
<div>
59+
{props.id + 1}.{' '}
60+
<video controls autoplay='true' loop src={props.recalls} />
61+
</div>
62+
)
4363
} else if (props.recalls.match(AUDIO_EXTENSIONS)) {
4464
return (
45-
<div>{props.id + 1}. <video controls autoplay='true' loop src={props.recalls} /></div>)
46-
} else if (props.recalls.match(URL)) {
47-
return (
48-
<div className="box">
49-
<table>
50-
<tbody>
51-
<tr>
52-
<td>{props.id + 1}.&nbsp;</td>
53-
<td><a target="_blank" href={props.recalls}>{props.title}</a> <a target="_blank" href={props.subject}><img height="10" width="10" src="./image/External.svg" /></a></td>
54-
</tr>
55-
<tr>
56-
<td></td>
57-
<td><sup>{moment.utc(props.created).fromNow()} by <a href={props.maker} target="_blank" style={{ color : 'inherit' }}>{props.maker}</a></sup></td>
58-
</tr>
59-
60-
</tbody>
61-
</table>
62-
63-
</div>
64-
)
65-
} else {
65+
<div>
66+
{props.id + 1}.{' '}
67+
<video controls autoplay='true' loop src={props.recalls} />
68+
</div>
69+
)
70+
} else if (props.recalls.match(URL)) {
6671
return (
67-
<div className="box">
72+
<div className='box'>
6873
<table>
6974
<tbody>
7075
<tr>
7176
<td>{props.id + 1}.&nbsp;</td>
72-
<td><a target="_blank" href={props.recalls}>{props.title}</a> <a target="_blank" href={props.subject}><img height="10" width="10" src="./image/External.svg" /></a></td>
77+
<td>
78+
<a target='_blank' href={props.recalls}>
79+
{props.title}
80+
</a>{' '}
81+
<a target='_blank' href={props.subject}>
82+
<img height='10' width='10' src='./image/External.svg' />
83+
</a>
84+
</td>
7385
</tr>
7486
<tr>
7587
<td></td>
76-
<td><sup>{moment.utc(props.created).fromNow()} by <a href={props.maker} target="_blank" style={{ color : 'inherit' }}>{props.maker}</a></sup></td>
88+
<td>
89+
<sup>
90+
{moment.utc(props.created).fromNow()} by{' '}
91+
<a
92+
href={props.maker}
93+
target='_blank'
94+
style={{ color: 'inherit' }}
95+
>
96+
{props.maker}
97+
</a>
98+
</sup>
99+
</td>
100+
</tr>
101+
</tbody>
102+
</table>
103+
</div>
104+
)
105+
} else {
106+
return (
107+
<div className='box'>
108+
<table>
109+
<tbody>
110+
<tr>
111+
<td>{props.id + 1}.&nbsp;</td>
112+
<td>
113+
<a target='_blank' href={props.recalls}>
114+
{props.title}
115+
</a>{' '}
116+
<a target='_blank' href={props.subject}>
117+
<img height='10' width='10' src='./image/External.svg' />
118+
</a>
119+
</td>
120+
</tr>
121+
<tr>
122+
<td></td>
123+
<td>
124+
<sup>
125+
{moment.utc(props.created).fromNow()} by{' '}
126+
<a
127+
href={props.maker}
128+
target='_blank'
129+
style={{ color: 'inherit' }}
130+
>
131+
{props.maker}
132+
</a>
133+
</sup>
134+
</td>
77135
</tr>
78-
79136
</tbody>
80137
</table>
81-
82138
</div>
83139
)
84140
}
85141
}
86142

87-
function getTypeFromSubject(subject) {
143+
function getTypeFromSubject (subject) {
88144
let s = UI.store.sym(subject)
89145
let p = UI.store.sym('http://www.w3.org/1999/02/22-rdf-syntax-ns#type')
90146
let o = null
@@ -97,7 +153,7 @@ function getTypeFromSubject(subject) {
97153
}
98154
}
99155

100-
function getBookmarkFromSubject(subject) {
156+
function getBookmarkFromSubject (subject) {
101157
let s = UI.store.sym(subject)
102158
let p = UI.store.sym('http://www.w3.org/2002/01/bookmark#recalls')
103159
let o = null
@@ -119,50 +175,65 @@ function getBookmarkFromSubject(subject) {
119175
w = UI.store.sym(subject.split('#')[0])
120176
let created = UI.store.any(s, p, o, w)
121177

122-
let bookmark = { 'recalls': recalls.value, 'title': title.value, 'maker' : maker.value, 'created' : created.value, 'subject' : subject }
178+
let bookmark = {
179+
recalls: recalls.value,
180+
title: title.value,
181+
created: created.value,
182+
subject: subject
183+
}
184+
if (maker) {
185+
bookmark.maker = maker.value
186+
}
123187
return bookmark
124188
}
125189

126190
class Bookmark extends React.Component {
127-
constructor(props) {
191+
constructor (props) {
128192
super(props)
129193
let media = this.isMedia(props.subject)
130-
this.state = { 'media': media, 'subject': props.subject, 'title': '', bookmark: [{ 'recalls': '', 'title': '' }] }
194+
this.state = {
195+
media: media,
196+
subject: props.subject,
197+
title: '',
198+
bookmark: [{ recalls: '', title: '' }]
199+
}
131200
}
132201

133-
fetchBookmark(subject, force) {
134-
force = !! force
202+
fetchBookmark (subject, force) {
203+
force = !!force
135204
console.log('fetch bookmark', subject, 'force', force)
136205
// hack to force fetcher
137206
UI.store = $rdf.graph()
138-
UI.fetcher = new $rdf.Fetcher(UI.store)
139-
UI.fetcher.load(subject, {force : true} ).then(response => {
140-
var type = getTypeFromSubject(subject)
141-
var bm = []
142-
console.log('type', type);
143-
144-
if (!type) {
145-
let s = UI.store.sym(subject)
146-
let p = UI.store.sym('http://purl.org/dc/terms/references')
147-
let subjects = UI.store.statementsMatching(s, p)
148-
for (let subject of subjects) {
149-
bm.push(getBookmarkFromSubject(subject.object.value))
207+
UI.fetcher = new $rdf.Fetcher(UI.store)
208+
UI.fetcher.load(subject, { force: true }).then(
209+
response => {
210+
var type = getTypeFromSubject(subject)
211+
var bm = []
212+
console.log('type', type)
213+
214+
if (!type) {
215+
let s = UI.store.sym(subject)
216+
let p = UI.store.sym('http://purl.org/dc/terms/references')
217+
let subjects = UI.store.statementsMatching(s, p)
218+
for (let subject of subjects) {
219+
bm.push(getBookmarkFromSubject(subject.object.value))
220+
}
221+
222+
bm = bm.sort(function (a, b) {
223+
return b.created < a.created ? -1 : b.created > a.created ? 1 : 0
224+
})
225+
226+
this.setState({ bookmark: bm })
227+
} else {
228+
bm.push(getBookmarkFromSubject(subject))
229+
230+
this.setState({ bookmark: bm })
150231
}
151-
152-
bm = bm.sort( function(a,b) {
153-
return (b.created < a.created) ? -1 : ((b.created > a.created) ? 1 : 0);
154-
} )
155-
156-
this.setState({ 'bookmark': bm })
157-
158-
} else {
159-
bm.push(getBookmarkFromSubject(subject))
160-
161-
this.setState({ 'bookmark': bm })
232+
},
233+
err => {
234+
console.log(err)
162235
}
163-
}, err => {
164-
console.log(err)
165-
})
236+
)
166237
}
167238

168239
getUpdatesVia (doc) {
@@ -172,13 +243,13 @@ class Bookmark extends React.Component {
172243
return linkHeaders[0].trim()
173244
}
174245

175-
setRefreshHandler(subject, handler) {
246+
setRefreshHandler (subject, handler) {
176247
var self = this
177248
var wss = this.getUpdatesVia(subject)
178249
console.log('wss', wss, 'subject', subject)
179250
let w = new WebSocket(wss)
180251
w.onmessage = function (m) {
181-
let data = m.data
252+
let data = m.data
182253
console.log('data', data)
183254
if (data.match(/pub .*/)) {
184255
console.log('refresh')
@@ -188,66 +259,68 @@ class Bookmark extends React.Component {
188259
}
189260
w.onopen = function () {
190261
w.send('sub ' + subject)
191-
}
262+
}
192263
}
193264

194-
refresh() {
265+
refresh () {
195266
this.fetchBookmark(this.state.subject, true)
196267
}
197268

198-
componentDidMount() {
269+
componentDidMount () {
199270
let subject = this.state.subject
200271
if (this.isMedia(subject) === false) {
201272
this.fetchBookmark(subject)
202273
}
203274
if (subject) {
204275
console.log('init subject', subject)
205276
setTimeout(() => {
206-
this.setRefreshHandler (subject, this.refresh)
207-
}, 1000);
277+
this.setRefreshHandler(subject, this.refresh)
278+
}, 1000)
208279
}
209280
}
210281

211-
componentWillReceiveProps(props) {
282+
componentWillReceiveProps (props) {
212283
let subject = props.subject
213284
if (this.isMedia(subject) === false) {
214285
this.fetchBookmark(subject)
215286
}
216287
}
217288

218-
isMedia(subject) {
289+
isMedia (subject) {
219290
// TODO better test for linked data
220291
let isMedia = false
221-
if (subject.match(/.ttl/) || subject.match(/\/[^.]*$/) ) {
292+
if (subject.match(/.ttl/) || subject.match(/\/[^.]*$/)) {
222293
isMedia = false
223294
} else {
224295
isMedia = true
225296
}
226297
return isMedia
227298
}
228299

229-
render() {
300+
render () {
230301
let med = this.isMedia(this.props.subject)
231-
console.log('subject', this.props.subject, med);
302+
console.log('subject', this.props.subject, med)
232303

233304
if (med === true) {
234-
return (
235-
<Media href={this.props.subject} />
236-
)
305+
return <Media href={this.props.subject} />
237306
} else {
238-
const listItems = this.state.bookmark.map((b, i) =>
307+
const listItems = this.state.bookmark.map((b, i) => (
239308
<div>
240-
<BookmarkItem key={i} id={i} recalls={b.recalls} title={b.title} maker={b.maker} created={b.created} subject={b.subject}/>
309+
<BookmarkItem
310+
key={i}
311+
id={i}
312+
recalls={b.recalls}
313+
title={b.title}
314+
maker={b.maker}
315+
created={b.created}
316+
subject={b.subject}
317+
/>
241318
</div>
242-
)
319+
))
243320

244-
return (
245-
<div>{listItems}</div>
246-
)
321+
return <div>{listItems}</div>
247322
}
248323
}
249324
}
250325

251-
252-
253326
//REMOVE export default Bookmark

0 commit comments

Comments
 (0)