aboutsummaryrefslogtreecommitdiff
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
parent5f6126a48678ef56b3e26357ad8491c4892e3d89 (diff)
basic navigation
-rw-r--r--vnext/package.json1
-rw-r--r--vnext/src/app.js49
-rw-r--r--vnext/src/components/Discover.js50
-rw-r--r--vnext/src/components/Navigation.js42
-rw-r--r--vnext/src/style/main.css1
-rw-r--r--vnext/src/views/index.html8
-rw-r--r--vnext/yarn.lock28
7 files changed, 143 insertions, 36 deletions
diff --git a/vnext/package.json b/vnext/package.json
index 9170c983..9fc811e8 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -30,6 +30,7 @@
},
"dependencies": {
"babel-preset-env": "^1.6.1",
+ "history": "^4.7.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-markdown": "^3.1.4",
diff --git a/vnext/src/app.js b/vnext/src/app.js
index ba5ce816..fed735f7 100644
--- a/vnext/src/app.js
+++ b/vnext/src/app.js
@@ -1,37 +1,34 @@
-import "whatwg-fetch"
import React from "react"
-import PropTypes from "prop-types"
import ReactDOM from "react-dom"
+import createHistory from 'history/createBrowserHistory';
+const history = createHistory();
-import Message from "./components/Message"
+import Navigation from "./components/Navigation"
+import Discover from "./components/Discover"
-class Page extends React.Component {
+class App extends React.Component {
constructor(props) {
super(props)
- this.state = {msgs: [], loading: false}
+ this.navigate = this.navigate.bind(this);
+ this.state = {
+ location: history.location
+ }
}
- render() {
- var nodes = this.state.msgs.map(msg => {
- return (<Message key={msg.mid} data={msg}/>)
- });
- return (<div className="msgs">{nodes}</div>)
+ render() {
+ return (
+ <div className="wrapper">
+ <Navigation onNavigate={this.navigate} />
+ <Discover params={this.state.location.search} />
+ </div>
+ )
+ }
+ navigate(location) {
+ console.log(location);
+ history.push(location);
+ this.setState({location: location})
}
- componentDidMount() {
- fetch(this.props.source)
- .then(response => {
- return response.json()
- })
- .then(data =>
- this.setState({ msgs: data })
- ).catch(ex => {
- console.log(ex)
- });
- }
-};
-Page.propTypes = {
- msgs: PropTypes.array,
- source: PropTypes.string.isRequired
}
-ReactDOM.render(<Page source="https://api.juick.com/messages" />, document.getElementById("content"));
+
+ReactDOM.render(<App />, document.getElementById("wrapper"));
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
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index f1a84ceb..24108030 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -72,7 +72,6 @@ html {
#wrapper {
margin: 0 auto;
width: 1000px;
- margin-top: 50px;
}
#column {
float: left;
diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html
index da5ec8a5..9f8feae9 100644
--- a/vnext/src/views/index.html
+++ b/vnext/src/views/index.html
@@ -39,13 +39,7 @@
</script>
</head>
<body id="body">
-<div id="wrapper">
- <div class="page">
- <p>Login to comment</p>
- </div>
-<section id="content">
-</section>
-</div>
+<div id="wrapper"></div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
diff --git a/vnext/yarn.lock b/vnext/yarn.lock
index 8462b71c..7bd6aac9 100644
--- a/vnext/yarn.lock
+++ b/vnext/yarn.lock
@@ -2288,6 +2288,16 @@ hawk@3.1.3, hawk@~3.1.3:
hoek "2.x.x"
sntp "1.x.x"
+history@^4.7.2:
+ version "4.7.2"
+ resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
+ dependencies:
+ invariant "^2.2.1"
+ loose-envify "^1.2.0"
+ resolve-pathname "^2.2.0"
+ value-equal "^0.4.0"
+ warning "^3.0.0"
+
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -2441,7 +2451,7 @@ interpret@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
-invariant@^2.2.2:
+invariant@^2.2.1, invariant@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
@@ -2905,7 +2915,7 @@ longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
@@ -4208,6 +4218,10 @@ resolve-from@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+resolve-pathname@^2.2.0:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
+
resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -4955,6 +4969,10 @@ validate-npm-package-license@^3.0.1:
spdx-correct "~1.0.0"
spdx-expression-parse "~1.0.0"
+value-equal@^0.4.0:
+ version "0.4.0"
+ resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
+
vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -4996,6 +5014,12 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
+warning@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+ dependencies:
+ loose-envify "^1.0.0"
+
watchpack@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"