pub.solar/_includes/HakkenDates.tsx

import { md, mdi } from '../filters.ts';

const days = {
  'friday': 0,
  'saturday': 1,
  'sunday': 2,
};

const day = 24 * 60 * 60 * 1000;
const week = 7 * day;
const endOfWeekend = 2 * day;

const getStartAndEnd = (date) => {
  const [ version, year ] = date.name.split(' ');
  const startingMonth = {
    Winter: 1,
    Spring: 4,
    Summer: 7,
    Autumn: 10,
  }[version];

  // We start searching on the 20th of that specific month
  const d = new Date();
  d.setFullYear(parseInt(year, 10));
  d.setMonth(startingMonth - 1);
  d.setDate(20);

  for (let i = 0; i < 14; i++) {
    const dateToTry = new Date(d.valueOf() + (i * day));
    if (dateToTry.getDay() !== 5) {
      continue;
    }

    const oneWeekLater = new Date(dateToTry.valueOf() + week);
    if (dateToTry.getMonth() === oneWeekLater.getMonth()) {
      continue;
    }

    return {
      start: dateToTry,
      end: new Date(dateToTry.valueOf() + endOfWeekend),
    };
  }
};

export default ({ data, lang, className }) => {
  const strings = data.strings;
  const dates = data.dates;
  const t = (o) => o?.[lang] || '';

  console.log(dates);

  return <div
    id={`dates-list-${lang}`}
    className={`ps-hakken-dates ${className}`}
  >
    <p>{t(strings.comingDates)}</p>
    <ul className="ps-hakken-dates--list">
      {dates.map(date => {
        const { start, end } = getStartAndEnd(date);
        const showStartMonth = start.getMonth() !== end.getMonth();
        const untilString = [
          t(strings.friday),
          start.getDate() + '.',
          showStartMonth ? t(strings.months[start.getMonth()]) : null,
          t(strings.until),
          t(strings.sunday),
          end.getDate() + '.',
          t(strings.months[end.getMonth()]),
        ].filter(n => n !== null).join(' ');

        const extraSchedule = date.extraSchedule || [];
        const schedule = [
          ...data.baseSchedule.filter(bs => !extraSchedule.find(es => bs.id === es.id)),
          ...extraSchedule,
        ].sort((a, b) => {
          const dayDiff = days[a.day] - days[b.day];
          if (dayDiff !== 0) {
            return dayDiff;
          };

          return a.time.localeCompare(b.time);
        });
        
        return <li className="ps-hakken-dates--item">
          <h3>{date.name} [{date.theme}]</h3>
          <div dangerouslySetInnerHTML={{ __html: md(t(date.description)) }}></div>
          <p class="ps-hakken-dates--meta">
            <span className="ps-hakken-dates--times">{t(strings.when)}: {untilString}.</span>
            <span className="ps-hakken-dates--location">
              {t(strings.where)}:{' '}
              <span dangerouslySetInnerHTML={{ __html: mdi(t(date.location))}}></span>
            </span>
          </p>
          <details className="ps-hakken-dates--schedule">
            <summary>{t(strings.schedule)}</summary>

            {schedule.map(entry => <div className="ps-hakken-dates--schedule-entry">
              <h5>{t(strings[entry.day])}{' '}{entry.time}</h5>
              <div dangerouslySetInnerHTML={{ __html: md(t(entry.title)) }}></div>
            </div>)}
          </details>
        </li>;
      })}
    </ul>
  </div>;
};