NoveltyLabel - компонент лейбла, отображаемого для пользователя рядом с новым функционалом в сервисе. Как только пользователь кликает по новому функционалу, либо переходит на нужную ссылку, информация сохраняется в localStorage и лейбл более не отображается

LocalStorage.js

export default class LocalStorage {
    static get(name) {
        return localStorage[name] ? JSON.parse(localStorage[name]) : undefined;
    }

    static set(name, value) {
        localStorage[name] = JSON.stringify(value);
    }

    static delete(name) {
        delete localStorage[name];
    }
}

NoveltyLabel.js

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';

import style from './style.less';
import NoveltyService from '../../services/NoveltyService';

const cn = classnames.bind(style);

const NoveltyLabel = ({ className, widgetId, version }) => {
    NoveltyService.updateVersion(widgetId, version);

    if (!NoveltyService.idExist(widgetId)) {
        return <span className={cn('novelty', className)}>Новое</span>;
    }

    return null;
}

NoveltyLabel.propTypes = {
    className: PropTypes.string,
    widgetId: PropTypes.string.isRequired,
    version: PropTypes.string.isRequired
};

NoveltyLabel.defaultProps = {
    version: '0.0.1'
};

export default NoveltyLabel;
 

NoveltyLabel.test.js

describe('Более явное обозначение новинок', () => {
    let localStore = [
        'component_one',
        'component_two'
    ];

    it('Отображается при отсутствии id ссылки в localStorage', (componentId = 'component_new') => {
        expect(localStore.indexOf(componentId)).equal(-1);
    });
});

NoveltyService.js

import LocalStorage from './LocalStorage';

const storItems = 'MdNoveltyComponentIds';
const storVersions = 'MdNoveltyVersion';

const componentIds = LocalStorage.get(storItems) || [];

let versionItems = LocalStorage.get(storVersions) || {};

export default class NoveltyService {
    constructor() {
        this.setVersion = setVersion;
    }

    static idExist(itemId) { return componentIds.indexOf(itemId) !== -1; }

    static changeStorage(arr) { return LocalStorage.set(storItems, arr); }

    static setVersion(itemId, version) {
        const newVersion = {};

        newVersion[itemId] = version;

        versionItems = typeof(versionItems) !== 'object' ? {} : versionItems;

        return LocalStorage.set(storVersions, Object.assign(versionItems, newVersion));
    }
    
    static setId(itemId) {
        const idsArray = [...componentIds];

        !this.idExist(itemId) ? idsArray.push(itemId) : null;

        this.changeStorage(idsArray);
    }

    static removeId(itemId) {
        const idsArray = componentIds;

        this.idExist(itemId) ? idsArray.splice(idsArray.indexOf(itemId), 1) : null;
        this.changeStorage(idsArray); 
    }

    static updateVersion(itemId, version) {
        versionItems = typeof(versionItems) !== 'object' ? {} : versionItems;

        !versionItems[itemId] && this.setVersion(itemId, version);

        if(versionItems[itemId] !== version) {
            this.setVersion(itemId, version);

            return this.removeId(itemId);
        }

        return null;
    }
}

style.less

.novelty {
    background-color: green;
    width: 46px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Arial';
    font-weight: 700;
    font-size: 11px;
}