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;