22672739200

Committed 04 Mar 2026 02:02PM UTC coverage: 74.691% (+0.2%) from 74.538%

Build # 22672739200

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #1589 from tubone24/claude/fix-algolia-search-url-xPtjc

fix(search): Algolia検索結果クリック時のundefined URLを修正

Run Details

124 of 188 branches covered (65.96%)

Branch coverage included in aggregate %.

0 of 1 new or added line in 1 file covered. (0.0%)

239 of 298 relevant lines covered (80.2%)

5.07 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

54.55

/src/components/SearchBox/index.tsx

import React, { Component } from "react";
import "./index.scss";
import ReactGA from "react-ga4";
// https://github.com/algolia/algoliasearch-client-javascript/issues/1152
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const source =
  (index: any, parameters: Record<string, unknown>) =>
  (query: string, cb: CallableFunction) =>
    index
      .search(query, parameters)
      .then((res: { hits: unknown[] }) => cb(res.hits, res))
      .catch((err: unknown) => cb([], err));

class SearchBox extends Component {
  async componentDidMount() {
    if (typeof window === "undefined") {
      return;
    }

    try {
      const algoliasearchModule = await import("algoliasearch/lite");
      const algoliasearch = algoliasearchModule.default || algoliasearchModule;
      const autocompleteModule = await import("autocomplete.js");
      const autocomplete = autocompleteModule.default || autocompleteModule;

      const client = algoliasearch(
        import.meta.env.PUBLIC_ALGOLIA_APP_ID ||
          process.env.STORYBOOK_ALGOLIA_APP_ID,
        import.meta.env.PUBLIC_ALGOLIA_SEARCH_API_KEY ||
          process.env.STORYBOOK_ALGOLIA_SEARCH_API_KEY,
      );
      const index = client.initIndex(
        import.meta.env.PUBLIC_ALGOLIA_INDEX_NAME ||
          process.env.STORYBOOK_ALGOLIA_INDEX_NAME ||
          "posts",
      );

      autocomplete("#algolia-search-input", { hint: false }, [
        {
          source: source(index, { hitsPerPage: 3 }),
          displayKey: "title",
          templates: {
            suggestion({
              _highlightResult: { title, description },
            }: {
              _highlightResult: {
                title: {
                  value: string;
                };
                description: {
                  value: string;
                };
              };
            }) {
              return `
                  <b><p class="title">${title.value}</p></b>
                  <p class="description">${description.value}</p>
                  `;
            },
            footer:
              '<div class="branding"><img src="https://i.imgur.com/HXG1uHY.png" alt="Powered by Algolia" decoding="async" /></div>',
          },
        },
      ]).on(
        "autocomplete:selected",
        (_event: unknown, suggestion: { url: string; title: string }) => {
          ReactGA.event({
            category: "User",
            action: `Click Searchbox item: ${suggestion.title}`,
          });
          window.location.href = suggestion.url;
        },
      );
    } catch (err) {
      console.error("Failed to initialize Algolia search:", err);
    }
  }

  render() {
    return (
      <div>
        <p>
          <label htmlFor="algolia-search-input">
            <span className="icon-search" />
            &nbsp;SearchBox
          </label>
        </p>
        <input
          type="search"
          id="algolia-search-input"
          placeholder="Enter the keyword..."
          data-testid="algolia-search-input"
        />
      </div>
    );
  }
}

export default SearchBox;

1	import React, { Component } from "react";
2	import "./index.scss";
3	import ReactGA from "react-ga4";
4	// https://github.com/algolia/algoliasearch-client-javascript/issues/1152
5	// eslint-disable-next-line @typescript-eslint/no-explicit-any
6	const source =
7	(index: any, parameters: Record<string, unknown>) =>	1✔
8	(query: string, cb: CallableFunction) =>	6✔
9	index	×
10	.search(query, parameters)
11	.then((res: { hits: unknown[] }) => cb(res.hits, res))	×
12	.catch((err: unknown) => cb([], err));	×
13
14	class SearchBox extends Component {
15	async componentDidMount() {
16	if (typeof window === "undefined") {	6!
17	return;	×
18	}
19
20	try {	6✔
21	const algoliasearchModule = await import("algoliasearch/lite");	6✔
22	const algoliasearch = algoliasearchModule.default \|\| algoliasearchModule;	6!
23	const autocompleteModule = await import("autocomplete.js");	6✔
24	const autocomplete = autocompleteModule.default \|\| autocompleteModule;	6!
25
26	const client = algoliasearch(	6✔
27	import.meta.env.PUBLIC_ALGOLIA_APP_ID \|\|	6!
28	process.env.STORYBOOK_ALGOLIA_APP_ID,
29	import.meta.env.PUBLIC_ALGOLIA_SEARCH_API_KEY \|\|	6!
30	process.env.STORYBOOK_ALGOLIA_SEARCH_API_KEY,
31	);
32	const index = client.initIndex(	6✔
33	import.meta.env.PUBLIC_ALGOLIA_INDEX_NAME \|\|	6!
34	process.env.STORYBOOK_ALGOLIA_INDEX_NAME \|\|
35	"posts",
36	);
37
38	autocomplete("#algolia-search-input", { hint: false }, [	6✔
39	{
40	source: source(index, { hitsPerPage: 3 }),
41	displayKey: "title",
42	templates: {
43	suggestion({
44	_highlightResult: { title, description },
45	}: {
46	_highlightResult: {
47	title: {
48	value: string;
49	};
50	description: {
51	value: string;
52	};
53	};
54	}) {
55	return `	×
56	<b><p class="title">${title.value}</p></b>
57	<p class="description">${description.value}</p>
58	`;
59	},
60	footer:
61	'<div class="branding"><img src="https://i.imgur.com/HXG1uHY.png" alt="Powered by Algolia" decoding="async" /></div>',
62	},
63	},
64	]).on(
65	"autocomplete:selected",
66	(_event: unknown, suggestion: { url: string; title: string }) => {
67	ReactGA.event({	×
68	category: "User",
69	action: `Click Searchbox item: ${suggestion.title}`,
70	});
NEW 71	window.location.href = suggestion.url;	×
72	},
73	);
74	} catch (err) {
75	console.error("Failed to initialize Algolia search:", err);	×
76	}
77	}
78
79	render() {
80	return (	6✔
81	<div>
82	<p>
83	<label htmlFor="algolia-search-input">
84	<span className="icon-search" />
85	SearchBox
86	</label>
87	</p>
88	<input
89	type="search"
90	id="algolia-search-input"
91	placeholder="Enter the keyword..."
92	data-testid="algolia-search-input"
93	/>
94	</div>
95	);
96	}
97	}
98
99	export default SearchBox;

tubone24 / blog / 22672739200

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous