Progress

app/javascript/gabsocial/containers/display.js

@@ -0,0 +1,92 @@
+import {
+  FONT_SIZES,
+  THEMES,
+  DEFAULT_THEME,
+  DEFAULT_FONT_SIZE,
+} from '../constants'
+
+export default class Display extends PureComponent {
+
+  static propTypes = {
+    theme: PropTypes.string.isRequired,
+    rounded: PropTypes.bool.isRequired,
+    fontSize: PropTypes.string.isRequired,
+  }
+
+  state = {
+    theme: this.props.theme,
+    rounded: this.props.rounded,
+    fontSize: this.props.fontSize,
+  }
+
+  static defaultProps = {
+    theme: 'BLACK',
+    rounded: false,
+    fontSize: 'normal',
+  }
+
+  componentDidMount() {
+    this.updateTheme(this.state.theme)
+    this.updateRounded(this.state.rounded)
+    this.updateFontSizes(this.state.fontSize)
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.theme !== prevState.theme ||
+      nextProps.rounded !== prevState.rounded ||
+      nextProps.fontSize !== prevState.fontSize) {
+      return {
+        theme: nextProps.theme,
+        rounded: nextProps.rounded,
+        fontSize: nextProps.fontSize,
+      }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.theme !== this.state.theme) {
+      this.updateTheme(this.state.theme)
+    }
+
+    if (prevState.rounded !== this.state.rounded) {
+      this.updateRounded(this.state.rounded)
+    }
+    
+    if (prevState.fontSize !== this.state.fontSize) {
+      this.updateFontSizes(this.state.fontSize)
+    }
+  }
+
+  updateRounded(rounded) {
+    if (rounded) {
+      document.documentElement.removeAttribute('rounded')
+    } else {
+      document.documentElement.setAttribute('rounded', '')
+    }
+  }
+
+  updateFontSizes(fontSize) {
+    let correctedFontSize = fontSize.toUpperCase()
+    if (!FONT_SIZES.hasOwnProperty(correctedFontSize)) {
+      correctedFontSize = DEFAULT_FONT_SIZE
+    }
+
+    document.documentElement.style.setProperty('font-size', FONT_SIZES[correctedFontSize]);
+  }
+
+  updateTheme(theme) {
+    let correctedTheme = theme.toLowerCase()
+    if (!THEMES.hasOwnProperty(correctedTheme)) {
+      correctedTheme = DEFAULT_THEME
+    }
+
+    document.documentElement.setAttribute('theme', correctedTheme);
+  }
+
+  render() {
+    return this.props.children
+  }
+
+}

app/javascript/gabsocial/containers/gabsocial.js

@@ -1,55 +1,60 @@
-'use strict';
+'use strict'
 
-import { Provider } from 'react-redux';
-import configureStore from '../store/configureStore';
-import { INTRODUCTION_VERSION } from '../actions/onboarding';
-import { BrowserRouter, Route } from 'react-router-dom';
-import { ScrollContext } from 'react-router-scroll-4';
-import { IntlProvider, addLocaleData } from 'react-intl';
-import { fetchCustomEmojis } from '../actions/custom_emojis';
-import { hydrateStore } from '../actions/store';
+import { Provider } from 'react-redux'
+import configureStore from '../store/configureStore'
+import { INTRODUCTION_VERSION } from '../actions/onboarding'
+import { BrowserRouter, Route } from 'react-router-dom'
+import { ScrollContext } from 'react-router-scroll-4'
+import { IntlProvider, addLocaleData } from 'react-intl'
+import { fetchCustomEmojis } from '../actions/custom_emojis'
+import { hydrateStore } from '../actions/store'
 import {
   connectUserStream,
   connectStatusUpdateStream,
-} from '../actions/streaming';
-import { getLocale } from '../locales';
-import initialState from '../initial_state';
-import { me } from '../initial_state';
-import UI from '../features/ui';
-// import Introduction from '../features/introduction';
-import ErrorBoundary from '../components/error_boundary';
+} from '../actions/streaming'
+import { getLocale } from '../locales'
+import initialState from '../initial_state'
+import { me } from '../initial_state'
+import UI from '../features/ui'
+// import Introduction from '../features/introduction'
+import ErrorBoundary from '../components/error_boundary'
+import Display from './display'
 
-const { localeData, messages } = getLocale();
-addLocaleData(localeData);
+const { localeData, messages } = getLocale()
+addLocaleData(localeData)
 
-export const store = configureStore();
-const hydrateAction = hydrateStore(initialState);
+export const store = configureStore()
+const hydrateAction = hydrateStore(initialState)
 
-store.dispatch(hydrateAction);
-store.dispatch(fetchCustomEmojis());
+store.dispatch(hydrateAction)
+store.dispatch(fetchCustomEmojis())
 
 const mapStateToProps = (state) => {
-  const account = state.getIn(['accounts', me]);
-  const showIntroduction = account ? state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION : false;
+  const account = state.getIn(['accounts', me])
+  const showIntroduction = account ? state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION : false
 
   return {
     showIntroduction,
-  };
-};
+  }
+}
 
 @connect(mapStateToProps)
 class GabSocialMount extends PureComponent {
 
   static propTypes = {
     showIntroduction: PropTypes.bool,
-  };
+  }
+
+  componentDidMount() {
+
+  }
 
   render () {
     // Disabling introduction for launch
-    // const { showIntroduction } = this.props;
+    // const { showIntroduction } = this.props
     //
     // if (showIntroduction) {
-    //   return <Introduction />;
+    //   return <Introduction />
     // }
 
     return (
@@ -58,7 +63,7 @@ class GabSocialMount extends PureComponent {
           <Route path='/' component={UI} />
         </ScrollContext>
       </BrowserRouter>
-    );
+    )
   }
 
 }
@@ -67,34 +72,36 @@ export default class GabSocial extends PureComponent {
 
   static propTypes = {
     locale: PropTypes.string.isRequired,
-  };
+  }
 
   componentDidMount() {
     if (!!me) {
-      this.disconnect = store.dispatch(connectUserStream());
-      store.dispatch(connectStatusUpdateStream());
+      this.disconnect = store.dispatch(connectUserStream())
+      store.dispatch(connectStatusUpdateStream())
     }
   }
 
   componentWillUnmount () {
     if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
+      this.disconnect()
+      this.disconnect = null
     }
   }
 
   render () {
-    const { locale } = this.props;
+    const { locale } = this.props
 
     return (
       <IntlProvider locale={locale} messages={messages}>
         <Provider store={store}>
-          <ErrorBoundary>
-            <GabSocialMount />
-          </ErrorBoundary>
+          <Display>
+            <ErrorBoundary>
+              <GabSocialMount />
+            </ErrorBoundary>
+          </Display>
         </Provider>
       </IntlProvider>
-    );
+    )
   }
 
 }