@plusscommunities/pluss-newsletter-web-sharing 1.4.37 → 1.4.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -12,9 +12,9 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
12
12
  var React = require('react');
13
13
  var reactRedux = require('react-redux');
14
14
  var _ = require('lodash');
15
- var moment = require('moment');
16
15
  var FontAwesome = require('react-fontawesome');
17
16
  var PlussCore = require('@plusscommunities/pluss-core-web');
17
+ var moment = require('moment');
18
18
  var reactBootstrap = require('react-bootstrap');
19
19
  var reactRouterDom = require('react-router-dom');
20
20
  var reactRouter = require('react-router');
@@ -57,9 +57,9 @@ var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeO
57
57
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
58
58
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
59
59
  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
60
- var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
61
60
  var FontAwesome__default = /*#__PURE__*/_interopDefaultLegacy(FontAwesome);
62
61
  var PlussCore__namespace = /*#__PURE__*/_interopNamespace(PlussCore);
62
+ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
63
63
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
64
64
  var $__default = /*#__PURE__*/_interopDefaultLegacy($);
65
65
  var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
@@ -711,7 +711,7 @@ var COLOUR_BRANDING_MAIN = Colours.COLOUR_BRANDING_MAIN;
711
711
  var COLOUR_BRANDING_OFF = Colours.COLOUR_BRANDING_OFF;
712
712
  Colours.COLOUR_BRANDING_ACTION;
713
713
  var COLOUR_BRANDING_APP = Colours.COLOUR_BRANDING_APP;
714
- Colours.TEXT_LIGHT;
714
+ var TEXT_LIGHT = Colours.TEXT_LIGHT;
715
715
  var hexToRGBAstring = Colours.hexToRGBAstring; // Misc
716
716
 
717
717
  var hideChat = Helper$1.hideChat;
@@ -722,6 +722,7 @@ var Text = Components$1.Text;
722
722
  function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
723
723
 
724
724
  function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
725
+ var PAGE_SIZE = 100;
725
726
 
726
727
  var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
727
728
  _inherits__default['default'](ListNewsletter, _Component);
@@ -741,12 +742,43 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
741
742
 
742
743
  _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
743
744
  newsletterEntries: [],
744
- sortColumn: 'DateUnix',
745
- // column to sort by
746
- sortDesc: false,
747
- // if true, sort descending rather than ascending
745
+ // Date column sorts on the real UnixTimestamp; defaults to descending so newest posts appear first.
746
+ sortColumn: 'UnixTimestamp',
747
+ sortDesc: true,
748
748
  now: moment__default['default'].utc(),
749
- onlyFuture: true
749
+ search: '',
750
+ startIndex: 0,
751
+ endIndex: PAGE_SIZE
752
+ });
753
+
754
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSearchChange", function (e) {
755
+ _this.setState({
756
+ search: e.target.value,
757
+ startIndex: 0,
758
+ endIndex: PAGE_SIZE
759
+ });
760
+ });
761
+
762
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "prevPage", function () {
763
+ if (_this.state.startIndex === 0) {
764
+ return;
765
+ }
766
+
767
+ _this.setState({
768
+ startIndex: _this.state.startIndex - PAGE_SIZE,
769
+ endIndex: Math.ceil(_this.state.endIndex / PAGE_SIZE) * PAGE_SIZE - PAGE_SIZE
770
+ });
771
+ });
772
+
773
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "nextPage", function (filteredCount) {
774
+ if (_this.state.startIndex + PAGE_SIZE >= filteredCount) {
775
+ return;
776
+ }
777
+
778
+ _this.setState({
779
+ startIndex: _this.state.startIndex + PAGE_SIZE,
780
+ endIndex: Math.ceil(_this.state.endIndex / PAGE_SIZE) * PAGE_SIZE + PAGE_SIZE
781
+ });
750
782
  });
751
783
 
752
784
  return _this;
@@ -791,15 +823,24 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
791
823
  value: function sortByCol(col) {
792
824
  if (this.state.sortColumn === col) {
793
825
  this.setState({
794
- sortDesc: !this.state.sortDesc
826
+ sortDesc: !this.state.sortDesc,
827
+ startIndex: 0,
828
+ endIndex: PAGE_SIZE
795
829
  });
796
830
  } else {
797
831
  this.setState({
798
832
  sortColumn: col,
799
- sortDesc: false
833
+ sortDesc: false,
834
+ startIndex: 0,
835
+ endIndex: PAGE_SIZE
800
836
  });
801
837
  }
802
838
  }
839
+ }, {
840
+ key: "getPaginationText",
841
+ value: function getPaginationText(filteredCount) {
842
+ return "".concat(Math.min(this.state.startIndex + 1, filteredCount), "-").concat(Math.min(this.state.endIndex, filteredCount), "/").concat(filteredCount);
843
+ }
803
844
  }, {
804
845
  key: "removeNewsletterEntry",
805
846
  value: function removeNewsletterEntry(newsletter) {
@@ -819,22 +860,6 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
819
860
  value: function renderNewsletter(source) {
820
861
  var _this4 = this;
821
862
 
822
- // let source = _.sortBy(this.state.newsletterEntries, this.state.sortColumn);
823
- // if (this.state.sortDesc) {
824
- // source.reverse();
825
- // }
826
- // source = _.filter(source, (ev) => {
827
- // if (!ev) {
828
- // return false
829
- // }
830
- // return true;
831
- // });
832
- // if (this.props.onlyFuture) {
833
- // const nownow = moment().startOf('month');
834
- // source = _.filter(source, (ev) => {
835
- // return nownow.isSameOrBefore(moment.utc(ev.UnixTimestamp).local());
836
- // });
837
- // }
838
863
  return source.map(function (ev) {
839
864
  if (ev != null) {
840
865
  return /*#__PURE__*/React__default['default'].createElement("tr", {
@@ -923,15 +948,15 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
923
948
  condensed: true,
924
949
  hover: true
925
950
  }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
926
- className: "".concat(this.sortIsActive('DateUnix')),
951
+ className: "".concat(this.sortIsActive('UnixTimestamp')),
927
952
  style: {
928
953
  cursor: 'pointer',
929
954
  width: 140
930
955
  },
931
956
  onClick: function onClick() {
932
- _this5.sortByCol('DateUnix');
957
+ _this5.sortByCol('UnixTimestamp');
933
958
  }
934
- }, "Date published", this.renderSort('DateUnix')), /*#__PURE__*/React__default['default'].createElement("th", {
959
+ }, "Date published", this.renderSort('UnixTimestamp')), /*#__PURE__*/React__default['default'].createElement("th", {
935
960
  className: "".concat(this.sortIsActive('Title')),
936
961
  style: {
937
962
  cursor: 'pointer'
@@ -969,9 +994,57 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
969
994
  type: "h3"
970
995
  }, values.textThereAreNoNews)));
971
996
  }
997
+ }, {
998
+ key: "renderPager",
999
+ value: function renderPager(filteredCount) {
1000
+ var _this6 = this;
1001
+
1002
+ if (filteredCount <= PAGE_SIZE) {
1003
+ return null;
1004
+ }
1005
+
1006
+ return /*#__PURE__*/React__default['default'].createElement("div", {
1007
+ className: "paginationContainer",
1008
+ style: {
1009
+ margin: '8px 0'
1010
+ }
1011
+ }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
1012
+ className: "pagination__left",
1013
+ name: "chevron-left",
1014
+ style: {
1015
+ cursor: 'pointer',
1016
+ fontSize: 20,
1017
+ color: TEXT_LIGHT
1018
+ },
1019
+ onClick: this.prevPage
1020
+ }), /*#__PURE__*/React__default['default'].createElement("p", {
1021
+ className: "pagination__text",
1022
+ style: {
1023
+ display: 'inline-block',
1024
+ margin: 0,
1025
+ padding: '0 16px',
1026
+ minWidth: 120,
1027
+ textAlign: 'center',
1028
+ color: TEXT_LIGHT
1029
+ }
1030
+ }, this.getPaginationText(filteredCount)), /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
1031
+ className: "pagination__right",
1032
+ name: "chevron-right",
1033
+ style: {
1034
+ cursor: 'pointer',
1035
+ fontSize: 20,
1036
+ color: TEXT_LIGHT
1037
+ },
1038
+ onClick: function onClick() {
1039
+ return _this6.nextPage(filteredCount);
1040
+ }
1041
+ }));
1042
+ }
972
1043
  }, {
973
1044
  key: "renderContent",
974
1045
  value: function renderContent() {
1046
+ var _this7 = this;
1047
+
975
1048
  var source = ___default['default'].sortBy(this.state.newsletterEntries, this.state.sortColumn);
976
1049
 
977
1050
  if (this.state.sortDesc) {
@@ -985,20 +1058,25 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
985
1058
 
986
1059
  return true;
987
1060
  });
1061
+ var search = this.state.search;
988
1062
 
989
- if (this.props.onlyFuture) {
990
- var nownow = moment__default['default']().startOf('month');
1063
+ if (!___default['default'].isEmpty(search)) {
1064
+ var lowSearch = search.toLowerCase();
991
1065
  source = ___default['default'].filter(source, function (ev) {
992
- return nownow.isSameOrBefore(moment__default['default'].utc(ev.UnixTimestamp).local());
993
- });
994
- } // source = []
1066
+ if (!ev.Title) {
1067
+ return false;
1068
+ }
995
1069
 
1070
+ return ev.Title.toLowerCase().indexOf(lowSearch) > -1;
1071
+ });
1072
+ } // Total matching the search/sort BEFORE the page slice — drives the pager text.
996
1073
 
997
- if (___default['default'].isEmpty(source)) {
998
- return this.renderEmpty();
999
- }
1000
1074
 
1001
- return this.renderView(source);
1075
+ var filteredCount = source.length;
1076
+ source = ___default['default'].filter(source, function (ev, i) {
1077
+ return i >= _this7.state.startIndex && i < _this7.state.endIndex;
1078
+ });
1079
+ return /*#__PURE__*/React__default['default'].createElement("div", null, ___default['default'].isEmpty(source) ? this.renderEmpty() : this.renderView(source), this.renderPager(filteredCount));
1002
1080
  }
1003
1081
  }, {
1004
1082
  key: "render",
@@ -1007,7 +1085,18 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
1007
1085
  style: {
1008
1086
  minWidth: '100%'
1009
1087
  }
1010
- }, this.renderContent());
1088
+ }, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
1089
+ id: "search",
1090
+ type: "text",
1091
+ placeholder: "Search by title",
1092
+ value: this.state.search,
1093
+ onChange: this.onSearchChange,
1094
+ className: "genericInputContainer-rounded marginTop-10",
1095
+ style: {
1096
+ maxWidth: 500,
1097
+ marginBottom: 16
1098
+ }
1099
+ }), this.renderContent());
1011
1100
  }
1012
1101
  }]);
1013
1102
 
@@ -1988,9 +2077,6 @@ var NewsHub = /*#__PURE__*/function (_Component) {
1988
2077
  loadingSubmissions: false,
1989
2078
  submissionEntries: [],
1990
2079
  allList: [],
1991
- thisMonth: [],
1992
- now: moment__default['default'].utc(),
1993
- onlyFuture: true,
1994
2080
  search: ''
1995
2081
  };
1996
2082
  return _this;
@@ -2015,18 +2101,8 @@ var NewsHub = /*#__PURE__*/function (_Component) {
2015
2101
  }, {
2016
2102
  key: "updateProps",
2017
2103
  value: function updateProps(props) {
2018
- var thisMonth = [];
2019
- var nownow = moment__default['default']().startOf('month');
2020
- props.news.forEach(function (rep) {
2021
- var isThisMonth = nownow.isSameOrBefore(moment__default['default'].utc(rep.UnixTimestamp).local());
2022
-
2023
- if (isThisMonth) {
2024
- thisMonth.push(rep);
2025
- }
2026
- });
2027
2104
  this.setState({
2028
2105
  allList: props.news,
2029
- thisMonth: thisMonth,
2030
2106
  submissionEntries: props.submissions
2031
2107
  });
2032
2108
  }
@@ -2230,9 +2306,7 @@ var NewsHub = /*#__PURE__*/function (_Component) {
2230
2306
  return /*#__PURE__*/React__default['default'].createElement(AvailableNews, null);
2231
2307
  }
2232
2308
 
2233
- return /*#__PURE__*/React__default['default'].createElement(ListNewsletterEntries, {
2234
- onlyFuture: this.state.selectedSection === 'thisMonth'
2235
- });
2309
+ return /*#__PURE__*/React__default['default'].createElement(ListNewsletterEntries, null);
2236
2310
  }
2237
2311
  }, {
2238
2312
  key: "render",
package/dist/index.esm.js CHANGED
@@ -8,9 +8,9 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
8
8
  import React, { Component, useState, useEffect } from 'react';
9
9
  import { connect } from 'react-redux';
10
10
  import _ from 'lodash';
11
- import moment from 'moment';
12
11
  import FontAwesome from 'react-fontawesome';
13
12
  import * as PlussCore from '@plusscommunities/pluss-core-web';
13
+ import moment from 'moment';
14
14
  import { Table, FormGroup } from 'react-bootstrap';
15
15
  import { Link } from 'react-router-dom';
16
16
  import { withRouter } from 'react-router';
@@ -667,7 +667,7 @@ var COLOUR_BRANDING_MAIN = Colours.COLOUR_BRANDING_MAIN;
667
667
  var COLOUR_BRANDING_OFF = Colours.COLOUR_BRANDING_OFF;
668
668
  Colours.COLOUR_BRANDING_ACTION;
669
669
  var COLOUR_BRANDING_APP = Colours.COLOUR_BRANDING_APP;
670
- Colours.TEXT_LIGHT;
670
+ var TEXT_LIGHT = Colours.TEXT_LIGHT;
671
671
  var hexToRGBAstring = Colours.hexToRGBAstring; // Misc
672
672
 
673
673
  var hideChat = Helper$1.hideChat;
@@ -678,6 +678,7 @@ var Text = Components$1.Text;
678
678
  function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
679
679
 
680
680
  function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
681
+ var PAGE_SIZE = 100;
681
682
 
682
683
  var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
683
684
  _inherits(ListNewsletter, _Component);
@@ -697,12 +698,43 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
697
698
 
698
699
  _defineProperty(_assertThisInitialized(_this), "state", {
699
700
  newsletterEntries: [],
700
- sortColumn: 'DateUnix',
701
- // column to sort by
702
- sortDesc: false,
703
- // if true, sort descending rather than ascending
701
+ // Date column sorts on the real UnixTimestamp; defaults to descending so newest posts appear first.
702
+ sortColumn: 'UnixTimestamp',
703
+ sortDesc: true,
704
704
  now: moment.utc(),
705
- onlyFuture: true
705
+ search: '',
706
+ startIndex: 0,
707
+ endIndex: PAGE_SIZE
708
+ });
709
+
710
+ _defineProperty(_assertThisInitialized(_this), "onSearchChange", function (e) {
711
+ _this.setState({
712
+ search: e.target.value,
713
+ startIndex: 0,
714
+ endIndex: PAGE_SIZE
715
+ });
716
+ });
717
+
718
+ _defineProperty(_assertThisInitialized(_this), "prevPage", function () {
719
+ if (_this.state.startIndex === 0) {
720
+ return;
721
+ }
722
+
723
+ _this.setState({
724
+ startIndex: _this.state.startIndex - PAGE_SIZE,
725
+ endIndex: Math.ceil(_this.state.endIndex / PAGE_SIZE) * PAGE_SIZE - PAGE_SIZE
726
+ });
727
+ });
728
+
729
+ _defineProperty(_assertThisInitialized(_this), "nextPage", function (filteredCount) {
730
+ if (_this.state.startIndex + PAGE_SIZE >= filteredCount) {
731
+ return;
732
+ }
733
+
734
+ _this.setState({
735
+ startIndex: _this.state.startIndex + PAGE_SIZE,
736
+ endIndex: Math.ceil(_this.state.endIndex / PAGE_SIZE) * PAGE_SIZE + PAGE_SIZE
737
+ });
706
738
  });
707
739
 
708
740
  return _this;
@@ -747,15 +779,24 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
747
779
  value: function sortByCol(col) {
748
780
  if (this.state.sortColumn === col) {
749
781
  this.setState({
750
- sortDesc: !this.state.sortDesc
782
+ sortDesc: !this.state.sortDesc,
783
+ startIndex: 0,
784
+ endIndex: PAGE_SIZE
751
785
  });
752
786
  } else {
753
787
  this.setState({
754
788
  sortColumn: col,
755
- sortDesc: false
789
+ sortDesc: false,
790
+ startIndex: 0,
791
+ endIndex: PAGE_SIZE
756
792
  });
757
793
  }
758
794
  }
795
+ }, {
796
+ key: "getPaginationText",
797
+ value: function getPaginationText(filteredCount) {
798
+ return "".concat(Math.min(this.state.startIndex + 1, filteredCount), "-").concat(Math.min(this.state.endIndex, filteredCount), "/").concat(filteredCount);
799
+ }
759
800
  }, {
760
801
  key: "removeNewsletterEntry",
761
802
  value: function removeNewsletterEntry(newsletter) {
@@ -775,22 +816,6 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
775
816
  value: function renderNewsletter(source) {
776
817
  var _this4 = this;
777
818
 
778
- // let source = _.sortBy(this.state.newsletterEntries, this.state.sortColumn);
779
- // if (this.state.sortDesc) {
780
- // source.reverse();
781
- // }
782
- // source = _.filter(source, (ev) => {
783
- // if (!ev) {
784
- // return false
785
- // }
786
- // return true;
787
- // });
788
- // if (this.props.onlyFuture) {
789
- // const nownow = moment().startOf('month');
790
- // source = _.filter(source, (ev) => {
791
- // return nownow.isSameOrBefore(moment.utc(ev.UnixTimestamp).local());
792
- // });
793
- // }
794
819
  return source.map(function (ev) {
795
820
  if (ev != null) {
796
821
  return /*#__PURE__*/React.createElement("tr", {
@@ -879,15 +904,15 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
879
904
  condensed: true,
880
905
  hover: true
881
906
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
882
- className: "".concat(this.sortIsActive('DateUnix')),
907
+ className: "".concat(this.sortIsActive('UnixTimestamp')),
883
908
  style: {
884
909
  cursor: 'pointer',
885
910
  width: 140
886
911
  },
887
912
  onClick: function onClick() {
888
- _this5.sortByCol('DateUnix');
913
+ _this5.sortByCol('UnixTimestamp');
889
914
  }
890
- }, "Date published", this.renderSort('DateUnix')), /*#__PURE__*/React.createElement("th", {
915
+ }, "Date published", this.renderSort('UnixTimestamp')), /*#__PURE__*/React.createElement("th", {
891
916
  className: "".concat(this.sortIsActive('Title')),
892
917
  style: {
893
918
  cursor: 'pointer'
@@ -925,9 +950,57 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
925
950
  type: "h3"
926
951
  }, values.textThereAreNoNews)));
927
952
  }
953
+ }, {
954
+ key: "renderPager",
955
+ value: function renderPager(filteredCount) {
956
+ var _this6 = this;
957
+
958
+ if (filteredCount <= PAGE_SIZE) {
959
+ return null;
960
+ }
961
+
962
+ return /*#__PURE__*/React.createElement("div", {
963
+ className: "paginationContainer",
964
+ style: {
965
+ margin: '8px 0'
966
+ }
967
+ }, /*#__PURE__*/React.createElement(FontAwesome, {
968
+ className: "pagination__left",
969
+ name: "chevron-left",
970
+ style: {
971
+ cursor: 'pointer',
972
+ fontSize: 20,
973
+ color: TEXT_LIGHT
974
+ },
975
+ onClick: this.prevPage
976
+ }), /*#__PURE__*/React.createElement("p", {
977
+ className: "pagination__text",
978
+ style: {
979
+ display: 'inline-block',
980
+ margin: 0,
981
+ padding: '0 16px',
982
+ minWidth: 120,
983
+ textAlign: 'center',
984
+ color: TEXT_LIGHT
985
+ }
986
+ }, this.getPaginationText(filteredCount)), /*#__PURE__*/React.createElement(FontAwesome, {
987
+ className: "pagination__right",
988
+ name: "chevron-right",
989
+ style: {
990
+ cursor: 'pointer',
991
+ fontSize: 20,
992
+ color: TEXT_LIGHT
993
+ },
994
+ onClick: function onClick() {
995
+ return _this6.nextPage(filteredCount);
996
+ }
997
+ }));
998
+ }
928
999
  }, {
929
1000
  key: "renderContent",
930
1001
  value: function renderContent() {
1002
+ var _this7 = this;
1003
+
931
1004
  var source = _.sortBy(this.state.newsletterEntries, this.state.sortColumn);
932
1005
 
933
1006
  if (this.state.sortDesc) {
@@ -941,20 +1014,25 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
941
1014
 
942
1015
  return true;
943
1016
  });
1017
+ var search = this.state.search;
944
1018
 
945
- if (this.props.onlyFuture) {
946
- var nownow = moment().startOf('month');
1019
+ if (!_.isEmpty(search)) {
1020
+ var lowSearch = search.toLowerCase();
947
1021
  source = _.filter(source, function (ev) {
948
- return nownow.isSameOrBefore(moment.utc(ev.UnixTimestamp).local());
949
- });
950
- } // source = []
1022
+ if (!ev.Title) {
1023
+ return false;
1024
+ }
951
1025
 
1026
+ return ev.Title.toLowerCase().indexOf(lowSearch) > -1;
1027
+ });
1028
+ } // Total matching the search/sort BEFORE the page slice — drives the pager text.
952
1029
 
953
- if (_.isEmpty(source)) {
954
- return this.renderEmpty();
955
- }
956
1030
 
957
- return this.renderView(source);
1031
+ var filteredCount = source.length;
1032
+ source = _.filter(source, function (ev, i) {
1033
+ return i >= _this7.state.startIndex && i < _this7.state.endIndex;
1034
+ });
1035
+ return /*#__PURE__*/React.createElement("div", null, _.isEmpty(source) ? this.renderEmpty() : this.renderView(source), this.renderPager(filteredCount));
958
1036
  }
959
1037
  }, {
960
1038
  key: "render",
@@ -963,7 +1041,18 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
963
1041
  style: {
964
1042
  minWidth: '100%'
965
1043
  }
966
- }, this.renderContent());
1044
+ }, /*#__PURE__*/React.createElement(GenericInput, {
1045
+ id: "search",
1046
+ type: "text",
1047
+ placeholder: "Search by title",
1048
+ value: this.state.search,
1049
+ onChange: this.onSearchChange,
1050
+ className: "genericInputContainer-rounded marginTop-10",
1051
+ style: {
1052
+ maxWidth: 500,
1053
+ marginBottom: 16
1054
+ }
1055
+ }), this.renderContent());
967
1056
  }
968
1057
  }]);
969
1058
 
@@ -1944,9 +2033,6 @@ var NewsHub = /*#__PURE__*/function (_Component) {
1944
2033
  loadingSubmissions: false,
1945
2034
  submissionEntries: [],
1946
2035
  allList: [],
1947
- thisMonth: [],
1948
- now: moment.utc(),
1949
- onlyFuture: true,
1950
2036
  search: ''
1951
2037
  };
1952
2038
  return _this;
@@ -1971,18 +2057,8 @@ var NewsHub = /*#__PURE__*/function (_Component) {
1971
2057
  }, {
1972
2058
  key: "updateProps",
1973
2059
  value: function updateProps(props) {
1974
- var thisMonth = [];
1975
- var nownow = moment().startOf('month');
1976
- props.news.forEach(function (rep) {
1977
- var isThisMonth = nownow.isSameOrBefore(moment.utc(rep.UnixTimestamp).local());
1978
-
1979
- if (isThisMonth) {
1980
- thisMonth.push(rep);
1981
- }
1982
- });
1983
2060
  this.setState({
1984
2061
  allList: props.news,
1985
- thisMonth: thisMonth,
1986
2062
  submissionEntries: props.submissions
1987
2063
  });
1988
2064
  }
@@ -2186,9 +2262,7 @@ var NewsHub = /*#__PURE__*/function (_Component) {
2186
2262
  return /*#__PURE__*/React.createElement(AvailableNews, null);
2187
2263
  }
2188
2264
 
2189
- return /*#__PURE__*/React.createElement(ListNewsletterEntries, {
2190
- onlyFuture: this.state.selectedSection === 'thisMonth'
2191
- });
2265
+ return /*#__PURE__*/React.createElement(ListNewsletterEntries, null);
2192
2266
  }
2193
2267
  }, {
2194
2268
  key: "render",
package/dist/index.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/helpers/defineProperty'), require('react'), require('react-redux'), require('lodash'), require('moment'), require('react-fontawesome'), require('@plusscommunities/pluss-core-web'), require('react-bootstrap'), require('react-router-dom'), require('react-router'), require('@babel/runtime/helpers/toConsumableArray'), require('jquery'), require('uuid'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/regenerator'), require('@fortawesome/free-solid-svg-icons')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/helpers/defineProperty', 'react', 'react-redux', 'lodash', 'moment', 'react-fontawesome', '@plusscommunities/pluss-core-web', 'react-bootstrap', 'react-router-dom', 'react-router', '@babel/runtime/helpers/toConsumableArray', 'jquery', 'uuid', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/regenerator', '@fortawesome/free-solid-svg-icons'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-newsletter-web'] = {}, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._defineProperty, global.React, global.reactRedux, global._, global.moment, global.FontAwesome, global.PlussCore, global.reactBootstrap, global.reactRouterDom, global.reactRouter, global._toConsumableArray, global.$, global.uuid, global._asyncToGenerator, global._slicedToArray, global._regeneratorRuntime, global.freeSolidSvgIcons));
5
- }(this, (function (exports, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _defineProperty, React, reactRedux, _, moment, FontAwesome, PlussCore, reactBootstrap, reactRouterDom, reactRouter, _toConsumableArray, $, uuid, _asyncToGenerator, _slicedToArray, _regeneratorRuntime, freeSolidSvgIcons) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/helpers/defineProperty'), require('react'), require('react-redux'), require('lodash'), require('react-fontawesome'), require('@plusscommunities/pluss-core-web'), require('moment'), require('react-bootstrap'), require('react-router-dom'), require('react-router'), require('@babel/runtime/helpers/toConsumableArray'), require('jquery'), require('uuid'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/regenerator'), require('@fortawesome/free-solid-svg-icons')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/helpers/defineProperty', 'react', 'react-redux', 'lodash', 'react-fontawesome', '@plusscommunities/pluss-core-web', 'moment', 'react-bootstrap', 'react-router-dom', 'react-router', '@babel/runtime/helpers/toConsumableArray', 'jquery', 'uuid', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/regenerator', '@fortawesome/free-solid-svg-icons'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-newsletter-web'] = {}, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._defineProperty, global.React, global.reactRedux, global._, global.FontAwesome, global.PlussCore, global.moment, global.reactBootstrap, global.reactRouterDom, global.reactRouter, global._toConsumableArray, global.$, global.uuid, global._asyncToGenerator, global._slicedToArray, global._regeneratorRuntime, global.freeSolidSvgIcons));
5
+ }(this, (function (exports, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _defineProperty, React, reactRedux, _, FontAwesome, PlussCore, moment, reactBootstrap, reactRouterDom, reactRouter, _toConsumableArray, $, uuid, _asyncToGenerator, _slicedToArray, _regeneratorRuntime, freeSolidSvgIcons) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -35,9 +35,9 @@
35
35
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
36
36
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
37
37
  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
38
- var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
39
38
  var FontAwesome__default = /*#__PURE__*/_interopDefaultLegacy(FontAwesome);
40
39
  var PlussCore__namespace = /*#__PURE__*/_interopNamespace(PlussCore);
40
+ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
41
41
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
42
42
  var $__default = /*#__PURE__*/_interopDefaultLegacy($);
43
43
  var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
@@ -689,7 +689,7 @@
689
689
  var COLOUR_BRANDING_OFF = Colours.COLOUR_BRANDING_OFF;
690
690
  Colours.COLOUR_BRANDING_ACTION;
691
691
  var COLOUR_BRANDING_APP = Colours.COLOUR_BRANDING_APP;
692
- Colours.TEXT_LIGHT;
692
+ var TEXT_LIGHT = Colours.TEXT_LIGHT;
693
693
  var hexToRGBAstring = Colours.hexToRGBAstring; // Misc
694
694
 
695
695
  var hideChat = Helper$1.hideChat;
@@ -700,6 +700,7 @@
700
700
  function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
701
701
 
702
702
  function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
703
+ var PAGE_SIZE = 100;
703
704
 
704
705
  var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
705
706
  _inherits__default['default'](ListNewsletter, _Component);
@@ -719,12 +720,43 @@
719
720
 
720
721
  _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
721
722
  newsletterEntries: [],
722
- sortColumn: 'DateUnix',
723
- // column to sort by
724
- sortDesc: false,
725
- // if true, sort descending rather than ascending
723
+ // Date column sorts on the real UnixTimestamp; defaults to descending so newest posts appear first.
724
+ sortColumn: 'UnixTimestamp',
725
+ sortDesc: true,
726
726
  now: moment__default['default'].utc(),
727
- onlyFuture: true
727
+ search: '',
728
+ startIndex: 0,
729
+ endIndex: PAGE_SIZE
730
+ });
731
+
732
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSearchChange", function (e) {
733
+ _this.setState({
734
+ search: e.target.value,
735
+ startIndex: 0,
736
+ endIndex: PAGE_SIZE
737
+ });
738
+ });
739
+
740
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "prevPage", function () {
741
+ if (_this.state.startIndex === 0) {
742
+ return;
743
+ }
744
+
745
+ _this.setState({
746
+ startIndex: _this.state.startIndex - PAGE_SIZE,
747
+ endIndex: Math.ceil(_this.state.endIndex / PAGE_SIZE) * PAGE_SIZE - PAGE_SIZE
748
+ });
749
+ });
750
+
751
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "nextPage", function (filteredCount) {
752
+ if (_this.state.startIndex + PAGE_SIZE >= filteredCount) {
753
+ return;
754
+ }
755
+
756
+ _this.setState({
757
+ startIndex: _this.state.startIndex + PAGE_SIZE,
758
+ endIndex: Math.ceil(_this.state.endIndex / PAGE_SIZE) * PAGE_SIZE + PAGE_SIZE
759
+ });
728
760
  });
729
761
 
730
762
  return _this;
@@ -769,15 +801,24 @@
769
801
  value: function sortByCol(col) {
770
802
  if (this.state.sortColumn === col) {
771
803
  this.setState({
772
- sortDesc: !this.state.sortDesc
804
+ sortDesc: !this.state.sortDesc,
805
+ startIndex: 0,
806
+ endIndex: PAGE_SIZE
773
807
  });
774
808
  } else {
775
809
  this.setState({
776
810
  sortColumn: col,
777
- sortDesc: false
811
+ sortDesc: false,
812
+ startIndex: 0,
813
+ endIndex: PAGE_SIZE
778
814
  });
779
815
  }
780
816
  }
817
+ }, {
818
+ key: "getPaginationText",
819
+ value: function getPaginationText(filteredCount) {
820
+ return "".concat(Math.min(this.state.startIndex + 1, filteredCount), "-").concat(Math.min(this.state.endIndex, filteredCount), "/").concat(filteredCount);
821
+ }
781
822
  }, {
782
823
  key: "removeNewsletterEntry",
783
824
  value: function removeNewsletterEntry(newsletter) {
@@ -797,22 +838,6 @@
797
838
  value: function renderNewsletter(source) {
798
839
  var _this4 = this;
799
840
 
800
- // let source = _.sortBy(this.state.newsletterEntries, this.state.sortColumn);
801
- // if (this.state.sortDesc) {
802
- // source.reverse();
803
- // }
804
- // source = _.filter(source, (ev) => {
805
- // if (!ev) {
806
- // return false
807
- // }
808
- // return true;
809
- // });
810
- // if (this.props.onlyFuture) {
811
- // const nownow = moment().startOf('month');
812
- // source = _.filter(source, (ev) => {
813
- // return nownow.isSameOrBefore(moment.utc(ev.UnixTimestamp).local());
814
- // });
815
- // }
816
841
  return source.map(function (ev) {
817
842
  if (ev != null) {
818
843
  return /*#__PURE__*/React__default['default'].createElement("tr", {
@@ -901,15 +926,15 @@
901
926
  condensed: true,
902
927
  hover: true
903
928
  }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
904
- className: "".concat(this.sortIsActive('DateUnix')),
929
+ className: "".concat(this.sortIsActive('UnixTimestamp')),
905
930
  style: {
906
931
  cursor: 'pointer',
907
932
  width: 140
908
933
  },
909
934
  onClick: function onClick() {
910
- _this5.sortByCol('DateUnix');
935
+ _this5.sortByCol('UnixTimestamp');
911
936
  }
912
- }, "Date published", this.renderSort('DateUnix')), /*#__PURE__*/React__default['default'].createElement("th", {
937
+ }, "Date published", this.renderSort('UnixTimestamp')), /*#__PURE__*/React__default['default'].createElement("th", {
913
938
  className: "".concat(this.sortIsActive('Title')),
914
939
  style: {
915
940
  cursor: 'pointer'
@@ -947,9 +972,57 @@
947
972
  type: "h3"
948
973
  }, values.textThereAreNoNews)));
949
974
  }
975
+ }, {
976
+ key: "renderPager",
977
+ value: function renderPager(filteredCount) {
978
+ var _this6 = this;
979
+
980
+ if (filteredCount <= PAGE_SIZE) {
981
+ return null;
982
+ }
983
+
984
+ return /*#__PURE__*/React__default['default'].createElement("div", {
985
+ className: "paginationContainer",
986
+ style: {
987
+ margin: '8px 0'
988
+ }
989
+ }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
990
+ className: "pagination__left",
991
+ name: "chevron-left",
992
+ style: {
993
+ cursor: 'pointer',
994
+ fontSize: 20,
995
+ color: TEXT_LIGHT
996
+ },
997
+ onClick: this.prevPage
998
+ }), /*#__PURE__*/React__default['default'].createElement("p", {
999
+ className: "pagination__text",
1000
+ style: {
1001
+ display: 'inline-block',
1002
+ margin: 0,
1003
+ padding: '0 16px',
1004
+ minWidth: 120,
1005
+ textAlign: 'center',
1006
+ color: TEXT_LIGHT
1007
+ }
1008
+ }, this.getPaginationText(filteredCount)), /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
1009
+ className: "pagination__right",
1010
+ name: "chevron-right",
1011
+ style: {
1012
+ cursor: 'pointer',
1013
+ fontSize: 20,
1014
+ color: TEXT_LIGHT
1015
+ },
1016
+ onClick: function onClick() {
1017
+ return _this6.nextPage(filteredCount);
1018
+ }
1019
+ }));
1020
+ }
950
1021
  }, {
951
1022
  key: "renderContent",
952
1023
  value: function renderContent() {
1024
+ var _this7 = this;
1025
+
953
1026
  var source = ___default['default'].sortBy(this.state.newsletterEntries, this.state.sortColumn);
954
1027
 
955
1028
  if (this.state.sortDesc) {
@@ -963,20 +1036,25 @@
963
1036
 
964
1037
  return true;
965
1038
  });
1039
+ var search = this.state.search;
966
1040
 
967
- if (this.props.onlyFuture) {
968
- var nownow = moment__default['default']().startOf('month');
1041
+ if (!___default['default'].isEmpty(search)) {
1042
+ var lowSearch = search.toLowerCase();
969
1043
  source = ___default['default'].filter(source, function (ev) {
970
- return nownow.isSameOrBefore(moment__default['default'].utc(ev.UnixTimestamp).local());
971
- });
972
- } // source = []
1044
+ if (!ev.Title) {
1045
+ return false;
1046
+ }
973
1047
 
1048
+ return ev.Title.toLowerCase().indexOf(lowSearch) > -1;
1049
+ });
1050
+ } // Total matching the search/sort BEFORE the page slice — drives the pager text.
974
1051
 
975
- if (___default['default'].isEmpty(source)) {
976
- return this.renderEmpty();
977
- }
978
1052
 
979
- return this.renderView(source);
1053
+ var filteredCount = source.length;
1054
+ source = ___default['default'].filter(source, function (ev, i) {
1055
+ return i >= _this7.state.startIndex && i < _this7.state.endIndex;
1056
+ });
1057
+ return /*#__PURE__*/React__default['default'].createElement("div", null, ___default['default'].isEmpty(source) ? this.renderEmpty() : this.renderView(source), this.renderPager(filteredCount));
980
1058
  }
981
1059
  }, {
982
1060
  key: "render",
@@ -985,7 +1063,18 @@
985
1063
  style: {
986
1064
  minWidth: '100%'
987
1065
  }
988
- }, this.renderContent());
1066
+ }, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
1067
+ id: "search",
1068
+ type: "text",
1069
+ placeholder: "Search by title",
1070
+ value: this.state.search,
1071
+ onChange: this.onSearchChange,
1072
+ className: "genericInputContainer-rounded marginTop-10",
1073
+ style: {
1074
+ maxWidth: 500,
1075
+ marginBottom: 16
1076
+ }
1077
+ }), this.renderContent());
989
1078
  }
990
1079
  }]);
991
1080
 
@@ -1966,9 +2055,6 @@
1966
2055
  loadingSubmissions: false,
1967
2056
  submissionEntries: [],
1968
2057
  allList: [],
1969
- thisMonth: [],
1970
- now: moment__default['default'].utc(),
1971
- onlyFuture: true,
1972
2058
  search: ''
1973
2059
  };
1974
2060
  return _this;
@@ -1993,18 +2079,8 @@
1993
2079
  }, {
1994
2080
  key: "updateProps",
1995
2081
  value: function updateProps(props) {
1996
- var thisMonth = [];
1997
- var nownow = moment__default['default']().startOf('month');
1998
- props.news.forEach(function (rep) {
1999
- var isThisMonth = nownow.isSameOrBefore(moment__default['default'].utc(rep.UnixTimestamp).local());
2000
-
2001
- if (isThisMonth) {
2002
- thisMonth.push(rep);
2003
- }
2004
- });
2005
2082
  this.setState({
2006
2083
  allList: props.news,
2007
- thisMonth: thisMonth,
2008
2084
  submissionEntries: props.submissions
2009
2085
  });
2010
2086
  }
@@ -2208,9 +2284,7 @@
2208
2284
  return /*#__PURE__*/React__default['default'].createElement(AvailableNews, null);
2209
2285
  }
2210
2286
 
2211
- return /*#__PURE__*/React__default['default'].createElement(ListNewsletterEntries, {
2212
- onlyFuture: this.state.selectedSection === 'thisMonth'
2213
- });
2287
+ return /*#__PURE__*/React__default['default'].createElement(ListNewsletterEntries, null);
2214
2288
  }
2215
2289
  }, {
2216
2290
  key: "render",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plusscommunities/pluss-newsletter-web-sharing",
3
- "version": "1.4.37",
3
+ "version": "1.4.39",
4
4
  "description": "Extension package to enable newsletter on Pluss Communities Platform",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {
@@ -9,15 +9,22 @@ import { newsLoaded, removeNews } from '../../actions';
9
9
  import { newsletterActions } from '../../webapi';
10
10
  import { checkLoggedIn, validateAccess } from '../../session';
11
11
  import { Text } from '../../components/text';
12
+ import { GenericInput } from '../../components';
13
+ import { TEXT_LIGHT } from '../../js';
12
14
  import { values } from '../../values.config';
13
15
 
16
+ const PAGE_SIZE = 100;
17
+
14
18
  class ListNewsletter extends Component {
15
19
  state = {
16
20
  newsletterEntries: [],
17
- sortColumn: 'DateUnix', // column to sort by
18
- sortDesc: false, // if true, sort descending rather than ascending
21
+ // Date column sorts on the real UnixTimestamp; defaults to descending so newest posts appear first.
22
+ sortColumn: 'UnixTimestamp',
23
+ sortDesc: true,
19
24
  now: moment.utc(),
20
- onlyFuture: true,
25
+ search: '',
26
+ startIndex: 0,
27
+ endIndex: PAGE_SIZE,
21
28
  };
22
29
 
23
30
  UNSAFE_componentWillMount() {
@@ -51,15 +58,51 @@ class ListNewsletter extends Component {
51
58
  if (this.state.sortColumn === col) {
52
59
  this.setState({
53
60
  sortDesc: !this.state.sortDesc,
61
+ startIndex: 0,
62
+ endIndex: PAGE_SIZE,
54
63
  });
55
64
  } else {
56
65
  this.setState({
57
66
  sortColumn: col,
58
67
  sortDesc: false,
68
+ startIndex: 0,
69
+ endIndex: PAGE_SIZE,
59
70
  });
60
71
  }
61
72
  }
62
73
 
74
+ onSearchChange = (e) => {
75
+ this.setState({
76
+ search: e.target.value,
77
+ startIndex: 0,
78
+ endIndex: PAGE_SIZE,
79
+ });
80
+ };
81
+
82
+ prevPage = () => {
83
+ if (this.state.startIndex === 0) {
84
+ return;
85
+ }
86
+ this.setState({
87
+ startIndex: this.state.startIndex - PAGE_SIZE,
88
+ endIndex: Math.ceil(this.state.endIndex / PAGE_SIZE) * PAGE_SIZE - PAGE_SIZE,
89
+ });
90
+ };
91
+
92
+ nextPage = (filteredCount) => {
93
+ if (this.state.startIndex + PAGE_SIZE >= filteredCount) {
94
+ return;
95
+ }
96
+ this.setState({
97
+ startIndex: this.state.startIndex + PAGE_SIZE,
98
+ endIndex: Math.ceil(this.state.endIndex / PAGE_SIZE) * PAGE_SIZE + PAGE_SIZE,
99
+ });
100
+ };
101
+
102
+ getPaginationText(filteredCount) {
103
+ return `${Math.min(this.state.startIndex + 1, filteredCount)}-${Math.min(this.state.endIndex, filteredCount)}/${filteredCount}`;
104
+ }
105
+
63
106
  removeNewsletterEntry(newsletter) {
64
107
  if (window.confirm(values.textAreYouSureYouWantToDelete)) {
65
108
  this.props.removeNews(newsletter.RowId);
@@ -75,24 +118,6 @@ class ListNewsletter extends Component {
75
118
  }
76
119
 
77
120
  renderNewsletter(source) {
78
- // let source = _.sortBy(this.state.newsletterEntries, this.state.sortColumn);
79
- // if (this.state.sortDesc) {
80
- // source.reverse();
81
- // }
82
- // source = _.filter(source, (ev) => {
83
- // if (!ev) {
84
- // return false
85
- // }
86
- // return true;
87
- // });
88
-
89
- // if (this.props.onlyFuture) {
90
- // const nownow = moment().startOf('month');
91
- // source = _.filter(source, (ev) => {
92
- // return nownow.isSameOrBefore(moment.utc(ev.UnixTimestamp).local());
93
- // });
94
- // }
95
-
96
121
  return source.map((ev) => {
97
122
  if (ev != null) {
98
123
  return (
@@ -157,13 +182,13 @@ class ListNewsletter extends Component {
157
182
  <thead>
158
183
  <tr>
159
184
  <th
160
- className={`${this.sortIsActive('DateUnix')}`}
185
+ className={`${this.sortIsActive('UnixTimestamp')}`}
161
186
  style={{ cursor: 'pointer', width: 140 }}
162
187
  onClick={() => {
163
- this.sortByCol('DateUnix');
188
+ this.sortByCol('UnixTimestamp');
164
189
  }}
165
190
  >
166
- Date published{this.renderSort('DateUnix')}
191
+ Date published{this.renderSort('UnixTimestamp')}
167
192
  </th>
168
193
  <th
169
194
  className={`${this.sortIsActive('Title')}`}
@@ -193,6 +218,34 @@ class ListNewsletter extends Component {
193
218
  );
194
219
  }
195
220
 
221
+ renderPager(filteredCount) {
222
+ if (filteredCount <= PAGE_SIZE) {
223
+ return null;
224
+ }
225
+ return (
226
+ <div className="paginationContainer" style={{ margin: '8px 0' }}>
227
+ <FontAwesome
228
+ className="pagination__left"
229
+ name="chevron-left"
230
+ style={{ cursor: 'pointer', fontSize: 20, color: TEXT_LIGHT }}
231
+ onClick={this.prevPage}
232
+ />
233
+ <p
234
+ className="pagination__text"
235
+ style={{ display: 'inline-block', margin: 0, padding: '0 16px', minWidth: 120, textAlign: 'center', color: TEXT_LIGHT }}
236
+ >
237
+ {this.getPaginationText(filteredCount)}
238
+ </p>
239
+ <FontAwesome
240
+ className="pagination__right"
241
+ name="chevron-right"
242
+ style={{ cursor: 'pointer', fontSize: 20, color: TEXT_LIGHT }}
243
+ onClick={() => this.nextPage(filteredCount)}
244
+ />
245
+ </div>
246
+ );
247
+ }
248
+
196
249
  renderContent() {
197
250
  let source = _.sortBy(this.state.newsletterEntries, this.state.sortColumn);
198
251
  if (this.state.sortDesc) {
@@ -205,21 +258,47 @@ class ListNewsletter extends Component {
205
258
  return true;
206
259
  });
207
260
 
208
- if (this.props.onlyFuture) {
209
- const nownow = moment().startOf('month');
261
+ const { search } = this.state;
262
+ if (!_.isEmpty(search)) {
263
+ const lowSearch = search.toLowerCase();
210
264
  source = _.filter(source, (ev) => {
211
- return nownow.isSameOrBefore(moment.utc(ev.UnixTimestamp).local());
265
+ if (!ev.Title) {
266
+ return false;
267
+ }
268
+ return ev.Title.toLowerCase().indexOf(lowSearch) > -1;
212
269
  });
213
270
  }
214
- // source = []
215
- if (_.isEmpty(source)) {
216
- return this.renderEmpty();
217
- }
218
- return this.renderView(source);
271
+
272
+ // Total matching the search/sort BEFORE the page slice — drives the pager text.
273
+ const filteredCount = source.length;
274
+
275
+ source = _.filter(source, (ev, i) => {
276
+ return i >= this.state.startIndex && i < this.state.endIndex;
277
+ });
278
+
279
+ return (
280
+ <div>
281
+ {_.isEmpty(source) ? this.renderEmpty() : this.renderView(source)}
282
+ {this.renderPager(filteredCount)}
283
+ </div>
284
+ );
219
285
  }
220
286
 
221
287
  render() {
222
- return <div style={{ minWidth: '100%' }}>{this.renderContent()}</div>;
288
+ return (
289
+ <div style={{ minWidth: '100%' }}>
290
+ <GenericInput
291
+ id="search"
292
+ type="text"
293
+ placeholder="Search by title"
294
+ value={this.state.search}
295
+ onChange={this.onSearchChange}
296
+ className="genericInputContainer-rounded marginTop-10"
297
+ style={{ maxWidth: 500, marginBottom: 16 }}
298
+ />
299
+ {this.renderContent()}
300
+ </div>
301
+ );
223
302
  }
224
303
  }
225
304
 
@@ -1,7 +1,6 @@
1
1
  import React, { Component } from 'react';
2
2
  import { connect } from 'react-redux';
3
3
  import _ from 'lodash';
4
- import moment from 'moment';
5
4
  import FontAwesome from 'react-fontawesome';
6
5
  import { Header, AddButton, HubSidebar } from '../../components';
7
6
  import { isTheBest, validateAccess } from '../../session';
@@ -37,9 +36,6 @@ class NewsHub extends Component {
37
36
  submissionEntries: [],
38
37
 
39
38
  allList: [],
40
- thisMonth: [],
41
- now: moment.utc(),
42
- onlyFuture: true,
43
39
  search: '',
44
40
  };
45
41
  }
@@ -58,19 +54,8 @@ class NewsHub extends Component {
58
54
  }
59
55
 
60
56
  updateProps(props) {
61
- const thisMonth = [];
62
- const nownow = moment().startOf('month');
63
-
64
- props.news.forEach((rep) => {
65
- const isThisMonth = nownow.isSameOrBefore(moment.utc(rep.UnixTimestamp).local());
66
- if (isThisMonth) {
67
- thisMonth.push(rep);
68
- }
69
- });
70
-
71
57
  this.setState({
72
58
  allList: props.news,
73
- thisMonth,
74
59
  submissionEntries: props.submissions,
75
60
  });
76
61
  }
@@ -240,7 +225,7 @@ class NewsHub extends Component {
240
225
  if (this.state.selectedSection === 'available') {
241
226
  return <AvailableNews />;
242
227
  }
243
- return <ListNewsletterEntries onlyFuture={this.state.selectedSection === 'thisMonth'} />;
228
+ return <ListNewsletterEntries />;
244
229
  }
245
230
 
246
231
  render() {