Remove "you already follow..." messaging and just display any suggest…

…ions with their follow buttons in the appropriate states.
Financial-Times · Feb 1, 2019 · 881a6c4 · 881a6c4
1 parent b5f80c5
commit 881a6c4
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 108 deletions.
diff --git a/components/x-topic-search/__tests__/x-topic-search.test.jsx b/components/x-topic-search/__tests__/x-topic-search.test.jsx
@@ -3,17 +3,12 @@ const { h } = require('@financial-times/x-engine');
 const { mount } = require('@financial-times/x-test-utils/enzyme');
 const { TopicSearch } = require('../');
 
-const searchTerm = 'Dog';
-const searchTermNoResult = 'Blobfish';
-const searchTermAllFollowed = 'Cat';
 const minSearchLength = 3;
 const maxSuggestions = 3;
 const apiUrl = 'api-url';
-const alreadyFollowedTopics = [
-	{ uuid: 'Cat-House-id', name: 'Cat House' },
-	{ uuid: 'Cat-Food-id', name: 'Cat Food' },
-	{ uuid: 'Cat-Toys-id', name: 'Cat Toys' }
-];
+const FOLLOWED_TOPIC_ID1 = 'Cat-House-id';
+const FOLLOWED_TOPIC_ID2 = 'Cat-Food-id';
+const UNFOLLOWED_TOPIC_ID1 = 'Cat-Toys-id';
 
 describe('x-topic-search', () => {
 	const buildSearchUrl = term => `${apiUrl}?count=${maxSuggestions}&partial=${term}`;
@@ -29,7 +24,7 @@ describe('x-topic-search', () => {
 			minSearchLength,
 			maxSuggestions,
 			apiUrl,
-			followedTopicIds: alreadyFollowedTopics.map(topic => topic.uuid),
+			followedTopicIds: [FOLLOWED_TOPIC_ID1, FOLLOWED_TOPIC_ID2],
 		};
 		target = mount(<TopicSearch {...props} />);
 	});
@@ -64,17 +59,17 @@ describe('x-topic-search', () => {
 	});
 
 	describe('given searchTerm which has some topic suggestions to follow', () => {
-		const apiUrlWithResults = buildSearchUrl(searchTerm);
-		const unfollowedTopicSuggestions = [
-			{ id: 'Dog-House-id', prefLabel: 'Dog House', url: 'Dog-House-url' },
-			{ id: 'Dog-Food-id', prefLabel: 'Dog Food', url: 'Dog-Food-url' },
-			{ id: 'Dog-Toys-id', prefLabel: 'Dog Toys', url: 'Dog-Toys-url' }
+		const apiUrlWithResults = buildSearchUrl('Cat');
+		const results = [
+			{ id: FOLLOWED_TOPIC_ID1, prefLabel: 'Cat House', url: 'Cat-House-url' },
+			{ id: FOLLOWED_TOPIC_ID2, prefLabel: 'Cat Food', url: 'Cat-Food-url' },
+			{ id: UNFOLLOWED_TOPIC_ID1, prefLabel: 'Cat Toys', url: 'Cat-Toys-url' }
 		];
 
-		fetchMock.get(apiUrlWithResults, unfollowedTopicSuggestions);
+		fetchMock.get(apiUrlWithResults, results);
 
 		beforeEach(() => {
-			return enterSearchTerm(searchTerm);
+			return enterSearchTerm('Cat');
 		});
 
 		it('requests the topic suggestions with count set to maxSuggestions', () => {
@@ -89,23 +84,23 @@ describe('x-topic-search', () => {
 		it('renders links and follow buttons for each suggestion', () => {
 			const suggestionsList = target.render().find('li');
 
-			unfollowedTopicSuggestions.forEach((topic, index) => {
+			results.forEach((topic, index) => {
 				const suggestion = suggestionsList.eq(index);
 
 				expect(suggestion.find('a').text()).toEqual(topic.prefLabel);
 				expect(suggestion.find('a').attr('href')).toEqual(topic.url);
-				expect(suggestion.find('button')).toHaveLength(1);
+				expect(suggestion.find('button').text()).toEqual(topic.id === UNFOLLOWED_TOPIC_ID1 ? 'Add to myFT' : 'Added');
 			});
 		})
 	});
 
 	describe('given searchTerm which has no topic suggestions to follow', () => {
-		const apiUrlNoResults = buildSearchUrl(searchTermNoResult);
+		const apiUrlNoResults = buildSearchUrl('Dog');
 
 		fetchMock.get(apiUrlNoResults, []);
 
 		beforeEach(() => {
-			return enterSearchTerm(searchTermNoResult);
+			return enterSearchTerm('Dog');
 		});
 
 		it('requests from the api and renders the no matching topics message', () => {
@@ -117,30 +112,4 @@ describe('x-topic-search', () => {
 			expect(resultContainer.find('h2').text()).toMatch('No topics matching');
 		});
 	});
-
-	describe('given searchTerm which results in all suggestions already followed', () => {
-		const apiUrlAllFollowed = buildSearchUrl(searchTermAllFollowed);
-
-		fetchMock.get(apiUrlAllFollowed, alreadyFollowedTopics.map(topic => ({
-			id: topic.uuid,
-			prefLabel: topic.name,
-			url: topic.name.replace(' ', '-')
-		})));
-
-		beforeEach(() => {
-			return enterSearchTerm(searchTermAllFollowed);
-		});
-
-		it('requests the suggestions from the api', () => {
-			expect(fetchMock.called(apiUrlAllFollowed)).toBe(true);
-		});
-
-		it('renders the "already followed" message with names of the topics', () => {
-			const resultContainer = target.render().children('div').eq(1);
-
-			expect(resultContainer).toHaveLength(1);
-			expect(resultContainer.text())
-				.toMatch(`You already follow ${alreadyFollowedTopics[0].name}, ${alreadyFollowedTopics[1].name} and ${alreadyFollowedTopics[2].name}`);
-		});
-	});
 });
diff --git a/components/x-topic-search/src/ResultContainer.jsx b/components/x-topic-search/src/ResultContainer.jsx
diff --git a/components/x-topic-search/src/TopicSearch.jsx b/components/x-topic-search/src/TopicSearch.jsx
@@ -3,8 +3,8 @@ import styles from './TopicSearch.scss';
 import classNames from 'classnames';
 import getSuggestions from './lib/get-suggestions.js';
 import debounce from 'debounce-promise';
-
-import ResultContainer from './ResultContainer';
+import SuggestionList from './SuggestionList';
+import NoSuggestions from './NoSuggestions';
 
 class TopicSearch extends Component {
 	constructor(props) {
@@ -20,10 +20,9 @@ class TopicSearch extends Component {
 		this.handleInteractionOutside = this.handleInteractionOutside.bind(this);
 
 		this.state = {
+			followedTopicIds: props.followedTopicIds || [],
 			searchTerm: '',
-			showResult: false,
-			followedSuggestions: [],
-			unfollowedSuggestions: []
+			showResult: false
 		};
 	}
 
@@ -45,11 +44,10 @@ class TopicSearch extends Component {
 		this.setState({ searchTerm });
 
 		if (searchTerm.length >= this.minSearchLength) {
-			this.getSuggestions(searchTerm, this.maxSuggestions, this.apiUrl, this.props.followedTopicIds)
-				.then(({ followedSuggestions, unfollowedSuggestions }) => {
+			this.getSuggestions(searchTerm, this.maxSuggestions, this.apiUrl)
+				.then(({ suggestions }) => {
 					this.setState({
-						followedSuggestions,
-						unfollowedSuggestions,
+						suggestions,
 						showResult: true
 					});
 				})
@@ -83,7 +81,7 @@ class TopicSearch extends Component {
 
 	render() {
 		const { csrfToken, followedTopicIds } = this.props;
-		const { followedSuggestions, searchTerm, showResult, unfollowedSuggestions } = this.state;
+		const { searchTerm, showResult, suggestions } = this.state;
 
 		return (
 			<div className={ classNames(styles['container']) } ref={el => this.rootEl = el}>
@@ -107,13 +105,17 @@ class TopicSearch extends Component {
 					/>
 				</div>
 
-				{ showResult && searchTerm.length >= this.minSearchLength &&
-          <ResultContainer
-						followedSuggestions={ followedSuggestions }
-						unfollowedSuggestions={ unfollowedSuggestions }
-            searchTerm={ searchTerm }
-            csrfToken={ csrfToken }
-            followedTopicIds={ followedTopicIds }/> }
+				{showResult && searchTerm.length >= this.minSearchLength &&
+					<div className={classNames(styles['result-container'])}>
+						{suggestions.length > 0 ?
+							<SuggestionList
+								csrfToken={csrfToken}
+								followedTopicIds={followedTopicIds}
+								searchTerm={searchTerm}
+								suggestions={suggestions}
+							/> :
+							<NoSuggestions searchTerm={ searchTerm }/>}
+					</div>}
 			</div>
 		);
 	}

diff --git a/components/x-topic-search/src/TopicSearch.scss b/components/x-topic-search/src/TopicSearch.scss
@@ -117,11 +117,3 @@
 	margin-bottom: 0;
 	list-style-type: disc;
 }
-
-.all-followed {
-	@include oTypographySans($scale: 1);
-	color: oColorsGetPaletteColor('black-70');
-	text-align: left;
-	padding: 0;
-	margin: 0;
-}
diff --git a/components/x-topic-search/src/lib/get-suggestions.js b/components/x-topic-search/src/lib/get-suggestions.js
@@ -4,7 +4,7 @@ const addQueryParamToUrl = (name, value, url, append = true) => {
 	return append === true ? `${url}&${queryParam}` : `${url}?${queryParam}`;
 };
 
-export default (searchTerm, maxSuggestions, apiUrl, followedTopicIds) => {
+export default (searchTerm, maxSuggestions, apiUrl) => {
 	const dataSrc = addQueryParamToUrl('count', maxSuggestions, apiUrl, false);
 	const url = addQueryParamToUrl('partial', searchTerm.replace(' ', '+'), dataSrc);
 
@@ -16,8 +16,5 @@ export default (searchTerm, maxSuggestions, apiUrl, followedTopicIds) => {
 
 			return response.json();
 		})
-		.then(suggestions => ({
-			followedSuggestions: suggestions.filter(suggestion => followedTopicIds.includes(suggestion.id)),
-			unfollowedSuggestions: suggestions.filter(suggestion => !followedTopicIds.includes(suggestion.id))
-		}));
+		.then(suggestions => ({ suggestions }));
 };