Skip to content

Commit

Permalink
Merge pull request #49 from Sidsector9/fix-state-variable
Browse files Browse the repository at this point in the history 
fix state variable
  • Loading branch information
@Dayjo
Dayjo authored Jun 15, 2022
2 parents 1fd5f1d + 7d949f2 commit 83a27d0
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 11 deletions.
124 changes: 123 additions & 1 deletion dist/component/CharacterMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,24 @@ var CharacterMap = function (_React$Component) {

var _this = _possibleConstructorReturn(this, (CharacterMap.__proto__ || Object.getPrototypeOf(CharacterMap)).call(this, props));

try {
_this.paletteCache = JSON.parse(localStorage.getItem('dayjoReactCharPalette'));
_this.paletteCache = Array.isArray(_this.paletteCache) ? _this.paletteCache : [];
} catch (error) {
_this.paletteCache = [];
}

_this.secondaryPaletteCache = JSON.parse(sessionStorage.getItem('dayjoReactCharSecondaryPalette'));
_this.secondaryPaletteCache = Array.isArray(_this.secondaryPaletteCache) ? _this.secondaryPaletteCache : [];
_this.leastUsedCharFromPalette = false;
_this.dirtyPalette = false;
_this.state = {
active: 0,
search: '',
categoryList: '',
charList: '',
fullCharList: ''
fullCharList: '',
charPalette: _this.paletteCache
};
_this.resultsCache = [];
_this.handleSearchChange = _this.handleSearchChange.bind(_this);
Expand Down Expand Up @@ -125,9 +137,101 @@ var CharacterMap = function (_React$Component) {
key: 'charClickHandler',
value: function charClickHandler(e, char) {
e.preventDefault();
this.setPalette(char);
return this.props.onSelect(char, e.target);
}

/**
* Sets the charPalette state.
*
* @param {object} char The character object
*/

}, {
key: 'setPalette',
value: function setPalette(char) {
var paletteMaxSize = 5;
var charAtIndex = this.paletteCache.findIndex(function (p) {
return p.hex === char.hex;
});

/* If the primary palette cache is not fully filled OR if the character is already
* present in primary, then add the character to it.
*/
if (this.paletteCache.length < paletteMaxSize || -1 !== charAtIndex) {
this.paletteCache = this.addToPalette(char, this.paletteCache);
/* Else add it to the secondary cache. */
} else if (-1 === charAtIndex) {
this.secondaryPaletteCache = this.addToPalette(char, this.secondaryPaletteCache);
}

/* If the primary cache is fully filled, then save the least used
* character from the cache for future reference.
*/
if (this.paletteCache.length === paletteMaxSize) {
this.leastUsedCharFromPalette = this.paletteCache[paletteMaxSize - 1];
}

/*
* Sort the palettes in descending order of the count.
*/
this.paletteCache.sort(function (a, b) {
return b.count - a.count;
});
this.secondaryPaletteCache.sort(function (a, b) {
return b.count - a.count;
});

if (this.secondaryPaletteCache.length > 0) {
/* If the count of the max used character in secondary is more than
* the count of the least used character in the primary, then remove
* that character from secondary and replace the least used character
* from primary with it.
*/
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('dayjoReactCharPalette', JSON.stringify(this.paletteCache));
sessionStorage.setItem('dayjoReactCharSecondaryPalette', JSON.stringify(this.secondaryPaletteCache));
this.setState({ 'charPalette': this.paletteCache });
}

/**
* Adds a character to the character palette.
*
* @param {object} char The character object.
* @param {array} palette The char palette array.
* @returns {array}
*/

}, {
key: 'addToPalette',
value: function addToPalette(char, palette) {
var charAtIndex = palette.findIndex(function (p) {
return p.hex === char.hex;
});

if (charAtIndex !== -1) {
++palette[charAtIndex].count;
} else {
palette.push({
'char': char.char,
'entity': char.entity,
'hex': char.hex,
'name': char.name,
'count': 1
});
}

return palette;
}

/**
* Perform the character search.
*
Expand Down Expand Up @@ -298,6 +402,10 @@ var CharacterMap = function (_React$Component) {
var filterLabelText = this.props.filterLabelText || 'Filter';
var categoriesLabelText = this.props.categoriesLabelText || 'Categories';
var characterListLabelText = this.props.characterListLabelText || 'Character List';
var mostUsedPaletteText = this.props.mostUsedPaletteText || 'Most used';

var _charListFromCharacte3 = this.charListFromCharacters({ 'Palette': this.paletteCache }, 0),
charPalette = _charListFromCharacte3.charList;

return _react2.default.createElement(
'div',
Expand All @@ -320,6 +428,20 @@ var CharacterMap = function (_React$Component) {
ref: this.bindInputRef
})
),
this.props.mostUsedPalette && this.paletteCache.length ? _react2.default.createElement(
'div',
{ className: 'charMap--last-used-palette-wrapper' },
_react2.default.createElement(
'label',
null,
mostUsedPaletteText + ': '
),
_react2.default.createElement(
'ul',
{ className: 'charMap--last-used-palette', 'aria-label': mostUsedPaletteText },
charPalette
)
) : '',
'' === search && _react2.default.createElement(
'ul',
{ className: 'charMap--category-menu', 'aria-label': categoriesLabelText },
Expand Down
13 changes: 9 additions & 4 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
'use strict';
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CharacterMap = undefined;
exports.deleteCharPaletteData = exports.CharacterMap = undefined;

var _CharacterMap = require('./component/CharacterMap');
var _CharacterMap = require("./component/CharacterMap");

var _CharacterMap2 = _interopRequireDefault(_CharacterMap);

var _utilities = require("./utilities");

var _utilities2 = _interopRequireDefault(_utilities);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.CharacterMap = _CharacterMap2.default;
exports.CharacterMap = _CharacterMap2.default;
exports.deleteCharPaletteData = _utilities2.default;
13 changes: 13 additions & 0 deletions dist/utilities.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
'use strict';

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = deleteCharPaletteData;
/**
* Utility function to programatically delete character palette
* local storagee data.
*/
function deleteCharPaletteData() {
localStorage.removeItem('tenupISCcharPalette');
}
15 changes: 9 additions & 6 deletions src/component/CharacterMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 } );
}

Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 83a27d0

Please sign in to comment.