Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme Mode Context #57

Closed
3 tasks done
arcticicestudio opened this issue Dec 3, 2018 · 0 comments
Closed
3 tasks done

Theme Mode Context #57

arcticicestudio opened this issue Dec 3, 2018 · 0 comments
Labels
context-api scope-configurability type-feature
Milestone
0.2.0

Comments

@arcticicestudio
Copy link
Contributor

arcticicestudio commented Dec 3, 2018 •
edited
Loading

Associated epic: #51

This issue handles the implementation of the React.Context provider and consumer for the global theme modes. It will provide the name of the currently active theme and a function to toggle the active theme.

Context Provider & Consumer

Both the context consumer and provider components will be implemented in the Root core container component. The consumer will be exported which can then be imported in any component to consume the provided values.

The Root component will be changed from a SFC to a class component to store the currently active state and handle the theme mode toggle logic through a function. It will also migrate the currently used simple styled-component theme (provided through the <ThemeProvider component) to the styled-theming theme that provides the initially implemented theme (#53).

Session Storage

To persist the current active theme mode when changing the route (which unmounts the Root component and therefore resets the state), the value will be written to the browser's session storage. The storage type has been preferred over the local storage since this would persist the active theme mode even when the user closes the tab, but the desired behavior is to optimize the site for the “bright snow flurry” aura theme mode.

To simplify the read- and write handling as well as prevent possible errors due to wrong storage keys, two utility functions will be implemented: readSessionCache(key : string) and writeSessionCache(key : string, value : any).

Tasks

  • Implement readSessionCache and writeSessionCache utility functions.
  • Implement the theme context provider & consumer components.
  • Rewrite the Root core container as class-based component.
    • Store the currently active theme mode in state.
    • Hydrate state with the theme mode stored in the session storage on component instantiation.
    • Implement the function to toggle the theme mode.
    • Compose the styled-theming theme object with the theme mode value.
    • Ensure to pass the theme to the GlobalStyle component for global theme styles.
@arcticicestudio arcticicestudio added this to the 0.2.0 milestone Dec 3, 2018
@arcticicestudio arcticicestudio self-assigned this Dec 3, 2018
@arcticicestudio arcticicestudio mentioned this issue Dec 4, 2018
Open
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Implement session storage/cache utility functions
8565156 
To persist the current active theme mode when changing the route (which
unmounts the `Root` component and therefore resets the state), the value
will be written to the browser's session storage (1). The storage type
has been preferred over the local storage (2) since this would persist
the active theme mode even when the user closes the tab, but the desired
behavior is to optimize the site for the "bright snow flurry" aura theme
mode.

To simplify the read- and write handling as well as prevent possible
errors due to wrong storage keys, two utility functions have been
implemented:

- `readSessionCache(key : string)` - Reads the value of the given key
  from the session storage (if available).
- `writeSessionCache(key : string, value : any)` - Writes the given
  key-value pair to the session storage (if available).

References:
  (1) https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
  (2) https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Associated epic: GH-51
GH-57
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Implement the theme context provider & consumer components
9707de3 
Both the context consumer and provider components have been implemented
in the `Root` core container component . The consumer is exported which
can then be imported in any component to consume the provided values.

References:
  (1) #36

Associated epic: GH-51
GH-57
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Rewrite the Root core container as class-based component
bb6c044 
The `Root` component has been changed from a SFC to a class component to
store the currently active state and handle the theme mode toggle logic
through a function. It also migrated the currently used simple
"styled-component" theme (1) (provided through the `<ThemeProvider`
component) to the styled-theming theme (2) that provides the initially
implemented theme (GH-53).

References:
  (1) https://www.styled-components.com/docs/advanced#theming
  (2) https://github.com/styled-components/styled-theming

Associated epic: GH-51
GH-57
@arcticicestudio arcticicestudio mentioned this issue Dec 4, 2018
Merged
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Merge pull request #58 from arcticicestudio/feature/gh-57-theme-mode-…
86edb92 
…context

Theme Mode Context
@arcticicestudio arcticicestudio removed their assignment Dec 4, 2018
@arcticicestudio arcticicestudio mentioned this issue Dec 7, 2018
Closed
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
context-api scope-configurability type-feature
Projects
None yet
Milestone
0.2.0
Development

No branches or pull requests
1 participant
@arcticicestudio