fix(@clayui.com): fix localstorage issues

matuzalemsteles · Aug 12, 2020 · ff71b3d · ff71b3d
1 parent 974c97e
commit ff71b3d
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 54 deletions.
diff --git a/clayui.com/gatsby-browser.js b/clayui.com/gatsby-browser.js
@@ -9,10 +9,16 @@ export const onClientEntry = () => {
 	if (process.env.GATSBY_CLAY_NIGHTLY === 'true') {
 		const isNullOrTrue = (val) => val === 'true' || val === null;
 
-		const showAtlas = isNullOrTrue(localStorage.getItem('clay.showAtlas'));
-		const showSiteCss = isNullOrTrue(
-			localStorage.getItem('clay.showSiteCss')
-		);
+		let showAtlas = true;
+		let showSiteCss = true;
+
+		try {
+			showAtlas = isNullOrTrue(localStorage.getItem('clay.showAtlas'));
+
+			showSiteCss = isNullOrTrue(
+				localStorage.getItem('clay.showSiteCss')
+			);
+		} catch {} // eslint-disable-line no-empty
 
 		if (showAtlas) {
 			require('@clayui/css/src/scss/atlas.scss');

diff --git a/clayui.com/plugins/gatsby-plugin-meta-redirect/gatsby-node.js b/clayui.com/plugins/gatsby-plugin-meta-redirect/gatsby-node.js
@@ -33,7 +33,7 @@ const writeRedirectsFile = async (redirects, folder, pathPrefix) => {
 		try {
 			fileExists = await exists(FILE_PATH);
 			// eslint-disable-next-line no-empty
-		} catch (err) {}
+		} catch {}
 
 		if (!fileExists) {
 			try {

diff --git a/clayui.com/src/components/Editor/index.js b/clayui.com/src/components/Editor/index.js
@@ -131,9 +131,7 @@ const Editor = ({
 										!collapseCode && activeIndex === index
 									}
 									innerProps={{
-										'aria-controls': `tabpanel-${
-											snippet.name
-										}`,
+										'aria-controls': `tabpanel-${snippet.name}`,
 									}}
 									key={snippet.name}
 									onClick={() => {
@@ -169,7 +167,7 @@ const Editor = ({
 
 										<LiveEditor
 											disabled={snippet.disabled}
-											onValueChange={value => {
+											onValueChange={(value) => {
 												const newSnippets = [
 													...snippets,
 												];

diff --git a/clayui.com/src/components/Hooks/useStateWithLocalStorage.js b/clayui.com/src/components/Hooks/useStateWithLocalStorage.js
@@ -43,7 +43,7 @@ function useStateWithLocalStorage(defaultValue, key) {
 	React.useEffect(() => {
 		try {
 			localStorage.setItem(key, JSON.stringify(value));
-		} catch {}
+		} catch {} // eslint-disable-line no-empty
 	}, [key, value]);
 
 	return [value, setValue];

diff --git a/clayui.com/src/components/LayoutNav/LayoutNav.js b/clayui.com/src/components/LayoutNav/LayoutNav.js
@@ -8,36 +8,23 @@ import {ClayDropDownWithItems} from '@clayui/drop-down';
 import {Link} from 'gatsby';
 import React from 'react';
 
+import useStateWithLocalStorage from '../Hooks/useStateWithLocalStorage';
 import Search from './Search';
 
 const spritemap = '/images/icons/icons.svg';
 
-const isNullOrTrue = (val) => val === 'true' || val === null;
-
 const DEV = process.env.GATSBY_CLAY_NIGHTLY === 'true';
 
-const SSR = typeof localStorage === 'undefined';
-
-const INITIAL_STORAGE =
-	DEV && !SSR
-		? {
-				atlas: isNullOrTrue(localStorage.getItem('clay.showAtlas')),
-				site: isNullOrTrue(localStorage.getItem('clay.showSiteCss')),
-		  }
-		: {
-				atlas: true,
-				site: true,
-		  };
-
 export default () => {
-	const [settings, setSettings] = React.useState(INITIAL_STORAGE);
+	const [showAtlas, setShowAtlas] = useStateWithLocalStorage(
+		true,
+		'clay.showAtlas'
+	);
 
-	React.useEffect(() => {
-		if (DEV && !SSR) {
-			localStorage.setItem('clay.showAtlas', settings.atlas);
-			localStorage.setItem('clay.showSiteCss', settings.site);
-		}
-	}, [settings.atlas, settings.site]);
+	const [showSiteCss, setShowSiteCss] = useStateWithLocalStorage(
+		true,
+		'clay.showSiteCss'
+	);
 
 	return (
 		<nav className="navbar navbar-clay-site navbar-expand-lg navbar-light">
@@ -130,14 +117,9 @@ export default () => {
 											<ClayButton
 												displayType="secondary"
 												onClick={() => {
-													localStorage.setItem(
-														'clay.showAtlas',
-														true
-													);
-													localStorage.setItem(
-														'clay.showSiteCss',
-														true
-													);
+													setShowAtlas(true);
+													setShowSiteCss(true);
+
 													window.location.reload();
 												}}
 											>
@@ -148,25 +130,17 @@ export default () => {
 									helpText="Changes will apply after refresh"
 									items={[
 										{
-											checked: settings.atlas,
+											checked: showAtlas,
 											label: 'Show Atlas',
-											onChange: () => {
-												setSettings({
-													atlas: !settings.atlas,
-													site: settings.site,
-												});
-											},
+											onChange: () =>
+												setShowAtlas(!showAtlas),
 											type: 'checkbox',
 										},
 										{
-											checked: settings.site,
+											checked: showSiteCss,
 											label: 'Show Site CSS',
-											onChange: () => {
-												setSettings({
-													atlas: settings.atlas,
-													site: !settings.site,
-												});
-											},
+											onChange: () =>
+												setShowSiteCss(!showSiteCss),
 											type: 'checkbox',
 										},
 									]}