mastodon/app/javascript/mastodon/features/ui/components/link_footer.js

import { connect } from 'react-redux';
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { Link, NavLink } from 'react-router-dom';
import { invitesEnabled, repository, source_url, version } from 'mastodon/initial_state';
import { logOut } from 'mastodon/utils/log_out';
import { openModal } from 'mastodon/actions/modal';
import { isStaff } from '../../../initial_state';

const messages = defineMessages({
  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
});

const mapDispatchToProps = (dispatch, { intl }) => ({
  onLogout() {
    dispatch(openModal('CONFIRM', {
      message  : intl.formatMessage(messages.logoutMessage),
      confirm  : intl.formatMessage(messages.logoutConfirm),
      onConfirm: () => logOut(),
    }));
  },
});

// const themeIsDark = true;
const displayMoreLinks = false;
export default @injectIntl
@connect(null, mapDispatchToProps)
class LinkFooter extends React.PureComponent {

  static propTypes = {
    displayMoreLinks     : PropTypes.bool,
    enableChristmasSnow  : PropTypes.bool,
    minimumWeekToShowSnow: PropTypes.number,
    snowActive           : PropTypes.bool,
    withHotkeys          : PropTypes.bool,
    snow                 : PropTypes.func,
    themeIsDark          : PropTypes.bool,
    theme                : PropTypes.string,
    onLogout             : PropTypes.func.isRequired,
    intl                 : PropTypes.object.isRequired,
  };
  static defaultProps = {
    displayMoreLinks     : false,
    enableChristmasSnow  : true,
    themeIsDark          : true,
    minimumWeekToShowSnow: 48,
  };

  handleLogoutClick = e => {
    e.preventDefault();
    e.stopPropagation();

    this.props.onLogout();

    return false;
  };

  constructor(props) {
    super(props);
    Date.prototype.getWeek = function () {
      var onejan = new Date(this.getFullYear(), 0, 1);
      return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7);
    };

    var weekNumber = (new Date()).getWeek();
    console.log('we are the week number weekNumber', weekNumber);
    // display snow during the last two weeks of the year
    const shouldWeDisplaySnow = (weekNumber > props.minimumWeekToShowSnow) && props.enableChristmasSnow;

    this.state = {
      displayMoreLinks   : props.displayMoreLinks,
      enableChristmasSnow: shouldWeDisplaySnow,
      theme              : props.theme,
    };

    // make snow effect
    if (shouldWeDisplaySnow) {
      import('../../../utils/snowstorm-min')
        .then((snowstorm) => {
          Window.snowstorm = snowstorm.default;
          this.state.snow = Window.snowstorm;
          // snowstorm.start();
          this.state.snowActive = true;
        })
        .catch((err) => console.error(err));
    }

  }

  toggleMoreLinks = () => {
    this.setState({ displayMoreLinks: !this.state.displayMoreLinks });
    console.log('this.state.displayMoreLinks', this.state.displayMoreLinks);
  };

  toggleSnow = () => {
    if (this.state.snow) {
      if (this.state.snowActive) {
        this.state.snow.stop();
        this.state.enableChristmasSnow = false;
      } else {
        this.state.snow.start();
        this.state.enableChristmasSnow = true;
      }
    }
  };

  changeTheme(newTheme) {
    console.log('change theme en ', newTheme);
  }

  render() {
    const HashTagNavlinks = ['Mastoart', 'OpenStreetMaps', 'Ironèmes', 'vélo'];
    const { withHotkeys } = this.props;
    var snowClasses = this.props.enableChristmasSnow ? 'snow-button active' : 'snow-button ';
    const navToTags = HashTagNavlinks.map(element => {
      return (
        <li
          className='tag-element'
          key={element}
        >

          <NavLink
            exact
            activeClassName='active'
            to={'/timelines/tag/' + element}
            title='Mastoart'
          >
            #{element}
          </NavLink >
        </li >
      );
    });

    return (

      <div className='links-started__footer desktop-only'>

        <a href='https://mastodon.cipherbliss.com/@tykayn'>
          <i className='fa fa-paper-plane' />
          contactez l'admin
        </a >
        <a href='https://liberapay.com/cipherbliss'>
          <i className='fa fa-coffee' /> Supportez
          Cipherbliss</a >
        <div className='extras'>

          {this.state.enableChristmasSnow && (
            <div
              onClick={this.toggleSnow}
              className='christmas-snow'
            >
              <div className={snowClasses}>
                <i
                  className='icon fa fa-snowflake-o'
                  aria-hidden='true'
                />
              </div >
              <div > Joyeuses fêtes!</div >

            </div >
          )}
          {isStaff && (
            <span className='staff-actions'>

              <a
                className='btn-warning'
                href='/admin/tags?pending_review=1'
              >
                <i className='fa fa-fire' />
                Trending hashtags
              </a >
              <a
                className='btn-warning'
                href='/admin/accounts'
              >
                <i className='fa fa-users' />
                Comptes
              </a >
            </span >
          )}
          <br />

          <a
            href='#external_utilities'
            onClick={this.toggleMoreLinks}
          >
            <i className='fa fa-list-ul' />
          </a >
          {this.state.displayMoreLinks && (

            <div
              className='external-utilities'
              id='#external_utilities'
            >
              <div >

                <a href='https://peertube.cipherbliss.com'> <i className='fa fa-play ' /> Videos</a >
                <a href='https://framadate.org/'> <i className='fa fa-calendar' /> FramaDate</a >
                <a href='https://framapad.org/'> <i className='fa fa-file-text' /> Pad</a >
                <a href='https://framagit.org/tykayn/mastodon'> <i className='fa fa-gitlab' /> Source</a >

              </div >
              <div className='suggested-tags'>
                <ul >
                  {navToTags}
                </ul >
              </div >
            </div >
          )}
        </div >

        <ul >
          {invitesEnabled && <li ><a
            href='/invites'
            target='_blank'
          ><FormattedMessage
              id='getting_started.invite'
              defaultMessage='Invite people'
          /></a > · </li >}
          {withHotkeys && <li >
            <Link to='/keyboard-shortcuts'><FormattedMessage
              id='navigation_bar.keyboard_shortcuts'
              defaultMessage='Hotkeys'
            /></Link > · </li >}
          <li ><a href='/auth/edit'><FormattedMessage
            id='getting_started.security'
            defaultMessage='Security'
          /></a > ·
          </li >
          <li ><a
            href='/about/more'
            target='_blank'
          ><FormattedMessage
              id='navigation_bar.info'
              defaultMessage='About this server'
          /></a > ·
          </li >
          <li ><a
            href='https://joinmastodon.org/apps'
            target='_blank'
          ><FormattedMessage
              id='navigation_bar.apps'
              defaultMessage='Mobile apps'
          /></a > ·
          </li >
          <li ><a
            href='/terms'
            target='_blank'
          ><FormattedMessage
              id='getting_started.terms'
              defaultMessage='Terms of service'
          /></a > ·
          </li >
          <li ><a
            href='/settings/applications'
            target='_blank'
          ><FormattedMessage
              id='getting_started.developers'
              defaultMessage='Developers'
          /></a > ·
          </li >
          <li ><a
            href='https://docs.joinmastodon.org'
            target='_blank'
          ><FormattedMessage
              id='getting_started.documentation'
              defaultMessage='Documentation'
          /></a > ·
          </li >
          <li ><a
            href='/auth/sign_out'
            onClick={this.handleLogoutClick}
          ><FormattedMessage
              id='navigation_bar.logout'
              defaultMessage='Logout'
          /></a ></li >
        </ul >

        <p >
          <FormattedMessage
            id='getting_started.open_source_notice'
            defaultMessage='Mastodon is open source software. You can contribute or report issues on the forge at {forge}.'
            values={{
              forge: <span ><a
                href={source_url}
                rel='noopener noreferrer'
                target='_blank'
              >{repository}</a > (v{version})</span >,
            }}
          />
        </p >
      </div >
    );
  }

};