poi-plugin-senka-calc/views/calendar.js

Ranking point calculator for poi

"use strict";

exports.__esModule = true;
exports.Calender = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactDayPicker = _interopRequireDefault(require("react-day-picker"));

var _moment = _interopRequireDefault(require("react-day-picker/moment"));

var _datetime = require("@blueprintjs/datetime");

var _core = require("@blueprintjs/core");

var _classnames = _interopRequireDefault(require("classnames"));

var _common = require("./common");

var _reactI18next = require("react-i18next");

var _reactRedux = require("react-redux");

var _selectors = require("../selectors");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _momentTimezone = _interopRequireDefault(require("moment-timezone"));

var _util = require("../lib/util");

var _const = require("../lib/const");

var _selectors2 = require("views/utils/selectors");

var _lodash = require("lodash");

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const FullWidth = _styledComponents.default.div.withConfig({
  displayName: "calendar__FullWidth",
  componentId: "sc-1k9bbtx-0"
})(["width:100%;"]);

const BPDatePicker = (0, _styledComponents.default)(FullWidth).withConfig({
  displayName: "calendar__BPDatePicker",
  componentId: "sc-1k9bbtx-1"
})(["background:#FFFFFF20 !important;.bp4-dark &,.bp5-dark &{background:", " !important;}"], _core.Colors.DARK_GRAY3 + '20');
const DayPickerFull = (0, _styledComponents.default)(_reactDayPicker.default).withConfig({
  displayName: "calendar__DayPickerFull",
  componentId: "sc-1k9bbtx-2"
})(["width:100%;& .DayPicker-Month{width:calc(100% - 10px);}"]);

const DateContainer = _styledComponents.default.div.withConfig({
  displayName: "calendar__DateContainer",
  componentId: "sc-1k9bbtx-3"
})(["font-weight:700;margin-bottom:4px;"]);

const SenkaContainer = _styledComponents.default.div.withConfig({
  displayName: "calendar__SenkaContainer",
  componentId: "sc-1k9bbtx-4"
})(["font-size:90%;"]);

const Calender = () => {
  const {
    t
  } = (0, _reactI18next.useTranslation)('poi-plugin-senka-calc');
  const {
    experienceHistory = {}
  } = (0, _reactRedux.useSelector)(_selectors.pluginDataSelector);
  const config = (0, _reactRedux.useSelector)(_selectors2.configSelector);
  const locale = (0, _lodash.get)(config, 'poi.misc.language', navigator.language);
  const getSenkaByDate = (0, _react.useCallback)(date => {
    if (Object.keys(experienceHistory).length === 0) {
      return 0;
    }

    const firstRecord = parseInt(Object.keys(experienceHistory)[0]);

    const todayRefreshTs = _momentTimezone.default.tz('Asia/Tokyo').startOf('day').add(2, 'hour');

    const now = _momentTimezone.default.tz('Asia/Tokyo');

    const yesterday = _momentTimezone.default.tz('Asia/Tokyo').subtract(1, 'day');

    const isToday = now.isSameOrAfter(todayRefreshTs) && date === now.date() || now.isBefore(todayRefreshTs) && date === yesterday.date();

    if (date > now.date() || date === now.date() && now.isBefore(todayRefreshTs)) {
      return '-';
    }

    let startDateNo = Math.max(firstRecord, (0, _util.getDateNo)(_momentTimezone.default.tz('Asia/Tokyo').date(date).hour(3).toDate()));
    let endDateNo = isToday ? 1000 : Math.max(firstRecord, (0, _util.getDateNo)(_momentTimezone.default.tz('Asia/Tokyo').date(date + 1).hour(3).toDate()));

    while (experienceHistory[startDateNo] == null && startDateNo > firstRecord) {
      startDateNo--;
    }

    while (experienceHistory[endDateNo] == null && endDateNo > firstRecord) {
      endDateNo--;
    }

    const startExperience = experienceHistory[startDateNo] || 0;
    const endExperience = experienceHistory[endDateNo] || 0;
    return (Math.max(0, endExperience - startExperience) * _const.EXPERIENCE_TO_SENKA_RATE).toFixed(1);
  }, [experienceHistory]);
  const renderDay = (0, _react.useCallback)(day => {
    const date = day.getDate();
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _datetime.Classes.DATEPICKER_DAY_WRAPPER
    }, /*#__PURE__*/_react.default.createElement(DateContainer, null, date), /*#__PURE__*/_react.default.createElement(SenkaContainer, null, getSenkaByDate(date)));
  }, [getSenkaByDate]);

  const current = _momentTimezone.default.tz('Asia/Tokyo');

  const startOfSenka = _momentTimezone.default.tz('Asia/Tokyo').startOf('month').add(2, 'hour');

  const representDate = current.isSameOrBefore(startOfSenka) ? current.toDate() : _momentTimezone.default.tz('Asia/Tokyo').subtract(2, 'hour').toDate();
  return /*#__PURE__*/_react.default.createElement(_common.Container, null, /*#__PURE__*/_react.default.createElement(_common.Title, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
    icon: "calendar",
    style: {
      paddingRight: 8
    }
  }), t('Calendar')), /*#__PURE__*/_react.default.createElement(BPDatePicker, {
    className: (0, _classnames.default)(_datetime.Classes.DATEPICKER, _core.Classes.ELEVATION_1)
  }, /*#__PURE__*/_react.default.createElement(FullWidth, {
    className: _datetime.Classes.DATEPICKER_CONTENT
  }, /*#__PURE__*/_react.default.createElement(DayPickerFull, {
    canChangeMonth: true,
    enableOutsideDaysClick: false,
    localeUtils: _moment.default,
    locale: locale,
    renderDay: renderDay,
    selectedDays: representDate
  }))));
};

exports.Calender = Calender;