gatsby-core-theme 44.0.38 → 44.0.39

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [44.0.39](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.38...v44.0.39) (2025-05-15)
+
+
+### Bug Fixes
+
+* autocomplete bugs ([1d28271](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/1d28271a9ae73ddd67fdf6ca5b07a80da823058d))
+* tests ([bebe108](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/bebe1080b8d528ca3f6aa67e6d85f61caa2f0c7a))
+
+
+* Merge branch 'tm-4548-autocomplete-fixes' into 'master' ([126f205](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/126f205cc8bf59c4bee7edcab258fd455333510b))
+
 ## [44.0.38](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.37...v44.0.38) (2025-05-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.0.38",
+  "version": "44.0.39",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/search/autocomplete/article/index.js

@@ -2,17 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import Link from '~hooks/link';
 import styles from './article.module.scss';
 
 const Article = ({ item = {}, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => (
-  <li className={styles.row || ''}>
-    <h3 className={styles.operatorTitle}>{item.title}</h3>
-    <Button
-      btnText={btnText}
-      to={item?.path}
-      gtmClass="autocomplete-article-item-gtm btn-cta"
-      icon={icon}
-    />
+  <li>
+    <Link className={styles.row || ''} to={item?.path} title={item.title}>
+      <h3 className={styles.operatorTitle}>{item.title}</h3>
+      <Button
+        btnText={btnText}
+        to={item?.path}
+        gtmClass="autocomplete-article-item-gtm btn-cta"
+        icon={icon}
+      />
+    </Link>
   </li>
 );
 

package/src/components/atoms/search/autocomplete/default/index.js

@@ -2,17 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import Link from '~hooks/link';
 import styles from './default.module.scss';
 
 const Default = ({ item = {}, btnText='', icon=<FaArrowRight title="Right-pointing Arrow Icon" /> }) => (
-  <li className={styles.row || ''}>
-    <h3 className={styles.operatorTitle}>{item.title}</h3>
-    <Button
-      btnText={btnText}
-      to={item?.path}
-      gtmClass="autocomplete-article-item-gtm btn-cta"
-      icon={icon}
-    />
+  <li>
+    <Link to={item?.path} title={item.title} className={styles.row || ''}>
+      <h3 className={styles.operatorTitle}>{item.title}</h3>
+      <Button
+        btnText={btnText}
+        to={item?.path}
+        gtmClass="autocomplete-article-item-gtm btn-cta"
+        icon={icon}
+      />
+    </Link>
   </li>
 );
 

package/src/components/atoms/search/autocomplete/game/index.js

@@ -4,27 +4,30 @@ import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl } from '~helpers/getters';
+import Link from '~hooks/link';
 import styles from './game.module.scss';
 
 const Game = ({ item = {}, width = 56, height = 56, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => {
   const { logo } = item;
 
   return (
-    <li className={styles.row || ''}>
-      <LazyImage
-        className={styles.gameImage}
-        width={width}
-        height={height}
-        src={logo ? imagePrettyUrl(logo, width, height) : '/images/default-slot.jpg'}
-        alt={item.title}
-      />
-      <h3 className={styles.gameTitle}>{item.title}</h3>
-      <Button
-        btnText={btnText}
-        to={item?.path}
-        gtmClass="autocomplete-game-item-gtm btn-cta"
-        icon={icon}
-      />
+    <li>
+      <Link to={item?.path} title={item.title} className={styles.row || ''}>
+        <LazyImage
+          className={styles.gameImage}
+          width={width}
+          height={height}
+          src={logo ? imagePrettyUrl(logo, width, height) : '/images/default-slot.jpg'}
+          alt={item.title}
+        />
+        <h3 className={styles.gameTitle}>{item.title}</h3>
+        <Button
+          btnText={btnText}
+          to={item?.path}
+          gtmClass="autocomplete-game-item-gtm btn-cta"
+          icon={icon}
+        />
+      </Link>
     </li>
   );
 };

package/src/components/atoms/search/autocomplete/operator/index.js

@@ -4,27 +4,30 @@ import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl } from '~helpers/getters';
+import Link from '~hooks/link';
 import styles from './operator.module.scss';
 
 const Operator = ({ item = {}, width = 56, height = 56, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => {
   const { logo } = item;
 
   return (
-    <li className={styles.row || ''}>
-      {logo && <LazyImage
-        className={styles.operatorImage}
-        width={width}
-        height={height}
-        src={imagePrettyUrl(logo, width, height)}
-        alt={item.title}
-      />}
-      <h3 className={styles.operatorTitle}>{item.title}</h3>
-      <Button
-        to={item?.path}
-        btnText={btnText}
-        gtmClass="autocomplete-operator-item-gtm btn-cta"
-        icon={icon}
-      />
+    <li>
+      <Link to={item?.path} title={item.title} className={styles.row || ''}>
+        {logo && <LazyImage
+          className={styles.operatorImage}
+          width={width}
+          height={height}
+          src={imagePrettyUrl(logo, width, height)}
+          alt={item.title}
+        />}
+        <h3 className={styles.operatorTitle}>{item.title}</h3>
+        <Button
+          to={item?.path}
+          btnText={btnText}
+          gtmClass="autocomplete-operator-item-gtm btn-cta"
+          icon={icon}
+        />
+      </Link>
     </li>
   );
 };

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

@@ -1,14 +1,13 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable no-console */
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useRef, useState, useEffect, Suspense } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { BiSearchAlt } from '@react-icons/all-files/bi/BiSearchAlt';
 import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
 import loadSource from '../../../helpers/search-source';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { toggleScroll } from '~helpers/scroll';
-import keygen from '~helpers/keygen';
 import { getComponent } from '../../../helpers/autocomplete';
 import Loading from '../../atoms/search/autocomplete/loading';
 import NoResults from '../../atoms/search/autocomplete/no-results';
@@ -202,9 +201,7 @@ const SearchForm = ({
                                 {items.slice(0, loadedCounts[type]).map((value) => {
                                   const PageTypeCard = getComponent(value.pageType);
                                   return (
-                                    <Suspense fallback={<Loading single />} key={keygen()}>
                                       <PageTypeCard item={value} icon={autoCompleteIcon} />
-                                    </Suspense>
                                   );
                                 })}
                                 {loadedCounts[type] < items.length && (

package/src/constants/site-settings/main.js

@@ -8,7 +8,7 @@ export const mainSettings = {
   },
   default: {
     operator_banner: false,
-    autocomplete: false,
+    autocomplete: true,
     recommendedCasinos: true,
     topSearches: true,
   },

package/src/helpers/autocomplete.js

@@ -1,16 +1,19 @@
 /* eslint-disable import/prefer-default-export */
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { lazy } from 'react';
+import Operator from '../components/atoms/search/autocomplete/operator';
+import Article from '../components/atoms/search/autocomplete/article';
+import Game from '../components/atoms/search/autocomplete/game';
+import Default from '../components/atoms/search/autocomplete/default';
 
 export function getComponent(type) {
   switch (type) {
     case 'operator':
-      return lazy(() => import(`../components/atoms/search/autocomplete/operator`));
+      return Operator
     case 'article':
-      return lazy(() => import(`../components/atoms/search/autocomplete/article`));
+      return Article;
     case 'game':
-      return lazy(() => import(`../components/atoms/search/autocomplete/game`));
+      return Game
     default:
-        return lazy(() => import(`../components/atoms/search/autocomplete/default`));
+        return Default
   }
 }

package/src/helpers/autocomplete.test.js

@@ -1,75 +1,73 @@
 /* eslint-disable no-unused-expressions */
-import React, { Suspense } from "react";
-import { render, screen } from "@testing-library/react";
+import React from "react";
+import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { getComponent } from "./autocomplete";
 
 describe("Autocomplete Get Component Helper", () => {
   test("Autocomplete Get Component Operator", async () => {
-    const Component = getComponent('operator');
-    render(
-        <Suspense fallback={<></>}>
-            <Component item={{
-                title: 'Test Operator',
-                path: '/test'
-            }} />
-        </Suspense>
+    const Component = getComponent("operator");
+    const { container, getByText } =  render(
+      <Component
+        item={{
+          title: "Test Operator",
+          path: "/test",
+        }}
+      />
     );
-    const link = await screen.findByRole('link'); // gets <a>
-    expect(link).toHaveAttribute('href', '/test');
 
-    const title = await screen.findByText('Test Operator');
-    expect(title).toBeInTheDocument();
+    const link = container.querySelectorAll('a'); // gets <a>
+    expect(link[0]).toHaveAttribute("href", "/test");
+
+    expect(getByText('Test Operator')).toBeInTheDocument();
   });
 
   test("Autocomplete Get Component Article", async () => {
-    const Component = getComponent('article');
-    render(
-        <Suspense fallback={<></>}>
-            <Component item={{
-                title: 'Test Article',
-                path: '/test'
-            }} />
-        </Suspense>
+    const Component = getComponent("article");
+    const { container, getByText } = render(
+      <Component
+        item={{
+          title: "Test Article",
+          path: "/test",
+        }}
+      />
     );
-    const link = await screen.findByRole('link'); // gets <a>
-    expect(link).toHaveAttribute('href', '/test');
+   
+    const link = container.querySelectorAll('a'); // gets <a>
+    expect(link[0]).toHaveAttribute("href", "/test");
 
-    const title = await screen.findByText('Test Article');
-    expect(title).toBeInTheDocument();
+    expect(getByText('Test Article')).toBeInTheDocument();
   });
 
   test("Autocomplete Get Component Game", async () => {
-    const Component = getComponent('game');
-    render(
-        <Suspense fallback={<></>}>
-            <Component item={{
-                title: 'Test Game',
-                path: '/test'
-            }} />
-        </Suspense>
+    const Component = getComponent("game");
+    const { container, getByText } = render(
+      <Component
+        item={{
+          title: "Test Game",
+          path: "/test",
+        }}
+      />
     );
-    const link = await screen.findByRole('link'); // gets <a>
-    expect(link).toHaveAttribute('href', '/test');
+    const link = container.querySelectorAll('a'); // gets <a>
+    expect(link[0]).toHaveAttribute("href", "/test");
 
-    const title = await screen.findByText('Test Game');
-    expect(title).toBeInTheDocument();
+    expect(getByText('Test Game')).toBeInTheDocument();
   });
 
   test("Autocomplete Get Component Default", async () => {
-    const Component = getComponent('payment_methods');
-    render(
-        <Suspense fallback={<></>}>
-            <Component item={{
-                title: 'Test Default',
-                path: '/test'
-            }} />
-        </Suspense>
+    const Component = getComponent("payment_methods");
+    const { container, getByText } =  render(
+      <Component
+        item={{
+          title: "Test Default",
+          path: "/test",
+        }}
+      />
     );
-    const link = await screen.findByRole('link'); // gets <a>
-    expect(link).toHaveAttribute('href', '/test');
+    const link = container.querySelectorAll('a'); // gets <a>
+    expect(link[0]).toHaveAttribute("href", "/test");
 
-    const title = await screen.findByText('Test Default');
-    expect(title).toBeInTheDocument();
+    expect(getByText('Test Default')).toBeInTheDocument();
   });
 });