-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
Blog.tsx
85 lines (81 loc) · 2.3 KB
/
Blog.tsx
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
import React, { useEffect, useState } from "react";
import he from "he";
function Blog({ apiUrl }: { apiUrl: string }) {
const [blogDetails, setBlogDetails] = useState<object[]>();
const fetchBlogDetails = async () => {
try {
let response: any = await fetch(`${window.location.origin}/blog-data/`);
if (response.status === 200) {
response = await response.json();
const objectArray: any = [];
for (let postIndex = 0; postIndex <= 6; postIndex += 1) {
const object: any = {};
object.id = response.posts[postIndex].ID;
object.title = he.decode(response.posts[postIndex].title);
object.link = response.posts[postIndex].URL;
objectArray.push(object);
}
setBlogDetails(objectArray);
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
};
useEffect(() => {
fetchBlogDetails();
}, []);
return (
<div className="card">
<div className="panel-heading center-p">
<strong>News & Updates</strong>
</div>
<div className="panel-body">
{blogDetails &&
blogDetails.map((post: any) => (
<li>
<a
href={post.link}
target="_blank"
rel="noopener noreferrer"
className="card-link"
>
{post.title}
</a>
</li>
))}
{!blogDetails && <li>None yet...</li>}
</div>
<div className="panel-footer center-p">
<a
href="https://twitter.com/ListenBrainz"
target="_blank"
rel="noopener noreferrer"
className="card-link"
style={{ marginRight: "12px" }}
>
Twitter
</a>
<a
href="https://blog.metabrainz.org"
className="card-link"
target="_blank"
rel="noopener noreferrer"
style={{ marginLeft: "8px", marginRight: "8px" }}
>
Blog
</a>
<a
href="https://community.metabrainz.org"
className="card-link"
target="_blank"
rel="noopener noreferrer"
style={{ marginLeft: "12px" }}
>
Community Forum
</a>
</div>
</div>
);
}
export default Blog;