Tags working as normal documents

setup.py

@@ -57,7 +57,8 @@ create_index_settings = {
 	    	'properties': {
 	    		'title': {'type': 'keyword'},
 	    		'html_source': {'type': 'text', 'analyzer': 'html_analyzer'},
-	    		'search_text': {'type': 'nested'}
+	    		'search_text': {'type': 'nested'},
+	    		'color': {'type': 'keyword'}
 	    	}
 	    }	    
 	}

src/components/button.js

@@ -35,6 +35,13 @@ export const NoteButton = ({note, currentNote, onClick}) =>
 		</button>
 	</div>
 
+export const TagButton = ({tag, currentTag, onClick}) =>
+	<div className ='tag_button'>
+		<button onClick={onClick} className={currentTag.id === tag.id ? 'btn btn-info' : 'btn btn-outline-info inactive_button'}>
+			{tag.title}
+		</button>
+	</div>
+
 export const HighlightButton = ({highlightToggle, onClick}) =>
 	<div>
 		<div id='highlight_button' className='text-center'>

src/components/chooseAnnotationModal.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import { EditorSubmitButton, EditorCancelButton } from './button'
 import { DocumentList } from './list'
+import helpers from '../modules/helpers'
 
 const ChooseAnnotationModal = ({notes, annotationNote, onSubmitClick, selectAnnotationNote}) =>
 	<div className='modal fade' id='annotate_modal' tabIndex='-1' role='dialog'>
@@ -14,7 +15,7 @@ const ChooseAnnotationModal = ({notes, annotationNote, onSubmitClick, selectAnno
 				<div className='modal-body'>
 					<div className='row'>
 						<div className='col-md-3'>
-							<DocumentList notes={notes} currentDocument={annotationNote} onDocumentClick={selectAnnotationNote} docType={'notes'}/>
+							<DocumentList docs={notes} currentDocument={annotationNote} onDocumentClick={selectAnnotationNote} docType={'notes'}/>
 						</div>
 						<div className='col-md-8 offset-md-1'>
 							<div dangerouslySetInnerHTML={{__html: annotationNote.text}} />

src/components/list.js

@@ -1,16 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { ChapterButton, NoteButton } from './button'
+import { ChapterButton, NoteButton, TagButton } from './button'
 
-export const DocumentList = ({notes, chapters, currentDocument, onDocumentClick, docType}) =>
+export const DocumentList = ({docs, currentDocument, onDocumentClick, docType}) =>
 	<div id='document_list'>
-		{(docType === 'chapters' && chapters.length > 0) &&
-			<ChapterList chapters={chapters} currentChapter={currentDocument} onChapterClick={onDocumentClick}/>
+		{(docType === 'chapters' && docs.length > 0) &&
+			<ChapterList chapters={docs} currentChapter={currentDocument} onChapterClick={onDocumentClick}/>
 		}		
-		{(docType === 'notes' && notes.length > 0) &&
-			<NoteList notes={notes} currentNote={currentDocument} onNoteClick={onDocumentClick}/>
+		{(docType === 'notes' && docs.length > 0) &&
+			<NoteList notes={docs} currentNote={currentDocument} onNoteClick={onDocumentClick}/>
 		}
+		{(docType === 'tags' && docs.length > 0) &&
+			<TagList tags={docs} currentTag={currentDocument} onTagClick={onDocumentClick}/>
+		}		
 	</div>
 
 export const ChapterList = ({chapters, currentChapter, onChapterClick}) =>
@@ -27,6 +30,13 @@ export const NoteList = ({notes, currentNote, onNoteClick}) =>
     	)}
 	</div>
 
+export const TagList = ({tags, currentTag, onTagClick}) =>
+	<div>
+    	{tags.map(tag =>
+			<TagButton key={tag.id} currentTag={currentTag} tag={tag} onClick={()=>onTagClick(tag.id, 'tags')} />
+    	)}
+	</div>
+
 DocumentList.propTypes = {
 	notes: PropTypes.arrayOf(PropTypes.object),
 	chapters: PropTypes.arrayOf(PropTypes.object),

src/containers/editorSidebarContainer.js

@@ -1,18 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { push } from 'react-router-redux'
 import actions from '../actions'
 import { DocumentList } from '../components/list'
 import { NewDocumentButton } from '../components/button'
 import { DocTypeDropdown } from '../components/dropdown'
 import SidebarSpacer from '../components/sidebarSpacer'
-import { push } from 'react-router-redux'
+import helpers from '../modules/helpers'
 
 const EditorSidebar = ({
 	chapters,
 	notes,
-	currentDocument,
+	tags,
 	docType,
+	currentDocument,
 	onDocumentClick,
 	onNewDocumentClick,
 	setDocType,
@@ -23,7 +25,7 @@ const EditorSidebar = ({
 			<SidebarSpacer />
 			<NewDocumentButton onClick={()=>onNewDocumentClick(docType)} docType={docType}/>
 			<SidebarSpacer />
-			<DocumentList notes={notes} chapters={chapters} currentDocument={currentDocument} onDocumentClick={onDocumentClick} docType={docType} path={'/edit/'}/>
+			<DocumentList docs={helpers.documentsOfDocType(docType, chapters, notes, tags)} currentDocument={currentDocument} onDocumentClick={onDocumentClick} docType={docType} path={'/edit/'}/>
 		</div>
 	</div>
 
@@ -31,6 +33,7 @@ const mapStateToProps = state => {
 	return {
 		notes: state.notes,
 		chapters: state.chapters,
+		tags: state.tags,
 		docType: state.docType,
 		currentDocument: state.currentDocument,
 	}
@@ -53,6 +56,7 @@ const mapDispatchToProps = dispatch => {
 EditorSidebar.propTypes = {
 	chapters: PropTypes.arrayOf(PropTypes.object),
 	notes: PropTypes.arrayOf(PropTypes.object),
+	tags: PropTypes.arrayOf(PropTypes.object),
 	currentDocument: PropTypes.object,
 	docType: PropTypes.string,
 	onDocumentClick: PropTypes.func,

src/containers/readerSidebarContainer.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { push } from 'react-router-redux'
 import actions from '../actions'
 import { DocumentList } from '../components/list'
 import { HighlightButton } from '../components/button'
 import SidebarSpacer from '../components/sidebarSpacer'
-import { push } from 'react-router-redux'
+import helpers from '../modules/helpers'
 
 const ReaderSidebar = ({
 	chapters,
@@ -20,7 +21,7 @@ const ReaderSidebar = ({
 		<div>
 			<HighlightButton highlightToggle={highlightToggle} onClick={onHighlightClick}/>
 			<SidebarSpacer />
-			<DocumentList chapters={chapters} notes={notes} currentDocument={currentDocument} onDocumentClick={onDocumentClick} docType={docType}/>
+			<DocumentList docs={helpers.documentsOfDocType(docType, chapters, notes)} currentDocument={currentDocument} onDocumentClick={onDocumentClick} docType={docType}/>
 		</div>
 	</div>
 

src/joyce.js

@@ -19,12 +19,14 @@ import SearchPageContainer from './containers/searchPageContainer'
 
 const history = createHistory()
 const router = routerMiddleware(history)
-const store = createStore(reduceJoyce, applyMiddleware(logger, router, joyceAPI, joyceInterface, joyceRouter))	
+const store = createStore(reduceJoyce, 
+	applyMiddleware(logger, router, joyceAPI, joyceInterface, joyceRouter))	
 const state = store.getState()
 // TODO: Modal container should probably be connected to Redux if possible
 
 store.dispatch(actions.getDocumentList({docType: 'chapters'}))
 store.dispatch(actions.getDocumentList({docType: 'notes'}))
+store.dispatch(actions.getDocumentList({docType: 'tags'}))
 
 ReactDOM.render(
 	<Provider store={store}>

src/modules/helpers.js

@@ -21,6 +21,19 @@ const helpers = {
 				return 'Tags'
 				break
 		}	
+	},
+	documentsOfDocType: (docType, chapters, notes, tags) => {
+		switch(docType) {
+			case 'chapters':
+				return chapters
+				break
+			case 'notes':
+				return notes
+				break
+			case 'tags':
+				return tags
+				break
+		}	
 	}	
 }
 

src/stylesheets/_sidebar.scss

@@ -20,16 +20,38 @@
     border: 1px solid $border_color;	
 }
 
-.chapter_button > button {
-	width: 100%;
-	margin: 0.25% 0;
-    padding: 0.2rem 0;
-    font-size: 1.5vw;
+button {
+    background-color: rgba(250, 250, 250, 0.8);
+}
+
+%sidebar_button {
+    width: 100%;
     box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
 }
 
-button {
-    background-color: rgba(250, 250, 250, 0.8);
+.note_button > button {
+    @extend %sidebar_button;
+    white-space: normal;
+    margin: 0.325% 0;
+    padding: 0.5rem;
+    font-size: 0.8rem;
+    text-align: left;
+}
+
+.chapter_button > button {
+    @extend %sidebar_button;
+    margin: 0.25% 0;
+    padding: 0.2rem 0;
+    font-size: 1.5vw;
+}
+
+.tag_button > button {
+    @extend %sidebar_button;
+    white-space: normal;
+    margin: 0.325% 0;
+    padding: 0.5rem;
+    font-size: 0.8rem;
+    text-align: left;
 }
 
 .chapter_button > button.inactive_button:not(:hover) {
@@ -40,17 +62,12 @@ button {
     background-color: rgba(250, 250, 250, 0.8);
 }
 
-.dropdown > button {
-    width: 100%;
+.tag_button > button.inactive_button:not(:hover) {
+    background-color: rgba(250, 250, 250, 0.8);
 }
 
-.note_button > button {
+.dropdown > button {
     width: 100%;
-    white-space: normal;
-    margin: 0.325% 0;
-    padding: 0.5rem;
-    font-size: 0.8rem;
-    text-align: left;
 }
 
 #document_list > div {

v1requirements.txt

@@ -0,0 +1,30 @@
+- Finish Search
+
+- Add Image Support
+
+	- Add Video Support
+
+	- Add Audio Support
+
+- Add Tagging
+
+- Deploy Process
+
+- Login System
+
+- Pagination
+
+- Add The Logo / Contributors
+
+- CSS Work
+
+------------------------------
+
+
+- Version Tracking
+
+- Commenting
+
+- Offline Mode
+
+- Reader Settings