React/Redux - publish component #323
|
|
@ -7,8 +7,8 @@ function toggleNavBarSelection (value) {
|
||||||
window.location.href = '/logout';
|
window.location.href = '/logout';
|
||||||
} else if (selectedOption === 'VIEW') {
|
} else if (selectedOption === 'VIEW') {
|
||||||
// get channel info
|
// get channel info
|
||||||
const channelName = getCookie('channel_name');
|
const channelName = getCookie('CHANNEL_NAME');
|
||||||
const channelClaimId = getCookie('channel_claim_id');
|
const channelClaimId = getCookie('CHANNEL_LONG_ID');
|
||||||
// redirect to channel page
|
// redirect to channel page
|
||||||
window.location.href = `/${channelName}:${channelClaimId}`;
|
window.location.href = `/${channelName}:${channelClaimId}`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
7
react/components/ActiveStatusBar.jsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
function ActiveStatusBar () {
|
||||||
|
return <span className="progress-bar progress-bar--active">| </span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ActiveStatusBar;
|
||||||
7
react/components/InactiveStatusBar.jsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
function InactiveStatusBar () {
|
||||||
|
return <span className="progress-bar progress-bar--inactive">| </span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InactiveStatusBar();
|
||||||
28
react/components/Logo.jsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
function Logo () {
|
||||||
|
return (
|
||||||
|
<svg version="1.1" id="Layer_1" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enableBackground="new 0 0 80 31" className="nav-bar-logo">
|
||||||
|
<a href="/">
|
||||||
|
<title>Logo</title>
|
||||||
|
<desc>Spee.ch logo</desc>
|
||||||
|
<g id="About">
|
||||||
|
<g id="Publish-Form-V2-_x28_filled_x29_" transform="translate(-42.000000, -23.000000)">
|
||||||
|
<g id="Group-17" transform="translate(42.000000, 22.000000)">
|
||||||
|
<text transform="matrix(1 0 0 1 0 20)" fontSize="25" fontFamily="Roboto">Spee<h</text>
|
||||||
|
<g id="Group-16" transform="translate(0.000000, 30.000000)">
|
||||||
|
<path id="Line-8" fill="none" stroke="#09F911" strokeWidth="1" strokeLinecap="square" d="M0.5,1.5h15"/>
|
||||||
|
<path id="Line-8-Copy" fill="none" stroke="#029D74" strokeWidth="1" strokeLinecap="square" d="M16.5,1.5h15"/>
|
||||||
|
<path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" strokeWidth="1" strokeLinecap="square" d="M32.5,1.5h15"/>
|
||||||
|
<path id="Line-8-Copy-3" fill="none" stroke="#4156C5" strokeWidth="1" strokeLinecap="square" d="M48.5,1.5h15"/>
|
||||||
|
<path id="Line-8-Copy-4" fill="none" stroke="#635688" strokeWidth="1" strokeLinecap="square" d="M64.5,1.5h15"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</a>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Logo;
|
||||||
13
react/components/NavBarChannelDropdown.jsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
Misnamed Misnamed
|
|||||||
|
import React from 'react';
|
||||||
|
Misnamed Misnamed
|
|||||||
|
|
||||||
|
Misnamed Misnamed
|
|||||||
|
function Logo ({ channelName, handleSelection, VIEW, LOGOUT }) {
|
||||||
|
Misnamed Misnamed
|
|||||||
|
return (
|
||||||
|
Misnamed Misnamed
|
|||||||
|
<select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={handleSelection}>
|
||||||
|
Misnamed Misnamed
|
|||||||
|
<option id="nav-bar-channel-select-channel-option">{channelName}</option>
|
||||||
|
Misnamed Misnamed
|
|||||||
|
<option value={VIEW}>View</option>
|
||||||
|
Misnamed Misnamed
|
|||||||
|
<option value={LOGOUT}>Logout</option>
|
||||||
|
Misnamed Misnamed
|
|||||||
|
</select>
|
||||||
|
Misnamed Misnamed
|
|||||||
|
);
|
||||||
|
Misnamed Misnamed
|
|||||||
|
};
|
||||||
|
Misnamed Misnamed
|
|||||||
|
|
||||||
|
Misnamed Misnamed
|
|||||||
|
export default Logo;
|
||||||
|
Misnamed Misnamed
|
|||||||
|
|
@ -1,13 +1,7 @@
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import ActiveStatusBar from 'components/ActiveStatusBar';
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
function ActiveBar () {
|
import InactiveStatusBar from 'components/InactiveStatusBar';
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
return <span className="progress-bar progress-bar--active">| </span>;
|
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
}
|
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
|
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
function InactiveBar () {
|
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
return <span className="progress-bar progress-bar--inactive">| </span>;
|
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
}
|
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
|
|
||||||
class ProgressBar extends React.Component {
|
class ProgressBar extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
@ -70,7 +64,7 @@ class ProgressBar extends React.Component {
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index}/> )}
|
{this.state.bars.map((bar, index) => bar.isActive ? <ActiveStatusBar key={index} /> : <InactiveStatusBar key={index}/>)}
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
|||||||
|
|
@ -1,34 +1,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { getUserCookies, clearUserCookies } from 'utils/cookies';
|
import { getUserCookies, clearUserCookies } from 'utils/cookies';
|
||||||
|
import Logo from 'components/Logo';
|
||||||
|
import NavBarChannelDropdown from 'components/NavBarChannelDropdown';
|
||||||
|
|
||||||
const VIEW = 'VIEW';
|
const VIEW = 'VIEW';
|
||||||
const LOGOUT = 'LOGOUT';
|
const LOGOUT = 'LOGOUT';
|
||||||
|
|
||||||
function Logo () {
|
|
||||||
return (
|
|
||||||
<svg version="1.1" id="Layer_1" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enableBackground="new 0 0 80 31" className="nav-bar-logo">
|
|
||||||
<a href="/">
|
|
||||||
<title>Logo</title>
|
|
||||||
<desc>Spee.ch logo</desc>
|
|
||||||
<g id="About">
|
|
||||||
<g id="Publish-Form-V2-_x28_filled_x29_" transform="translate(-42.000000, -23.000000)">
|
|
||||||
<g id="Group-17" transform="translate(42.000000, 22.000000)">
|
|
||||||
<text transform="matrix(1 0 0 1 0 20)" fontSize="25" fontFamily="Roboto">Spee<h</text>
|
|
||||||
<g id="Group-16" transform="translate(0.000000, 30.000000)">
|
|
||||||
<path id="Line-8" fill="none" stroke="#09F911" strokeWidth="1" strokeLinecap="square" d="M0.5,1.5h15"/>
|
|
||||||
<path id="Line-8-Copy" fill="none" stroke="#029D74" strokeWidth="1" strokeLinecap="square" d="M16.5,1.5h15"/>
|
|
||||||
<path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" strokeWidth="1" strokeLinecap="square" d="M32.5,1.5h15"/>
|
|
||||||
<path id="Line-8-Copy-3" fill="none" stroke="#4156C5" strokeWidth="1" strokeLinecap="square" d="M48.5,1.5h15"/>
|
|
||||||
<path id="Line-8-Copy-4" fill="none" stroke="#635688" strokeWidth="1" strokeLinecap="square" d="M64.5,1.5h15"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</a>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
class NavBar extends React.Component {
|
class NavBar extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
@ -36,6 +13,7 @@ class NavBar extends React.Component {
|
||||||
this.handleSelection = this.handleSelection.bind(this);
|
this.handleSelection = this.handleSelection.bind(this);
|
||||||
}
|
}
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
|
// check to see if the user is already logged in
|
||||||
this.checkForLoggedInUser();
|
this.checkForLoggedInUser();
|
||||||
}
|
}
|
||||||
checkForLoggedInUser () {
|
checkForLoggedInUser () {
|
||||||
|
|
@ -48,7 +26,9 @@ class NavBar extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
handleSelection (event) {
|
handleSelection (event) {
|
||||||
|
console.log('handling selection', event)
|
||||||
const value = event.target.selectedOptions[0].value;
|
const value = event.target.selectedOptions[0].value;
|
||||||
|
console.log('value', value);
|
||||||
switch (value) {
|
switch (value) {
|
||||||
case LOGOUT:
|
case LOGOUT:
|
||||||
// remove session cookies
|
// remove session cookies
|
||||||
|
|
@ -73,14 +53,15 @@ class NavBar extends React.Component {
|
||||||
<span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
|
<span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="nav-bar--right">
|
<div className="nav-bar--right">
|
||||||
<a className="nav-bar-link link--nav" href="/">Publish</a>
|
<a className="nav-bar-link link--nav-active" href="/">Publish</a>
|
||||||
<a className="nav-bar-link link--nav" href="/about">About</a>
|
<a className="nav-bar-link link--nav" href="/about">About</a>
|
||||||
{ this.props.channelName ? (
|
{ this.props.channelName ? (
|
||||||
<select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={this.handleSelection}>
|
<NavBarChannelDropdown
|
||||||
<option id="nav-bar-channel-select-channel-option">{this.props.channelName}</option>
|
channelName={this.props.channelName}
|
||||||
<option value={VIEW}>View</option>
|
handleSelection={this.handleSelection}
|
||||||
<option value={LOGOUT}>Logout</option>
|
VIEW={VIEW}
|
||||||
</select>
|
LOGOUT={LOGOUT}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<a id="nav-bar-login-link" className="nav-bar-link link--nav" href="/login">Channel</a>
|
<a id="nav-bar-login-link" className="nav-bar-link link--nav" href="/login">Channel</a>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Misnamed