gatsby-core-theme 11.0.5 → 12.0.0-beta.2

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+# [12.0.0-beta.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v12.0.0-beta.1...v12.0.0-beta.2) (2022-09-07)
+
+
+### Bug Fixes
+
+* passed serverData to main and header component ([946db07](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/946db077f48fadb7714a8a66c2ac1520a9c4ce0e))
+* passed serverData to main and header component ([2f70176](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2f70176c7075a71ed28faf87f1c037a0b05b9da2))
+
+
+* Merge branch 'tm-2643-sports-site' into 'beta' ([f9e3c03](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f9e3c03264e0e7dfebaa87c68b5997408bf4169e))
+
+# [12.0.0-beta.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v11.0.6...v12.0.0-beta.1) (2022-09-07)
+
+
+### Bug Fixes
+
+* added checks to prevent useless p and div elements ([85e2197](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/85e2197b7dc8d5bedf5c9ce9d9fb0b3f1efa4ae5))
+* aligned beta branch with master ([e5461e0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e5461e04e40441793f58a599e63c946348284d37))
+* sports site changes ([d833e1e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d833e1ee8b8b7ce6359954e1de004292572a76b9))
+
+
+### chore
+
+* **release:** 10.0.2-beta.1 [skip ci] ([fdac7b3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fdac7b3866a7038758f8b72f5a56dde928b85365))
+
+
+* Merge branch 'tm-2643-sports-site' into 'beta' ([859b8db](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/859b8db7d2b87efa47b557ba3cec5cb412b3e0d3))
+* Merge branch 'tm-2987-gatsby-upgrade' into 'beta' ([59f9b28](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/59f9b288f99cd61f3a3064480861efc9f1263559))
+
+
+### Features
+
+* added sports site SSR logic ([15cc0d2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/15cc0d205bd1f9b3f95333b331481f07a4c91c90))
+
+## [11.0.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v11.0.5...v11.0.6) (2022-09-02)
+
+
+### Bug Fixes
+
+* update button and author-box ([3eec6da](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3eec6da80b37568a47ead1a15ad1811612b10828))
+* update button component ([60cd4d1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/60cd4d1148517bdd4ef51cc265561b8137cfdcfa))
+* update button component in order to accept props ([25cc1e3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/25cc1e31df9e468be966e3b1a7414e84dc5bace3))
+
+
+* Merge branch 'tm-3024-contact-us' into 'master' ([46e0b23](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/46e0b238e9c0c4da12a90c2dd072e6fc0fb039c7))
+
 ## [11.0.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v11.0.4...v11.0.5) (2022-08-31)
 
 

package/gatsby-config.js

@@ -42,7 +42,6 @@ module.exports = {
         ],
       },
     },
-    // `gatsby-plugin-preact`,
     `gatsby-plugin-image`,
   ],
 };

package/gatsby-node.esm.js

@@ -169,7 +169,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
   translations = processed.relations.translations[languageKey];
   htmlSitemapPages = processSitemapPages(pages, processed.site_markets);
 
-  if (['rage_seo', 'rage_ppc'].includes(response.general.type)) {
+  if (['rage_seo', 'rage_ppc', 'sports'].includes(response.general.type)) {
     sports = Object.keys(response.relations['sports_data'].sports).map(
       (key) => response.relations['sports_data'].sports[key]
     );
@@ -248,9 +248,15 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
             context: { ...contextData, sitemapData: { ...htmlSitemapPages }, templates },
           });
         } else {
+          const component =
+            (page.type === 'event' || page.type === 'tournament') &&
+            ['sports'].includes(response.general.type)
+              ? require.resolve('./src/components/app-ssr.js')
+              : require.resolve('./src/components/app.js');
+
           createPage({
             path: page.path.charAt(0) === '/' ? page.path : `/${page.path}`,
-            component: require.resolve('./src/components/app.js'),
+            component,
             context: {
               ...contextData,
               isPreview: page.path === 'preview',
@@ -261,6 +267,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
     });
   });
 
+  // Generating Affiliate Tracker Links
   if (['rage_seo', 'rage_ppc'].includes(response.general.type)) {
     Object.keys(
       (processed.relations &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "11.0.5",
+  "version": "12.0.0-beta.2",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/app-ssr.js

@@ -0,0 +1,97 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { globalHistory } from '@reach/router';
+import TranslationsProvider from '~context/TranslationsProvider';
+import Body from '~pages/body';
+import Head from '~organisms/head';
+import { getAPIData } from '~helpers/server-data';
+
+const AppSSR = ({ pageContext, serverData }) => {
+  const { translations = {}, isPreview } = pageContext;
+  const [previewContext, setPreviewContext] = useState({});
+  const [isLoading, setIsLoading] = useState({});
+  async function getData(searchParams, staticPath = null) {
+    const { getPreview } = await import('~helpers/api');
+    getPreview(
+      pageContext.siteName,
+      !staticPath ? searchParams.get('path') || '/' : staticPath,
+      pageContext
+    ).then((previewResponse) => {
+      if (previewResponse.page) {
+        // siteInfo and siteSchema are added to page for schemaGenerator()
+        previewResponse.page.siteInfo = pageContext.siteInfo;
+        previewResponse.page.siteSchema = pageContext.siteSchema;
+      }
+      setPreviewContext(previewResponse);
+      setIsLoading(false);
+    });
+  }
+
+  useEffect(() => {
+    if (isPreview) {
+      setIsLoading(true);
+      const searchParams =
+        typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
+      if (!searchParams.get('path')) {
+        window.location = `${window.location.origin}/preview?path=/`;
+      }
+      getData(searchParams);
+      globalHistory.listen(({ location }) => {
+        setIsLoading(true);
+
+        getData(null, location.search.replace('?path=', ''));
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (isPreview) {
+    if (isLoading) {
+      return 'Loading...';
+    }
+  }
+
+  return (
+    <>
+      <TranslationsProvider value={{ translations }}>
+        <Head
+          page={isPreview ? previewContext.page : pageContext.page}
+          siteInfo={isPreview ? previewContext.siteInfo : pageContext.siteInfo}
+        />
+        <Body pageContext={isPreview ? previewContext : pageContext} serverData={serverData} />
+      </TranslationsProvider>
+    </>
+  );
+};
+
+AppSSR.propTypes = {
+  pageContext: PropTypes.shape({
+    siteName: PropTypes.string,
+    isTracker: PropTypes.bool,
+    isPreview: PropTypes.bool,
+    page: PropTypes.shape({
+      id: PropTypes.number,
+      path: PropTypes.string,
+    }),
+    translations: PropTypes.object,
+    siteInfo: PropTypes.shape({
+      robots_txt: PropTypes.string,
+      site_logo: PropTypes.string,
+      site_name: PropTypes.string,
+    }),
+    siteSchema: PropTypes.shape({
+      site_name: PropTypes.string,
+    }),
+  }),
+  serverData: PropTypes.shape({
+    props: PropTypes.string,
+  }),
+};
+
+export async function getServerData({ pageContext, url }) {
+  let res = '';
+  res = await getAPIData(pageContext.page, url);
+  return res;
+}
+export default AppSSR;

package/src/components/app.js

@@ -55,10 +55,6 @@ const App = ({ pageContext }) => {
 
   const TrackerContent = isTracker ? loadable(() => import(`~pages/tracker`)) : null;
 
-  if (pageContext.siteInfo?.site_name === 'playcasino.co.za') {
-    translations.play_now = 'Play now';
-  }
-
   return isTracker ? (
     <>
       <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />

package/src/components/atoms/author-box/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { translate, imagePrettyUrl, getAltText } from '~helpers/getters';
 import styles from './author-box.module.scss';
 import LazyImage from '~hooks/lazy-image';
-import Link from '~hooks/link';
+import Button from '~atoms/button';
 import { Context } from '~context/TranslationsProvider';
 
 export default function AuthorBox({ author, preElement = null }) {
@@ -35,72 +35,77 @@ export default function AuthorBox({ author, preElement = null }) {
             />
           )}
           <span className={styles.name}>{author.name}</span>
-          <p className={styles.title}>{author.author_title}</p>
+          {author.author_title && <p className={styles.title}>{author.author_title}</p>}
         </div>
         <div className={styles.description}>
           <div className={styles.links}>
-            <p className={styles.contactLinks}>
-              {author.email_address && (
-                <a
-                  href={`mailto:${author.email_address}`}
-                  className="author-gtm"
-                  target="_blank"
-                  rel="nofollow noreferrer"
-                >
-                  {translate(translations, 'email', 'Email')}
-                </a>
-              )}
-              {author.personal_website && (
-                <a
-                  href={author.personal_website}
-                  className="author-gtm"
-                  target="_blank"
-                  rel="nofollow noreferrer"
-                >
-                  {translate(translations, 'website', 'Website')}
-                </a>
-              )}
-              {author.additional_url && (
-                <a
-                  href={author.additional_url}
-                  className="author-gtm"
-                  target="_blank"
-                  rel="nofollow noreferrer"
-                >
-                  {translate(translations, 'contact', 'Contact')}
-                </a>
-              )}
-            </p>
-            <p className={styles.socialIcons}>
-              {socialLinks
-                .filter((socialLink) => socialLink.link)
-                .map((filteredLinks) => (
-                  // eslint-disable-next-line jsx-a11y/control-has-associated-label
+            {(author.email_address || author.personal_website || author.additional_url) && (
+              <p className={styles.contactLinks}>
+                {author.email_address && (
                   <a
-                    href={filteredLinks.link}
+                    href={`mailto:${author.email_address}`}
                     className="author-gtm"
                     target="_blank"
                     rel="nofollow noreferrer"
-                    key={`author-box-link-${filteredLinks.id}`}
-                    aria-label={`${filteredLinks.id} Link`}
                   >
-                    {filteredLinks.icon}
+                    {translate(translations, 'email', 'Email')}
                   </a>
-                ))}
-            </p>
+                )}
+                {author.personal_website && (
+                  <a
+                    href={author.personal_website}
+                    className="author-gtm"
+                    target="_blank"
+                    rel="nofollow noreferrer"
+                  >
+                    {translate(translations, 'website', 'Website')}
+                  </a>
+                )}
+                {author.additional_url && (
+                  <a
+                    href={author.additional_url}
+                    className="author-gtm"
+                    target="_blank"
+                    rel="nofollow noreferrer"
+                  >
+                    {translate(translations, 'contact', 'Contact')}
+                  </a>
+                )}
+              </p>
+            )}
+            {socialLinks.length > 0 && (
+              <p className={styles.socialIcons}>
+                {socialLinks
+                  .filter((socialLink) => socialLink.link)
+                  .map((filteredLinks) => (
+                    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+                    <a
+                      href={filteredLinks.link}
+                      className="author-gtm"
+                      target="_blank"
+                      rel="nofollow noreferrer"
+                      key={`author-box-link-${filteredLinks.id}`}
+                      aria-label={`${filteredLinks.id} Link`}
+                    >
+                      {filteredLinks.icon}
+                    </a>
+                  ))}
+              </p>
+            )}
             <div
               className={styles.biography}
               dangerouslySetInnerHTML={{ __html: author.biography }}
             />
           </div>
           {author.profile_page_path && (
-            <Link
+            <Button
+              primaryColor={false}
               to={author.profile_page_path}
-              title="Read More"
+              btnText="Read More"
               className={`${styles.button} author-gtm`}
             >
               {translate(translations, 'read_more', 'Read More')}
-            </Link>
+            </Button>
           )}
         </div>
       </div>

package/src/components/atoms/button/index.js

@@ -18,6 +18,7 @@ function Button({
   disabled = false,
   tertiary = false,
   noStyle = false,
+  icon = null,
   gtmClass = '',
 }) {
   const classes = `${styles.ctaBtn} ${primaryColor ? styles.primary : styles.secondary} ${
@@ -37,6 +38,7 @@ function Button({
         disabled={disabled}
       >
         {btnText}
+        {icon && icon}
       </button>
     );
   }
@@ -45,6 +47,7 @@ function Button({
     return (
       <Link className={`${classes} ${gtmClass}`} to={to} title={btnTitle} aria-label={btnTitle}>
         {btnText}
+        {icon && icon}
       </Link>
     );
   }
@@ -60,12 +63,14 @@ function Button({
       rel="nofollow noreferrer"
     >
       {btnText}
+      {icon && icon}
     </a>
   );
 }
 
 Button.propTypes = {
   to: PropTypes.string,
+  icon: PropTypes.func,
   btnText: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   primaryColor: PropTypes.bool,
   invertColors: PropTypes.bool,

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

@@ -5,7 +5,7 @@ import Module from '~molecules/module';
 import styles from './main.module.scss';
 import keygen from '~helpers/keygen';
 
-const Main = ({ section = {}, pageContext = {} }) => {
+const Main = ({ section = {}, pageContext = {}, serverData = {} }) => {
   const { page } = pageContext;
   const SearchPage = page.path === 's' ? loadable(() => import(`~pages/search`)) : null;
   const HtmlSitemap = page.path === 'sitemap' ? loadable(() => import(`~atoms/sitemap`)) : null;
@@ -18,7 +18,13 @@ const Main = ({ section = {}, pageContext = {} }) => {
       {HtmlSitemap && <HtmlSitemap pageContext={pageContext} />}
       {section.modules &&
         section.modules.map((module) => (
-          <Module key={keygen()} module={module} page={page} pageContext={pageContext} />
+          <Module
+            key={keygen()}
+            module={module}
+            page={page}
+            pageContext={pageContext}
+            serverData={serverData}
+          />
         ))}
       {AuthorBox && <AuthorBox author={page.author} />}
       {SearchPage && <SearchPage page={page} />}
@@ -38,6 +44,7 @@ Main.propTypes = {
     path: PropTypes.string,
   }),
   pageContext: PropTypes.shape({}),
+  serverData: PropTypes.shape({}),
 };
 
 export default Main;

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

@@ -10,7 +10,7 @@ import Navigation from '~organisms/navigation';
 import ScrollToTop from '~atoms/scroll-to-top';
 import CookieConsent from '~organisms/cookie-consent';
 
-function Body({ pageContext, children }) {
+function Body({ pageContext, children, serverData }) {
   const getBodySection = (name) => getSection(name, pageContext);
   const { template } = pageContext.page;
   const is404 = pageContext?.page?.path?.includes('404');
@@ -41,8 +41,10 @@ function Body({ pageContext, children }) {
   return (
     <>
       {navigation && <Navigation template={template} section={navigation} />}
-      {!is404 && <Header section={pageContext} />}
-      {main && !children && <Main section={main} pageContext={pageContext} />}
+      {!is404 && <Header serverData={serverData} section={pageContext} />}
+      {main && !children && (
+        <Main serverData={serverData} section={main} pageContext={pageContext} />
+      )}
       {children && <main>{children}</main>}
       <ScrollToTop />
       <Footer template={template} section={footer} />
@@ -53,6 +55,8 @@ function Body({ pageContext, children }) {
 
 Body.propTypes = {
   children: PropTypes.element,
+  // eslint-disable-next-line react/forbid-prop-types
+  serverData: PropTypes.shape({}),
   pageContext: PropTypes.shape({
     page: PropTypes.shape({
       id: PropTypes.number,

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

@@ -25,7 +25,7 @@ const Tracker = ({
 }) => {
   const { operator } = pageContext;
 
-  const trackerLinks = Object.keys(operator.links);
+  const trackerLinks = operator ? Object.keys(operator.links) : [];
 
   let tracker = '';
   for (let i = 0; i < trackerLinks.length; i += 1) {

package/src/helpers/processor/index.js

@@ -42,7 +42,12 @@ export function processSitemapPages(pages, markets) {
     Object.keys(pages[market]).forEach((pageType) => {
       const filteredPages = pages[market][pageType].filter((page) => {
         if (page.type === 'event') {
-          return page.relation.event && page.robot_options && page.robot_options.page_index === 1;
+          return (
+            page.relation &&
+            page.relation.event &&
+            page.robot_options &&
+            page.robot_options.page_index === 1
+          );
         }
         return page.robot_options && page.robot_options.page_index === 1;
       });
@@ -218,7 +223,7 @@ export default {
       }
     });
 
-    rageSportType = ['rage_seo', 'rage_ppc'].includes(data.general.type);
+    rageSportType = ['rage_seo', 'rage_ppc', 'sports'].includes(data.general.type);
     themeType = data.general.type ? data.general.type : null;
 
     const searchEnabled =

package/src/helpers/processor/sports.js

@@ -117,7 +117,7 @@ export function addSportsDataToPage(sportsData, page, themeType) {
     relation.schedule = sportsData.schedule;
   }
   // rage-seo pages data
-  if (themeType === 'rage_seo') {
+  if (themeType === 'rage_seo' || themeType === 'sports') {
     if (pageType === 'homepage') {
       relation.schedule = sportsData.schedule.soccer || null;
       relation.featured_events = sportsData.featured_events.soccer || null;

package/src/helpers/server-data.js

@@ -0,0 +1,8 @@
+/* eslint-disable import/prefer-default-export */
+export async function getAPIData() {
+  const res = await fetch(`https://random-data-api.com/api/appliance/random_appliance/`);
+  const data = await res.json();
+  return {
+    props: data.equipment,
+  };
+}