import React from 'react';
import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import IconButton from '../../../components/icon_button';

const storageKey = 'announcements_dismissed';

class Announcements extends React.PureComponent {

  static propTypes = {
    account: ImmutablePropTypes.map.isRequired,
  };

  componentDidUpdate (prevProps, prevState) {
    if (prevState.dismissed !== this.state.dismissed) {
      try {
        localStorage.setItem(storageKey, JSON.stringify(this.state.dismissed));
      } catch (e) {}
    }
  }

  componentWillMount () {
    try {
      const dismissed = JSON.parse(localStorage.getItem(storageKey));
      this.state = { dismissed: Array.isArray(dismissed) ? dismissed : [] };
    } catch (e) {
      this.state = { dismissed: [] };
    }

    const announcements = [];
    announcements.push(
      {
        id: 25,
        icon: '/announcements/info_03.png',
        body: 'グラブル4周年アプデ特集！',
        link: [
          {
            inline: false,
            href: 'https://gran-matome.com/4th-anniversary',
            body: '記事をみる',
          },
        ],
      },
      {
        id: 26,
        icon: '/announcements/info_04.png',
        body: '4周年記念アンケート企画開催中！',
        link: [
          {
            inline: false,
            href: 'https://goo.gl/forms/oTrD0Z8Qi5RaedW33',
            body: 'アンケートに参加する',
          },
        ],
      },
      {
        id: 15,
        icon: '/announcements/info_02.png',
        body: '【重要なお知らせ】mimumedonの利用におけるガイドラインを策定しました',
        link: [
          {
            inline: false,
            href: 'https://mimumedon.com/about/more',
            body: 'ガイドラインをみる',
          },
        ],
      }
      // NOTE: id: 26 まで使用した
    );

    this.announcements = Immutable.fromJS(announcements);
  }

  handleDismiss = (event) => {
    const id = +event.currentTarget.getAttribute('title');

    if (Number.isInteger(id)) {
      this.setState({ dismissed: [].concat(this.state.dismissed, id) });
    }
  }

  render () {
    return (
      <ul className='announcements'>
        {this.announcements.map(announcement => this.state.dismissed.indexOf(announcement.get('id')) === -1 && (
          <li key={announcement.get('id')}>
            <div className='announcements__icon'>
              <img src={announcement.get('icon')} alt='' />
            </div>
            <div className='announcements__body'>
              <div className='announcements__body__dismiss'>
                <IconButton icon='close' title={`${announcement.get('id')}`} onClick={this.handleDismiss} />
              </div>
              <p>{announcement.get('body')}</p>
              <p>
                {announcement.get('link').map((link) => {
                  const classNames = ['announcements__link'];

                  if (link.get('inline')) {
                    classNames.push('announcements__link-inline');
                  }

                  return (
                    <a className={classNames.join(' ')} key={link.get('href')} href={link.get('href')} target='_blank'>
                      {link.get('body')}
                    </a>
                  );
                })}
              </p>
            </div>
          </li>
        ))}
      </ul>
    );
  }

};

export default Announcements;

@@ -1162,290 +1162,8 @@
   %7B%0A
-        id: 26,%0A        icon: '/announcements/info_04.png',%0A        body: '4%E5%91%A8%E5%B9%B4%E8%A8%98%E5%BF%B5%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E4%BC%81%E7%94%BB%E9%96%8B%E5%82%AC%E4%B8%AD%EF%BC%81',%0A        link: %5B%0A          %7B%0A            inline: false,%0A            href: 'https://goo.gl/forms/oTrD0Z8Qi5RaedW33',%0A            body: '%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%81%AB%E5%8F%82%E5%8A%A0%E3%81%99%E3%82%8B',%0A          %7D,%0A        %5D,%0A      %7D,%0A      %7B%0A
     

Modify announcements data