gatsby-core-theme 1.6.20 → 2.0.1

package/src/components/molecules/star-rating/index.js

@@ -1,20 +1,11 @@
 import React from 'react';
-import { FaStar, FaStarHalfAlt, FaRegStar } from 'react-icons/fa';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
 
 import styles from './star-rating.module.scss';
 import keygen from '~helpers/keygen';
 import { getRating } from '~helpers/rating';
 
-const StarRating = ({
-  numOfStars,
-  iconEmpty = <FaRegStar />,
-  iconHalf = <FaStarHalfAlt />,
-  iconFull = <FaStar />,
-  rating,
-  halfStars = true,
-}) => {
+const StarRating = ({ numOfStars, rating, halfStars = true }) => {
   const renderFarm = () => {
     const output = [];
     const rate = getRating(rating);
@@ -22,38 +13,31 @@ const StarRating = ({
     for (let i = 1; i < numOfStars + 1; i += 1) {
       if (i <= rate) {
         output.push(
-          <span className={`${styles.starItem} ${styles.starFull}`} key={keygen()}>
-            {iconFull}
+          <span className={styles.fullStar} key={keygen()}>
+            {' '}
           </span>
         );
       } else if (halfStars && i - 0.5 === rate) {
         output.push(
-          <span className={`${styles.starItem} ${styles.starHalf}`} key={keygen()}>
-            {iconHalf}
+          <span className={styles.halfStar} key={keygen()}>
+            {' '}
           </span>
         );
       } else {
         output.push(
-          <span className={`${styles.starItem} ${styles.starEmpty}`} key={keygen()}>
-            {iconEmpty}
+          <span className={styles.emptyStar} key={keygen()}>
+            {' '}
           </span>
         );
       }
     }
     return output;
   };
-  return (
-    <LazyLoad once>
-      <div className={styles.starRatingContainer}>{renderFarm()}</div>
-    </LazyLoad>
-  );
+  return <div className={styles.starRatingContainer}>{renderFarm()}</div>;
 };
 
 StarRating.propTypes = {
   numOfStars: PropTypes.oneOf([5, 10]).isRequired,
-  iconEmpty: PropTypes.element,
-  iconHalf: PropTypes.element,
-  iconFull: PropTypes.element,
   rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
   halfStars: PropTypes.bool,
 };

package/src/components/molecules/star-rating/star-rating.module.scss

@@ -7,4 +7,16 @@
       fill: var(--star-rating-color);
     }
   }
-}
+
+  .fullStar{
+    @include star(var(--full-star-fill-color), var(--full-star-border-color))
+  }
+
+  .halfStar{
+    @include half-star(var(--half-star-border-color),  var(--halfFull-star-fill-color), var(--halfEmpty-star-fill-color))
+  }
+
+  .emptyStar{
+    @include star(var(--empty-star-border-color), var(--empty-star-fill-color))
+  }
+}

package/src/components/molecules/star-rating/star-rating.test.js

@@ -7,8 +7,10 @@ import StarRating from '.';
 describe('StarRating Component', () => {
   test('render container with lazyload', () => {
     const { container } = render(<StarRating numOfStars={10} rating={6.5} />);
-    expect(container).toBeTruthy();
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
+
+    expect(container.querySelectorAll('.fullStar')).toHaveLength(6);
+    expect(container.querySelectorAll('.halfStar')).toHaveLength(1);
+    expect(container.querySelectorAll('.emptyStar')).toHaveLength(3);
   });
 });
 afterEach(() => {

package/src/components/molecules/tnc/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
 
 import Collapse from '~atoms/collapse';
 
@@ -13,7 +12,7 @@ const Tnc = ({
   initOpen = false,
   operator,
 }) => (
-  <LazyLoad once>
+  <>
     {hasCollapse ? (
       <Collapse
         onlyMobile={onlyMobile}
@@ -26,7 +25,7 @@ const Tnc = ({
     ) : (
       contentText
     )}
-  </LazyLoad>
+  </>
 );
 
 Tnc.propTypes = {

package/src/components/molecules/tnc/tnc.test.js

@@ -8,7 +8,6 @@ describe('Tnc Component', () => {
   test('render component', () => {
     const { container } = render(<Tnc />);
     expect(container).toBeTruthy();
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
   });
 });
 afterEach(() => {

package/src/components/molecules/toplist/default-row/index.js

@@ -1,18 +1,21 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MdCheck } from 'react-icons/md';
-
-import Button from '~atoms/button';
 import Bonus from '~atoms/bonus';
+import { Context } from '~context/TranslationsProvider';
 import SellingPoints from '~atoms/selling-points';
-
-import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
+import StarRating from '~molecules/star-rating';
+import Link from '~hooks/link';
+import OperatorCta from '~atoms/operator-cta';
+import { prettyTracker, imagePrettyUrl, translate } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './default-row.module.scss';
 
-const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
+const Row = ({ item, oneliner = 'main', layout = 'list', tracker = 'main' }) => {
   const prettyLink = prettyTracker(item);
+  const itemRating = item.rating;
+  const { translations } = useContext(Context) || {};
 
   return (
     <div className={`${styles.row} ${styles[layout]}`}>
@@ -33,26 +36,23 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
         rel="noreferrer"
         aria-label={`${item.name} Link`}
       >
-        <LazyImage alt={item.name} src={imagePrettyUrl(item.logo_url, 100)} />
+        <LazyImage
+          alt={item.name}
+          src={imagePrettyUrl(item.logo_url, 100)}
+          width={150}
+          height={40}
+        />
       </a>
       <Bonus item={item} tracker={oneliner} />
+      <StarRating numOfStars={5} rating={itemRating} />
       <SellingPoints icon={<MdCheck />} sellingPoints={item.selling_points} />
       <div>
-        <Button
-          to={`/${item.review_link}`}
-          primaryColor={false}
-          gtmClass="casinos-top-list-gtm btn-cta"
-          btnText="Omtale"
-        />
+        <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={item.review_link}>
+          {`${translate(translations, 'read_review', 'Review')}`}
+        </Link>
       </div>
       <div>
-        <Button
-          to={prettyLink}
-          btnText="Spill nå!"
-          gtmClass="casinos-top-list-gtm btn-cta"
-          primaryColor
-          isInternalLink={false}
-        />
+        <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
       </div>
     </div>
   );
@@ -61,11 +61,13 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
 Row.propTypes = {
   oneliner: PropTypes.string,
   layout: PropTypes.string,
+  tracker: PropTypes.string,
   item: PropTypes.shape({
     name: PropTypes.string,
     logo_url: PropTypes.string,
     selling_points: PropTypes.arrayOf(PropTypes.string),
     review_link: PropTypes.string,
+    rating: PropTypes.string,
     one_liners: PropTypes.shape({
       main: PropTypes.shape({
         one_liner: PropTypes.string,

package/src/components/pages/search/index.js

@@ -1,12 +1,13 @@
 /* eslint-disable arrow-body-style */
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import Search from '~molecules/search';
+import loadable from '@loadable/component';
 import Card from '~atoms/cards/default-card';
 import { translate } from '~helpers/getters';
 
 const SearchContent = ({ page }) => {
+  const Search = loadable(() => import('~molecules/search'));
+
   return (
     <Search
       pageSearchOptions={{

package/src/helpers/device-detect.js

@@ -14,12 +14,11 @@ export function isMobileDevice() {
   const isIos = () => Boolean(userAgent.match(/iPhone|iPad|iPod/i));
   const isOpera = () => Boolean(userAgent.match(/Opera Mini/i));
   const isWindows = () => Boolean(userAgent.match(/IEMobile/i));
-  const isIos13 = () =>
-    Boolean(
-        platform === 'MacIntel' &&
-        maxTouchPoints &&
-        maxTouchPoints === 5
-    );
+  const isIos13 = () => Boolean(platform === 'MacIntel' && maxTouchPoints && maxTouchPoints === 5);
 
   return Boolean(isAndroid() || isIos() || isOpera() || isWindows() || isIos13());
 }
+
+export function isNativeImageLazyLoadingSupported() {
+  return typeof HTMLImageElement !== 'undefined' && 'loading' in HTMLImageElement.prototype;
+}

package/src/helpers/events.js

@@ -0,0 +1,91 @@
+/* eslint-disable camelcase */
+/* eslint-disable import/prefer-default-export */
+import { zeroPadding } from './schedule';
+
+function isValidDate(d) {
+  return d instanceof Date && !Number.isNaN(d);
+}
+
+export function convertTimeZone(event) {
+  if (!event || !event.date || !event.date.time) {
+    return event;
+  }
+  const timeArr = event.date.time.split(':');
+
+  // ecmascript has month ranges between 0 - 11, that's why we do -1 to month_number
+  const currentTimeZoneDate = new Date(
+    Date.UTC(
+      event.date.year_number,
+      zeroPadding(event.date.month_number - 1, 2),
+      zeroPadding(event.date.day_number, 2),
+      timeArr[0],
+      timeArr[1]
+    )
+  );
+
+  if (!isValidDate(currentTimeZoneDate)) return event;
+
+  const time = `${zeroPadding(currentTimeZoneDate.getHours(), 2)}:${zeroPadding(
+    currentTimeZoneDate.getMinutes(),
+    2
+  )}`;
+
+  // in case the utc is 23:00, but user's timezone can get 00:00 so update the date object.
+  const day_number = zeroPadding(currentTimeZoneDate.getDate(), 2);
+  const month_number = zeroPadding(currentTimeZoneDate.getMonth() + 1, 2);
+  const date = `${day_number}-${month_number}-${zeroPadding(currentTimeZoneDate.getFullYear(), 2)}`;
+
+  const dateAttrs = {
+    date: {
+      ...event.date,
+      time,
+      month_number,
+      day_number,
+      date,
+    },
+  };
+
+  return { ...event, ...dateAttrs };
+}
+
+export function updateAllTimezones(relation) {
+  const relationSchedule = relation?.schedule;
+  const relationFeaturedEvents = relation?.featured_events;
+  const relationShowcasedEvents = relation?.showcased_events;
+
+  // formated timezone schedule
+  const schedule = relationSchedule
+    ? Object.keys(relationSchedule).reduce((acc, dateKey) => {
+        const { tournaments } = relationSchedule[dateKey] || {};
+
+        const formattedTournaments = Object.keys(tournaments).reduce(
+          (tournamentAcc, currentTournamentKey) => {
+            const league = tournaments[currentTournamentKey];
+            const formattedEvents = league.events.map((event) => convertTimeZone(event));
+            tournamentAcc[currentTournamentKey] = { ...league, events: formattedEvents };
+            return tournamentAcc;
+          },
+          {}
+        );
+
+        acc[dateKey] = { ...relation.schedule[dateKey], tournaments: formattedTournaments };
+        return acc;
+      }, {})
+    : {};
+
+  // formated timezone featured events
+  const featured_events = relationFeaturedEvents?.map((event) => convertTimeZone(event)) || [];
+
+  // formated timezone showcased events
+  const showcased_events = relationShowcasedEvents?.map((event) => convertTimeZone(event)) || [];
+
+  // format timezone for relation.event
+  const event = convertTimeZone(relation?.event);
+
+  const updatedObject = { ...relation, schedule, featured_events, showcased_events };
+  if (event) {
+    updatedObject.event = event;
+  }
+
+  return updatedObject;
+}

package/src/helpers/generators.js

@@ -21,17 +21,25 @@ export function generateTrackerLink(operator, trackerType) {
   }
 }
 
-export function generateMetaTitle(metaTitle, translations) {
+export function generateMetaString(metaString, translations, props) {
   const date = new Date();
+  const day = date.getDate();
   const month = months[date.getMonth()];
   const year = date.getFullYear();
+  const regex =
+    /\[MONTH\]|\[YEAR\]|\[currentyear\]|\[sitename\]|\[currentmonth\]|\[title\]|\[currentdate\]/gi;
 
-  return metaTitle.replace(
-    /\[MONTH\]|\[YEAR\]/gi,
+  return metaString.replace(
+    regex,
     (match) =>
       ({
         '[MONTH]': (translations && translations[month]) || month,
         '[YEAR]': year,
+        '[currentdate]': `${(translations && translations[month]) || month} ${day}, ${year}`,
+        '[currentmonth]': (translations && translations[month]) || month,
+        '[currentyear]': year,
+        '[sitename]': (props && props.siteName) || '',
+        '[title]': (props && props.siteTitle) || '',
       }[match])
   );
 }

package/src/helpers/generators.test.js

@@ -1,4 +1,4 @@
-import { generateTrackerLink, generateMetaTitle } from './generators';
+import { generateTrackerLink, generateMetaString } from './generators';
 import { months } from '~constants/common';
 
 describe('Generate Tracker Link Helper', () => {
@@ -17,24 +17,46 @@ describe('Generate Tracker Link Helper', () => {
 });
 
 describe('Generate Meta Title Helper', () => {
-  test('generateMetaTitle main', () => {
-    const metaTitle = generateMetaTitle('meta title [MONTH] [YEAR]');
+  test('generateMetaString uppercase', () => {
+    const metaString = generateMetaString('meta title [MONTH] [YEAR]');
     const date = new Date();
-    expect(metaTitle).not.toContain('[MONTH]');
-    expect(metaTitle).not.toContain('[YEAR]');
-    expect(metaTitle).toContain(date.getFullYear());
-    expect(metaTitle).toContain(months[date.getMonth()]);
+
+    expect(metaString).not.toContain('[MONTH]');
+    expect(metaString).not.toContain('[YEAR]');
+    expect(metaString).toContain(date.getFullYear());
+    expect(metaString).toContain(months[date.getMonth()]);
+  });
+  test('generateMetaString lowercase', () => {
+    const metaString = generateMetaString(
+      'meta title [currentdate] [currentmonth] [currentyear] [sitename] [title]',
+      null,
+      {
+        siteName: 'Site Name',
+        siteTitle: 'Site Title',
+      }
+    );
+    const date = new Date();
+
+    expect(metaString).not.toContain('[currentdate]');
+    expect(metaString).not.toContain('[currentmonth]');
+    expect(metaString).not.toContain('[currentyear]');
+    expect(metaString).not.toContain('[sitename]');
+    expect(metaString).not.toContain('[title]');
+    expect(metaString).toContain(date.getDate());
+    expect(metaString).toContain(months[date.getMonth()]);
+    expect(metaString).toContain(date.getFullYear());
+    expect(metaString).toContain('Site Name');
+    expect(metaString).toContain('Site Title');
   });
-  test('generateMetaTitle translated', () => {
+  test('generateMetaString translated', () => {
     const translateMonths = months.reduce(
       (translated, month) => ({ ...translated, [month]: `translate${month.substring(0, 1)}` }),
       {}
     );
-    const metaTitle = generateMetaTitle('meta title [MONTH] [YEAR]', translateMonths);
+    const metaString = generateMetaString('meta title [MONTH]', translateMonths);
     const date = new Date();
 
-    expect(metaTitle).not.toContain('[MONTH]');
-    expect(metaTitle).not.toContain('[YEAR]');
-    expect(metaTitle).toContain(translateMonths[months[date.getMonth()]]);
+    expect(metaString).not.toContain('[MONTH]');
+    expect(metaString).toContain(translateMonths[months[date.getMonth()]]);
   });
 });

package/src/helpers/processor/sports.js

@@ -6,11 +6,9 @@ import {
   filterEvents,
   findTournaments,
   getSortedEvents,
-  formatEvents,
 } from '../schedule';
 
 export function prepareSportsData(sportsData) {
-  sportsData.events = formatEvents(sportsData.events);
   Object.keys(sportsData.tournaments).forEach((key) => {
     if (sportsData.tournaments[key].events) {
       sportsData.tournaments[key].events = filterEvents(

package/src/helpers/rating.js

@@ -1,3 +1,5 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable no-unused-expressions */
 export const roundHalf = (num) => {
   return Math.round(num * 2) / 2;
 };

package/src/helpers/schedule.js

@@ -120,39 +120,3 @@ export function filterEvents(tournamentEvents, events) {
 
   return futureEvents;
 }
-
-export function changeEventHour(event, hour = 1) {
-  if (!event || !event.date || !event.date.time) {
-    return event;
-  }
-
-  const timeArr = event.date.time.split(':');
-  timeArr[0] = Number(timeArr[0]) - hour;
-  event.date.time = timeArr.join(':');
-
-  return event;
-}
-
-export function formatEvents(events) {
-  const eventsArr = Object.values(events);
-  const siteName = process.env.GATSBY_SITE_NAME;
-  let prefix = '0';
-
-  switch (siteName) {
-    case 'sefodbold.dk':
-    case 'sesport.dk':
-    case 'watchfooty.co.uk':
-    case 'bekijksport.nl':
-    case 'livestreamsvoetbal.nl':
-      prefix = 1;
-      break;
-    default:
-      prefix = 0;
-  }
-
-  return eventsArr.reduce((acc, current) => {
-    const event = changeEventHour(current, prefix);
-    acc[event.id] = event;
-    return acc;
-  }, {});
-}

package/src/hooks/lazy-image/index.js

@@ -1,39 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
-// import LazyLoad from 'react-lazyload';
 import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
 
-// When to use this component:
-// 1. If you have 1 image to lazyload
-// 2. If you have images for different breakpoints and want the browser to decide when to serve the images based on the device, bandwidth, etc.
 export default function LazyImage({
   height,
   width,
-  // offset = 200,
   style = {},
   className,
   src = '#',
-  // srcSet = '',
   alt = '',
-  // sizes,
-  // defaultImg,
-  // once = false,
+  defaultImg,
+  loading = 'lazy',
 }) {
-  // const [errorImage, setErrorImage] = useState(false);
+  const [errorImage, setErrorImage] = useState(false);
 
-  // if ((defaultImg && !src) || errorImage === true) {
-  //   return defaultImg;
-  // }
+  if ((defaultImg && !src) || errorImage === true) {
+    return defaultImg;
+  }
 
-  return (
-    <>
-      {/* <LazyLoad
-        height={`${height}px`}
-        width={`${width}px`}
-        offset={offset}
-        debounce={0}
-        once={once}
-      >
+  if (!isNativeImageLazyLoadingSupported()) {
+    const LazyLoad = loadable(() => import(`react-lazyload`));
+    return (
+      <LazyLoad height={`${height}px`} width={`${width}px`} debounce={0}>
         <img
           src={src}
           className={className}
@@ -41,36 +31,32 @@ export default function LazyImage({
           width={width}
           alt={alt}
           style={style}
-          srcSet={srcSet}
-          sizes={sizes}
-          onError={() => setErrorImage(true)}
         />
-      </LazyLoad> */}
-      {/* <noscript> */}
-      <img
-        src={src}
-        loading="lazy"
-        className={className}
-        height={height}
-        width={width}
-        alt={alt}
-        style={style}
-      />
-      {/* </noscript> */}
-    </>
+      </LazyLoad>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      loading={loading}
+      className={className}
+      height={height}
+      width={width}
+      alt={alt}
+      style={style}
+      onError={() => setErrorImage(true)}
+    />
   );
 }
 
 LazyImage.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
-  // offset: PropTypes.number,
   style: PropTypes.shape({}),
   className: PropTypes.string,
   src: PropTypes.string,
   alt: PropTypes.string,
-  // sizes: PropTypes.string,
-  // srcSet: PropTypes.string,
-  // defaultImg: PropTypes.element,
-  // once: PropTypes.bool,
+  defaultImg: PropTypes.element,
+  loading: PropTypes.string,
 };

package/src/hooks/tabs/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { forceCheck } from 'react-lazyload';
-import TabList from './tab/tab-list';
+import loadable from '@loadable/component';
 import styles from './tabs.module.scss';
 
 const Tabs = ({
@@ -19,6 +19,8 @@ const Tabs = ({
     showAll ? showAllTabId : `${children[0].props.label}_0`
   );
 
+  const TabList = showTabs ? loadable(() => import('./tab/tab-list')) : null;
+
   const tabHeaderClass = `${styles.tabsHeader} ${!HeaderComp && styles.tabsOnly} ${
     styles[headerClass]
   } ${tabsAlign === 'right' && styles.invertOrder}`;
@@ -31,7 +33,7 @@ const Tabs = ({
   return (
     <>
       <div className={tabHeaderClass}>
-        {showTabs && (
+        {TabList && (
           <TabList
             onClick={onClickTabItem}
             items={children}