Merge pull request #2 from franxyzxyz/bookmark

Bookmark branch merged to master

Author: franxyzxyz

src/app/actions/index.jsx

@@ -15,6 +15,18 @@ export function requestPages (title) {
   }
 }
 
+export function popUp () {
+  return {
+    type: 'POPUP_ENABLED'
+  }
+}
+
+export function disabledPopUp(){
+  return {
+    type: 'POPUP_DISABLED'
+  }
+}
+
 export function receivePages (title, json) {
   return {
     type: 'RECEIVE_POSTS',
@@ -23,6 +35,26 @@ export function receivePages (title, json) {
   }
 }
 
+export function addBookmark(title){
+  return {
+    type: 'ADD_BOOKMARK',
+    title
+  }
+}
+
+export function editBookmark (title){
+  return {
+    type: 'EDIT_BOOKMARK',
+    title
+  }
+}
+
+export function toggleBookmark (){
+  return {
+    type: 'TOGGLE_BOOKMARK'
+  }
+}
+
 export function fetchPages (title) {
   return dispatch => {
     /*
@@ -58,7 +90,7 @@ export function fetchPagesIfNeeded(title){
   }
 }
 
-export function shouldFetchImage(state, title, imgTitle){
+export function shouldFetchImage(state, title){
   const image = state.imageByTitle[title]
   if (!image){
     return true
@@ -69,7 +101,7 @@ export function shouldFetchImage(state, title, imgTitle){
 
 export function fetchImageIfNeeded(title, imgTitle){
   return (dispatch, getState) => {
-    if (shouldFetchImage(getState(), title, imgTitle)) {
+    if (shouldFetchImage(getState(), title)) {
       return dispatch(fetchImage(title, imgTitle))
     }
   }

src/app/components/app.jsx

@@ -2,11 +2,15 @@ import React from 'react'
 import '../fonts/league-spartan-master/_webfonts/stylesheet.scss'
 import '../styles/index.scss'
 import Wrapper from '../containers/app'
+import ViewBookmark from '../containers/viewbookmark'
+import PopUpContainer from '../containers/popup'
 
 const App = () => (
   <div>
     <h1>POCKET - wiki</h1>
+    <ViewBookmark />
     <Wrapper />
+    <PopUpContainer />
   </div>
 )
 

src/app/components/bookmarkList.jsx

@@ -0,0 +1,25 @@
+import React, { PropTypes, Component } from 'react'
+import ItemLink from '../containers/itemAction'
+import { reverseSnakeCase } from '../utilities/helper'
+
+export default class BookmarkList extends Component {
+  render() {
+    const { bookmarkList } = this.props
+    return (
+      <div>
+        <p className="bookmarkRecord">( {bookmarkList.length} RECORD{ bookmarkList.length > 1 &&
+          <span>S</span>
+        } FOUND )</p>
+        <ul className="bookmarkList">
+          {bookmarkList.map((bm, i) =>
+            <ItemLink item={reverseSnakeCase(bm)} key={i}/>
+          )}
+        </ul>
+      </div>
+    )
+  }
+}
+
+BookmarkList.propTypes = {
+  bookmarkList: PropTypes.array.isRequired
+}

src/app/components/bookmarklink.jsx

@@ -0,0 +1,16 @@
+import React, { PropTypes, Component } from 'react'
+
+export default class BookmarkLink extends Component {
+  render() {
+    const { onClick, bookmarkList } = this.props
+    return (
+      <div className="utilBar">
+        <a onClick={onClick} className="navLink">BOOKMARK ({bookmarkList.length})</a>
+      </div>
+    )
+  }
+}
+
+BookmarkLink.propTypes = {
+  onClick: PropTypes.func.isRequired
+}

src/app/components/closebookmark.jsx

@@ -0,0 +1,14 @@
+import React, { PropTypes, Component } from 'react'
+
+export default class CloseBookmarkElem extends Component {
+  render() {
+    const { onClick } = this.props
+    return (
+      <span className="float-right close"><i className="material-icons" onClick={onClick}>close</i></span>
+    )
+  }
+}
+
+CloseBookmarkElem.propTypes = {
+  onClick: PropTypes.func.isRequired
+}

src/app/components/item.jsx

@@ -2,14 +2,24 @@ import React, { PropTypes, Component } from 'react'
 
 export default class Item extends Component {
   render() {
-    const { item, onClick } = this.props
+    const { item, onClick, onFav, showBookmark } = this.props
     return (
-      <li onClick={onClick}>{item}</li>
+      <li>
+        <a onClick={onClick}>{item}</a>
+        {!showBookmark &&
+          <a><i className="material-icons hearted" onClick={onFav}>favorite</i></a>
+        }
+        {showBookmark &&
+          <a><i className="material-icons close" onClick={onFav}>close</i></a>
+        }
+      </li>
     )
   }
 }
 
 Item.propTypes = {
   item: PropTypes.any.isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  onFav: PropTypes.func.isRequired,
+  showBookmark: PropTypes.bool.isRequired
 }

src/app/components/popup.jsx

@@ -0,0 +1,20 @@
+import React, { PropTypes, Component } from 'react'
+
+export default class PopUp extends Component {
+  render() {
+    const { popup } = this.props
+    return (
+      <div>
+      {popup &&
+        <div className="popUp">
+          <i className="material-icons">favorite</i>
+        </div>
+      }
+      </div>
+    )
+  }
+}
+
+PopUp.propTypes = {
+  popup: PropTypes.bool.isRequired
+}

src/app/containers/app.jsx

@@ -5,6 +5,8 @@ import { selectTitle, fetchPagesIfNeeded } from '../actions'
 import ItemLink from '../containers/itemAction'
 import FetchPage from '../containers/fetchpage'
 import FetchImage from '../containers/fetchimage'
+import FetchBookmark from '../containers/fetchbookmark'
+import CloseBookmark from '../containers/closebookmark'
 
 const pageList = ['Monkey Majik','React (JavaScript library)','Node.js','Underscore.js','Neo4j','Badminton','D3.js','HAECO','Aeronautics','Hong Kong']
 
@@ -27,19 +29,36 @@ class Wrapper extends Component {
   }
 
   render() {
-    const { selectedPage, pages, isFetching } = this.props
+    const { selectedPage, pages, isFetching, showBookmark, bookmarkList, imageByTitle } = this.props
+    const { image } = imageByTitle[selectedPage] || { image: ""}
+    const style = {
+      backgroundImage: 'url(' + image + ')',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover'
+    }
     return (
       <div className="contentWrapper">
         <div className="pageNav">
-          <ul className="pageItem">
-          {pageList.map((page, i) =>
-            <ItemLink item={page}  key={i}/>
-          )}
-          </ul>
+          {showBookmark &&
+          <div className="bookmarkContainer">
+            <CloseBookmark />
+            <h2>BOOKMARKED PAGES</h2>
+            <FetchBookmark bookmarkList={bookmarkList}/>
+          </div>
+          }
+          {!showBookmark &&
+            <ul className="pageItem">
+            {pageList.map((page, i) =>
+              <ItemLink item={page}  key={i}/>
+            )}
+            </ul>
+          }
         </div>
-        <div className="pageContent">
-          <FetchPage pages={pages} />
-          <FetchImage pageimage={pages.pageimage}/>
+        <div className="pageContent" style={style}>
+          <div className="deco">
+            <FetchPage pages={pages}/>
+            <FetchImage pageimage={pages}/>
+          </div>
         </div>
       </div>
     )
@@ -50,12 +69,14 @@ Wrapper.propTypes = {
   pages: PropTypes.any.isRequired,
   selectedPage: PropTypes.string.isRequired,
   isFetching: PropTypes.bool.isRequired,
-  dispatch: PropTypes.func.isRequired
+  dispatch: PropTypes.func.isRequired,
+  showBookmark: PropTypes.bool.isRequired
 }
 
 function mapStateToProps(state) {
   // connecting state datat to the components as props
-  const { selectedPage, pagesByTitle } = state
+  const { selectedPage, pagesByTitle, showBookmark, bookmarkList, imageByTitle } = state
+
   // Mapping the state props (pagesbytitle) to the components
   const {
     isFetching,
@@ -64,14 +85,16 @@ function mapStateToProps(state) {
     isFetching: true,
     items: []
   }
-
-  const { image } = "abc"
+  // console.log(pages)
+  // const pageimage = pages.pageimage? 'File:' + pages.pageimage : (_.sample(pages.images).title || "")
 
   return {
     selectedPage,
     pages,
     isFetching,
-    image
+    showBookmark,
+    bookmarkList,
+    imageByTitle
   }
 }
 

src/app/containers/closebookmark.jsx

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux'
+import { toggleBookmark } from '../actions'
+import CloseBookmarkElem from '../components/closebookmark'
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    onClick: ownProps.onClick
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    onClick: () => {
+      dispatch(toggleBookmark())
+    }
+  }
+}
+
+const CloseBookmark = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CloseBookmarkElem)
+
+export default CloseBookmark

src/app/containers/fetchbookmark.jsx

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+import { toggleBookmark } from '../actions'
+import BookmarkList from '../components/bookmarklist'
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    bookmarkList: state.bookmarkList
+  }
+}
+
+const FetchBookmarkList = connect(
+  mapStateToProps
+)(BookmarkList)
+
+export default FetchBookmarkList

src/app/containers/fetchimage.jsx

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { fetchImageIfNeeded } from '../actions'
 import ImgLink from '../components/image'
+import { trimmer } from '../utilities/helper'
 
 class FetchImage extends Component {
   constructor(props) {
@@ -11,26 +12,17 @@ class FetchImage extends Component {
   componentDidMount() {
     const { dispatch, selectedPage, pageimage } = this.props
     if (pageimage) {
-      dispatch(fetchImageIfNeeded(selectedPage))
+      dispatch(fetchImageIfNeeded(selectedPage, 'File:' + pageimage))
     }
   }
 
   componentWillReceiveProps(nextProps) {
-    const { dispatch, selectedPage } = this.props
-
-    if (!_.isEmpty(nextProps.pageimage)){
-      dispatch(fetchImageIfNeeded(selectedPage, 'File:' + nextProps.pageimage))
-      // console.log(nextProps.pageimage)
+    const { dispatch } = this.props
+    if (!_.isEmpty(nextProps.pageimage) && !nextProps.isFetching) {
+      return dispatch(fetchImageIfNeeded(nextProps.selectedPage, 'File:' +  nextProps.pageimage))
     }
-    // if (!_.isEmpty(nextProps.pages)) {
-    //   let img = nextProps.pages.pageimage? 'File:'+nextProps.pages.pageimage : nextProps.pages.images[0].title;
-    //   if (!_.isEmpty(img)){
-    //     dispatch(fetchImageIfNeeded(nextProps.pages.title, img))
-    //   }
-    // }
   }
 
-
   render() {
     const { image } = this.props
     return (
@@ -45,15 +37,24 @@ FetchImage.propTypes = {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const { imageByTitle, selectedPage } = state
+  const { imageByTitle, selectedPage, pagesByTitle } = state
   const { image } = imageByTitle[selectedPage] || {
     image: ""
   }
+  const {
+    isFetching,
+  } = pagesByTitle[selectedPage] || {
+    isFetching: true
+  }
+
+  const pageimage = !_.isEmpty(ownProps.pageimage)? (ownProps.pageimage.pageimage || trimmer('File:', _.sample(ownProps.pageimage.images).title)) : "";
 
   return {
     image: image,
     selectedPage,
-    pageimage: ownProps.pageimage || ""
+    pagesByTitle,
+    isFetching,
+    pageimage: pageimage
   }
 }