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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import React, { Component } from "react";
import {
Loader,
Message,
Segment,
Header,
Image,
Comment,
Divider,
Breadcrumb
} from "semantic-ui-react";
import { Link } from "@reach/router";
import Moment from "react-moment";
import "moment/locale/es";
import Post from "./Post";
class Board extends Component {
constructor() {
super();
this.state = {
isLoaded: false,
threadList: [],
error: null
};
}
componentDidMount() {
fetch(
`https://bienvenidoainternet.org/cgi/api/list?dir=${this.props.dir}&replies=5&limit=10`
)
.then(response => {
return response.json();
})
.then(resource => {
if (resource["state"] === "error") {
this.setState({ error: resource });
}
this.setState({ isLoaded: true, threadList: resource["threads"] });
});
window.scrollTo(0, 0);
}
componentDidUpdate(prevProps) {
// Uso tipico (no olvides de comparar los props):
if (this.props.dir !== prevProps.dir) {
this.setState({
isLoaded: false,
threadList: [],
error: null
});
this.componentDidMount();
}
}
render() {
const { isLoaded, error, threadList } = this.state;
if (error != null) {
return (
<div>
<Message negative>
<Message.Header>API Status: {error.state}</Message.Header>
<p>{error.message}</p>
</Message>
</div>
);
}
if (!isLoaded) {
return (
<Loader active centered="true">
Cargando ...
</Loader>
);
}
const currentBoard = this.props.boardList.find(board => {
return board.dir === this.props.dir;
});
document.title = currentBoard.name + " - B.a.I";
return (
<React.Fragment>
<Breadcrumb>
<Breadcrumb.Section link as={Link} to="/">
Home
</Breadcrumb.Section>
<Breadcrumb.Divider icon="right chevron" />
<Breadcrumb.Section link>{currentBoard.name}</Breadcrumb.Section>
</Breadcrumb>
{threadList.map(thread => (
<Segment.Group key={thread.id}>
<Header as="h4" attached>
<Link to={`/${this.props.dir}/read/${thread.id}`}>
{thread.subject}
</Link>
</Header>
<Segment>
<Comment.Group>
<Post
index={0}
post={thread}
locked={thread.locked}
threadId={thread.id}
dir={this.props.dir}
/>
<Divider />
{thread.replies.map((reply, index, replies) => (
<Post
index={thread.total_replies - replies.length + index + 1}
post={reply}
locked={thread.locked}
threadId={thread.id}
dir={this.props.dir}
key={index}
/>
))}
</Comment.Group>
</Segment>
</Segment.Group>
))}
</React.Fragment>
);
}
}
export default Board;
|
