From 5f86a337507ee685a7d828cfd5707a9cfa55df6b Mon Sep 17 00:00:00 2001 From: St3phan Date: Thu, 20 Feb 2020 13:40:11 +0200 Subject: [PATCH] #55: refactoring and added filters --- gatsby-config.js | 3 + .../theme/src/components/_search_results.sass | 257 +----------------- src/components/pages/SearchResult/Content.tsx | 203 +++++--------- .../pages/SearchResult/Content_old.tsx | 141 ++++++++++ 4 files changed, 221 insertions(+), 383 deletions(-) create mode 100644 src/components/pages/SearchResult/Content_old.tsx diff --git a/gatsby-config.js b/gatsby-config.js index ded7d30..77a3487 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -19,6 +19,9 @@ const providers = `query { name } } + supplier { + name + } } } }`; diff --git a/src/assets/theme/src/components/_search_results.sass b/src/assets/theme/src/components/_search_results.sass index 11fd0e7..e89fbf1 100644 --- a/src/assets/theme/src/components/_search_results.sass +++ b/src/assets/theme/src/components/_search_results.sass @@ -1,255 +1,2 @@ -article hr - margin: 10px 14px - float: none - width: initial - - -.is-logo - float: left - margin-left: 18px - - -.logo - margin-left: 15px - font-size: 30px - font-weight: bold - float: left - - -.logo:hover - text-decoration: none - - -.logo i - margin-left: 5px - color: #e91d00 - - -.main - width: 100% - - -.main header - width: 100% - padding: 10px - position: relative - left: 0 - right: 0 - z-index: 2 - - -.searchbox-container - margin-left: 240px - max-width: 400px - - -.searchbox-container .input-group - margin-top: 5px - - -.searchbox-container .form-control:focus - outline: none - box-shadow: none - - -.searchbox-container button - padding-left: 20px - padding-right: 20px - background: #666666 - border-radius: 0 - - -section - width: 100% - min-height: 100% - z-index: 1 - - -section aside - float: right - bottom: 0 - width: 230px - - -.nav - margin: 0 20px - - -.nav li a - display: block - padding: 2px 10px - margin: 10px 0 - - -.nav li a:hover - color: #ffffff - background: #333333 - - -.nav li.separator - height: 1px - - -section aside h5 - color: #ce1312 - margin-left: 30px - text-transform: uppercase - font-size: 10px - margin-top: 20px - - -section article - float: left - padding: 10px 0 - width: calc(100% - 250px) - - -.ais-Stats-text - padding-right: 14px - font-size: 0.8em - line-height: 24px - - -#hits - padding: 0 15px - - -.ais-Pagination - box-shadow: none - border: none - border-radius: initial - padding: 0px - - -.ais-Pagination-item - display: inline-block - padding: 0px - - -.ais-Pagination-item + .ais-Pagination-item - margin-left: 4px - - -.ais-Pagination-item--disabled - display: none - - -.ais-Pagination-link - display: block - background: #f8f8f8 - padding: 3px 8px - color: #333333 - - -.ais-Pagination-item--selected .ais-Pagination-link - border-color: #b5b5b5 - background: #e8e8e8 - - -.ais-Pagination-link:hover - text-decoration: none - border-color: #cfcfcf - background: #ebebeb - color: #333333 - - -.ais-Hits-list - margin: 0 - - -.ais-Hits-item - margin: 0 - padding: 0 - border: none - box-shadow: none - width: 100% - - -.hit - margin-bottom: 10px - height: 130px - border: 1px solid #f3f3f3 - - -.hit em - font-style: normal - background: #ffffd4 - text-decoration: underline - - -.hit .media-object - height: 130px - width: 130px - overflow: hidden - background-size: contain - background-repeat: no-repeat - background-position: center center - - -.hit .media-heading - color: #167ac6 - font-weight: normal - font-size: 18px - - -.hit .media-body - padding: 10px - - -.thank-you - font-size: 0.8em - margin-top: 18px - margin-left: 30px - - -.thank-you a - color: #ce1312 - - -.stars - margin-left: 5px - - -.star - /* item star */ - display: inline-block - width: 1em - height: 1em - - -.star:before - content: '\2605' - color: #fbae00 - - -.star__empty - /* empty star */ - display: inline-block - width: 1em - height: 1em - - -.star__empty:before - content: '\2606' - color: #fbae00 - - -.genre, -.year - margin: 12px 0 - - -.genre .badge + .badge - margin-left: 4px - - -.year - font-weight: bold - - -.genre .badge - background: #bbbbbb - - -.ais-RatingMenu - margin: 0 24px 0 28px +.ais-Highlight-highlighted + @apply text-celeste diff --git a/src/components/pages/SearchResult/Content.tsx b/src/components/pages/SearchResult/Content.tsx index 75ebf19..3d8682e 100644 --- a/src/components/pages/SearchResult/Content.tsx +++ b/src/components/pages/SearchResult/Content.tsx @@ -1,143 +1,90 @@ import React from 'react'; -import { Link } from 'gatsby'; +// Update the import import { InstantSearch, Hits, - Stats, + SearchBox, Pagination, Highlight, + ClearRefinements, + RefinementList, Configure, - connectSearchBox, - connectRefinementList, + Stats, } from 'react-instantsearch-dom'; -import algoliasearch from 'algoliasearch/lite'; -import withURLSync from './URLSync'; -// @ts-ignore -// import './App.css'; +// for the default version +import algoliasearch from 'algoliasearch'; -const searchClient = algoliasearch(`${process.env.ALGOLIA_APP_ID}`, `${process.env.ALGOLIA_API_KEY}`); -// @ts-ignore -const App = props => ( - - -
-
- - -
- -); +const indexProviders: string | undefined = `${process.env.ALGOLIA_INDEX_NAME_PROVIDERS}`; +// const indexPages: string | undefined = `${process.env.ALGOLIA_INDEX_NAME_PAGES}`; +// const indexBlog: string | undefined = `${process.env.ALGOLIA_INDEX_NAME_BLOG}`; -const Header = () => ( -
- -
-); +const client = algoliasearch(`${process.env.ALGOLIA_APP_ID}`, `${process.env.ALGOLIA_API_KEY}`); +const providers = client.initIndex(indexProviders); +// const pages = client.initIndex(indexPages); +// const blog = client.initIndex(indexBlog); -const SearchBox = connectSearchBox(({ currentRefinement, refine }) => ( -
-
- refine(e.target.value)} - autoComplete="off" - className="form-control" - /> - - - -
-
-)); +providers + .setSettings({ + searchableAttributes: ['name', 'location', 'district', 'address', 'unordered(service)'], + customRanking: ['desc(popularity)'], + attributesForFaceting: ['searchable(name)', 'location', 'district', 'service'], + }) + .then(() => { + // done + }); -const Facets = () => ( - -); +// Update the App component +export default class App extends React.Component { + // const client = algoliasearch('YourApplicationID', 'YourAdminAPIKey'); + // const index = client.initIndex('your_index_name'); -// @ts-ignore -const Panel = ({ name, children, id }) => ( -
-
- {name} -
- {children} -
-); + Hit(props: any) { + return ( +
  • +
    + +
    +
    + , + +
    +
    + +
    +
    • + ); + } -const Hit = hit => { - const { id, address, location, district, coordinates } = hit.hit; - return ( -
    -
    -

    - - - -

    -

    {address}

    -

    {location}

    -

    {district}

    -

    {coordinates}

    + render() { + return ( +
    + +
    + +
    + +
    +
    +
    +
      + +
    + +
    +
    + +
    +

    Location

    + +
    +
    +

    District

    + +
    + +
    +
    -
    - ); -}; - -const Results = connectSearchBox(() => ( -
    -
    - -
    -
    -
    - -
    - -
    -)); - -const RefinementListLinks = connectRefinementList(({ items, refine, createURL }) => { - const hitComponents = items.map(item => ( - - )); - - return
    {hitComponents}
    ; -}); - -export default withURLSync(App); + ); + } +} diff --git a/src/components/pages/SearchResult/Content_old.tsx b/src/components/pages/SearchResult/Content_old.tsx new file mode 100644 index 0000000..29e13a6 --- /dev/null +++ b/src/components/pages/SearchResult/Content_old.tsx @@ -0,0 +1,141 @@ +import React from 'react'; +import { Link } from 'gatsby'; +import { + InstantSearch, + Hits, + Stats, + Pagination, + Highlight, + Configure, + connectSearchBox, + connectRefinementList, +} from 'react-instantsearch-dom'; +import algoliasearch from 'algoliasearch/lite'; +import withURLSync from './URLSync'; + +const searchClient = algoliasearch(`${process.env.ALGOLIA_APP_ID}`, `${process.env.ALGOLIA_API_KEY}`); +// @ts-ignore +const App = props => ( + + +
    +
    + + +
    + +); + +const Header = () => ( +
    + +
    +); + +const SearchBox = connectSearchBox(({ currentRefinement, refine }) => ( +
    +
    + refine(e.target.value)} + autoComplete="off" + className="form-control" + /> + + + +
    +
    +)); + +const Facets = () => ( + +); + +// @ts-ignore +const Panel = ({ name, children, id }) => ( +
    +
    + {name} +
    + {children} +
    +); + +const Hit = hit => { + const { id, address, location, district, coordinates } = hit.hit; + return ( +
    +
    +

    + + + +

    +

    {address}

    +

    {location}

    +

    {district}

    +

    {coordinates}

    +
    +
    + ); +}; + +const Results = connectSearchBox(() => ( +
    +
    + +
    +
    +
    + +
    + +
    +)); + +const RefinementListLinks = connectRefinementList(({ items, refine, createURL }) => { + const hitComponents = items.map(item => ( + + )); + + return
    {hitComponents}
    ; +}); + +export default withURLSync(App);