vertically aligned channel contents and reversed their order
This commit is contained in:
parent
49715e742e
commit
72d05c2451
23 changed files with 243 additions and 207 deletions
|
@ -31,8 +31,6 @@ function onHandleShowPageUri(params) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function onRequestError(error) {
|
||||
return {
|
||||
type: actions.REQUEST_ERROR,
|
||||
|
@ -40,8 +38,6 @@ function onRequestError(error) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function onNewChannelRequest(channelName, channelId) {
|
||||
var requestType = _show_request_types.CHANNEL;
|
||||
var requestId = "cr#".concat(channelName, "#").concat(channelId);
|
||||
|
@ -56,8 +52,6 @@ function onNewChannelRequest(channelName, channelId) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function onNewAssetRequest(name, id, channelName, channelId, extension) {
|
||||
var requestType = extension ? _show_request_types.ASSET_LITE : _show_request_types.ASSET_DETAILS;
|
||||
var requestId = "ar#".concat(name, "#").concat(id, "#").concat(channelName, "#").concat(channelId);
|
||||
|
@ -78,8 +72,6 @@ function onNewAssetRequest(name, id, channelName, channelId, extension) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function onRequestUpdate(requestType, requestId) {
|
||||
return {
|
||||
type: actions.REQUEST_UPDATE,
|
||||
|
@ -90,8 +82,6 @@ function onRequestUpdate(requestType, requestId) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function addRequestToRequestList(id, error, key) {
|
||||
return {
|
||||
type: actions.REQUEST_LIST_ADD,
|
||||
|
@ -101,9 +91,8 @@ function addRequestToRequestList(id, error, key) {
|
|||
key: key
|
||||
}
|
||||
};
|
||||
}
|
||||
} // asset actions
|
||||
|
||||
; // asset actions
|
||||
|
||||
function addAssetToAssetList(id, error, name, claimId, shortId, claimData) {
|
||||
return {
|
||||
|
@ -133,8 +122,6 @@ function addNewChannelToChannelList(id, name, shortId, longId, claimsData) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function onUpdateChannelClaims(channelKey, name, longId, page) {
|
||||
return {
|
||||
type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC,
|
||||
|
@ -147,8 +134,6 @@ function onUpdateChannelClaims(channelKey, name, longId, page) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function updateChannelClaims(channelListId, claimsData) {
|
||||
return {
|
||||
type: actions.CHANNEL_CLAIMS_UPDATE_SUCCESS,
|
||||
|
@ -157,9 +142,8 @@ function updateChannelClaims(channelListId, claimsData) {
|
|||
claimsData: claimsData
|
||||
}
|
||||
};
|
||||
}
|
||||
} // display a file
|
||||
|
||||
; // display a file
|
||||
|
||||
function fileRequested(name, claimId) {
|
||||
return {
|
||||
|
@ -171,8 +155,6 @@ function fileRequested(name, claimId) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function updateFileAvailability(status) {
|
||||
return {
|
||||
type: actions.FILE_AVAILABILITY_UPDATE,
|
||||
|
@ -180,13 +162,9 @@ function updateFileAvailability(status) {
|
|||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function updateDisplayAssetError(error) {
|
||||
return {
|
||||
type: actions.DISPLAY_ASSET_ERROR,
|
||||
data: error
|
||||
};
|
||||
}
|
||||
|
||||
;
|
||||
}
|
|
@ -21,9 +21,7 @@ var AssetPreview = function AssetPreview(_ref) {
|
|||
thumbnail = _ref$claimData.thumbnail;
|
||||
var directSourceLink = "".concat(claimId, "/").concat(name, ".").concat(fileExt);
|
||||
var showUrlLink = "/".concat(claimId, "/").concat(name);
|
||||
return _react.default.createElement("div", {
|
||||
className: "asset-preview-holder"
|
||||
}, _react.default.createElement(_reactRouterDom.Link, {
|
||||
return _react.default.createElement(_reactRouterDom.Link, {
|
||||
to: showUrlLink
|
||||
}, function () {
|
||||
switch (contentType) {
|
||||
|
@ -47,7 +45,7 @@ var AssetPreview = function AssetPreview(_ref) {
|
|||
default:
|
||||
return _react.default.createElement("p", null, "unsupported file type");
|
||||
}
|
||||
}()));
|
||||
}());
|
||||
};
|
||||
|
||||
var _default = AssetPreview;
|
||||
|
|
|
@ -7,6 +7,8 @@ exports.default = void 0;
|
|||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _Row = _interopRequireDefault(require("@components/Row"));
|
||||
|
||||
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); }
|
||||
|
@ -44,16 +46,16 @@ function (_React$Component) {
|
|||
}, _react.default.createElement("div", {
|
||||
className: 'left-side'
|
||||
}, _react.default.createElement("div", {
|
||||
className: 'column'
|
||||
}, this.props.itemA), _react.default.createElement("div", {
|
||||
className: 'column'
|
||||
}, this.props.itemB)), _react.default.createElement("div", {
|
||||
className: 'column-a'
|
||||
}, _react.default.createElement(_Row.default, null, this.props.columnA)), _react.default.createElement("div", {
|
||||
className: 'column-b'
|
||||
}, _react.default.createElement(_Row.default, null, this.props.columnB))), _react.default.createElement("div", {
|
||||
className: 'right-side'
|
||||
}, _react.default.createElement("div", {
|
||||
className: 'column'
|
||||
}, this.props.itemC), _react.default.createElement("div", {
|
||||
className: 'column'
|
||||
}, this.props.itemD)));
|
||||
className: 'column-c'
|
||||
}, _react.default.createElement(_Row.default, null, this.props.columnC)), _react.default.createElement("div", {
|
||||
className: 'column-d'
|
||||
}, _react.default.createElement(_Row.default, null, this.props.columnD))));
|
||||
}
|
||||
}]);
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@ var _Row = _interopRequireDefault(require("@components/Row"));
|
|||
|
||||
var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary"));
|
||||
|
||||
var _createGroupedList = require("../../utils/createGroupedList.js");
|
||||
var _createGroupedList = _interopRequireDefault(require("../../utils/createGroupedList.js"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
|
@ -84,31 +84,38 @@ function (_React$Component) {
|
|||
currentPage = _this$props2$channel$.currentPage,
|
||||
totalPages = _this$props2$channel$.totalPages,
|
||||
defaultThumbnail = _this$props2.defaultThumbnail;
|
||||
var groupedClaimsList = (0, _createGroupedList.createGroupedList)(claims, 4);
|
||||
var groupedClaimsList = (0, _createGroupedList.default)(claims, 4);
|
||||
|
||||
if (claims.length > 0) {
|
||||
return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, groupedClaimsList.map(function (group, index) {
|
||||
return _react.default.createElement("div", {
|
||||
className: 'channel-claims-display'
|
||||
}, _react.default.createElement("div", null, groupedClaimsList.map(function (group, index) {
|
||||
var itemA = group[0];
|
||||
var itemB = group[1];
|
||||
var itemC = group[2];
|
||||
var itemD = group[3];
|
||||
return _react.default.createElement(_HorizontalQuadSplit.default, {
|
||||
itemA: group[0] ? _react.default.createElement(_AssetPreview.default, {
|
||||
key: "claims-row-".concat(index),
|
||||
columnA: itemA && _react.default.createElement(_AssetPreview.default, {
|
||||
defaultThumbnail: defaultThumbnail,
|
||||
claimData: group[0],
|
||||
key: "".concat(group[0].name, "-").concat(index)
|
||||
}) : null,
|
||||
itemB: group[1] ? _react.default.createElement(_AssetPreview.default, {
|
||||
claimData: itemA,
|
||||
key: "".concat(itemA.name, "-").concat(itemA.id)
|
||||
}),
|
||||
columnB: itemB && _react.default.createElement(_AssetPreview.default, {
|
||||
defaultThumbnail: defaultThumbnail,
|
||||
claimData: group[1],
|
||||
key: "".concat(group[1].name, "-").concat(index)
|
||||
}) : null,
|
||||
itemC: group[2] ? _react.default.createElement(_AssetPreview.default, {
|
||||
claimData: itemB,
|
||||
key: "".concat(itemB.name, "-").concat(itemB.id)
|
||||
}),
|
||||
columnC: itemC && _react.default.createElement(_AssetPreview.default, {
|
||||
defaultThumbnail: defaultThumbnail,
|
||||
claimData: group[2],
|
||||
key: "".concat(group[2].name, "-").concat(index)
|
||||
}) : null,
|
||||
itemD: group[3] ? _react.default.createElement(_AssetPreview.default, {
|
||||
claimData: itemC,
|
||||
key: "".concat(itemC.name, "-").concat(itemC.id)
|
||||
}),
|
||||
columnD: itemD && _react.default.createElement(_AssetPreview.default, {
|
||||
defaultThumbnail: defaultThumbnail,
|
||||
claimData: group[3],
|
||||
key: "".concat(group[3].name, "-").concat(index)
|
||||
}) : null
|
||||
claimData: itemD,
|
||||
key: "".concat(itemD.name, "-").concat(itemD.id)
|
||||
})
|
||||
});
|
||||
})), _react.default.createElement(_Row.default, null, currentPage > 1 && _react.default.createElement(_ButtonSecondary.default, {
|
||||
value: 'Previous Page',
|
||||
|
|
|
@ -15,6 +15,8 @@ var _ChannelInfoDisplay = _interopRequireDefault(require("@components/ChannelInf
|
|||
|
||||
var _ChannelClaimsDisplay = _interopRequireDefault(require("@containers/ChannelClaimsDisplay"));
|
||||
|
||||
var _Row = _interopRequireDefault(require("@components/Row"));
|
||||
|
||||
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); }
|
||||
|
@ -56,11 +58,11 @@ function (_React$Component) {
|
|||
return _react.default.createElement(_PageLayout.default, {
|
||||
pageTitle: name,
|
||||
channel: channel
|
||||
}, _react.default.createElement(_ChannelInfoDisplay.default, {
|
||||
}, _react.default.createElement(_Row.default, null, _react.default.createElement(_ChannelInfoDisplay.default, {
|
||||
name: name,
|
||||
longId: longId,
|
||||
shortId: shortId
|
||||
}), _react.default.createElement(_ChannelClaimsDisplay.default, null));
|
||||
})), _react.default.createElement(_ChannelClaimsDisplay.default, null));
|
||||
}
|
||||
|
||||
return _react.default.createElement(_ErrorPage.default, {
|
||||
|
|
|
@ -35,14 +35,13 @@ regeneratorRuntime.mark(getNewClaimsAndUpdateChannel),
|
|||
regeneratorRuntime.mark(watchUpdateChannelClaims);
|
||||
|
||||
function newChannelRequest(action) {
|
||||
var _action$data, requestType, requestId, channelName, channelId, state, host, longId, shortId, _ref, _ref$data, channelKey, claimsData, _ref2;
|
||||
var _action$data, requestType, requestId, channelName, channelId, claimsData, state, host, longId, shortId, _ref, _ref$data, channelKey, _ref2;
|
||||
|
||||
return regeneratorRuntime.wrap(function newChannelRequest$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
_action$data = action.data, requestType = _action$data.requestType, requestId = _action$data.requestId, channelName = _action$data.channelName, channelId = _action$data.channelId; // put an action to update the request in redux
|
||||
|
||||
_action$data = action.data, requestType = _action$data.requestType, requestId = _action$data.requestId, channelName = _action$data.channelName, channelId = _action$data.channelId;
|
||||
_context.next = 3;
|
||||
return (0, _effects.put)((0, _show.onRequestUpdate)(requestType, requestId));
|
||||
|
||||
|
@ -153,8 +152,6 @@ function watchNewChannelRequest() {
|
|||
}, _marked2, this);
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
function getNewClaimsAndUpdateChannel(action) {
|
||||
var _action$data2, channelKey, name, longId, page, host, claimsData, _ref3;
|
||||
|
||||
|
|
|
@ -6,10 +6,24 @@ Object.defineProperty(exports, "__esModule", {
|
|||
exports.createGroupedList = void 0;
|
||||
|
||||
var createGroupedList = function createGroupedList(list, size) {
|
||||
if (!size) {
|
||||
throw new Error('no size provided to createGroupedList');
|
||||
}
|
||||
|
||||
if (!list) {
|
||||
throw new Error('no list provided to createGroupedList');
|
||||
}
|
||||
|
||||
var groupedList = [];
|
||||
|
||||
while (list.length > 0) {
|
||||
groupedList.push(list.splice(0, size));
|
||||
for (var i = 0; i < list.length; i = i + size) {
|
||||
var group = [];
|
||||
|
||||
for (var j = i; j < i + size; j++) {
|
||||
group.push(list[j]);
|
||||
}
|
||||
|
||||
groupedList.push(group);
|
||||
}
|
||||
|
||||
return groupedList;
|
||||
|
|
|
@ -36,6 +36,7 @@
|
|||
@import 'components/_vertical-split';
|
||||
@import 'components/_tooltip';
|
||||
|
||||
@import 'containers/_channel-claims-display';
|
||||
@import 'containers/_dropzone';
|
||||
@import 'containers/_publish-url-input';
|
||||
@import 'containers/_publish-status';
|
||||
|
|
|
@ -1,11 +1,3 @@
|
|||
.asset-preview-holder {
|
||||
clear : both;
|
||||
display: inline-block;
|
||||
width : 31%;
|
||||
padding: 0px;
|
||||
margin : 1%;
|
||||
}
|
||||
|
||||
.asset-preview-image {
|
||||
width : 100%;
|
||||
padding: 0px;
|
||||
|
|
|
@ -9,10 +9,13 @@
|
|||
flex-direction : row;
|
||||
justify-content: space-between;
|
||||
align-items : flex-start;
|
||||
.column {
|
||||
.column-a, .column-b, .column-c, .column-d {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
};
|
||||
.column-a, .column-b, .column-c {
|
||||
padding-right: $secondary-padding;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
@ -23,9 +26,12 @@
|
|||
flex-direction : column;
|
||||
.left-side, .right-side {
|
||||
width : 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: $secondary-padding;
|
||||
.column-a, .column-b, .column-c, .column-d {
|
||||
width: 50%;
|
||||
};
|
||||
.column-b {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -37,12 +43,10 @@
|
|||
flex-direction : column;
|
||||
.left-side, .right-side {
|
||||
flex-direction : column;
|
||||
.column {
|
||||
width : 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: $secondary-padding;
|
||||
}
|
||||
.column-a, .column-b, .column-c, .column-d {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
|
5
client/scss/containers/_channel-claims-display.scss
Normal file
5
client/scss/containers/_channel-claims-display.scss
Normal file
|
@ -0,0 +1,5 @@
|
|||
.channel-claims-display {
|
||||
.button--secondary {
|
||||
margin-right: $secondary-padding;
|
||||
}
|
||||
}
|
|
@ -7,14 +7,14 @@ export function onHandleShowPageUri (params) {
|
|||
type: actions.HANDLE_SHOW_URI,
|
||||
data: params,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function onRequestError (error) {
|
||||
return {
|
||||
type: actions.REQUEST_ERROR,
|
||||
data: error,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function onNewChannelRequest (channelName, channelId) {
|
||||
const requestType = CHANNEL;
|
||||
|
@ -23,7 +23,7 @@ export function onNewChannelRequest (channelName, channelId) {
|
|||
type: actions.CHANNEL_REQUEST_NEW,
|
||||
data: { requestType, requestId, channelName, channelId },
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function onNewAssetRequest (name, id, channelName, channelId, extension) {
|
||||
const requestType = extension ? ASSET_LITE : ASSET_DETAILS;
|
||||
|
@ -43,7 +43,7 @@ export function onNewAssetRequest (name, id, channelName, channelId, extension)
|
|||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function onRequestUpdate (requestType, requestId) {
|
||||
return {
|
||||
|
@ -53,14 +53,14 @@ export function onRequestUpdate (requestType, requestId) {
|
|||
requestId,
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function addRequestToRequestList (id, error, key) {
|
||||
return {
|
||||
type: actions.REQUEST_LIST_ADD,
|
||||
data: { id, error, key },
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
// asset actions
|
||||
|
||||
|
@ -76,23 +76,29 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat
|
|||
export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) {
|
||||
return {
|
||||
type: actions.CHANNEL_ADD,
|
||||
data: { id, name, shortId, longId, claimsData },
|
||||
data: {
|
||||
id,
|
||||
name,
|
||||
shortId,
|
||||
longId,
|
||||
claimsData,
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function onUpdateChannelClaims (channelKey, name, longId, page) {
|
||||
return {
|
||||
type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC,
|
||||
data: {channelKey, name, longId, page},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function updateChannelClaims (channelListId, claimsData) {
|
||||
return {
|
||||
type: actions.CHANNEL_CLAIMS_UPDATE_SUCCESS,
|
||||
data: {channelListId, claimsData},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
// display a file
|
||||
|
||||
|
@ -101,18 +107,18 @@ export function fileRequested (name, claimId) {
|
|||
type: actions.FILE_REQUESTED,
|
||||
data: { name, claimId },
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function updateFileAvailability (status) {
|
||||
return {
|
||||
type: actions.FILE_AVAILABILITY_UPDATE,
|
||||
data: status,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function updateDisplayAssetError (error) {
|
||||
return {
|
||||
type: actions.DISPLAY_ASSET_ERROR,
|
||||
data: error,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
|
@ -5,37 +5,35 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
|
|||
const directSourceLink = `${claimId}/${name}.${fileExt}`;
|
||||
const showUrlLink = `/${claimId}/${name}`;
|
||||
return (
|
||||
<div className='asset-preview-holder'>
|
||||
<Link to={showUrlLink} >
|
||||
{(() => {
|
||||
switch (contentType) {
|
||||
case 'image/jpeg':
|
||||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
case 'image/gif':
|
||||
return (
|
||||
<img
|
||||
className={'asset-preview-image'}
|
||||
src={directSourceLink}
|
||||
alt={name}
|
||||
/>
|
||||
);
|
||||
case 'video/mp4':
|
||||
return (
|
||||
<img
|
||||
className={'asset-preview-video'}
|
||||
src={thumbnail || defaultThumbnail}
|
||||
alt={name}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<p>unsupported file type</p>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Link>
|
||||
</div>
|
||||
<Link to={showUrlLink} >
|
||||
{(() => {
|
||||
switch (contentType) {
|
||||
case 'image/jpeg':
|
||||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
case 'image/gif':
|
||||
return (
|
||||
<img
|
||||
className={'asset-preview-image'}
|
||||
src={directSourceLink}
|
||||
alt={name}
|
||||
/>
|
||||
);
|
||||
case 'video/mp4':
|
||||
return (
|
||||
<img
|
||||
className={'asset-preview-video'}
|
||||
src={thumbnail || defaultThumbnail}
|
||||
alt={name}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<p>unsupported file type</p>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,23 +1,32 @@
|
|||
import React from 'react';
|
||||
import Row from '@components/Row';
|
||||
|
||||
class HorizontalTriSplit extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className={'horizontal-quad-split'}>
|
||||
<div className={'left-side'}>
|
||||
<div className={'column'}>
|
||||
{this.props.itemA}
|
||||
<div className={'column-a'}>
|
||||
<Row>
|
||||
{this.props.columnA}
|
||||
</Row>
|
||||
</div>
|
||||
<div className={'column'}>
|
||||
{this.props.itemB}
|
||||
<div className={'column-b'}>
|
||||
<Row>
|
||||
{this.props.columnB}
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'right-side'}>
|
||||
<div className={'column'}>
|
||||
{this.props.itemC}
|
||||
<div className={'column-c'}>
|
||||
<Row>
|
||||
{this.props.columnC}
|
||||
</Row>
|
||||
</div>
|
||||
<div className={'column'}>
|
||||
{this.props.itemD}
|
||||
<div className={'column-d'}>
|
||||
<Row>
|
||||
{this.props.columnD}
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,8 +3,7 @@ import AssetPreview from '@components/AssetPreview';
|
|||
import HorizontalQuadSplit from '@components/HorizontalQuadSplit';
|
||||
import Row from '@components/Row';
|
||||
import ButtonSecondary from '@components/ButtonSecondary';
|
||||
|
||||
import { createGroupedList } from '../../utils/createGroupedList.js';
|
||||
import createGroupedList from '../../utils/createGroupedList.js';
|
||||
|
||||
class ChannelClaimsDisplay extends React.Component {
|
||||
constructor (props) {
|
||||
|
@ -31,59 +30,68 @@ class ChannelClaimsDisplay extends React.Component {
|
|||
const groupedClaimsList = createGroupedList(claims, 4);
|
||||
if (claims.length > 0) {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
{groupedClaimsList.map((group, index) => <HorizontalQuadSplit
|
||||
itemA={
|
||||
group[0] ? (
|
||||
<AssetPreview
|
||||
defaultThumbnail={defaultThumbnail}
|
||||
claimData={group[0]}
|
||||
key={`${group[0].name}-${index}`}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
itemB={
|
||||
group[1] ? (
|
||||
<AssetPreview
|
||||
defaultThumbnail={defaultThumbnail}
|
||||
claimData={group[1]}
|
||||
key={`${group[1].name}-${index}`}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
itemC={
|
||||
group[2] ? (
|
||||
<AssetPreview
|
||||
defaultThumbnail={defaultThumbnail}
|
||||
claimData={group[2]}
|
||||
key={`${group[2].name}-${index}`}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
itemD={
|
||||
group[3] ? (
|
||||
<AssetPreview
|
||||
defaultThumbnail={defaultThumbnail}
|
||||
claimData={group[3]}
|
||||
key={`${group[3].name}-${index}`}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
/>)}
|
||||
</Row>
|
||||
<div className={'channel-claims-display'}>
|
||||
<div>
|
||||
{groupedClaimsList.map((group, index) => {
|
||||
const itemA = group[0];
|
||||
const itemB = group[1];
|
||||
const itemC = group[2];
|
||||
const itemD = group[3];
|
||||
return (
|
||||
<HorizontalQuadSplit
|
||||
key={`claims-row-${index}`}
|
||||
columnA={
|
||||
itemA && (
|
||||
<AssetPreview
|
||||
defaultThumbnail={defaultThumbnail}
|
||||
claimData={itemA}
|
||||
key={`${itemA.name}-${itemA.id}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
columnB={
|
||||
itemB && (
|
||||
<AssetPreview
|
||||
defaultThumbnail={defaultThumbnail}
|
||||
claimData={itemB}
|
||||
key={`${itemB.name}-${itemB.id}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
columnC={
|
||||
itemC && (
|
||||
<AssetPreview
|
||||
defaultThumbnail={defaultThumbnail}
|
||||
claimData={itemC}
|
||||
key={`${itemC.name}-${itemC.id}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
columnD={
|
||||
itemD && (
|
||||
<AssetPreview
|
||||
defaultThumbnail={defaultThumbnail}
|
||||
claimData={itemD}
|
||||
key={`${itemD.name}-${itemD.id}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Row>
|
||||
{(currentPage > 1) &&
|
||||
<ButtonSecondary
|
||||
value={'Previous Page'}
|
||||
onClickHandler={this.showPreviousResultsPage}
|
||||
/>
|
||||
<ButtonSecondary
|
||||
value={'Previous Page'}
|
||||
onClickHandler={this.showPreviousResultsPage}
|
||||
/>
|
||||
}
|
||||
{(currentPage < totalPages) &&
|
||||
<ButtonSecondary
|
||||
value={'Next Page'}
|
||||
onClickHandler={this.showNextResultsPage}
|
||||
/>
|
||||
<ButtonSecondary
|
||||
value={'Next Page'}
|
||||
onClickHandler={this.showNextResultsPage}
|
||||
/>
|
||||
}
|
||||
</Row>
|
||||
</div>
|
||||
|
|
|
@ -3,6 +3,7 @@ import PageLayout from '@components/PageLayout';
|
|||
import ErrorPage from '@pages/ErrorPage';
|
||||
import ChannelInfoDisplay from '@components/ChannelInfoDisplay';
|
||||
import ChannelClaimsDisplay from '@containers/ChannelClaimsDisplay';
|
||||
import Row from '@components/Row';
|
||||
|
||||
class ShowChannel extends React.Component {
|
||||
render () {
|
||||
|
@ -14,11 +15,13 @@ class ShowChannel extends React.Component {
|
|||
pageTitle={name}
|
||||
channel={channel}
|
||||
>
|
||||
<ChannelInfoDisplay
|
||||
name={name}
|
||||
longId={longId}
|
||||
shortId={shortId}
|
||||
/>
|
||||
<Row>
|
||||
<ChannelInfoDisplay
|
||||
name={name}
|
||||
longId={longId}
|
||||
shortId={shortId}
|
||||
/>
|
||||
</Row>
|
||||
<ChannelClaimsDisplay />
|
||||
</PageLayout>
|
||||
);
|
||||
|
|
|
@ -7,6 +7,7 @@ import { selectSiteHost } from '../selectors/site';
|
|||
|
||||
export function * newChannelRequest (action) {
|
||||
const { requestType, requestId, channelName, channelId } = action.data;
|
||||
let claimsData;
|
||||
// put an action to update the request in redux
|
||||
yield put(onRequestUpdate(requestType, requestId));
|
||||
// is this an existing request?
|
||||
|
@ -26,27 +27,28 @@ export function * newChannelRequest (action) {
|
|||
// store the request in the channel requests list
|
||||
const channelKey = `c#${channelName}#${longId}`;
|
||||
yield put(addRequestToRequestList(requestId, null, channelKey));
|
||||
// is this an existing channel?
|
||||
|
||||
// If this channel is in the channel list, it's already been fetched
|
||||
if (state.channelList[channelKey]) {
|
||||
return null;
|
||||
}
|
||||
// get channel claims data
|
||||
let claimsData;
|
||||
try {
|
||||
({ data: claimsData } = yield call(getChannelClaims, host, channelName, longId, 1));
|
||||
} catch (error) {
|
||||
return yield put(onRequestError(error.message));
|
||||
}
|
||||
|
||||
// store the channel data in the channel list
|
||||
yield put(addNewChannelToChannelList(channelKey, channelName, shortId, longId, claimsData));
|
||||
|
||||
// clear any request errors
|
||||
yield put(onRequestError(null));
|
||||
}
|
||||
|
||||
export function * watchNewChannelRequest () {
|
||||
yield takeLatest(actions.CHANNEL_REQUEST_NEW, newChannelRequest);
|
||||
};
|
||||
}
|
||||
|
||||
function * getNewClaimsAndUpdateChannel (action) {
|
||||
const { channelKey, name, longId, page } = action.data;
|
||||
|
|
|
@ -1,7 +1,18 @@
|
|||
export const createGroupedList = (list, size) => {
|
||||
if (!size) {
|
||||
throw new Error('no size provided to createGroupedList');
|
||||
}
|
||||
|
||||
if (!list) {
|
||||
throw new Error('no list provided to createGroupedList');
|
||||
}
|
||||
let groupedList = [];
|
||||
while (list.length > 0) {
|
||||
groupedList.push(list.splice(0, size));
|
||||
for (let i = 0; i < list.length; i = i + size) {
|
||||
let group = [];
|
||||
for (let j = i; j < (i + size); j++) {
|
||||
group.push(list[j]);
|
||||
}
|
||||
groupedList.push(group);
|
||||
}
|
||||
return groupedList;
|
||||
};
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
const logger = require('winston');
|
||||
|
||||
const db = require('../../../../models');
|
||||
const { returnPaginatedChannelClaims } = require('./channelPagination.js');
|
||||
|
||||
|
@ -16,7 +14,6 @@ const getChannelClaims = (channelName, channelClaimId, page) => {
|
|||
.getAllChannelClaims(longChannelClaimId);
|
||||
})
|
||||
.then(channelClaimsArray => {
|
||||
logger.debug('channel claim array:', channelClaimsArray);
|
||||
// 3. format the data for the view, including pagination
|
||||
let paginatedChannelViewData = returnPaginatedChannelClaims(channelName, longChannelClaimId, channelClaimsArray, page);
|
||||
// 4. return all the channel information and contents
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
const { handleErrorResponse } = require('../../../utils/errorHandlers.js');
|
||||
const getChannelClaims = require('./getChannelClaims.js');
|
||||
const logger = require('winston');
|
||||
|
||||
const NO_CHANNEL = 'NO_CHANNEL';
|
||||
|
||||
|
|
|
@ -227,11 +227,10 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
this
|
||||
.findAll({
|
||||
where: { certificateId: channelClaimId },
|
||||
order: [['height', 'ASC']],
|
||||
order: [['height', 'DESC']],
|
||||
raw : true, // returns an array of only data, not an array of instances
|
||||
})
|
||||
.then(channelClaimsArray => {
|
||||
// logger.debug('channelclaimsarray length:', channelClaimsArray.length);
|
||||
switch (channelClaimsArray.length) {
|
||||
case 0:
|
||||
return resolve(null);
|
||||
|
|
|
@ -57,11 +57,12 @@ module.exports = function (req, res) {
|
|||
var sagaMiddleware = (0, _reduxSaga.default)();
|
||||
var middleware = (0, _redux.applyMiddleware)(sagaMiddleware); // create a new Redux store instance
|
||||
|
||||
var store = (0, _redux.createStore)(_reducers.default, middleware); // create saga
|
||||
var store = (0, _redux.createStore)(_reducers.default, middleware); // create an action to handle the given url,
|
||||
// and create a the saga needed to handle that action
|
||||
|
||||
var action = _actions.default.onHandleShowPageUri(req.params);
|
||||
|
||||
var saga = returnSagaWithParams(_sagas.default.handleShowPageUri, action); // run the saga middleware
|
||||
var saga = returnSagaWithParams(_sagas.default.handleShowPageUri, action); // run the saga middleware with the saga call
|
||||
|
||||
sagaMiddleware.run(saga).done.then(function () {
|
||||
// render component to a string
|
||||
|
|
|
@ -30,11 +30,12 @@ module.exports = (req, res) => {
|
|||
// create a new Redux store instance
|
||||
const store = createStore(Reducers, middleware);
|
||||
|
||||
// create saga
|
||||
// create an action to handle the given url,
|
||||
// and create a the saga needed to handle that action
|
||||
const action = Actions.onHandleShowPageUri(req.params);
|
||||
const saga = returnSagaWithParams(Sagas.handleShowPageUri, action);
|
||||
|
||||
// run the saga middleware
|
||||
// run the saga middleware with the saga call
|
||||
sagaMiddleware
|
||||
.run(saga)
|
||||
.done
|
||||
|
|
Loading…
Add table
Reference in a new issue