Persist night mode on page load #13229

Bouncey · 2017-02-07T21:31:48Z

Pre-Submission Checklist

Your pull request targets the staging branch of freeCodeCamp.
Branch starts with either fix/, feature/, or translate/ (e.g. fix/signin-issue)
You have only one commit (if not, squash them into one commit).
All new and existing tests pass the command npm test. Use git commit --amend to amend any fixes.

Type of Change

Small bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds new functionality)
Breaking change (fix or feature that would change existing functionality)
Add new translation (feature adding new translations)

Checklist:

Tested changes locally.
Closes currently open issue (replace XXXX with an issue no): Closes [beta] Night mode should be active on page load #12560

Description

Adds a key to localStorage which holds the theme preference of the user. This enables night mode to be enabled on page load whilst the bundle evals.

Greenheart

@Bouncey Thanks! 😊

This works fine as long as you don't do a hard refresh, so I'd say this is ready!

Bouncey · 2017-02-07T22:58:32Z

Hmm I tested it with hard refreshes, clearing the cache shouldn't clear localStorage

…

On Tuesday, February 7, 2017, Samuel Plumppu ***@***.***> wrote: ***@***.**** approved this pull request. @Bouncey <https://github.com/Bouncey> Thanks! 😊 This works fine as long as you don't do a hard refresh, so I'd say this is ready! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#13229 (review)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARtk5iGf7UXZ4JAKKO3FUgRzDylvUiIGks5raOe7gaJpZM4L6EHO> .

Greenheart · 2017-02-07T23:07:00Z

@Bouncey It might be caused by the re-downloading bundle? Or maybe the bundle is starting (although this flash doesn't occur on normal pageloads)?

Bouncey · 2017-02-08T13:18:40Z

This post on SO confirmed what I thought. Could it just be an edge case?

Greenheart · 2017-02-08T13:30:04Z

@Bouncey As it only occurs when I do hard refreshes, I don't think it will be a problem.

I'm pretty sure this is the expected behavior as clearing the cache will clear the react bundle - which then needs to be re-downloaded before it can detect nightmode again, despite what's in localStorage or not

Bouncey · 2017-02-08T14:07:05Z

Yes, but localStorage remains with the browser, it is independent of the bundle. The code that appends 'night' to the body class list whilst the bundle downloads and evals is outside of the bundle also, it is in a <script> tag at the bottom of the HTML sent from the server.

Greenheart · 2017-02-08T18:05:42Z

@Bouncey I know about localStorage, but I missed that this code was in the base layout code. Thanks for the clarification!

Then this might be an edge case, or just some lag before the script gets executed (There might be inlined scripts before the one for nightmode?).

client/sagas/night-mode-saga.js

@@ -29,6 +29,9 @@ export default function nightModeSaga(
    .flatMap(() => {
      const { app: { theme } } = getState();
      const newTheme = !theme || theme === 'default' ? 'night' : 'default';
+      if (typeof Storage !== 'undefined') {


Greenheart

@BerkeleyTrue Nice catch! Somehow, it worked locally despite using Storage.

This still flashes slightly on pageload, but it might just be how the rendering works.

I think this solves the issue though 😊

client/sagas/night-mode-saga.js

@@ -29,6 +29,9 @@ export default function nightModeSaga(
    .flatMap(() => {
      const { app: { theme } } = getState();
      const newTheme = !theme || theme === 'default' ? 'night' : 'default';
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem('fccTheme', newTheme);
+      }


server/views/layout-react.jade

@@ -11,5 +11,12 @@ html(lang='en')
    script!= state
    script.
      window.webpackManifest = !{JSON.stringify(chunkManifest || {})};
+    script.
+      if (typeof localStorage !== 'undefined') {
+        const fccTheme = JSON.parse(localStorage.getItem('fccTheme'));


server/views/layout-react.jade

@@ -11,5 +11,12 @@ html(lang='en')
    script!= state
    script.
      window.webpackManifest = !{JSON.stringify(chunkManifest || {})};
+    script.
+      if (typeof localStorage !== 'undefined') {
+        const fccTheme = JSON.parse(localStorage.getItem('fccTheme'));


camperbot · 2017-03-04T21:14:49Z

@Bouncey updated the pull request.

server/views/layout-react.jade

@@ -11,5 +11,18 @@ html(lang='en')
    script!= state
    script.
      window.webpackManifest = !{JSON.stringify(chunkManifest || {})};
+    script.


server/views/layout-react.jade

+        if (fccTheme && fccTheme === 'night') {
+          document.body.classList.add('night');
+        }
+      }


client/sagas/night-mode-saga.js

@@ -7,6 +9,10 @@ import {
  createErrorObservable
 } from '../../common/app/redux/actions';

+function persistTheme(theme) {
+  store.set('fccTheme', theme);


camperbot · 2017-03-24T17:03:56Z

@Bouncey updated the pull request.

BerkeleyTrue · 2017-04-18T18:06:45Z

@Bouncey Great work! Thanks for you patience

Happy Coding

BerkeleyTrue added the status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. label Feb 7, 2017

Greenheart self-requested a review February 7, 2017 21:36

Greenheart approved these changes Feb 7, 2017

View reviewed changes

BerkeleyTrue suggested changes Feb 8, 2017

View reviewed changes

Greenheart approved these changes Feb 10, 2017

View reviewed changes

BerkeleyTrue suggested changes Feb 23, 2017

View reviewed changes

Bouncey commented Mar 1, 2017

View reviewed changes

BerkeleyTrue suggested changes Mar 1, 2017

View reviewed changes

BerkeleyTrue suggested changes Mar 17, 2017

View reviewed changes

Persist night mode on page load

d6e302d

BerkeleyTrue merged commit 4942156 into freeCodeCamp:staging Apr 18, 2017

BerkeleyTrue removed the status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. label Apr 18, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Persist night mode on page load #13229

Persist night mode on page load #13229

Bouncey commented Feb 7, 2017

Greenheart left a comment

Bouncey commented Feb 7, 2017 via email

Greenheart commented Feb 7, 2017

Bouncey commented Feb 8, 2017

Greenheart commented Feb 8, 2017

Bouncey commented Feb 8, 2017 •

edited

Greenheart commented Feb 8, 2017 •

edited

This comment was marked as off-topic.

Greenheart left a comment

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

camperbot commented Mar 4, 2017

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

camperbot commented Mar 24, 2017

BerkeleyTrue commented Apr 18, 2017

Persist night mode on page load #13229

Persist night mode on page load #13229

Conversation

Bouncey commented Feb 7, 2017

Pre-Submission Checklist

Type of Change

Checklist:

Description

Greenheart left a comment

Choose a reason for hiding this comment

Bouncey commented Feb 7, 2017 via email

Greenheart commented Feb 7, 2017

Bouncey commented Feb 8, 2017

Greenheart commented Feb 8, 2017

Bouncey commented Feb 8, 2017 • edited

Greenheart commented Feb 8, 2017 • edited

This comment was marked as off-topic.

Greenheart left a comment

Choose a reason for hiding this comment

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

camperbot commented Mar 4, 2017

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

camperbot commented Mar 24, 2017

BerkeleyTrue commented Apr 18, 2017

Bouncey commented Feb 8, 2017 •

edited

Greenheart commented Feb 8, 2017 •

edited