From caabfbcdd56bdced7c5c1d38e00f488adffe7c60 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Thu, 14 Jul 2016 10:08:36 -0400
Subject: PLT-2992 Added the ability to use different themes for each team
 (#3411)

* Cleaned up user_settings_theme.jsx and import_theme_modal.jsx

* Made ImportThemeModal use a callback to return the theme to the user settings modal instead of saving it directly

* Moved user theme from model to preferences

* Added serverside API to delete preferences TODO update package with client stuff

* Changed constants.jsx so that Preferences and ActionTypes can be imported on their own

* Updated ThemeProps migration code to properly rename solarized code themes

* Fixed warnings thrown by AppDispatcher

* Added clientside UI to support team-specific themes

* Removed debugging code from test

* Fixed setting a user's theme when they haven't set their theme before
---
 webapp/components/needs_team.jsx | 37 +++++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

(limited to 'webapp/components/needs_team.jsx')

diff --git a/webapp/components/needs_team.jsx b/webapp/components/needs_team.jsx
index 07b90636d..a8c7b3508 100644
--- a/webapp/components/needs_team.jsx
+++ b/webapp/components/needs_team.jsx
@@ -41,19 +41,34 @@ export default class NeedsTeam extends React.Component {
     constructor(params) {
         super(params);
 
-        this.onChanged = this.onChanged.bind(this);
+        this.onTeamChanged = this.onTeamChanged.bind(this);
+        this.onPreferencesChanged = this.onPreferencesChanged.bind(this);
+
+        const team = TeamStore.getCurrent();
 
         this.state = {
-            team: TeamStore.getCurrent()
+            team,
+            theme: PreferenceStore.getTheme(team.id)
         };
     }
 
-    onChanged() {
+    onTeamChanged() {
+        const team = TeamStore.getCurrent();
+
         this.setState({
-            team: TeamStore.getCurrent()
+            team,
+            theme: PreferenceStore.getTheme(team.id)
         });
     }
 
+    onPreferencesChanged(category) {
+        if (!category || category === Preferences.CATEGORY_THEME) {
+            this.setState({
+                theme: PreferenceStore.getTheme(this.state.team.id)
+            });
+        }
+    }
+
     componentWillMount() {
         // Go to tutorial if we are first arriving
         const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999);
@@ -63,7 +78,8 @@ export default class NeedsTeam extends React.Component {
     }
 
     componentDidMount() {
-        TeamStore.addChangeListener(this.onChanged);
+        TeamStore.addChangeListener(this.onTeamChanged);
+        PreferenceStore.addChangeListener(this.onPreferencesChanged);
 
         // Emit view action
         GlobalActions.viewLoggedIn();
@@ -80,10 +96,19 @@ export default class NeedsTeam extends React.Component {
         $(window).on('blur', () => {
             window.isActive = false;
         });
+
+        Utils.applyTheme(this.state.theme);
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (!Utils.areObjectsEqual(prevState.theme, this.state.theme)) {
+            Utils.applyTheme(this.state.theme);
+        }
     }
 
     componentWillUnmount() {
-        TeamStore.removeChangeListener(this.onChanged);
+        TeamStore.removeChangeListener(this.onTeamChanged);
+        PreferenceStore.removeChangeListener(this.onPreferencesChanged);
         $(window).off('focus');
         $(window).off('blur');
     }
-- 
cgit v1.2.3-1-g7c22