From 49715e742ed23e377f3f134dd2d191f290c75cfe Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 11 Jun 2018 11:36:32 -0700 Subject: [PATCH 1/2] added horizontal quad split for channel content --- .../components/HorizontalQuadSplit/index.js | 66 +++++++++++++ .../containers/ChannelClaimsDisplay/view.js | 60 ++++++++---- .../containers/PublishTitleInput/view.js | 2 +- .../build/containers/PublishUrlInput/view.js | 2 +- client/build/utils/createGroupedList.js | 18 ++++ client/scss/all.scss | 1 + .../components/_horizontal-quad-split.scss | 49 ++++++++++ .../components/HorizontalQuadSplit/index.jsx | 28 ++++++ .../containers/ChannelClaimsDisplay/view.jsx | 95 ++++++++++++++----- .../src/containers/PublishTitleInput/view.jsx | 2 +- client/src/utils/createGroupedList.js | 7 ++ .../api/channel/claims/getChannelClaims.js | 4 +- 12 files changed, 290 insertions(+), 44 deletions(-) create mode 100644 client/build/components/HorizontalQuadSplit/index.js create mode 100644 client/build/utils/createGroupedList.js create mode 100644 client/scss/components/_horizontal-quad-split.scss create mode 100644 client/src/components/HorizontalQuadSplit/index.jsx create mode 100644 client/src/utils/createGroupedList.js diff --git a/client/build/components/HorizontalQuadSplit/index.js b/client/build/components/HorizontalQuadSplit/index.js new file mode 100644 index 00000000..caa1a0a8 --- /dev/null +++ b/client/build/components/HorizontalQuadSplit/index.js @@ -0,0 +1,66 @@ +"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 }; } + +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' + }, this.props.itemA), _react.default.createElement("div", { + className: 'column' + }, this.props.itemB)), _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))); + } + }]); + + _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..86b8f3fd 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 = 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,42 @@ 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.createGroupedList)(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(_HorizontalQuadSplit.default, { + itemA: group[0] ? _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, { + defaultThumbnail: defaultThumbnail, + claimData: group[1], + key: "".concat(group[1].name, "-").concat(index) + }) : null, + itemC: group[2] ? _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, { + defaultThumbnail: defaultThumbnail, + claimData: group[3], + key: "".concat(group[3].name, "-").concat(index) + }) : null + }); + })), _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 +128,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/utils/createGroupedList.js b/client/build/utils/createGroupedList.js new file mode 100644 index 00000000..f25bd1cb --- /dev/null +++ b/client/build/utils/createGroupedList.js @@ -0,0 +1,18 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.createGroupedList = void 0; + +var createGroupedList = function createGroupedList(list, size) { + var groupedList = []; + + while (list.length > 0) { + groupedList.push(list.splice(0, size)); + } + + 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..61ca9565 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'; diff --git a/client/scss/components/_horizontal-quad-split.scss b/client/scss/components/_horizontal-quad-split.scss new file mode 100644 index 00000000..4ace3e3b --- /dev/null +++ b/client/scss/components/_horizontal-quad-split.scss @@ -0,0 +1,49 @@ +.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 { + width: 50%; + } + } +}; + + + +@media (max-width: $break-point-large ) { + + .horizontal-quad-split { + flex-direction : column; + .left-side, .right-side { + width : 100%; + padding-left: 0; + padding-right: 0; + padding-bottom: $secondary-padding; + } + }; + +} + +@media (max-width: $break-point-medium ) { + + .horizontal-quad-split { + flex-direction : column; + .left-side, .right-side { + flex-direction : column; + .column { + width : 100%; + padding-left: 0; + padding-right: 0; + padding-bottom: $secondary-padding; + } + } + }; + +} diff --git a/client/src/components/HorizontalQuadSplit/index.jsx b/client/src/components/HorizontalQuadSplit/index.jsx new file mode 100644 index 00000000..16dcbbf2 --- /dev/null +++ b/client/src/components/HorizontalQuadSplit/index.jsx @@ -0,0 +1,28 @@ +import React from 'react'; + +class HorizontalTriSplit extends React.Component { + render () { + return ( +
+
+
+ {this.props.itemA} +
+
+ {this.props.itemB} +
+
+
+
+ {this.props.itemC} +
+
+ {this.props.itemD} +
+
+
+ ); + } +} + +export default HorizontalTriSplit; diff --git a/client/src/containers/ChannelClaimsDisplay/view.jsx b/client/src/containers/ChannelClaimsDisplay/view.jsx index 6d4e971b..38e5053a 100644 --- a/client/src/containers/ChannelClaimsDisplay/view.jsx +++ b/client/src/containers/ChannelClaimsDisplay/view.jsx @@ -1,5 +1,10 @@ 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 +27,73 @@ 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) ? ( -
- {claims.map((claim, index) => 0) { + return ( +
+ + {groupedClaimsList.map((group, index) => + ) : null + } + itemB={ + group[1] ? ( + + ) : null + } + itemC={ + group[2] ? ( + + ) : null + } + itemD={ + group[3] ? ( + + ) : null + } />)} -
- {(currentPage > 1) && - - } - {(currentPage < totalPages) && - - } -
-
- ) : ( -

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 { { + let groupedList = []; + while (list.length > 0) { + groupedList.push(list.splice(0, size)); + } + return groupedList; +}; diff --git a/server/controllers/api/channel/claims/getChannelClaims.js b/server/controllers/api/channel/claims/getChannelClaims.js index a36e559b..b89cedf2 100644 --- a/server/controllers/api/channel/claims/getChannelClaims.js +++ b/server/controllers/api/channel/claims/getChannelClaims.js @@ -1,5 +1,6 @@ -const db = require('../../../../models'); +const logger = require('winston'); +const db = require('../../../../models'); const { returnPaginatedChannelClaims } = require('./channelPagination.js'); const getChannelClaims = (channelName, channelClaimId, page) => { @@ -15,6 +16,7 @@ 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 From 72d05c2451f24ea1d58565db9ea50f7c8cef303d Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 14 Jun 2018 13:06:19 -0700 Subject: [PATCH 2/2] vertically aligned channel contents and reversed their order --- client/build/actions/show.js | 28 +---- client/build/components/AssetPreview/index.js | 6 +- .../components/HorizontalQuadSplit/index.js | 18 +-- .../containers/ChannelClaimsDisplay/view.js | 45 ++++--- client/build/pages/ShowChannel/view.js | 6 +- client/build/sagas/show_channel.js | 7 +- client/build/utils/createGroupedList.js | 18 ++- client/scss/all.scss | 1 + client/scss/components/_asset-preview.scss | 8 -- .../components/_horizontal-quad-split.scss | 28 +++-- .../containers/_channel-claims-display.scss | 5 + client/src/actions/show.js | 32 ++--- client/src/components/AssetPreview/index.jsx | 60 +++++----- .../components/HorizontalQuadSplit/index.jsx | 25 ++-- .../containers/ChannelClaimsDisplay/view.jsx | 110 ++++++++++-------- client/src/pages/ShowChannel/view.jsx | 13 ++- client/src/sagas/show_channel.js | 8 +- client/src/utils/createGroupedList.js | 15 ++- .../api/channel/claims/getChannelClaims.js | 3 - .../controllers/api/channel/claims/index.js | 1 + server/models/claim.js | 3 +- server/render/build/handleShowRender.js | 5 +- server/render/src/handleShowRender.jsx | 5 +- 23 files changed, 243 insertions(+), 207 deletions(-) create mode 100644 client/scss/containers/_channel-claims-display.scss 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 index caa1a0a8..54350aeb 100644 --- a/client/build/components/HorizontalQuadSplit/index.js +++ b/client/build/components/HorizontalQuadSplit/index.js @@ -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)))); } }]); diff --git a/client/build/containers/ChannelClaimsDisplay/view.js b/client/build/containers/ChannelClaimsDisplay/view.js index 86b8f3fd..cc875f87 100644 --- a/client/build/containers/ChannelClaimsDisplay/view.js +++ b/client/build/containers/ChannelClaimsDisplay/view.js @@ -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', 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 index f25bd1cb..33339794 100644 --- a/client/build/utils/createGroupedList.js +++ b/client/build/utils/createGroupedList.js @@ -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; diff --git a/client/scss/all.scss b/client/scss/all.scss index 61ca9565..6675e5c5 100644 --- a/client/scss/all.scss +++ b/client/scss/all.scss @@ -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'; 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 index 4ace3e3b..a13b7941 100644 --- a/client/scss/components/_horizontal-quad-split.scss +++ b/client/scss/components/_horizontal-quad-split.scss @@ -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; + }; } }; 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 index 16dcbbf2..1bbbc319 100644 --- a/client/src/components/HorizontalQuadSplit/index.jsx +++ b/client/src/components/HorizontalQuadSplit/index.jsx @@ -1,23 +1,32 @@ import React from 'react'; +import Row from '@components/Row'; class HorizontalTriSplit extends React.Component { render () { return (
-
- {this.props.itemA} +
+ + {this.props.columnA} +
-
- {this.props.itemB} +
+ + {this.props.columnB} +
-
- {this.props.itemC} +
+ + {this.props.columnC} +
-
- {this.props.itemD} +
+ + {this.props.columnD} +
diff --git a/client/src/containers/ChannelClaimsDisplay/view.jsx b/client/src/containers/ChannelClaimsDisplay/view.jsx index 38e5053a..b0baa52c 100644 --- a/client/src/containers/ChannelClaimsDisplay/view.jsx +++ b/client/src/containers/ChannelClaimsDisplay/view.jsx @@ -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 ( -
- - {groupedClaimsList.map((group, index) => - ) : null - } - itemB={ - group[1] ? ( - - ) : null - } - itemC={ - group[2] ? ( - - ) : null - } - itemD={ - group[3] ? ( - - ) : null - } - />)} - +
+
+ {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 && ( + + ) + } + /> + ); + })} +
{(currentPage > 1) && - + } {(currentPage < totalPages) && - + }
diff --git a/client/src/pages/ShowChannel/view.jsx b/client/src/pages/ShowChannel/view.jsx index 3db913c9..1805d3da 100644 --- a/client/src/pages/ShowChannel/view.jsx +++ b/client/src/pages/ShowChannel/view.jsx @@ -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} > - + + + ); 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 index 5353d496..456ac0a6 100644 --- a/client/src/utils/createGroupedList.js +++ b/client/src/utils/createGroupedList.js @@ -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; }; diff --git a/server/controllers/api/channel/claims/getChannelClaims.js b/server/controllers/api/channel/claims/getChannelClaims.js index b89cedf2..d9787bf3 100644 --- a/server/controllers/api/channel/claims/getChannelClaims.js +++ b/server/controllers/api/channel/claims/getChannelClaims.js @@ -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 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 4200e485..128d76ee 100644 --- a/server/models/claim.js +++ b/server/models/claim.js @@ -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); 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