aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-02-13 16:20:54 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commit185af998262b3c33ee55aee87a89d9a5948110b1 (patch)
tree9f704f89e1f7c667316c2242497661e90f5408e3 /vnext/src/components
parent5f6126a48678ef56b3e26357ad8491c4892e3d89 (diff)
basic navigation
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Discover.js50
-rw-r--r--vnext/src/components/Navigation.js42
2 files changed, 92 insertions, 0 deletions
diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js
new file mode 100644
index 00000000..2d962bda
--- /dev/null
+++ b/vnext/src/components/Discover.js
@@ -0,0 +1,50 @@
+import "whatwg-fetch"
+import React from "react"
+import PropTypes from "prop-types"
+
+import Message from "./Message"
+
+export default class Discover extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ msgs: [],
+ loading: false
+ }
+ this.loadMessages = this.loadMessages.bind(this);
+ }
+ componentDidMount() {
+ this.loadMessages();
+ }
+ componentWillReceiveProps(props) {
+ if (props.params != this.props.params) {
+ this.loadMessages();
+ }
+ }
+ loadMessages() {
+ const search = new URLSearchParams(this.props.params);
+ const url = "https://api.juick.com/messages";
+ fetch(url)
+ .then(response => {
+ return response.json()
+ })
+ .then(data =>
+ this.setState({ msgs: data })
+ ).catch(ex => {
+ console.log(ex)
+ });
+ }
+
+ render() {
+ var nodes = this.state.msgs.map(msg => {
+ return (<Message key={msg.mid} data={msg}/>)
+ });
+ return (
+ <div className="msgs" id="content">{nodes}</div>
+ )
+ }
+};
+
+Discover.propTypes = {
+ msgs: PropTypes.array
+}
diff --git a/vnext/src/components/Navigation.js b/vnext/src/components/Navigation.js
new file mode 100644
index 00000000..1f0e9483
--- /dev/null
+++ b/vnext/src/components/Navigation.js
@@ -0,0 +1,42 @@
+import React from 'react';
+
+export default class Navigation extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ visitor: {uid: 0}
+ }
+ this.transition = this.transition.bind(this);
+ }
+ transition(event) {
+ event.preventDefault();
+ this.props.onNavigate({ pathname: event.currentTarget.pathname, search: event.currentTarget.search});
+ };
+ render() {
+ return (
+ <header>
+ <div id="header_wrapper">
+ <div id="logo"><a href="/" onClick={this.transition}>Juick</a></div>
+ <nav id="global">
+ <ul>
+ { this.state.visitor.uid ?
+ <li><a href="/?show=discuss" onClick={this.transition}><i data-icon="ei-comment" data-size="s"></i>Discuss</a></li>
+ :
+ <li><a href="/?show=photos" rel="nofollow" onClick={this.transition}><i data-icon="ei-camera" data-size="s"></i>Photos</a></li>
+ }
+ <li><a href="/?show=all" rel="nofollow" onClick={this.transition}><i data-icon="ei-search" data-size="s"></i>Discover</a></li>
+ <li><a id="post" href="/post" onClick={this.transition}><i data-icon="ei-pencil" data-size="s"></i>Post</a>
+ </li>
+ </ul>
+ </nav>
+ <div id="search">
+ <form action="/">
+ <input name="search" className="text"
+ placeholder="Search..." />
+ </form>
+ </div>
+ </div>
+ </header>
+ )
+ }
+} \ No newline at end of file