Cleaning up API search results and composing search page

TODO.txt

@@ -25,21 +25,12 @@
 
 
 TODAY:
-- HTML Char Strip ES Search
-	- Index HTML-Stripped Field for Searching
-		- Update Mappings in Setup.py
-		- Update api.py to duplicate text field
-- Search Result Components
 - Light Refactoring
-
-TOMORROW:
 - Implement React-Router
 - Review dependencies
 
 
 
-
-
 SHORT LIST:
 	- Make Annotate Mode Ignore Keyboard Input
 	- More Responsive CSS
@@ -50,6 +41,7 @@ SHORT LIST:
 		- React Unit Tests
 		- ES API Tests?
 	- Figure out Editor focus() with Redux
+	- Create Tags and Note Tagging
 
 - v0.2 Reader
 	- Reader UX
@@ -64,6 +56,7 @@ SHORT LIST:
 
 - v0.4 Search
 	- Advanced search page
+		- Filter by DocType, Chapter
 	- Drop Down window
 
 - v0.5 Pagination

blueprints/api.py

@@ -94,15 +94,16 @@ def group_search_results(es_results):
 	for type in types:
 		list = []
 		for result in es_results:
-			entry = {'id': result['_id'], 'highlight': result['highlight']['plain_text']}
-			list.append(entry)
+			if result['_type'] == type:
+				entry = {'id': result['_id'], 'title': result['_source']['title'], 'highlight': result['highlight']['plain_text']}
+				list.append(entry)
 		output_results[type] = list
 	return output_results
 
 def es_search_text(body):
 	search = es.search(
 		index='joyce',
-		filter_path=['hits.hits._id', 'hits.hits._type', 'hits.hits.highlight', 'hits.hits.title'],
+		filter_path=['hits.hits._id', 'hits.hits._type', 'hits.hits._source.title', 'hits.hits._source.number', 'hits.hits.highlight', 'hits.hits.title'],
 		body={
 			'from': 0,
 			'size': 10,
@@ -114,11 +115,13 @@ def es_search_text(body):
 				}
 			},
 		    'highlight' : {
+		    	'number_of_fragments' : 15,
 		        'fields' : {
-					'_all' : { 'pre_tags' : [''], 'post_tags' : [''] },		        
 		            'plain_text': {
 		            	'matched_fields': 'text',
-		            	'type': 'unified'
+		            	'type': 'unified',
+		            	'pre_tags' : [''],
+		            	'post_tags' : ['']
 		            }
 		        }
 		    }			
@@ -127,7 +130,6 @@ def es_search_text(body):
 	# TODO: Handle no hits
 	results = search['hits']['hits']
 	grouped_results = group_search_results(results)
-	# return search
 	return grouped_results
 
 

src/components/searchResultSnippet.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SearchResultSnippet = ({snippet}) =>
+	<div>
+		{console.log(snippet)}
+		{snippet}...
+	</div>
+
+export default SearchResultSnippet

src/components/searchResultsBox.js

@@ -1,13 +1,27 @@
 import React from 'react'
+import SearchResultSnippet from './searchResultSnippet'
 
-const SearchResultsBox = ({searchResults}) =>
-	<div className='search_results_box'>
-			<div className='chapter_search_results'>
-				<h4>Chapters</h4>
-				{searchResults.chapter && searchResults.chapter.map(result =>
-					<div key={result.id}>{result.highlight}</div>
+const SearchResultGroup = ({docType, docTitle, results}) =>
+	<div id={docType + '_search_results'} className='result_type_group'>
+		<h4>{docTitle}</h4>
+		{results.map(result =>
+			<div key={result.id}>
+				<h5>{result.title}</h5>
+				{result.highlight.map(highlight =>
+					<SearchResultSnippet snippet={highlight} />
 				)}
 			</div>
+		)}		
+	</div>
+
+const SearchResultsBox = ({searchResults}) =>
+	<div id='search_results_box' className='col-sm-12'>
+		{searchResults.chapter &&
+			<SearchResultGroup docType='chapter' docTitle='Chapters' results={searchResults.chapter}/>
+		}
+		{searchResults.note &&
+			<SearchResultGroup docType='note' docTitle='Notes' results={searchResults.note}/>
+		}
 	</div>
 
 export default SearchResultsBox

src/containers/joyceSearchContentContainer.js

@@ -7,15 +7,23 @@ import SearchResultsBox from '../components/searchResultsBox'
 import { updateSearchInput, clickSearch } from '../actions'
 
 const JoyceSearchContent = ({searchResults, searchInput, onSearchInputChange, onSearchClick}) =>
-	<div id='search_content' className='row'>
-		<div className='col-sm-2'>
-			<SearchButton onClick={onSearchClick} searchInput={searchInput}/>
+	<div id='joyce_search' className='container-fluid'>
+		<div id='search_content' className='row'>
+			<div className='container'>
+				<div className='row'>
+					<div className='col-sm-2'>
+						<SearchButton onClick={onSearchClick} searchInput={searchInput}/>
+					</div>
+					<div className='col-sm-10'>
+						<input id='search_input' type='text' value={searchInput} onChange={onSearchInputChange} />
+					</div>
+				</div>
+				<div className='row'>
+					<SearchResultsBox searchResults={searchResults} />
+				</div>
+			</div>
 		</div>
-		<div className='col-sm-10'>
-			<input id='search_input' type='text' value={searchInput} onChange={onSearchInputChange}/>
-		</div>
-		<SearchResultsBox searchResults={searchResults} />
-	</div>
+	</div>	
 
 const mapStateToProps = state => {
 	return {

src/containers/joyceSearchPageContainer.js

@@ -7,9 +7,7 @@ import JoyceSearchContentContainer from '../containers/joyceSearchContentContain
 const JoyceSearchPage = () =>
 	<div>
 		<Navbar />
-		<div id='joyce_search' className='container-fluid'>
-			<JoyceSearchContentContainer />
-		</div>
+		<JoyceSearchContentContainer />
 	</div>
 
 const JoyceSearchPageContainer = connect()(JoyceSearchPage)

src/reducers/searchResults.js

@@ -1,4 +1,4 @@
-const searchResults = (state='', action) => {
+const searchResults = (state={}, action) => {
 	switch(action.type) {
 		case 'GET_SEARCH_RESULTS':
 			if (action.status === 'success') {

src/stylesheets/_variables.scss

@@ -4,6 +4,8 @@ $nav_gradient2: #181b21;
 $bg_gradient1: #def0e0;
 $bg_gradient2: #bad6bd;
 
+$search_box_bg: rgba(89, 86, 83,.5);
+
 $border_color: rgba(120,120,120,0.7);
 
 $theme-colors: (

src/stylesheets/search.scss

@@ -23,4 +23,21 @@ $fa-font-path: "../../node_modules/font-awesome/fonts";
 
 #search_input {
 	width: 100%;
+}
+
+#search_results_box {
+    overflow-y: scroll;	
+	margin-top: 3%;
+	height: 75vh;
+	border: 1px solid $border_color;
+	border-radius: 5px;
+	background-color: $search_box_bg;
+}
+
+.result_type_group {
+	background-color: rgba(250, 250, 250, 0.9);
+    margin: 0 -2%;
+    padding: 2%;
+    border-radius: 5px;
+    border: 1px solid $border_color;
 }