mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-17 07:39:21 +08:00
Add Medium Post
This commit is contained in:
parent
0250d56bba
commit
54e899a155
2707
package-lock.json
generated
vendored
2707
package-lock.json
generated
vendored
File diff suppressed because it is too large
Load Diff
2
package.json
vendored
2
package.json
vendored
@ -10,6 +10,8 @@
|
||||
"author": "",
|
||||
"license": "See License",
|
||||
"dependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-preset-react-app": "^3.1.2",
|
||||
"dotenv": "^8.1.0",
|
||||
"express": "^4.17.1",
|
||||
"heroku-ssl-redirect": "0.0.4",
|
||||
|
21
public/MediumPost.html
vendored
Normal file
21
public/MediumPost.html
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add React in One Minute</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- We will put our React component inside this div. -->
|
||||
<div id="medium_blog_container"></div>
|
||||
|
||||
<!-- Load React. -->
|
||||
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
|
||||
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
|
||||
|
||||
<!-- Load our React component. -->
|
||||
<script src="MediumPost/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
56
public/MediumPost/index.js
Normal file
56
public/MediumPost/index.js
Normal file
@ -0,0 +1,56 @@
|
||||
var MediumPost = function MediumPost() {
|
||||
|
||||
var state = {
|
||||
error: null,
|
||||
isLoaded: false,
|
||||
items: []
|
||||
};
|
||||
|
||||
var error = state.error,
|
||||
isLoaded = state.isLoaded,
|
||||
items = state.items;
|
||||
|
||||
var recentItems = [];
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
recentItems.push(items[i]);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return React.createElement(
|
||||
"div",
|
||||
null,
|
||||
"Error: ",
|
||||
error.message
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoaded) {
|
||||
return React.createElement(
|
||||
"div",
|
||||
null,
|
||||
"Loading..."
|
||||
);
|
||||
}
|
||||
|
||||
return React.createElement(
|
||||
"ul",
|
||||
{ style: { listStyleType: "none",
|
||||
width: "100%",
|
||||
padding: "0"
|
||||
} },
|
||||
recentItems.map(function (item) {
|
||||
return React.createElement(
|
||||
"a",
|
||||
{ style: { textDecoration: "none" }, href: item.link, key: item.title },
|
||||
React.createElement(
|
||||
"li",
|
||||
{ style: { marginTop: "5px" } },
|
||||
item.title
|
||||
)
|
||||
);
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
var domContainer = document.querySelector('#medium_blog_container');ReactDOM.render(React.createElement(MediumPost, null), domContainer);
|
40
src/MediumPost/index.js
Normal file
40
src/MediumPost/index.js
Normal file
@ -0,0 +1,40 @@
|
||||
const MediumPost = () => {
|
||||
|
||||
const state = {
|
||||
error: null,
|
||||
isLoaded: false,
|
||||
items: []
|
||||
};
|
||||
|
||||
const { error, isLoaded, items } = state;
|
||||
const recentItems = [];
|
||||
|
||||
for(var i=0;i<5;i++){
|
||||
recentItems.push(items[i]);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
|
||||
if (!isLoaded) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul style={{ listStyleType: "none",
|
||||
width: "100%",
|
||||
padding:"0",
|
||||
}}>
|
||||
{recentItems.map(item => (
|
||||
<a style={{textDecoration: "none"}} href={item.link} key={item.title}>
|
||||
<li style={{ marginTop: "5px",}}>
|
||||
{item.title}
|
||||
</li>
|
||||
</a>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
const domContainer = document.querySelector('#medium_blog_container');ReactDOM.render(<MediumPost/>, domContainer);
|
Loading…
Reference in New Issue
Block a user