NEW: Now re-

rendering profile page on state updates like new collection or add

CineCollectionsFrontEnd/cinecollections/src/components/createCollection.js

@@ -7,6 +7,8 @@ import Popup from "reactjs-popup";
 
 import { sendAuthorizedBackendGET } from "../rest/backendAPI";
 
+import { collectionsUpdated } from "../redux/actions";
+
 class CreateCollection extends React.Component {
     constructor(props) {
         super(props);
@@ -21,7 +23,8 @@ class CreateCollection extends React.Component {
     create() { // TODO - validate input not empty
         sendAuthorizedBackendGET("collection/create?username=" + this.props.loggedInUser + "&collection_name=" + this.state.collectionName, this.props.token).then(
             data => {
-                this.setState({response: (this.state.collectionName + " was created!")}); 
+                this.setState({response: (this.state.collectionName + " was created!")});
+                this.props.dispatch(collectionsUpdated()); 
             }).catch(error => {
                 this.setState({response: error});
         });

CineCollectionsFrontEnd/cinecollections/src/components/profile.js

@@ -2,7 +2,15 @@ import React from "react";
 
 import { browserHistory } from "react-router";
 import { connect } from "react-redux";
-import { loggedIn, loggedOut, fetchedCollections, collectionsUpdated, displayedUser } from "../redux/actions";
+
+import { 
+    loggedIn, 
+    loggedOut, 
+    fetchedCollections, 
+    collectionsUpdated, 
+    displayedUser, 
+    handledCollectionUpdate 
+} from "../redux/actions";
 
 import { sendBackendGET } from "../rest/backendAPI"
 import { getFilmById, getFilmPoster } from "../rest/movieAPI";
@@ -159,35 +167,16 @@ class Profile extends React.Component {
             )
         }); 
     }
-    
-    /*updateCollections() {
-        sendBackendGET("collection/getallforuser?username=" + this.props.loggedInUser).then(
-            data => {
-                this.setState({myCollections: data.my_collections});
-                this.setState({subCollections: data.subscribed_collections});  
-                this.renderCollections();
-            }
-        )
-        this.renderCollections();
-    }*/
-
 
     render() {
-        /*
-        if(this.props.myCollections != this.state.myCollections) {
-            this.renderCollections();
-        }*/
-        //console.log(this.props.myCollections)
-        //console.log(this.state.myCollections)
-        /*if (this.props.collectionsUpdated) {
-            this.updateCollections();
-            this.props.dispatch(collectionsUpdated(false));
-            this.props.dispatch(fetchedCollections({myCollections: this.state.myCollections, subCollections: this.state.subCollections}));
-        }*/
         if (this.props.displayUser != this.state.displayUser) {
             this.refreshCollections(this.props.displayUser);
             this.setState({displayUser: this.props.displayUser});
         }
+        if (this.props.collectionsUpdated) {
+            this.refreshCollections(this.props.displayUser);
+            this.props.dispatch(handledCollectionUpdate());
+        }
 
         return (
             <div className="profile">
@@ -215,12 +204,9 @@ class Profile extends React.Component {
 function mapStateToProps(state) {
     return {
         loggedInUser: state.loginState.loggedInUser,
-        displayUser: state.loginState.displayedUser
-        
-        //collectionsUpdated: state.collectionState.collectionsUpdated
+        displayUser: state.loginState.displayedUser,
         
-        //myCollections: state.collectionState.myCollections,
-        //subCollections: state.collectionState.subCollections
+        collectionsUpdated: state.collectionState.collectionsUpdated
     }
 }
 

CineCollectionsFrontEnd/cinecollections/src/components/search.js

@@ -94,7 +94,7 @@ class Search extends React.Component {
         })
     }
 
-    handleKeyPress(e, searchType) { // TODO - handle when enter is pressed for other search
+    handleKeyPress(e, searchType) {
         if (e.key === "Enter") {
             if (searchType === "film") {
                 this.searchFilm();
@@ -125,7 +125,7 @@ class Search extends React.Component {
         sendAuthorizedBackendPOST("collection/add?username=" + this.props.loggedInUser, body, this.props.token).then(
             data => {
                 this.setState({generalResponse: ("Added " + this.state.filmResult.Title + " to collection!")});
-                //this.props.dispatch(collectionsUpdated(true));
+                this.props.dispatch(collectionsUpdated());
             }).catch(error => {
                 this.setState({generalResponse: error});
         });

CineCollectionsFrontEnd/cinecollections/src/redux/actionTypes.js

@@ -3,4 +3,5 @@ export const LOGGED_OUT = "LOGGED_OUT";
 export const DISPLAYED_USER = "DISPLAYED_USER";
 
 export const FETCHED_COLLECTIONS = "FETCHED_COLLECTIONS";
-//export const COLLECTIONS_UPDATED = "COLLECTIONS_UPDATED";
\ No newline at end of file
+export const COLLECTIONS_UPDATED = "COLLECTIONS_UPDATED";
+export const UPDATE_HANDLED = "UPDATE_HANDLED"
\ No newline at end of file

CineCollectionsFrontEnd/cinecollections/src/redux/actions.js

-import { LOGGED_IN, LOGGED_OUT, FETCHED_COLLECTIONS, DISPLAYED_USER, COLLECTIONS_UPDATED } from "./actionTypes";
+import { 
+    LOGGED_IN, 
+    LOGGED_OUT, 
+    FETCHED_COLLECTIONS,
+    DISPLAYED_USER, 
+    COLLECTIONS_UPDATED, 
+    UPDATE_HANDLED } from "./actionTypes";
 
 export function loggedIn(data) {
     return {
@@ -27,12 +33,16 @@ export function fetchedCollections(data) {
     }
 }
 
-/*export function collectionsUpdated(data) {
+export function collectionsUpdated() {
     return {
-        type: COLLECTIONS_UPDATED,
-        data
+        type: COLLECTIONS_UPDATED
     }
-}*/
+}
 
+export function handledCollectionUpdate() {
+    return {
+        type: UPDATE_HANDLED
+    }
+}
 
 

CineCollectionsFrontEnd/cinecollections/src/redux/reducers/collectionReducer.js

 import {
-    FETCHED_COLLECTIONS, COLLECTIONS_UPDATED
+    FETCHED_COLLECTIONS, COLLECTIONS_UPDATED, UPDATE_HANDLED
 } from "../actionTypes";
 
 const initialState = {
@@ -15,10 +15,14 @@ export default function updateCollectionState(state = initialState, action) {
                 myCollections: action.data.myCollections,
                 subCollections: action.data.subCollections
             })
-        /*case COLLECTIONS_UPDATED:
+        case COLLECTIONS_UPDATED:
             return Object.assign({}, state, {
-                collectionsUpdated: action.data
-            })*/
+                collectionsUpdated: true
+            })
+        case UPDATE_HANDLED:
+            return Object.assign({}, state, {
+                collectionsUpdated: false
+            })
         default:
             return state;
     }