fix state variable

Sidsector9 · Sidsector9 · commit 7d949f23f387 · 2022-06-15T12:50:14.000+05:30
diff --git a/dist/component/CharacterMap.js b/dist/component/CharacterMap.js
@@ -41,13 +41,14 @@ var CharacterMap = function (_React$Component) {
         var _this = _possibleConstructorReturn(this, (CharacterMap.__proto__ || Object.getPrototypeOf(CharacterMap)).call(this, props));
 
         try {
-            _this.paletteCache = JSON.parse(localStorage.getItem('tenupISCcharPalette'));
-            _this.paletteCache = _this.paletteCache.length ? _this.paletteCache : [];
+            _this.paletteCache = JSON.parse(localStorage.getItem('dayjoReactCharPalette'));
+            _this.paletteCache = Array.isArray(_this.paletteCache) ? _this.paletteCache : [];
         } catch (error) {
             _this.paletteCache = [];
         }
 
-        _this.secondaryPaletteCache = [];
+        _this.secondaryPaletteCache = JSON.parse(sessionStorage.getItem('dayjoReactCharSecondaryPalette'));
+        _this.secondaryPaletteCache = Array.isArray(_this.secondaryPaletteCache) ? _this.secondaryPaletteCache : [];
         _this.leastUsedCharFromPalette = false;
         _this.dirtyPalette = false;
         _this.state = {
@@ -190,10 +191,14 @@ var CharacterMap = function (_React$Component) {
                 if (this.secondaryPaletteCache[0].count > this.paletteCache[paletteMaxSize - 1].count) {
                     var maxCountCharInSecondaryPalette = this.secondaryPaletteCache.shift();
                     this.paletteCache[paletteMaxSize - 1] = maxCountCharInSecondaryPalette;
+                    this.paletteCache.sort(function (a, b) {
+                        return b.count - a.count;
+                    });
                 }
             }
 
-            localStorage.setItem('tenupISCcharPalette', JSON.stringify(this.paletteCache));
+            localStorage.setItem('dayjoReactCharPalette', JSON.stringify(this.paletteCache));
+            sessionStorage.setItem('dayjoReactCharSecondaryPalette', JSON.stringify(this.secondaryPaletteCache));
             this.setState({ 'charPalette': this.paletteCache });
         }
 
@@ -423,7 +428,7 @@ var CharacterMap = function (_React$Component) {
                         ref: this.bindInputRef
                     })
                 ),
-                this.props.mostUsedPalette && this.paletteCache.length && _react2.default.createElement(
+                this.props.mostUsedPalette && this.paletteCache.length ? _react2.default.createElement(
                     'div',
                     { className: 'charMap--last-used-palette-wrapper' },
                     _react2.default.createElement(
@@ -436,7 +441,7 @@ var CharacterMap = function (_React$Component) {
                         { className: 'charMap--last-used-palette', 'aria-label': mostUsedPaletteText },
                         charPalette
                     )
-                ),
+                ) : '',
                 '' === search && _react2.default.createElement(
                     'ul',
                     { className: 'charMap--category-menu', 'aria-label': categoriesLabelText },
diff --git a/src/component/CharacterMap.js b/src/component/CharacterMap.js
@@ -13,13 +13,14 @@ class CharacterMap extends React.Component {
         super(props);
 
         try {
-            this.paletteCache = JSON.parse( localStorage.getItem('tenupISCcharPalette') );
-            this.paletteCache = this.paletteCache.length ? this.paletteCache : [];
+            this.paletteCache = JSON.parse( localStorage.getItem('dayjoReactCharPalette') );
+            this.paletteCache = Array.isArray( this.paletteCache ) ? this.paletteCache : [];
         } catch(error) {
             this.paletteCache = [];
         }
 
-        this.secondaryPaletteCache = [];
+        this.secondaryPaletteCache = JSON.parse( sessionStorage.getItem('dayjoReactCharSecondaryPalette') );
+        this.secondaryPaletteCache = Array.isArray( this.secondaryPaletteCache ) ? this.secondaryPaletteCache : [];
         this.leastUsedCharFromPalette = false;
         this.dirtyPalette = false;
         this.state = {
@@ -131,10 +132,12 @@ class CharacterMap extends React.Component {
             if (this.secondaryPaletteCache[0].count > this.paletteCache[paletteMaxSize - 1].count) {
                 const maxCountCharInSecondaryPalette = this.secondaryPaletteCache.shift();
                 this.paletteCache[paletteMaxSize - 1] = maxCountCharInSecondaryPalette;
+                this.paletteCache.sort( ( a, b ) => b.count - a.count );
             }
         }
 
-        localStorage.setItem('tenupISCcharPalette', JSON.stringify(this.paletteCache));
+        localStorage.setItem('dayjoReactCharPalette', JSON.stringify(this.paletteCache));
+        sessionStorage.setItem('dayjoReactCharSecondaryPalette', JSON.stringify(this.secondaryPaletteCache));
         this.setState( { 'charPalette': this.paletteCache } );
     }
 
@@ -318,14 +321,14 @@ class CharacterMap extends React.Component {
                         ref={this.bindInputRef}
                     />
                 </ul>
-                { this.props.mostUsedPalette && this.paletteCache.length && (
+                { ( this.props.mostUsedPalette && this.paletteCache.length ) ? (
                     <div className="charMap--last-used-palette-wrapper">
                         <label>{`${mostUsedPaletteText}: `}</label>
                         <ul className="charMap--last-used-palette" aria-label={mostUsedPaletteText}>
                             { charPalette }
                         </ul>
                     </div>
-                )  }
+                ) : '' }
                 { '' === search &&
                     <ul className="charMap--category-menu" aria-label={categoriesLabelText}>
                         { categoryList}
