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": "",
|
"author": "",
|
||||||
"license": "See License",
|
"license": "See License",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"babel-cli": "^6.26.0",
|
||||||
|
"babel-preset-react-app": "^3.1.2",
|
||||||
"dotenv": "^8.1.0",
|
"dotenv": "^8.1.0",
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"heroku-ssl-redirect": "0.0.4",
|
"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