Refactor/#195 collapse standups

src/components/FeedPortal/components/GithubActivity.jsx

@@ -19,7 +19,8 @@ const IssueIcon = () => {
 
 export const GithubActivityPullRequest = ( data ) => {
   return (
-    <a href={data.url} target="_blank" className="github-activity-container">
+    <a href={data.url} target="_blank" 
+    rel="noopener noreferrer" className="github-activity-container">
       <PRIcon />
       <div className="github-activity-text">
         <div className="github-activity-title">{data.title}</div>
@@ -30,7 +31,8 @@ export const GithubActivityPullRequest = ( data ) => {
 }
 export const GithubActivityIssue = ( data ) => {
   return (
-    <a href={data.url} target="_blank" className="github-activity-container">
+    <a href={data.url} target="_blank" rel="noopener noreferrer"
+      className="github-activity-container">
       <IssueIcon />
       <div className="github-activity-text">
         <div className="github-activity-title">{data.title}</div>

src/components/FeedPortal/components/NewsFeed.jsx

@@ -14,28 +14,28 @@ const NewsFeed = ({ type, loading, data }) => {
     ${project ? `${project.team_name.toUpperCase()}` : "ALL"} NEWS
   `;
 
-
   const renderNewsfeedItems = items => items.map(
     item => {
       return FeedItemContainer({
         component: NewsfeedItems[item.type],
         item,
         key: item.id,
-      })
+      });
     }
   );
 
-  const renderStandups = standups => standups.map(
-    standup => (
-      standup.submitted_at
-        ? FeedItemContainer({
-          item: { standup, type: "NewsfeedStandup", user: standup.member, timestamp: standup.submitted_at },
-          key: standup.id,
-          component: NewsfeedItems.NewsfeedStandup,
-        })
-        : null
-    ),
-  );
+  const renderStandups = standups => {
+    return (
+      FeedItemContainer({
+        item: { 
+          standups, type: "NewsfeedStandup", 
+          user: standups[standups.length-1].member, 
+          timestamp: standups[standups.length-1].submitted_at },
+        key: standups[standups.length-1].id,
+        component: NewsfeedItems.NewsfeedStandup,
+      })
+    );
+  };
 
   const renderFeed = ({ user, project }) => {
     let dataToRender = (
@@ -91,6 +91,8 @@ const getNewsfeed = (project_id) => {
         worked_on
         working_on
         blocked_on
+        is_expired
+        expiration
         member {
           id
           username

src/components/FeedPortal/components/NewsfeedStandup.jsx

@@ -1,57 +1,61 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+
 import "./NewsfeedStandup.css";
+import FeedItemContainer from "./FeedItem";
+import StandupDetail from "./StandupDetail";
+import StandupSummary from "./StandupSummary";
 
-const sentimentMap = {
-  red: 'Trouble Ahead!',
-  yellow: 'Nervous',
-  green: 'Great!',
-};
-
-const responseLabelMap = {
-  progress_sentiment: 'Health Status',
-  worked_on: 'Worked on',
-  working_on: 'Working on',
-  blocked_on: 'Blocked on',
-}
+class NewsfeedStandup extends React.Component {
+
+  static propTypes = {
+    standups: PropTypes.array.isRequired,
+    timestamp: PropTypes.number.isRequired,
+    type: PropTypes.string.isRequired,
+    user: PropTypes.object.isRequired,
+  };
 
-const classNameSelector = (item, data) => {
-  let className = "team-standup-answer";
-  if (item === "progress_sentiment") {
-    className += ` team-standup-status--${data}`;
+  constructor(props) {
+    super(props);
+
+    const { standups } = props;
+    this.state = {
+      standups: standups,
+      selected_standup: {},
+    };
+
+    this.updateSelectedStandup = this.updateSelectedStandup.bind(this);
   }
-  return className;
-};
 
-const renderResponses = standupFields => Object.keys(standupFields).map(
-  standupField => {
-    const fieldValue = standupFields[standupField];
-    const className = classNameSelector(standupField, fieldValue);
+  updateSelectedStandup= (standup) => {
+    this.setState({ selected_standup: { ...standup } });
+  }
+
+  renderResponses = () => {
     return (
-      <div className="team-standup-data" key={standupField}>
-        <label className="team-standup-label">{responseLabelMap[standupField]} :</label>
-        <div className={className}>
-          {
-            standupField === "progress_sentiment"
-              ? sentimentMap[fieldValue]
-              : fieldValue
-          }
+      <React.Fragment>
+        <div className="team-standup-container">
+          <div className="team-standup-summary">
+            <StandupSummary 
+              standups={ this.state.standups }
+              updateSelectedStandup={ this.updateSelectedStandup }/>
+          </div>
+          <div className="team-standup-detail">
+            <StandupDetail { ...{ standup: this.state.selected_standup } }/>
+          </div>
         </div>
-      </div>
+      </React.Fragment>
     );
-  },
-);
-
-const NewsfeedStandup = ({
-  standup: {
-    progress_sentiment,
-    worked_on,
-    working_on,
-    blocked_on,
-  },
-}) => (
-    <div className="team-standup-card-container">
-      {renderResponses({ progress_sentiment, worked_on, working_on, blocked_on })}
-    </div>
-  );
+  };
+
+  render = () => {
+    return (
+      <React.Fragment>
+        { this.renderResponses() }
+      </React.Fragment>
+    );
+  }
+
+}
 
 export default NewsfeedStandup;

src/components/FeedPortal/components/NewsfeedStandup.scss

@@ -1,14 +1,30 @@
 @import '../../../styles/abstracts/_variables.scss';
 
-
 /*
 ==========================
 CONTAINER
 ==========================
 */
-.team-standup-card-container {
-    background-color: $palest-grey;
-    padding: 40px;
+.team-standup-container {
+    display: grid;
+    grid-template-columns: 25% 72%;
+    grid-gap: 1rem;
+}
+
+.team-standup-summary {
+    background-color: white;
+    display: table-cell; // Force height of all children to that of largest child 
+    grid-column: 1;
+    grid-row: 1;
+    padding: .25rem;
+}
+
+.team-standup-detail {
+    background-color: white;
+    display: table-cell; // Force height of all children to that of largest child 
+    grid-column: 2;
+    grid-row: 1;
+    padding: .25rem;
 }
 /*
 ==========================
@@ -24,12 +40,21 @@ data object
 
 .team-standup-label {
     grid-area: l;
-    border-right: 1px solid $grey;
     display: block;
-    padding-bottom: 30px;
     font-size: 14px;
-    color: $med-grey;
-    text-transform: uppercase;
+    color: #9e9e9e; 
+}
+
+.team-standup-label--bordered {
+    border-right: 1px solid #9e9e9e; 
+}
+
+.team-standup-label--padtop {
+    padding-top: 1rem; 
+}
+
+.team-standup-label--padded {
+    padding-bottom: 30px;
 }
 
 .team-standup-answer {
@@ -39,6 +64,13 @@ data object
     color: $dark-grey;
     padding-bottom: 30px;
 }
+
+.team-standup-id {
+    display: block;
+    font-size: 12px;
+    color: $health-green;
+    padding-left: 0;
+}
 /*
 ==========================
 COLORED STATUS

src/components/FeedPortal/components/StandupCompleted.jsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import "./NewsfeedStandup.css";
+
+const INITIAL_LIST_LIMIT = 3;
+
+class StandupCompleted extends React.Component {
+
+  static propTypes = {
+    sortedStandups: PropTypes.array.isRequired,
+    newStandupSelected: PropTypes.func.isRequired,
+    updateSelectedStandup: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+    this.defaultDisplayListCount = INITIAL_LIST_LIMIT;
+    this.state = {
+      listDisplayLimit: this.defaultDisplayListCount,
+      scrollText: "More..."
+    };
+  }
+
+  filterStandups = (standup, standupIndex, displayCount) => {
+    return standupIndex !== 0 && standup.submitted_at && displayCount <= this.state.listDisplayLimit;
+  }
+
+  renderMore = (sortedStandups) => {
+    const completedStandupCount = sortedStandups.reduce((count, standup, standupIndex) => {
+      if (this.filterStandups(standup, standupIndex, 0)) {
+        count += 1;
+      }
+      return count;
+    }, 0);
+
+    return (
+      <div>
+        { completedStandupCount > INITIAL_LIST_LIMIT
+            ? <a id="team-standup-scroll" href='#' className="team-standup-id"
+                onClick={ (e) => {
+                  if (this.state.scrollText === 'More...') {
+                    this.setState({ 
+                      listDisplayLimit: completedStandupCount,
+                      scrollText: 'Less...'
+                    });
+                  } else {
+                    this.setState({ 
+                      listDisplayLimit: this.defaultDisplayListCount,
+                      scrollText: 'More...'
+                    });
+                  }
+                } }>
+                { this.state.scrollText }
+              </a>
+            : null
+        }
+      </div>
+    );
+  }
+
+  render = () => {
+    const { sortedStandups, newStandupSelected, updateSelectedStandup } = this.props;
+    let displayCount = 1;
+    const incrementDisplayCount = () => {
+      displayCount += 1;
+    };
+
+    return (
+      <React.Fragment>
+        <label className='team-standup-label team-standup-label--padtop'>
+          Completed Standups
+        </label>
+        { sortedStandups.length > 0
+            ? sortedStandups.map( (standup, standupIndex) => (
+                this.filterStandups(standup, standupIndex, displayCount)
+                  ? <a href='#' className="team-standup-id" key={standup.submitted_at}
+                      onClick={ (e) => {
+                        newStandupSelected(e, standup, updateSelectedStandup);
+                      } }>
+                      { new Date(standup.submitted_at).toLocaleDateString()} - { standup.member.username }
+                      { incrementDisplayCount() }
+                    </a>
+                  : null
+              ))
+            : <div className="team-standup-id">No standups</div>
+        }
+        { this.renderMore(sortedStandups) }
+      </React.Fragment>
+    );
+  };
+
+}
+
+export default StandupCompleted;