feat: move show directory to mui (#896)

* feat: move show directory to mui

* fix: figma adjustments on show directory grid

* fix: feedback from PR

Author: priscila-moneo

src/actions/summit-actions.js

@@ -21,7 +21,8 @@ import {
   stopLoading,
   startLoading,
   showSuccessMessage,
-  authErrorHandler
+  authErrorHandler,
+  escapeFilterValue
 } from "openstack-uicore-foundation/lib/utils/actions";
 import moment from "moment-timezone";
 import {
@@ -130,7 +131,12 @@ export const clearCurrentSummit = () => (dispatch) => {
 };
 
 export const loadSummits =
-  (page = DEFAULT_CURRENT_PAGE, perPage = DEFAULT_PER_PAGE) =>
+  (
+    page = DEFAULT_CURRENT_PAGE,
+    perPage = DEFAULT_PER_PAGE,
+    term = "",
+    hidePastEvents = false
+  ) =>
   async (dispatch, getState) => {
     const accessToken = await getAccessTokenSafely();
 
@@ -146,6 +152,22 @@ export const loadSummits =
       order: "-start_date"
     };
 
+    const filters = [];
+
+    if (term) {
+      const escapedTerm = escapeFilterValue(term);
+      filters.push(`name=@${escapedTerm}`);
+    }
+
+    if (hidePastEvents) {
+      const now = moment().tz("UTC").unix();
+      filters.push(`end_date>=${now}`);
+    }
+
+    if (filters.length > 0) {
+      params["filter[]"] = filters;
+    }
+
     getRequest(
       createAction(REQUEST_SUMMITS),
       createAction(RECEIVE_SUMMITS),

src/i18n/en.json

@@ -299,10 +299,23 @@
   },
   "directory": {
     "select": "Select",
-    "summits": "Events",
-    "add_summit": "Add Event",
+    "summits": "Shows",
+    "shows": "shows",
+    "add_summit": "Add Show",
     "remove_warning": "Are you sure you want to delete event",
-    "invitation_only": "Invitation Only"
+    "error_loading": "Error loading directory.",
+    "invitation_only": "Invitation Only",
+    "id": "ID",
+    "summit_name": "Event Name",
+    "sponsors": "Sponsors",
+    "forms": "Forms",
+    "attachments": "Attachments",
+    "hide_past_events": "Hide past events",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "placeholders": {
+      "search": "Search..."
+    }
   },
   "dashboard": {
     "dashboard": "Dashboard",

src/pages/summits/summit-dashboard-page.js

@@ -9,13 +9,14 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 import React from "react";
+import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import moment from "moment-timezone";
-import { getSummitById } from "../../actions/summit-actions";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
+import { getSummitById } from "../../actions/summit-actions";
 import Member from "../../models/member";
 import "../../styles/summit-dashboard-page.less";
 
@@ -37,18 +38,21 @@ class SummitDashboardPage extends React.Component {
   }
 
   onCollapseChange(section) {
-    let newCollapseState = { ...this.state.collapseState };
+    const newCollapseState = { ...this.state.collapseState };
     newCollapseState[section] = !newCollapseState[section];
     this.setState({ ...this.state, collapseState: newCollapseState });
   }
 
   componentDidMount() {
     const { currentSummit } = this.props;
-    this.interval = setInterval(this.localTimer.bind(this), 1000);
+    this.interval = setInterval(
+      this.localTimer.bind(this),
+      moment.duration(1, "second").asMilliseconds()
+    );
 
-    if (currentSummit) {
-      let localtime = moment().tz(currentSummit.time_zone.name);
-      this.setState({ ...this.state, localtime: localtime });
+    if (currentSummit?.time_zone?.name) {
+      const localtime = moment().tz(currentSummit.time_zone.name);
+      this.setState({ ...this.state, localtime });
     }
   }
 
@@ -63,8 +67,8 @@ class SummitDashboardPage extends React.Component {
   }
 
   getFormattedTime(atime) {
-    atime = atime * 1000;
-    return moment(atime)
+    return moment
+      .unix(atime)
       .tz(this.props.currentSummit.time_zone.name)
       .format("MMMM Do YYYY, h:mm:ss a");
   }
@@ -77,10 +81,10 @@ class SummitDashboardPage extends React.Component {
 
   render() {
     const { currentSummit, match, member } = this.props;
-    let memberObj = new Member(member);
-    let canEditSummit = memberObj.canEditSummit();
+    const memberObj = new Member(member);
+    const canEditSummit = memberObj.canEditSummit();
 
-    if (!currentSummit.id) return <div />;
+    if (!currentSummit.id || !currentSummit.time_zone?.name) return <div />;
 
     return (
       <div>
@@ -100,16 +104,16 @@ class SummitDashboardPage extends React.Component {
             <div className="col-md-6"> {currentSummit.time_zone.name} </div>
             <div className="col-md-6">
               {" "}
-              {this.getFormattedTime(this.state.localtime / 1000)}{" "}
+              {this.getFormattedTime(this.state.localtime.unix())}{" "}
             </div>
           </div>
           <div
             className={
-              "row " +
+              `row ${ 
               this.getTimeClass(
                 currentSummit.start_date,
                 currentSummit.end_date
-              )
+              )}`
             }
           >
             <div className="col-md-2">
@@ -131,11 +135,11 @@ class SummitDashboardPage extends React.Component {
           </div>
           <div
             className={
-              "row " +
+              `row ${ 
               this.getTimeClass(
                 currentSummit.start_date,
                 currentSummit.end_date
-              )
+              )}`
             }
           >
             <div className="col-md-2">
@@ -160,16 +164,16 @@ class SummitDashboardPage extends React.Component {
           </div>
           {canEditSummit &&
             currentSummit.selection_plans.map((sp) => (
-              <div key={"seleplan_" + sp.id} className="selection-plan row">
+              <div key={`seleplan_${  sp.id}`} className="selection-plan row">
                 <div className="col-md-12">{sp.name}</div>
                 <div className="col-md-12">
                   <div
                     className={
-                      "row " +
+                      `row ${ 
                       this.getTimeClass(
                         currentSummit.start_date,
                         currentSummit.end_date
-                      )
+                      )}`
                     }
                   >
                     <div className="col-md-2">
@@ -192,11 +196,11 @@ class SummitDashboardPage extends React.Component {
                   </div>
                   <div
                     className={
-                      "row " +
+                      `row ${ 
                       this.getTimeClass(
                         currentSummit.start_date,
                         currentSummit.end_date
-                      )
+                      )}`
                     }
                   >
                     <div className="col-md-2">
@@ -219,11 +223,11 @@ class SummitDashboardPage extends React.Component {
                   </div>
                   <div
                     className={
-                      "row " +
+                      `row ${ 
                       this.getTimeClass(
                         currentSummit.start_date,
                         currentSummit.end_date
-                      )
+                      )}`
                     }
                   >
                     <div className="col-md-2">
@@ -253,24 +257,24 @@ class SummitDashboardPage extends React.Component {
               <hr />
               <h4>
                 {T.translate("dashboard.events")}&nbsp;
-                {this.state.collapseState["events"] && (
+                {this.state.collapseState.events && (
                   <i
                     title={T.translate("dashboard.expand")}
                     onClick={() => this.onCollapseChange("events")}
                     className="fa fa-plus-square clickable"
                     aria-hidden="true"
-                  ></i>
+                   />
                 )}
-                {!this.state.collapseState["events"] && (
+                {!this.state.collapseState.events && (
                   <i
                     title={T.translate("dashboard.collapse")}
                     onClick={() => this.onCollapseChange("events")}
                     className="fa fa-minus-square clickable"
                     aria-hidden="true"
-                  ></i>
+                   />
                 )}
               </h4>
-              {!this.state.collapseState["events"] && (
+              {!this.state.collapseState.events && (
                 <div>
                   <div className="row">
                     <div className="col-md-4">
@@ -309,24 +313,24 @@ class SummitDashboardPage extends React.Component {
               <hr />
               <h4>
                 {T.translate("dashboard.voting")}&nbsp;
-                {this.state.collapseState["voting"] && (
+                {this.state.collapseState.voting && (
                   <i
                     title={T.translate("dashboard.expand")}
                     onClick={() => this.onCollapseChange("voting")}
                     className="fa fa-plus-square clickable"
                     aria-hidden="true"
-                  ></i>
+                   />
                 )}
-                {!this.state.collapseState["voting"] && (
+                {!this.state.collapseState.voting && (
                   <i
                     title={T.translate("dashboard.collapse")}
                     onClick={() => this.onCollapseChange("voting")}
                     className="fa fa-minus-square clickable"
                     aria-hidden="true"
-                  ></i>
+                   />
                 )}
               </h4>
-              {!this.state.collapseState["voting"] && (
+              {!this.state.collapseState.voting && (
                 <div>
                   <div className="row">
                     <div className="col-md-6">
@@ -345,24 +349,24 @@ class SummitDashboardPage extends React.Component {
               <hr />
               <h4>
                 {T.translate("dashboard.emails")}&nbsp;
-                {this.state.collapseState["emails"] && (
+                {this.state.collapseState.emails && (
                   <i
                     title={T.translate("dashboard.expand")}
                     onClick={() => this.onCollapseChange("emails")}
                     className="fa fa-plus-square clickable"
                     aria-hidden="true"
-                  ></i>
+                   />
                 )}
-                {!this.state.collapseState["emails"] && (
+                {!this.state.collapseState.emails && (
                   <i
                     title={T.translate("dashboard.collapse")}
                     onClick={() => this.onCollapseChange("emails")}
                     className="fa fa-minus-square clickable"
                     aria-hidden="true"
-                  ></i>
+                   />
                 )}
               </h4>
-              {!this.state.collapseState["emails"] && (
+              {!this.state.collapseState.emails && (
                 <div>
                   <div className="row">
                     <div className="col-md-4">
@@ -432,6 +436,37 @@ class SummitDashboardPage extends React.Component {
   }
 }
 
+SummitDashboardPage.propTypes = {
+  currentSummit: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    time_zone: PropTypes.shape({
+      name: PropTypes.string
+    }),
+    start_date: PropTypes.number,
+    end_date: PropTypes.number,
+    registration_begin_date: PropTypes.number,
+    registration_end_date: PropTypes.number,
+    selection_plans: PropTypes.arrayOf(PropTypes.object),
+    locations: PropTypes.arrayOf(PropTypes.object),
+    speakers_count: PropTypes.number,
+    presentations_submitted_count: PropTypes.number,
+    published_events_count: PropTypes.number,
+    presentation_voters_count: PropTypes.number,
+    presentation_votes_count: PropTypes.number,
+    speaker_announcement_email_accepted_count: PropTypes.number,
+    speaker_announcement_email_rejected_count: PropTypes.number,
+    speaker_announcement_email_alternate_count: PropTypes.number,
+    speaker_announcement_email_accepted_alternate_count: PropTypes.number,
+    speaker_announcement_email_accepted_rejected_count: PropTypes.number,
+    speaker_announcement_email_alternate_rejected_count: PropTypes.number
+  }).isRequired,
+  member: PropTypes.object,
+  match: PropTypes.shape({
+    url: PropTypes.string
+  }).isRequired
+};
+
 const mapStateToProps = ({ currentSummitState, loggedUserState }) => ({
   currentSummit: currentSummitState.currentSummit,
   member: loggedUserState.member