React/Redux - publish component #323
|
|
@ -7,8 +7,8 @@ function toggleNavBarSelection (value) {
|
|||
window.location.href = '/logout';
|
||||
} else if (selectedOption === 'VIEW') {
|
||||
// get channel info
|
||||
const channelName = getCookie('channel_name');
|
||||
const channelClaimId = getCookie('channel_claim_id');
|
||||
const channelName = getCookie('CHANNEL_NAME');
|
||||
const channelClaimId = getCookie('CHANNEL_LONG_ID');
|
||||
// redirect to channel page
|
||||
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 PropTypes from 'prop-types';
|
||||
|
||||
|
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 () {
|
||||
|
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
|
||||
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
|
||||
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
|
||||
|
||||
class ProgressBar extends React.Component {
|
||||
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 () {
|
||||
return (
|
||||
<div>
|
||||
{this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar 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
|
||||
{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
|
||||
</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 { getUserCookies, clearUserCookies } from 'utils/cookies';
|
||||
import Logo from 'components/Logo';
|
||||
import NavBarChannelDropdown from 'components/NavBarChannelDropdown';
|
||||
|
||||
const VIEW = 'VIEW';
|
||||
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 {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
|
@ -36,6 +13,7 @@ class NavBar extends React.Component {
|
|||
this.handleSelection = this.handleSelection.bind(this);
|
||||
}
|
||||
componentDidMount () {
|
||||
// check to see if the user is already logged in
|
||||
this.checkForLoggedInUser();
|
||||
}
|
||||
checkForLoggedInUser () {
|
||||
|
|
@ -48,7 +26,9 @@ class NavBar extends React.Component {
|
|||
}
|
||||
}
|
||||
handleSelection (event) {
|
||||
console.log('handling selection', event)
|
||||
const value = event.target.selectedOptions[0].value;
|
||||
console.log('value', value);
|
||||
switch (value) {
|
||||
case LOGOUT:
|
||||
// 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>
|
||||
</div>
|
||||
<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>
|
||||
{ this.props.channelName ? (
|
||||
<select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={this.handleSelection}>
|
||||
<option id="nav-bar-channel-select-channel-option">{this.props.channelName}</option>
|
||||
<option value={VIEW}>View</option>
|
||||
<option value={LOGOUT}>Logout</option>
|
||||
</select>
|
||||
<NavBarChannelDropdown
|
||||
channelName={this.props.channelName}
|
||||
handleSelection={this.handleSelection}
|
||||
VIEW={VIEW}
|
||||
LOGOUT={LOGOUT}
|
||||
/>
|
||||
) : (
|
||||
<a id="nav-bar-login-link" className="nav-bar-link link--nav" href="/login">Channel</a>
|
||||
)}
|
||||
|
|
|
|||
Misnamed