From 1e9dc8cea592f027b8786ac484b4fa2d5fd959f3 Mon Sep 17 00:00:00 2001 From: Kristofer Koishigawa Date: Thu, 11 Feb 2021 03:41:51 +0900 Subject: [PATCH] fix: remove algolia indices and urls from translations (#41043) --- client/i18n/locales/chinese/translations.json | 2 - client/i18n/locales/english/translations.json | 2 - client/i18n/locales/espanol/translations.json | 2 - client/i18n/translations-schema.js | 3 - .../components/search/WithInstantSearch.js | 9 +- .../components/search/searchBar/SearchBar.js | 7 +- .../components/search/searchBar/SearchHits.js | 5 +- client/src/utils/algolia-locale-setup.js | 19 ++++ .../learn/common-components/navbar.js | 16 ---- .../learn/common-components/searchBar.js | 87 +++++++++++++++++++ 10 files changed, 115 insertions(+), 37 deletions(-) create mode 100644 client/src/utils/algolia-locale-setup.js create mode 100644 cypress/integration/learn/common-components/searchBar.js diff --git a/client/i18n/locales/chinese/translations.json b/client/i18n/locales/chinese/translations.json index df50bdb88e..7970e49879 100644 --- a/client/i18n/locales/chinese/translations.json +++ b/client/i18n/locales/chinese/translations.json @@ -356,8 +356,6 @@ "heres-a-quote": "我们未找到你搜索的信息。这里分享一句名言：" }, "search": { - "index-name": "news-zh", - "search-page-url": "https://chinese.freecodecamp.org/news/search/?query={{searchQuery}}", "label": "搜索", "placeholder": "搜索 300+ 篇教程", "see-results": "查看 {{searchQuery}} 的所有结果", diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index 977cf4afc8..03afb3a9be 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -356,8 +356,6 @@ "heres-a-quote": "We couldn't find what you were looking for, but here is a quote:" }, "search": { - "index-name": "news", - "search-page-url": "https://www.freecodecamp.org/news/search/?query={{searchQuery}}", "label": "Search", "placeholder": "Search 6,000+ tutorials", "see-results": "See all results for {{searchQuery}}", diff --git a/client/i18n/locales/espanol/translations.json b/client/i18n/locales/espanol/translations.json index 14426a4092..cd8091a0be 100644 --- a/client/i18n/locales/espanol/translations.json +++ b/client/i18n/locales/espanol/translations.json @@ -356,8 +356,6 @@ "heres-a-quote": "No pudimos encontrar lo que estabas buscando, pero aquí hay una cita:" }, "search": { - "index-name": "noticias", - "search-page-url": "https://www.freecodecamp.org/espanol/news/search/?query={{searchQuery}}", "label": "Buscar", "placeholder": "Buscar en más de 6.000 tutoriales", "see-results": "Ver todos los resultados de {{searchQuery}}", diff --git a/client/i18n/translations-schema.js b/client/i18n/translations-schema.js index 55f2d2184d..8265a48b85 100644 --- a/client/i18n/translations-schema.js +++ b/client/i18n/translations-schema.js @@ -426,9 +426,6 @@ const translationsSchema = { "We couldn't find what you were looking for, but here is a quote:" }, search: { - 'index-name': 'news', - 'search-page-url': - 'https://www.freecodecamp.org/news/search/?query={{searchQuery}}', label: 'Search', placeholder: 'Search 6,000+ tutorials', 'see-results': 'See all results for {{searchQuery}}', diff --git a/client/src/components/search/WithInstantSearch.js b/client/src/components/search/WithInstantSearch.js index 8e6cc77afd..ab13eeff51 100644 --- a/client/src/components/search/WithInstantSearch.js +++ b/client/src/components/search/WithInstantSearch.js @@ -7,7 +7,7 @@ import qs from 'query-string'; import { navigate } from 'gatsby'; import Media from 'react-responsive'; import algoliasearch from 'algoliasearch/lite'; -import { withTranslation } from 'react-i18next'; +import { newsIndex } from '../../utils/algolia-locale-setup'; import { isSearchDropdownEnabledSelector, @@ -32,7 +32,6 @@ const propTypes = { isDropdownEnabled: PropTypes.bool, location: PropTypes.object.isRequired, query: PropTypes.string, - t: PropTypes.func.isRequired, toggleSearchDropdown: PropTypes.func.isRequired, updateSearchQuery: PropTypes.func.isRequired }; @@ -126,11 +125,11 @@ class InstantSearchRoot extends Component { }; render() { - const { query, t } = this.props; + const { query } = this.props; const MAX_MOBILE_HEIGHT = 768; return ( ( diff --git a/client/src/components/search/searchBar/SearchBar.js b/client/src/components/search/searchBar/SearchBar.js index 806f39dccc..dfd00e7994 100644 --- a/client/src/components/search/searchBar/SearchBar.js +++ b/client/src/components/search/searchBar/SearchBar.js @@ -7,6 +7,7 @@ import { SearchBox } from 'react-instantsearch-dom'; import { HotKeys, ObserveKeys } from 'react-hotkeys'; import { isEqual } from 'lodash'; import { withTranslation } from 'react-i18next'; +import { searchPageUrl } from '../../../utils/algolia-locale-setup'; import { isSearchDropdownEnabledSelector, @@ -93,7 +94,7 @@ export class SearchBar extends Component { handleSearch(e, query) { e.preventDefault(); - const { toggleSearchDropdown, updateSearchQuery, t } = this.props; + const { toggleSearchDropdown, updateSearchQuery } = this.props; const { index, hits } = this.state; const selectedHit = hits[index]; @@ -116,9 +117,7 @@ export class SearchBar extends Component { // are hits besides the footer return query && hits.length > 1 ? window.location.assign( - t('search.search-page-url', { - searchQuery: encodeURIComponent(query) - }) + `${searchPageUrl}?query=${encodeURIComponent(query)}` ) : false; } diff --git a/client/src/components/search/searchBar/SearchHits.js b/client/src/components/search/searchBar/SearchHits.js index a29e4967be..99e35b20a0 100644 --- a/client/src/components/search/searchBar/SearchHits.js +++ b/client/src/components/search/searchBar/SearchHits.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { connectStateResults, connectHits } from 'react-instantsearch-dom'; import isEmpty from 'lodash/isEmpty'; import { useTranslation } from 'react-i18next'; +import { searchPageUrl } from '../../../utils/algolia-locale-setup'; import Suggestion from './SearchSuggestion'; import NoHitsSuggestion from './NoHitsSuggestion'; @@ -25,9 +26,7 @@ const CustomHits = connectHits( query: searchQuery, url: noHits ? null - : t('search.search-page-url', { - searchQuery: encodeURIComponent(searchQuery) - }), + : `${searchPageUrl}?query=${encodeURIComponent(searchQuery)}`, title: t('search.see-results', { searchQuery: searchQuery }), _highlightResult: { query: { diff --git a/client/src/utils/algolia-locale-setup.js b/client/src/utils/algolia-locale-setup.js new file mode 100644 index 0000000000..4703abc76b --- /dev/null +++ b/client/src/utils/algolia-locale-setup.js @@ -0,0 +1,19 @@ +import { clientLocale } from '../../../config/env.json'; + +const algoliaIndices = { + english: { + name: 'news', + searchPage: 'https://www.freecodecamp.org/news/search/' + }, + espanol: { + name: 'news-es', + searchPage: 'https://www.freecodecamp.org/espanol/news/search/' + }, + chinese: { + name: 'news-zh', + searchPage: 'https://chinese.freecodecamp.org/news/search/' + } +}; + +export const newsIndex = algoliaIndices[clientLocale].name; +export const searchPageUrl = algoliaIndices[clientLocale].searchPage; diff --git a/cypress/integration/learn/common-components/navbar.js b/cypress/integration/learn/common-components/navbar.js index ada403c44d..abc3c5854b 100644 --- a/cypress/integration/learn/common-components/navbar.js +++ b/cypress/integration/learn/common-components/navbar.js @@ -57,22 +57,6 @@ describe('Navbar', () => { } ); - it('Should be able to search on navbar search field', () => { - cy.get('.ais-SearchBox').within(() => { - cy.get('input').type('Learn'); - }); - - cy.get('.ais-Hits-list') - .children() - .should('to.have.length.of.at.least', 1); - - cy.get('.ais-SearchBox').within(() => { - cy.get('input').clear(); - }); - - cy.get('div.ais-Hits').should('not.exist'); - }); - it('Should have a "Sign in" button', () => { cy.contains("[data-test-label='landing-small-cta']", 'Sign in'); }); diff --git a/cypress/integration/learn/common-components/searchBar.js b/cypress/integration/learn/common-components/searchBar.js new file mode 100644 index 0000000000..6d6f110674 --- /dev/null +++ b/cypress/integration/learn/common-components/searchBar.js @@ -0,0 +1,87 @@ +/* global cy */ + +const search = query => { + cy.get('.ais-SearchBox').within(() => { + cy.get('input').type(query); + }); + + cy.wait(300); +}; + +const clear = () => { + cy.get('.ais-SearchBox').within(() => { + cy.get('input').clear(); + }); +}; + +describe('Search bar', () => { + before(() => { + cy.visit('/'); + }); + + beforeEach(() => { + clear(); + }); + + it('Should render properly', () => { + cy.get('.ais-SearchBox').should('be.visible'); + }); + + it('Should accept input and display hits', () => { + search('freeCodeCamp'); + + cy.get('.ais-Hits-list') + .children() + .should('to.have.length.of.at.least', 1); + }); + + it('Should clear hits when input is cleared', () => { + search('freeCodeCamp'); + + cy.get('.ais-Hits-list') + .children() + .should('to.have.length.of.at.least', 1); + + clear(); + + cy.get('div.ais-Hits').should('not.exist'); + }); + + it('Should show up to 8 hits when height >= 768px', () => { + cy.viewport(1300, 768); + + search('freeCodeCamp'); + + cy.get('.ais-Hits-list') + .children() + .should('to.have.length.of', 8); + }); + + it('Should show up to 5 hits when height < 768px', () => { + cy.viewport(1300, 767); + + search('freeCodeCamp'); + + cy.get('.ais-Hits-list') + .children() + .should('to.have.length.of', 5); + }); + + it('Should show no hits for queries that do not exist in the Algolia index', () => { + search('testtttt'); + + cy.get('.ais-Hits-list') + .children() + .should('to.have.length.of', 0); + + cy.contains('No tutorials found'); + }); + + it('Should not redirect to the News search page if there are no hits', () => { + search('testtttt'); + + cy.get('.ais-SearchBox-form').submit(); + + cy.url('/'); + }); +});