10036

pending completion

Build # 10036

Build Type

Pull #5478

travis-ci

Committed by

web-flow

Commit Message

Changed name of spec file for open-feedback-modal and reorganised tests using nested describe calls.

Pull Request Pull Request #5478: Mimic the message reduction approach implemented by the new monorepo

Run Details

1959 of 5464 branches covered (35.85%)

Branch coverage included in aggregate %.

4 of 4 new or added lines in 1 file covered. (100.0%)

6655 of 12070 relevant lines covered (55.14%)

6.36 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

10.0

/app/pages/home-for-user/recent-messages.jsx

import PropTypes from 'prop-types';
import React from 'react';
import apiClient from 'panoptes-client/lib/api-client';
import talkClient from 'panoptes-client/lib/talk-client';
import classnames from 'classnames';
import HomePageSection from './generic-section';
import { Link } from 'react-router';
import StringTruncator from './string-truncator';


const LOADER_BULLETS = '• • •';

class RecentCollectionsSection extends React.Component {
  static propTypes = {
    onClose: PropTypes.func,
  };

  static contextTypes = {
    user: PropTypes.object.isRequired,
  };

  state = {
    loading: false,
    error: null,
    conversations: [],
    messageAuthors: {},
    avatars: {},
    lastMessages: {},
  };

  componentDidMount() {
    this.fetchConversations(this.context.user);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextContext.user !== this.context.user) {
      this.fetchConversations(nextContext.user);
    }
  }

  fetchConversations = (user) => {
    this.setState({
      loading: true,
      error: null,
      conversationPartners: {},
      messageAuthors: {},
      avatars: {},
      lastMessages: {},
    });

    talkClient.type('conversations').get({
      user_id: user.id,
      page_size: 10,
      sort: '-updated_at',
      include: 'users',
    })
    .then((conversations) => {
      this.setState({ conversations });

      return Promise.all(conversations.map((conversation) => {
        return Promise.all([
          this.fetchConversationPartner(conversation, user),
          this.fetchLastMessage(conversation),
        ]);
      }));
    })
    .catch((error) => {
      this.setState({
        error: error,
        conversations: [],
      });
    })
    .then(() => {
      this.setState({
        loading: false,
      });
    });
  };

  fetchConversationPartner = (conversation, currentUser) => {
    return apiClient.type('users').get(conversation.links.users) // Talk's user links are broken.
    .catch(() => {
      return [];
    })
    .then((users) => {
      if (users.length > 0) {
        let partner = users.find((potentialPartner) => {
          return potentialPartner !== currentUser;
        });
        if (partner === undefined) {
          // Why're you talking to yourself?
          partner = currentUser;
        }
        const newState = Object.assign({}, this.state.conversationPartners);
        newState[conversation.id] = partner;
        this.setState({
          conversationPartners: newState,
        });
        return partner;
      } else {
        return null;
      }
    });
  };

  fetchLastMessage = (conversation) => {
    return conversation.get('messages', {
      page_size: 1,
      sort: '-created_at',
    })
    .catch(() => {
      return [];
    })
    .then(([message]) => {
      const newState = Object.assign({}, this.state.lastMessages);
      newState[conversation.id] = message;
      this.setState({
        lastMessages: newState,
      });
      return this.fetchMessageAuthor(message)
      .then(() => {
        return message;
      });
    });
  };

  fetchMessageAuthor = (message) => {
    return apiClient.type('users').get(message.links.user) // Talk's user links are broken.
    .catch(() => {
      return null;
    })
    .then((author) => {
      const authorState = Object.assign({}, this.state.messageAuthors);
      authorState[message.id] = author;
      this.setState({
        messageAuthors: authorState,
      });
      if (author) {
        return author.get('avatar')
        .catch(() => {
          return [];
        })
        .then((avatars) => {
          const avatar = [].concat(avatars)[0]; // Why's this an array?
          const avatarState = Object.assign({}, this.state.avatars);
          avatarState[author.id] = avatar;
          this.setState({
            avatars: avatarState,
          });
          return author;
        });
      } else {
        return {};
      }
    });
  };

  renderConversation = (conversation, index, allConversations) => {
    const partner = this.state.conversationPartners[conversation.id];
    if (!partner) {
      return null;
    }
    const message = this.state.lastMessages[conversation.id];
    const sentLastMessage = !!message && (this.state.messageAuthors[message.id] === this.context.user);

    let avatarSrc = '/assets/simple-avatar.png';
    if (!!partner && !!this.state.avatars[partner.id]) {
      avatarSrc = this.state.avatars[partner.id].src;
    }

    const allClassNames = classnames('recent-conversation-link', {
      'recent-conversation-link--first': index === 0,
      'recent-conversation-link--last': index === allConversations.length - 1,
    });

    return (
      <Link to={`/inbox/${conversation.id}`} className={allClassNames}>
        <span className="recent-conversation-link__direction">
          {sentLastMessage ? (
            'To'
          ) : (
            'From'
          )}
        </span>
        <img role="presentation" src={avatarSrc} className="recent-conversation-link__partner-avatar" />
        <span className="recent-conversation-link__partner">
          {partner ? partner.display_name : LOADER_BULLETS}
        </span>

        <div className="recent-conversation-link__preview">
          <div className="recent-conversation-link__title">
            {conversation.title}
          </div>
          <div className="recent-conversation-link__body-preview">
            {message ? <StringTruncator>{message.body}</StringTruncator> : LOADER_BULLETS}
          </div>
        </div>
      </Link>
    );
  };

  render() {
    return (
      <HomePageSection
        titleFill="#11497f"
        title="Recent messages"
        loading={this.state.loading}
        error={this.state.error}
        onClose={this.props.onClose}
      >
        <div className="home-page-section__sub-header">
          <Link to="/inbox" className="outlined-button">See all</Link>
        </div>

        {this.state.conversations.length === 0 && (
          <div className="home-page-section__header-label">
            <p> Your inbox is empty. </p>
          </div>
        )}

        <ul className="recent-conversations-list">
          {this.state.conversations.map((conversation, i, allConversations) => {
            return (
              <li key={conversation.id} className="recent-conversations-list__item">
                {this.renderConversation(conversation, i, allConversations)}
              </li>
            );
          })}
        </ul>
      </HomePageSection>
    );
  }
}

export default RecentCollectionsSection;

1	import PropTypes from 'prop-types';	1✔
2	import React from 'react';	1✔
3	import apiClient from 'panoptes-client/lib/api-client';	1✔
4	import talkClient from 'panoptes-client/lib/talk-client';	1✔
5	import classnames from 'classnames';	1✔
6	import HomePageSection from './generic-section';	1✔
7	import { Link } from 'react-router';	1✔
8	import StringTruncator from './string-truncator';	1✔
9
10
11	const LOADER_BULLETS = '• • •';	1✔
12
13	class RecentCollectionsSection extends React.Component {
14	static propTypes = {
15	onClose: PropTypes.func,
16	};
17
18	static contextTypes = {
19	user: PropTypes.object.isRequired,
20	};
21
22	state = {
23	loading: false,
24	error: null,
25	conversations: [],
26	messageAuthors: {},
27	avatars: {},
28	lastMessages: {},
29	};
30
31	componentDidMount() {
32	this.fetchConversations(this.context.user);	×
33	}
34
35	componentWillReceiveProps(nextProps, nextContext) {
36	if (nextContext.user !== this.context.user) {	×
37	this.fetchConversations(nextContext.user);	×
38	}
39	}
40
41	fetchConversations = (user) => {
42	this.setState({	×
43	loading: true,
44	error: null,
45	conversationPartners: {},
46	messageAuthors: {},
47	avatars: {},
48	lastMessages: {},
49	});
50
51	talkClient.type('conversations').get({	×
52	user_id: user.id,
53	page_size: 10,
54	sort: '-updated_at',
55	include: 'users',
56	})
57	.then((conversations) => {
58	this.setState({ conversations });	×
59
60	return Promise.all(conversations.map((conversation) => {	×
61	return Promise.all([	×
62	this.fetchConversationPartner(conversation, user),
63	this.fetchLastMessage(conversation),
64	]);
65	}));
66	})
67	.catch((error) => {
68	this.setState({	×
69	error: error,
70	conversations: [],
71	});
72	})
73	.then(() => {
74	this.setState({	×
75	loading: false,
76	});
77	});
78	};
79
80	fetchConversationPartner = (conversation, currentUser) => {
81	return apiClient.type('users').get(conversation.links.users) // Talk's user links are broken.	×
82	.catch(() => {
83	return [];	×
84	})
85	.then((users) => {
86	if (users.length > 0) {	×
87	let partner = users.find((potentialPartner) => {	×
88	return potentialPartner !== currentUser;	×
89	});
90	if (partner === undefined) {	×
91	// Why're you talking to yourself?
92	partner = currentUser;	×
93	}
94	const newState = Object.assign({}, this.state.conversationPartners);	×
95	newState[conversation.id] = partner;	×
96	this.setState({	×
97	conversationPartners: newState,
98	});
99	return partner;	×
100	} else {
101	return null;	×
102	}
103	});
104	};
105
106	fetchLastMessage = (conversation) => {
107	return conversation.get('messages', {	×
108	page_size: 1,
109	sort: '-created_at',
110	})
111	.catch(() => {
112	return [];	×
113	})
114	.then(([message]) => {	×
115	const newState = Object.assign({}, this.state.lastMessages);	×
116	newState[conversation.id] = message;	×
117	this.setState({	×
118	lastMessages: newState,
119	});
120	return this.fetchMessageAuthor(message)	×
121	.then(() => {
122	return message;	×
123	});
124	});
125	};
126
127	fetchMessageAuthor = (message) => {
128	return apiClient.type('users').get(message.links.user) // Talk's user links are broken.	×
129	.catch(() => {
130	return null;	×
131	})
132	.then((author) => {
133	const authorState = Object.assign({}, this.state.messageAuthors);	×
134	authorState[message.id] = author;	×
135	this.setState({	×
136	messageAuthors: authorState,
137	});
138	if (author) {	×
139	return author.get('avatar')	×
140	.catch(() => {
141	return [];	×
142	})
143	.then((avatars) => {
144	const avatar = [].concat(avatars)[0]; // Why's this an array?	×
145	const avatarState = Object.assign({}, this.state.avatars);	×
146	avatarState[author.id] = avatar;	×
147	this.setState({	×
148	avatars: avatarState,
149	});
150	return author;	×
151	});
152	} else {
153	return {};	×
154	}
155	});
156	};
157
158	renderConversation = (conversation, index, allConversations) => {
159	const partner = this.state.conversationPartners[conversation.id];	×
160	if (!partner) {	×
161	return null;	×
162	}
163	const message = this.state.lastMessages[conversation.id];	×
164	const sentLastMessage = !!message && (this.state.messageAuthors[message.id] === this.context.user);	×
165
166	let avatarSrc = '/assets/simple-avatar.png';	×
167	if (!!partner && !!this.state.avatars[partner.id]) {	×
168	avatarSrc = this.state.avatars[partner.id].src;	×
169	}
170
171	const allClassNames = classnames('recent-conversation-link', {	×
172	'recent-conversation-link--first': index === 0,
173	'recent-conversation-link--last': index === allConversations.length - 1,
174	});
175
176	return (	×
177	<Link to={`/inbox/${conversation.id}`} className={allClassNames}>
178	<span className="recent-conversation-link__direction">
179	{sentLastMessage ? (
180	'To'	×
181	) : (
182	'From'
183	)}
184	</span>
185	<img role="presentation" src={avatarSrc} className="recent-conversation-link__partner-avatar" />
186	<span className="recent-conversation-link__partner">
187	{partner ? partner.display_name : LOADER_BULLETS}	×
188	</span>
189
190	<div className="recent-conversation-link__preview">
191	<div className="recent-conversation-link__title">
192	{conversation.title}
193	</div>
194	<div className="recent-conversation-link__body-preview">
195	{message ? <StringTruncator>{message.body}</StringTruncator> : LOADER_BULLETS}	×
196	</div>
197	</div>
198	</Link>
199	);
200	};
201
202	render() {	×
203	return (	×
204	<HomePageSection
205	titleFill="#11497f"
206	title="Recent messages"
207	loading={this.state.loading}
208	error={this.state.error}
209	onClose={this.props.onClose}
210	>
211	<div className="home-page-section__sub-header">
212	<Link to="/inbox" className="outlined-button">See all</Link>
213	</div>
214
215	{this.state.conversations.length === 0 && (	×
216	<div className="home-page-section__header-label">
217	<p> Your inbox is empty. </p>
218	</div>
219	)}
220
221	<ul className="recent-conversations-list">
222	{this.state.conversations.map((conversation, i, allConversations) => {
223	return (	×
224	<li key={conversation.id} className="recent-conversations-list__item">
225	{this.renderConversation(conversation, i, allConversations)}
226	</li>
227	);
228	})}
229	</ul>
230	</HomePageSection>
231	);
232	}
233	}
234
235	export default RecentCollectionsSection;

zooniverse / Panoptes-Front-End / 10036

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous