Scss #471
11 changed files with 86 additions and 196 deletions
24
client/build/components/ChannelInfoDisplay/index.js
Normal file
24
client/build/components/ChannelInfoDisplay/index.js
Normal file
|
@ -0,0 +1,24 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ChannelInfoDisplay = function ChannelInfoDisplay(_ref) {
|
||||
var name = _ref.name,
|
||||
longId = _ref.longId,
|
||||
shortId = _ref.shortId;
|
||||
return _react.default.createElement("div", null, _react.default.createElement("h2", null, "channel name: ", name), _react.default.createElement("p", {
|
||||
className: 'fine-print'
|
||||
}, "full channel id: ", longId), _react.default.createElement("p", {
|
||||
className: 'fine-print'
|
||||
}, "short channel id: ", shortId));
|
||||
};
|
||||
|
||||
var _default = ChannelInfoDisplay;
|
||||
exports.default = _default;
|
|
@ -7,17 +7,17 @@ exports.default = void 0;
|
|||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _SEO = _interopRequireDefault(require("@components/SEO"));
|
||||
var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
|
||||
|
||||
var _index = _interopRequireDefault(require("../../containers/NavBar/index"));
|
||||
var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
|
||||
|
||||
var _index2 = _interopRequireDefault(require("../ErrorPage/index"));
|
||||
var _AssetTitle = _interopRequireDefault(require("@containers/AssetTitle"));
|
||||
|
||||
var _index3 = _interopRequireDefault(require("../../containers/AssetTitle/index"));
|
||||
var _AssetDisplay = _interopRequireDefault(require("@containers/AssetDisplay"));
|
||||
|
||||
var _index4 = _interopRequireDefault(require("../../containers/AssetDisplay/index"));
|
||||
var _AssetInfo = _interopRequireDefault(require("@containers/AssetInfo"));
|
||||
|
||||
var _index5 = _interopRequireDefault(require("../../containers/AssetInfo/index"));
|
||||
var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
|
@ -55,26 +55,16 @@ function (_React$Component) {
|
|||
|
||||
if (asset) {
|
||||
var name = asset.claimData.name;
|
||||
return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
|
||||
return _react.default.createElement(_PageLayout.default, {
|
||||
pageTitle: "".concat(name, " - details"),
|
||||
asset: asset
|
||||
}), _react.default.createElement(_index.default, null), _react.default.createElement("div", {
|
||||
className: "row row--tall row--padded"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "column column--10"
|
||||
}, _react.default.createElement(_index3.default, null)), _react.default.createElement("div", {
|
||||
className: "column column--5 column--sml-10 align-content-top"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "row row--padded show-details-container"
|
||||
}, _react.default.createElement(_index4.default, null))), _react.default.createElement("div", {
|
||||
className: "column column--5 column--sml-10 align-content-top"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "row row--padded"
|
||||
}, _react.default.createElement(_index5.default, null)))));
|
||||
}, _react.default.createElement(_AssetTitle.default, null), _react.default.createElement(_HorizontalSplit.default, {
|
||||
leftSide: _react.default.createElement(_AssetDisplay.default, null),
|
||||
rightSide: _react.default.createElement(_AssetInfo.default, null)
|
||||
}));
|
||||
}
|
||||
|
||||
;
|
||||
return _react.default.createElement(_index2.default, {
|
||||
return _react.default.createElement(_ErrorPage.default, {
|
||||
error: 'loading asset data...'
|
||||
});
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ var _reactRouterDom = require("react-router-dom");
|
|||
|
||||
var _SEO = _interopRequireDefault(require("@components/SEO"));
|
||||
|
||||
var _index = _interopRequireDefault(require("../../containers/AssetDisplay/index"));
|
||||
var _AssetDisplay = _interopRequireDefault(require("@containers/AssetDisplay"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
|
@ -52,12 +52,11 @@ function (_React$Component) {
|
|||
name = _asset$claimData.name,
|
||||
claimId = _asset$claimData.claimId;
|
||||
return _react.default.createElement("div", {
|
||||
className: "row row--tall flex-container--column flex-container--center-center show-lite-container"
|
||||
className: "row--tall flex-container--column flex-container--center-center show-lite-container"
|
||||
}, _react.default.createElement(_SEO.default, {
|
||||
pageTitle: name,
|
||||
asset: asset
|
||||
}), _react.default.createElement(_index.default, null), _react.default.createElement(_reactRouterDom.Link, {
|
||||
id: "asset-boilerpate",
|
||||
}), _react.default.createElement(_AssetDisplay.default, null), _react.default.createElement(_reactRouterDom.Link, {
|
||||
className: "link--primary fine-print",
|
||||
to: "/".concat(claimId, "/").concat(name)
|
||||
}, "hosted via Spee.ch"));
|
||||
|
|
|
@ -11,6 +11,8 @@ var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
|
|||
|
||||
var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
|
||||
|
||||
var _ChannelInfoDisplay = _interopRequireDefault(require("@components/ChannelInfoDisplay"));
|
||||
|
||||
var _ChannelClaimsDisplay = _interopRequireDefault(require("@containers/ChannelClaimsDisplay"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
@ -53,15 +55,14 @@ function (_React$Component) {
|
|||
shortId = channel.shortId;
|
||||
return _react.default.createElement(_PageLayout.default, {
|
||||
pageTitle: name,
|
||||
pageUri: channel
|
||||
}, _react.default.createElement("h2", null, "channel name: ", name), _react.default.createElement("p", {
|
||||
className: 'fine-print'
|
||||
}, "full channel id: ", longId), _react.default.createElement("p", {
|
||||
className: 'fine-print'
|
||||
}, "short channel id: ", shortId), _react.default.createElement(_ChannelClaimsDisplay.default, null));
|
||||
channel: channel
|
||||
}, _react.default.createElement(_ChannelInfoDisplay.default, {
|
||||
name: name,
|
||||
longId: longId,
|
||||
shortId: shortId
|
||||
}), _react.default.createElement(_ChannelClaimsDisplay.default, null));
|
||||
}
|
||||
|
||||
;
|
||||
return _react.default.createElement(_ErrorPage.default, {
|
||||
error: 'loading channel data...'
|
||||
});
|
||||
|
|
|
@ -1,30 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _reactRedux = require("react-redux");
|
||||
|
||||
var _show = require("../../actions/show");
|
||||
|
||||
var _view = _interopRequireDefault(require("./view"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var mapStateToProps = function mapStateToProps(_ref) {
|
||||
var show = _ref.show;
|
||||
return {
|
||||
error: show.request.error,
|
||||
requestType: show.request.type
|
||||
};
|
||||
};
|
||||
|
||||
var mapDispatchToProps = {
|
||||
onHandleShowPageUri: _show.onHandleShowPageUri
|
||||
};
|
||||
|
||||
var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_view.default);
|
||||
|
||||
exports.default = _default;
|
|
@ -1,97 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
|
||||
|
||||
var _ShowAssetLite = _interopRequireDefault(require("@containers/ShowAssetLite"));
|
||||
|
||||
var _ShowAssetDetails = _interopRequireDefault(require("@containers/ShowAssetDetails"));
|
||||
|
||||
var _ShowChannel = _interopRequireDefault(require("@containers/ShowChannel"));
|
||||
|
||||
var _show_request_types = require("../../constants/show_request_types");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
|
||||
|
||||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
||||
|
||||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
||||
|
||||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
||||
|
||||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
||||
|
||||
function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
|
||||
|
||||
var ShowPage =
|
||||
/*#__PURE__*/
|
||||
function (_React$Component) {
|
||||
function ShowPage() {
|
||||
_classCallCheck(this, ShowPage);
|
||||
|
||||
return _possibleConstructorReturn(this, _getPrototypeOf(ShowPage).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(ShowPage, [{
|
||||
key: "componentDidMount",
|
||||
value: function componentDidMount() {
|
||||
this.props.onHandleShowPageUri(this.props.match.params);
|
||||
}
|
||||
}, {
|
||||
key: "componentWillReceiveProps",
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.match.params !== this.props.match.params) {
|
||||
this.props.onHandleShowPageUri(nextProps.match.params);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "render",
|
||||
value: function render() {
|
||||
var _this$props = this.props,
|
||||
error = _this$props.error,
|
||||
requestType = _this$props.requestType;
|
||||
|
||||
if (error) {
|
||||
return _react.default.createElement(_ErrorPage.default, {
|
||||
error: error
|
||||
});
|
||||
}
|
||||
|
||||
switch (requestType) {
|
||||
case _show_request_types.CHANNEL:
|
||||
return _react.default.createElement(_ShowChannel.default, null);
|
||||
|
||||
case _show_request_types.ASSET_LITE:
|
||||
return _react.default.createElement(_ShowAssetLite.default, null);
|
||||
|
||||
case _show_request_types.ASSET_DETAILS:
|
||||
return _react.default.createElement(_ShowAssetDetails.default, null);
|
||||
|
||||
default:
|
||||
return _react.default.createElement("p", null, "loading...");
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
_inherits(ShowPage, _React$Component);
|
||||
|
||||
return ShowPage;
|
||||
}(_react.default.Component);
|
||||
|
||||
;
|
||||
var _default = ShowPage;
|
||||
exports.default = _default;
|
13
client/src/components/ChannelInfoDisplay/index.jsx
Normal file
13
client/src/components/ChannelInfoDisplay/index.jsx
Normal file
|
@ -0,0 +1,13 @@
|
|||
import React from 'react';
|
||||
|
||||
const ChannelInfoDisplay = ({name, longId, shortId}) => {
|
||||
return (
|
||||
<div>
|
||||
<h2>channel name: {name}</h2>
|
||||
<p className={'fine-print'}>full channel id: {longId}</p>
|
||||
<p className={'fine-print'}>short channel id: {shortId}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChannelInfoDisplay;
|
|
@ -4,7 +4,6 @@ import HorizontalSplit from '@components/HorizontalSplit';
|
|||
import AboutSpeechOne from '@components/AboutSpeechOne';
|
||||
import AboutSpeechTwo from '@components/AboutSpeechTwo';
|
||||
|
||||
|
||||
class AboutPage extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react';
|
||||
import SEO from '@components/SEO';
|
||||
import NavBar from '../../containers/NavBar/index';
|
||||
import ErrorPage from '../ErrorPage/index';
|
||||
import AssetTitle from '../../containers/AssetTitle/index';
|
||||
import AssetDisplay from '../../containers/AssetDisplay/index';
|
||||
import AssetInfo from '../../containers/AssetInfo/index';
|
||||
import PageLayout from '@components/PageLayout';
|
||||
|
||||
import HorizontalSplit from '@components/HorizontalSplit';
|
||||
import AssetTitle from '@containers/AssetTitle';
|
||||
import AssetDisplay from '@containers/AssetDisplay';
|
||||
import AssetInfo from '@containers/AssetInfo';
|
||||
import ErrorPage from '@pages/ErrorPage';
|
||||
|
||||
class ShowAssetDetails extends React.Component {
|
||||
render () {
|
||||
|
@ -12,26 +13,15 @@ class ShowAssetDetails extends React.Component {
|
|||
if (asset) {
|
||||
const { claimData: { name } } = asset;
|
||||
return (
|
||||
<div>
|
||||
<SEO pageTitle={`${name} - details`} asset={asset} />
|
||||
<NavBar />
|
||||
<div className='row row--tall row--padded'>
|
||||
<div className='column column--10'>
|
||||
<AssetTitle />
|
||||
</div>
|
||||
<div className='column column--5 column--sml-10 align-content-top'>
|
||||
<div className='row row--padded show-details-container'>
|
||||
<AssetDisplay />
|
||||
</div>
|
||||
</div><div className='column column--5 column--sml-10 align-content-top'>
|
||||
<div className='row row--padded'>
|
||||
<AssetInfo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PageLayout pageTitle={`${name} - details`} asset={asset}>
|
||||
<AssetTitle />
|
||||
<HorizontalSplit
|
||||
leftSide={<AssetDisplay />}
|
||||
rightSide={<AssetInfo />}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
};
|
||||
}
|
||||
return (
|
||||
<ErrorPage error={'loading asset data...'} />
|
||||
);
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
// components
|
||||
import SEO from '@components/SEO';
|
||||
// containers
|
||||
import AssetDisplay from '../../containers/AssetDisplay/index';
|
||||
import AssetDisplay from '@containers/AssetDisplay';
|
||||
|
||||
class ShowLite extends React.Component {
|
||||
render () {
|
||||
|
@ -11,10 +9,10 @@ class ShowLite extends React.Component {
|
|||
if (asset) {
|
||||
const { name, claimId } = asset.claimData;
|
||||
return (
|
||||
<div className='row row--tall flex-container--column flex-container--center-center show-lite-container'>
|
||||
<div className='row--tall flex-container--column flex-container--center-center show-lite-container'>
|
||||
<SEO pageTitle={name} asset={asset} />
|
||||
<AssetDisplay />
|
||||
<Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
|
||||
<Link className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
|
||||
via Spee.ch</Link>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import PageLayout from '@components/PageLayout';
|
||||
import ErrorPage from '@pages/ErrorPage';
|
||||
import ChannelInfoDisplay from '@components/ChannelInfoDisplay';
|
||||
import ChannelClaimsDisplay from '@containers/ChannelClaimsDisplay';
|
||||
|
||||
class ShowChannel extends React.Component {
|
||||
|
@ -9,14 +10,16 @@ class ShowChannel extends React.Component {
|
|||
if (channel) {
|
||||
const { name, longId, shortId } = channel;
|
||||
return (
|
||||
<PageLayout pageTitle={name} pageUri={channel}>
|
||||
<h2>channel name: {name}</h2>
|
||||
<p className={'fine-print'}>full channel id: {longId}</p>
|
||||
<p className={'fine-print'}>short channel id: {shortId}</p>
|
||||
<PageLayout pageTitle={name} channel={channel}>
|
||||
<ChannelInfoDisplay
|
||||
name={name}
|
||||
longId={longId}
|
||||
shortId={shortId}
|
||||
/>
|
||||
<ChannelClaimsDisplay />
|
||||
</PageLayout>
|
||||
);
|
||||
};
|
||||
}
|
||||
return (
|
||||
<ErrorPage error={'loading channel data...'} />
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue