What is a good way to set local storage? - reactjs

Question

I have made a high contrast mode but I have gotten stuck with trying to save the new value to local storage, any guidance I will be appreciated.
Here is the themes wrapper where I am setting up the theme
import React, { useState, useEffect } from 'react';
import { ThemeContext, themes } from '../context/themeContext';
export function isOdd(num) {
console.log("isOdd",num % 2);
}
export default function ThemeContextWrapper(props) {
const [theme, setTheme] = useState(themes.dark);
function changeTheme(theme) {
setTheme(theme);
}
useEffect(() => {
switch (theme) {
case themes.light:
document.body.classList.add('white-content');
// Store
// Retrieve
break;
case themes.dark:
default:
document.body.classList.remove('white-content');
localStorage.setItem(theme, themes.dark);
localStorage.getItem(theme);
break;
}
}, [theme]);
return (
<ThemeContext.Provider value={{ theme: theme, changeTheme: changeTheme }}>
{props.children}
</ThemeContext.Provider>
);
}
and here is the on click listener that triggers the high contrast mode
import React, { useState, useEffect } from "react";
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.material.blue.light.css';
// Custom icons by Ionicons
import 'ionicons/dist/css/ionicons.css';
import DarkModeicon from '../images/icons/dark-mode-icon.png'
import SpeedDialAction from 'devextreme-react/speed-dial-action';
import { isOdd } from '../themewrapper/themeWrapperContext';
import Sun from '../images/icons/sun.png'
import config from 'devextreme/core/config';
import notify from 'devextreme/ui/notify';
import '../App.css';
class FloatingActionButton extends React.Component {
constructor(props) {
super(props);
config({
floatingActionButtonConfig: {
icon: 'runner',
closeIcon: 'icon ion-md-close',
position: {
my: 'right bottom',
at: 'right bottom',
offset: '-16 -16'
}
}
});
}
// function enabled night mode
toggleTheme() {
isOdd(3)
console.log("toggleTheme click func")
document.body.classList.add('dark-content');
localStorage.setItem(theme, themes.dark);
localStorage.getItem(theme, themes.dark);
}
toggleDay() {
isOdd(3)
console.log("toggle day click func")
document.body.classList.remove('dark-content');
document.body.classList.add('white-content');
}
render() {
return (
<div id="app-container">
<SpeedDialAction
hint="Turn on Day Mode"
icon={Sun}
onClick={() => this.toggleDay()}
/>
<SpeedDialAction
hint="Increase Font"
icon="growfont"
onClick={() =>
alert("Increase Font Clicked!!")
}
/>
<SpeedDialAction
hint="turn on night mode"
icon={DarkModeicon}
onClick={() => this.toggleTheme()}
/>
</div>
);
}
}
export default FloatingActionButton;
I tried to set up the local storage in both the on click listener and theme wrapper no success.

Answer 1

As using the Context.Provider' to provide the value to the child, you should also use Context.Consumer' in the child which needs to pick the value from provider.
So in FloatingActionButton component, you might use this instead:
class FloatingActionButton extends React.Component {
// ...some other code
toggleTheme(theme, changeTheme) {
let newTheme;
if (theme === themes.light) {
newTheme = themes.dark;
} else {
newTheme = themes.light;
}
changeTheme(newTheme); // set the theme immediately
localStorage.setItem('theme', newTheme); // then save it into localStorage
}
render() {
return (
<ThemeContext.Consumer>
{(theme, changeTheme) => (
// ...some other elements
<button onClick={() => toggleTheme(theme, changeTheme)}>
Toggle Theme
</button>
)}
</ThemeContext.Consumer>
)
}
}
Then you can detect the theme in the ThemeContextWrapper component:
export default function ThemeContextWrapper(props) {
const [theme, setTheme] = useState(); // keep the default value as null because it will get the value in localStorage when useEffect detect the first render.
function changeTheme(theme) {
setTheme(theme);
}
useEffect(() => {
switch (theme) {
case themes.light:
document.body.classList.add('white-content');
break;
case themes.dark:
document.body.classList.remove('white-content');
default:
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme)
} else { // if there is no theme data in localStorage, set theme to dark mode
setTheme(themes.dark)
}
break;
}
}, [theme]);
return (
<ThemeContext.Provider value={{ theme: theme, changeTheme: changeTheme }}>
{props.children}
</ThemeContext.Provider>
);
}