diff --git a/client/build/actions/show.js b/client/build/actions/show.js index 67dcb7f0..0c93b68e 100644 --- a/client/build/actions/show.js +++ b/client/build/actions/show.js @@ -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 }; -} - -; \ No newline at end of file +} \ No newline at end of file diff --git a/client/build/components/AssetPreview/index.js b/client/build/components/AssetPreview/index.js index 2f0024f7..c17b70e3 100644 --- a/client/build/components/AssetPreview/index.js +++ b/client/build/components/AssetPreview/index.js @@ -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; diff --git a/client/build/components/HorizontalQuadSplit/index.js b/client/build/components/HorizontalQuadSplit/index.js new file mode 100644 index 00000000..54350aeb --- /dev/null +++ b/client/build/components/HorizontalQuadSplit/index.js @@ -0,0 +1,68 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +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); } + +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 HorizontalTriSplit = +/*#__PURE__*/ +function (_React$Component) { + function HorizontalTriSplit() { + _classCallCheck(this, HorizontalTriSplit); + + return _possibleConstructorReturn(this, _getPrototypeOf(HorizontalTriSplit).apply(this, arguments)); + } + + _createClass(HorizontalTriSplit, [{ + key: "render", + value: function render() { + return _react.default.createElement("div", { + className: 'horizontal-quad-split' + }, _react.default.createElement("div", { + className: 'left-side' + }, _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-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)))); + } + }]); + + _inherits(HorizontalTriSplit, _React$Component); + + return HorizontalTriSplit; +}(_react.default.Component); + +var _default = HorizontalTriSplit; +exports.default = _default; \ No newline at end of file diff --git a/client/build/containers/ChannelClaimsDisplay/view.js b/client/build/containers/ChannelClaimsDisplay/view.js index ad689f57..cc875f87 100644 --- a/client/build/containers/ChannelClaimsDisplay/view.js +++ b/client/build/containers/ChannelClaimsDisplay/view.js @@ -9,6 +9,14 @@ var _react = _interopRequireDefault(require("react")); var _AssetPreview = _interopRequireDefault(require("@components/AssetPreview")); +var _HorizontalQuadSplit = _interopRequireDefault(require("@components/HorizontalQuadSplit")); + +var _Row = _interopRequireDefault(require("@components/Row")); + +var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary")); + +var _createGroupedList = _interopRequireDefault(require("../../utils/createGroupedList.js")); + 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); } @@ -76,21 +84,49 @@ function (_React$Component) { currentPage = _this$props2$channel$.currentPage, totalPages = _this$props2$channel$.totalPages, defaultThumbnail = _this$props2.defaultThumbnail; - return _react.default.createElement("div", { - className: "row row--tall" - }, claims.length > 0 ? _react.default.createElement("div", null, claims.map(function (claim, index) { - return _react.default.createElement(_AssetPreview.default, { - defaultThumbnail: defaultThumbnail, - claimData: claim, - key: "".concat(claim.name, "-").concat(index) - }); - }), _react.default.createElement("div", null, currentPage > 1 && _react.default.createElement("button", { - className: 'button--secondary', - onClick: this.showPreviousResultsPage - }, "Previous Page"), currentPage < totalPages && _react.default.createElement("button", { - className: 'button--secondary', - onClick: this.showNextResultsPage - }, "Next Page"))) : _react.default.createElement("p", null, "There are no claims in this channel")); + var groupedClaimsList = (0, _createGroupedList.default)(claims, 4); + + if (claims.length > 0) { + 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, { + key: "claims-row-".concat(index), + columnA: itemA && _react.default.createElement(_AssetPreview.default, { + defaultThumbnail: defaultThumbnail, + claimData: itemA, + key: "".concat(itemA.name, "-").concat(itemA.id) + }), + columnB: itemB && _react.default.createElement(_AssetPreview.default, { + defaultThumbnail: defaultThumbnail, + claimData: itemB, + key: "".concat(itemB.name, "-").concat(itemB.id) + }), + columnC: itemC && _react.default.createElement(_AssetPreview.default, { + defaultThumbnail: defaultThumbnail, + claimData: itemC, + key: "".concat(itemC.name, "-").concat(itemC.id) + }), + columnD: itemD && _react.default.createElement(_AssetPreview.default, { + defaultThumbnail: defaultThumbnail, + 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', + onClickHandler: this.showPreviousResultsPage + }), currentPage < totalPages && _react.default.createElement(_ButtonSecondary.default, { + value: 'Next Page', + onClickHandler: this.showNextResultsPage + }))); + } else { + return _react.default.createElement("p", null, "There are no claims in this channel"); + } } }]); @@ -99,6 +135,5 @@ function (_React$Component) { return ChannelClaimsDisplay; }(_react.default.Component); -; var _default = ChannelClaimsDisplay; exports.default = _default; \ No newline at end of file diff --git a/client/build/containers/PublishTitleInput/view.js b/client/build/containers/PublishTitleInput/view.js index 2a38c92a..4cc99398 100644 --- a/client/build/containers/PublishTitleInput/view.js +++ b/client/build/containers/PublishTitleInput/view.js @@ -53,7 +53,7 @@ function (_React$Component) { return _react.default.createElement("input", { type: "text", id: "publish-title", - className: 'text--large input--full-width', + className: 'text--extra-large input--full-width', name: "title", placeholder: "Give your content a title...", onChange: this.handleInput, diff --git a/client/build/containers/PublishUrlInput/view.js b/client/build/containers/PublishUrlInput/view.js index 9ac47796..72eccdbe 100644 --- a/client/build/containers/PublishUrlInput/view.js +++ b/client/build/containers/PublishUrlInput/view.js @@ -143,4 +143,4 @@ function (_React$Component) { }(_react.default.Component); var _default = PublishUrlInput; -exports.default = _default; +exports.default = _default; \ No newline at end of file diff --git a/client/build/pages/ShowChannel/view.js b/client/build/pages/ShowChannel/view.js index 0cb75608..a71bc374 100644 --- a/client/build/pages/ShowChannel/view.js +++ b/client/build/pages/ShowChannel/view.js @@ -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, { diff --git a/client/build/sagas/show_channel.js b/client/build/sagas/show_channel.js index 4f210715..17a39e2f 100644 --- a/client/build/sagas/show_channel.js +++ b/client/build/sagas/show_channel.js @@ -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; diff --git a/client/build/utils/createGroupedList.js b/client/build/utils/createGroupedList.js new file mode 100644 index 00000000..33339794 --- /dev/null +++ b/client/build/utils/createGroupedList.js @@ -0,0 +1,32 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +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 = []; + + 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; +}; + +exports.createGroupedList = createGroupedList; \ No newline at end of file diff --git a/client/scss/all.scss b/client/scss/all.scss index ea10cd7b..6675e5c5 100644 --- a/client/scss/all.scss +++ b/client/scss/all.scss @@ -21,6 +21,7 @@ @import 'components/_click-to-copy'; @import 'components/_column'; @import 'components/_form-feedback'; +@import 'components/_horizontal-quad-split'; @import 'components/_horizontal-split'; @import 'components/_label'; @import 'components/_nav-bar'; @@ -35,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'; diff --git a/client/scss/components/_asset-preview.scss b/client/scss/components/_asset-preview.scss index 2557dc34..d2bff2cf 100644 --- a/client/scss/components/_asset-preview.scss +++ b/client/scss/components/_asset-preview.scss @@ -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; diff --git a/client/scss/components/_horizontal-quad-split.scss b/client/scss/components/_horizontal-quad-split.scss new file mode 100644 index 00000000..a13b7941 --- /dev/null +++ b/client/scss/components/_horizontal-quad-split.scss @@ -0,0 +1,53 @@ +.horizontal-quad-split { + display : flex; + flex-direction : row; + justify-content: space-between; + align-items : flex-start; + .left-side, .right-side { + width : 50%; + display : flex; + flex-direction : row; + justify-content: space-between; + align-items : flex-start; + .column-a, .column-b, .column-c, .column-d { + width: 50%; + }; + .column-a, .column-b, .column-c { + padding-right: $secondary-padding; + }; + }; +}; + + + +@media (max-width: $break-point-large ) { + + .horizontal-quad-split { + flex-direction : column; + .left-side, .right-side { + width : 100%; + .column-a, .column-b, .column-c, .column-d { + width: 50%; + }; + .column-b { + padding-right: 0; + } + } + }; + +} + +@media (max-width: $break-point-medium ) { + + .horizontal-quad-split { + flex-direction : column; + .left-side, .right-side { + flex-direction : column; + .column-a, .column-b, .column-c, .column-d { + width: 100%; + padding: 0; + }; + } + }; + +} diff --git a/client/scss/containers/_channel-claims-display.scss b/client/scss/containers/_channel-claims-display.scss new file mode 100644 index 00000000..8d907e9b --- /dev/null +++ b/client/scss/containers/_channel-claims-display.scss @@ -0,0 +1,5 @@ +.channel-claims-display { + .button--secondary { + margin-right: $secondary-padding; + } +} diff --git a/client/src/actions/show.js b/client/src/actions/show.js index 3399ed0c..ee1d0b7e 100644 --- a/client/src/actions/show.js +++ b/client/src/actions/show.js @@ -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, }; -}; +} diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx index 62e14ede..ae721a08 100644 --- a/client/src/components/AssetPreview/index.jsx +++ b/client/src/components/AssetPreview/index.jsx @@ -5,37 +5,35 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c const directSourceLink = `${claimId}/${name}.${fileExt}`; const showUrlLink = `/${claimId}/${name}`; return ( -
- - {(() => { - switch (contentType) { - case 'image/jpeg': - case 'image/jpg': - case 'image/png': - case 'image/gif': - return ( - {name} - ); - case 'video/mp4': - return ( - {name} - ); - default: - return ( -

unsupported file type

- ); - } - })()} - -
+ + {(() => { + switch (contentType) { + case 'image/jpeg': + case 'image/jpg': + case 'image/png': + case 'image/gif': + return ( + {name} + ); + case 'video/mp4': + return ( + {name} + ); + default: + return ( +

unsupported file type

+ ); + } + })()} + ); }; diff --git a/client/src/components/HorizontalQuadSplit/index.jsx b/client/src/components/HorizontalQuadSplit/index.jsx new file mode 100644 index 00000000..1bbbc319 --- /dev/null +++ b/client/src/components/HorizontalQuadSplit/index.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import Row from '@components/Row'; + +class HorizontalTriSplit extends React.Component { + render () { + return ( +
+
+
+ + {this.props.columnA} + +
+
+ + {this.props.columnB} + +
+
+
+
+ + {this.props.columnC} + +
+
+ + {this.props.columnD} + +
+
+
+ ); + } +} + +export default HorizontalTriSplit; diff --git a/client/src/containers/ChannelClaimsDisplay/view.jsx b/client/src/containers/ChannelClaimsDisplay/view.jsx index 6d4e971b..b0baa52c 100644 --- a/client/src/containers/ChannelClaimsDisplay/view.jsx +++ b/client/src/containers/ChannelClaimsDisplay/view.jsx @@ -1,5 +1,9 @@ import React from 'react'; 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'; class ChannelClaimsDisplay extends React.Component { constructor (props) { @@ -22,31 +26,82 @@ class ChannelClaimsDisplay extends React.Component { this.props.onUpdateChannelClaims(channelKey, name, longId, page); } render () { - const { channel: { claimsData: { claims, currentPage, totalPages } }, defaultThumbnail } = this.props; - return ( -
- {(claims.length > 0) ? ( + const {channel: {claimsData: {claims, currentPage, totalPages}}, defaultThumbnail} = this.props; + const groupedClaimsList = createGroupedList(claims, 4); + if (claims.length > 0) { + return ( +
- {claims.map((claim, index) => )} -
- {(currentPage > 1) && - - } - {(currentPage < totalPages) && - - } -
+ {groupedClaimsList.map((group, index) => { + const itemA = group[0]; + const itemB = group[1]; + const itemC = group[2]; + const itemD = group[3]; + return ( + + ) + } + columnB={ + itemB && ( + + ) + } + columnC={ + itemC && ( + + ) + } + columnD={ + itemD && ( + + ) + } + /> + ); + })}
- ) : ( -

There are no claims in this channel

- )} -
- ); + + {(currentPage > 1) && + + } + {(currentPage < totalPages) && + + } + +
+ ); + } else { + return ( +

There are no claims in this channel

+ ); + } } -}; +} export default ChannelClaimsDisplay; diff --git a/client/src/containers/PublishTitleInput/view.jsx b/client/src/containers/PublishTitleInput/view.jsx index fe7ea36e..1963096f 100644 --- a/client/src/containers/PublishTitleInput/view.jsx +++ b/client/src/containers/PublishTitleInput/view.jsx @@ -15,7 +15,7 @@ class PublishTitleInput extends React.Component { - + + + ); diff --git a/client/src/sagas/show_channel.js b/client/src/sagas/show_channel.js index 050e5fc1..66151176 100644 --- a/client/src/sagas/show_channel.js +++ b/client/src/sagas/show_channel.js @@ -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; diff --git a/client/src/utils/createGroupedList.js b/client/src/utils/createGroupedList.js new file mode 100644 index 00000000..456ac0a6 --- /dev/null +++ b/client/src/utils/createGroupedList.js @@ -0,0 +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 = []; + 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; +}; diff --git a/server/controllers/api/channel/claims/getChannelClaims.js b/server/controllers/api/channel/claims/getChannelClaims.js index a36e559b..d9787bf3 100644 --- a/server/controllers/api/channel/claims/getChannelClaims.js +++ b/server/controllers/api/channel/claims/getChannelClaims.js @@ -1,5 +1,4 @@ const db = require('../../../../models'); - const { returnPaginatedChannelClaims } = require('./channelPagination.js'); const getChannelClaims = (channelName, channelClaimId, page) => { diff --git a/server/controllers/api/channel/claims/index.js b/server/controllers/api/channel/claims/index.js index 473394b2..9d97805f 100644 --- a/server/controllers/api/channel/claims/index.js +++ b/server/controllers/api/channel/claims/index.js @@ -1,5 +1,6 @@ const { handleErrorResponse } = require('../../../utils/errorHandlers.js'); const getChannelClaims = require('./getChannelClaims.js'); +const logger = require('winston'); const NO_CHANNEL = 'NO_CHANNEL'; diff --git a/server/models/claim.js b/server/models/claim.js index 0759f621..128d76ee 100644 --- a/server/models/claim.js +++ b/server/models/claim.js @@ -231,7 +231,6 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => { 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); diff --git a/server/render/build/handleShowRender.js b/server/render/build/handleShowRender.js index 0dbef501..98f433ca 100644 --- a/server/render/build/handleShowRender.js +++ b/server/render/build/handleShowRender.js @@ -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 diff --git a/server/render/src/handleShowRender.jsx b/server/render/src/handleShowRender.jsx index 8621b597..2a8809f2 100644 --- a/server/render/src/handleShowRender.jsx +++ b/server/render/src/handleShowRender.jsx @@ -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