Update checkbox

src/App.js

@@ -15,7 +15,7 @@ class App extends Component {
     selectDisabled: false
   }
 
-  state = { tagFilters: [], selectedBook: null }
+
   handleItemClick = (e, { name }) => this.setState({ activeItem: name })
 
   constructor(props) {
@@ -154,6 +154,25 @@ class App extends Component {
       });
     }
 
+    const popularActive = (news) => {
+      var results = {};
+      for (var i = 0; i < news.length; i++) {
+        const everyTagsOnNews = news[i].tags || [];
+        for (var j = 0; j < everyTagsOnNews.length; j++) {
+          if(results[everyTagsOnNews[j]]){
+            results[everyTagsOnNews[j]]++ ;
+          }else{
+            results[everyTagsOnNews[j]] = 1;
+          }
+        }
+      }
+      console.log("result", results);
+       const tempResult = Object.keys(results).map((key) => ({count: results[key], value: key})) || [];
+       console.log("tempResult", tempResult);
+
+      return tempResult;
+    }
+
     return (
       <div>
         <Menu>
@@ -182,14 +201,20 @@ class App extends Component {
                 options={books} />
             </Menu.Item>
             <Menu.Item>
-              <Button 
-                icon='send' 
-                disable={bookVal} 
+              <Button
+                icon='send'
+                disable={bookVal}
                 onClick={this.selectDisabled}
                 className="snedButton"/>
             </Menu.Item>
           </Menu.Menu>
         </Menu>
+
+        {/* {popularActive(this.props.data.news).map((x, tempIndex)=>
+          <Tag
+            key={`overall-for-${tempIndex}`}
+            text={x.value + " " + x.count}/>
+          )} */}
         <List
           selectedBook={this.state.bookVal}
           selectDisabled={this.state.selectDisabled}

src/BookTags.js

@@ -31,14 +31,11 @@ class BookTags extends Component {
   }
 
   updateNewsAPI(newTags){
-    console.log("update news", newTags, this.props.updateTags )
     if(this.props.updateTags){
       if(this.props.itemPropsName === 'tags'){
         const newNews =  Object.assign({}, this.props.item, {tags: newTags});
         this.props.updateTags(this.props.item._id, newNews );
       }else if(this.props.itemPropsName === 'userBooks'){
-        console.log("save userbooks", newTags);
-        //Save array of ID to userbooks
         const newUserbooks = newTags.map(x=>{
           const results = this.props.options.filter(y => y.fullName === x);
           if(results.length > 0){
@@ -134,7 +131,7 @@ class BookTags extends Component {
     if (availTags.length > 0) {
       let newTags = currentTags.concat(availTags[Math.floor(Math.random()*availTags.length)]);
       alert(`Brefing book suggestions: ${newTags}`);
-    } 
+    }
 
 
   }
@@ -163,12 +160,12 @@ class BookTags extends Component {
                value={this.state.value}
                {...this.props}
              />}
-          <Button 
-            color='olive' 
-            floated={'right'} 
-            icon='cubes' 
-            labelPosition='left' 
-            content='Suggest' 
+          <Button
+            color='olive'
+            floated={'right'}
+            icon='cubes'
+            labelPosition='left'
+            content='Suggest'
             onClick={this.autoCategorize}/>
       </Segment>
     );

src/FirebaseService.js

@@ -0,0 +1,35 @@
+import * as firebase from 'firebase';
+
+const config = {
+   apiKey: "AIzaSyA5Fh7tb7DREA5fgAKwJjh_llXfIKs9iMs",
+   authDomain: "my-test-website-c0fcc.firebaseapp.com",
+   databaseURL: "https://my-test-website-c0fcc.firebaseio.com",
+   projectId: "my-test-website-c0fcc",
+   storageBucket: "my-test-website-c0fcc.appspot.com",
+   messagingSenderId: "575661525828"
+ };
+
+
+firebase.initializeApp(config);
+ export const database = firebase.database();
+
+ //News API
+ const getNewsbyId = id => database.ref('news').child(id);
+ const addNews = data => database.ref('news').push(data, response => response);
+ const adduserArticle = data => database.ref("userArticle").push(data, response => response);
+ const removeUserArticle = (id) => database.ref("userArticle").child(id).remove();
+ const updateNews = (id, data) => database.ref(`news/${id}`).update(data, response => response);
+ export const newsActions = {
+   addNews,
+   updateNews,
+   getNewsbyId,
+   adduserArticle,
+   removeUserArticle
+ };
+ //User API
+ const getUsersbyId = id => database.ref('users').child(id);
+ const updateUserbyID = (id, data) => database.ref(`users/${id}`).update(data, response => response);
+ export const userActions = {
+   getUsersbyId,
+   updateUserbyID,
+ };

src/IconBar.js

@@ -2,15 +2,11 @@ import React, { Component } from 'react';
 import './MainPage.css';
 import 'semantic-ui-css/semantic.min.css';
 import * as moment from 'moment';
-// import './../public/css/font-awesome.min.css';
 
 class IconBar extends Component {
 
-
   render() {
-
     return (
-
       <div>
         <div className="ui labeled button" tabindex="0">
         <div className="ui red button">
@@ -29,7 +25,6 @@ class IconBar extends Component {
         </a>
       </div>
     </div>
-
     );
   }
 }

src/List.js

@@ -3,49 +3,21 @@ import Tags from './Tags.js';
 import Books from './Books.js';
 import { Grid, Image, Label, Dropdown, Icon, Checkbox } from 'semantic-ui-react'
 import BookTags from './BookTags.js';
-// import { Grid, Image, Label, Dropdown, Icon } from 'semantic-ui-react'
 import './App.css';
 import * as moment from 'moment';
 import { Link } from 'react-router-dom';
-
+import ListCheckbox  from './ListCheckbox.js'
 class List extends Component {
-  state = {
-    isChecked: false,
-  }
+
   constructor(props) {
     super(props);
-    this.checkBooked = this.checkBooked.bind(this);
-    this.getUserTagByName = this.getUserTagByName.bind(this);
+     this.getUserTagByName = this.getUserTagByName.bind(this);
   }
 
-  checkBooked(e, data, news){
-    console.log("checked", data, e, news);
-    let checked = this.state.isChecked;
-    this.setState({isChecked: !checked });
-    if(data.checked){
-      let allData = this.props.userArticle || [];
-  //    this.props.newsActionsTemp.adduserArticle({userId: this.props.selectedBook, newsId: news._id, order: 1 });
-    }else{
-      // this.props.find
-      console.log("this.props.userArticle", this.props.userArticle);
-      const selectedArtices = this.props.userArticle;
-      // const temp = this.props.userArticle.map(x=> {console.log(x); return 1});
-      for (var tempProps in selectedArtices) {
-        console.log(`this.props.userArticle.${tempProps} `,selectedArtices[tempProps]);
-
-        if(selectedArtices[tempProps].userId == this.props.selectedBook && selectedArtices[tempProps].newsId == news._id){
-          console.log("Found", tempProps);
-          //this.props.newsActionsTemp.removeUserArticle(tempProps);
-        }
-      }
-      // this.prps.newsActionsTemp.removeUserArticle();
-    }
-  }
   getUserTagByName(d){
     const userbookTags = d.userBooks? d.userBooks.map((x) => {
       return this.props.userBooks.filter(y => y._id === x)[0].fullName;
     }) : [];
-    console.log("userbookTags", userbookTags)
     return userbookTags;
   }
 
@@ -67,11 +39,10 @@ class List extends Component {
   }
 
   render() {
-    let items = this.props.items;
-    let userArticle = Object.keys(this.props.userArticle).map(key => this.props.userArticle[key]) || [];
-    const newsActions = this.props.newsActionsTemp;
+    const { items, newsActionsTemp, userBooks, sentDisabled, activeItem, selectedBook } = this.props;
+
     let feedback = null;
-    if (this.props.activeItem === 'sent') {
+    if (activeItem === 'sent') {
       let options = [
         {
           key: 1,
@@ -97,10 +68,6 @@ class List extends Component {
       );
     }
 
-    const userBooks = this.props.userBooks;
-
-    let sentDisabled = this.props.selectDisabled;
-
     return (
       <Grid celled>
         {items.map((d,i) => {
@@ -117,13 +84,13 @@ class List extends Component {
                   <Grid.Column>
                     <Label as='a' color={this.getLabelColor(d)} ribbon>{d.title}</Label>
                   </Grid.Column>
-                  {(this.props.selectedBook&& d.userBooks.indexOf(this.props.selectedBook) > -1 ) &&
+                  {(selectedBook && d.userBooks.indexOf(selectedBook) > -1 ) &&
                     <Grid.Column>
-                      <Checkbox
-                        disabled={this.props.selectDisabled}
-                        checked={this.state.checked}
-                        label={{ children: 'Select' }}
-                        onChange={(e,data) => this.checkBooked(e, data ,d)} />
+                      <ListCheckbox
+                        news={d}
+                        selectedBook={selectedBook}
+                        >
+                        </ListCheckbox>
                     </Grid.Column>
                   }
                 </Grid.Row>
@@ -135,15 +102,14 @@ class List extends Component {
                   tags={d.tags}
                   item={d}
                   itemPropsName={'tags'}
-                  updateTags={newsActions.updateNews}/>
-
+                  updateTags={newsActionsTemp.updateNews}/>
 
                 <BookTags key={`users-$i`} icon={'user circle outline'}
                   tags={userbookTags}
                   item={d}
                   options={userBooks}
                   itemPropsName={'userBooks'}
-                  updateTags={newsActions.updateNews}/>
+                  updateTags={newsActionsTemp.updateNews}/>
               </Grid.Column>
             </Grid.Row>
           );

src/ListCheckbox.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import Tags from './Tags.js';
+import Books from './Books.js';
+import { Grid, Image, Label, Dropdown, Icon, Checkbox } from 'semantic-ui-react'
+import BookTags from './BookTags.js';
+import './App.css';
+import * as moment from 'moment';
+import { Link } from 'react-router-dom';
+import {  database, newsActions, userActions} from './FirebaseService';
+
+class ListCheckbox extends Component {
+
+  constructor(props) {
+    super(props);
+    // let userArticleData = {};
+    // let userArticle=[];
+    // const self = this;
+    // database.ref('userArticle').once("value")
+    //   .then(function(snapshot) {
+    //     userArticleData = snapshot.val(); // 1 ("name")
+    //     userArticle = userArticleData ? Object.keys(userArticleData).map(key => userArticleData[key]) : [];
+    //     self.state = {
+    //       userArticleData: userArticleData,
+    //       checked: userArticle.filter(x => (x.newsId === self.props.news._id && x.userId === self.props.selectedBook )).length > 0,
+    //     }
+    //   });
+    this.state = {
+      userArticleData: {},
+      checked: false
+    }
+    // console.log("checked ---", this.state.checked);
+    this.checkBooked = this.checkBooked.bind(this);
+  }
+
+  componentWillMount(){
+    let userArticleData = {};
+    let userArticle=[];
+    const self = this;
+    database.ref('userArticle').once("value")
+      .then(function(snapshot) {
+        userArticleData = snapshot.val(); // 1 ("name")
+        userArticle = userArticleData ? Object.keys(userArticleData).map(key => userArticleData[key]) : [];
+        self.setState({
+          userArticleData: userArticleData,
+          checked: userArticle.filter(x => (x.newsId === self.props.news._id && x.userId === self.props.selectedBook )).length > 0,
+        });
+      });
+  }
+
+  checkBooked(e, data, news){
+    e.preventDefault();
+    this.setState({checked: data.checked });
+    console.log(data.checked);
+    if(data.checked){
+      let allData = this.state.userArticleData || [];
+      newsActions.adduserArticle({userId: this.props.selectedBook, newsId: news._id, order: 1 });
+      console.log("ADD");
+
+    }else{
+      const selectedArtices = this.state.userArticleData;
+      for (var tempProps in selectedArtices) {
+        if(selectedArtices[tempProps].userId === this.props.selectedBook && selectedArtices[tempProps].newsId === news._id){
+          console.log("Found", tempProps);
+          newsActions.removeUserArticle(tempProps);
+        }
+      }
+    }
+  }
+
+
+  render() {
+    const { items, news, userBooks } = this.props;
+    const { userArticleData, checked } = this.state;
+    let userArticle = userArticleData ? Object.keys(userArticleData).map(key => userArticleData[key]) : [];
+    return (
+      <Checkbox
+        checked={checked}
+        label={{ children: 'Select' }}
+        onChange={(e,data) => this.checkBooked(e, data, this.props.news)} />
+    );
+  }
+}
+
+export default ListCheckbox;

src/MainPage.css

@@ -28,7 +28,8 @@
 }
 
 .commentSection {
-  width: 100%;
+  width: 80%;
+  margin: auto;
 }
 
 .comment {