546 implement meilisearch as main search engine

.gitignore

@@ -3,3 +3,4 @@
 .vscode/**/*
 !.vscode/launch.json
 remote-debug-profile/**
+

projects/bp-gallery/package.json

@@ -46,6 +46,7 @@
     "react-router-config": "^5.1.1",
     "react-router-dom": "^5.3.0",
     "react-scroll-parallax": "^3.3.2",
+    "react-use-promise": "^0.5.0",
     "react-use-storage-state": "^1.0.5",
     "tailwindcss": "^3.2.4",
     "tui-image-editor": "^3.15.3",

projects/bp-gallery/src/components/views/search/SearchView.tsx

@@ -2,6 +2,9 @@ import { Location } from 'history';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import usePromise from 'react-use-promise';
+import { PictureFiltersInput } from '../../../graphql/APIConnector';
+import { useFlag } from '../../../helpers/growthbook';
 import useBulkOperations from '../../../hooks/bulk-operations.hook';
 import { HelpTooltip } from '../../common/HelpTooltip';
 import PictureScrollGrid from '../../common/picture-gallery/PictureScrollGrid';
@@ -44,7 +47,6 @@ const SearchView = () => {
 
   // Builds query from search params in the path
   const queryParams = useMemo(() => {
-    // if (isAllSearchActive) {
     const allSearchTerms = searchParams
       .getAll(toURLSearchParam(SearchType.ALL))
       .map(decodeURIComponent);
@@ -59,11 +61,32 @@ const SearchView = () => {
       searchTerms: allSearchTerms.filter(searchTerm => !isValidTimeSpecification(searchTerm)),
       searchTimes,
     };
-    // }
-    // return convertSearchParamsToPictureFilters(searchParams);
-  }, [/*isAllSearchActive,*/ searchParams]);
-  if (import.meta.env.MODE === 'development')
-    getSearchResultPictureIds(queryParams, '').then(res => console.log('search results:', res));
+  }, [searchParams]);
+
+  const [searchResultIds, error, state] = usePromise(
+    async () =>
+      (await getSearchResultPictureIds(queryParams, '')).map(hit => (hit.id as number).toString()),
+    [queryParams]
+  );
+
+  const pictureFilter: PictureFiltersInput = useMemo(() => {
+    if (error) {
+      console.log(error);
+      return {};
+    }
+    return state === 'resolved' ? { id: { in: searchResultIds } } : {};
+  }, [searchResultIds, state, error]);
+  console.log(pictureFilter);
+  const isOldSearchActive = useFlag('old_search');
+
+  if (import.meta.env.MODE === 'development') {
+    // getSearchResultPictureIds(queryParams, '').then(res => console.log('search results:', res));
+    console.log('resultids', searchResultIds);
+    console.log(
+      '31149 key:',
+      searchResultIds?.findIndex(element => element === '31149')
+    );
+  }
   const { linkToCollection, bulkEdit } = useBulkOperations();
 
   return (
@@ -84,8 +107,14 @@ const SearchView = () => {
       ) : (
         <ShowStats>
           <PictureScrollGrid
-            queryParams={queryParams}
-            isAllSearchActive={isAllSearchActive}
+            queryParams={isOldSearchActive ? queryParams : pictureFilter}
+            // if allSearch is active the custom resolver for allSearch will be used, which can only
+            // handle simple queryparams in the format {searchTerms:string[], searchTimes:string[][]} which
+            //  leads to erros when we use queryparams of the type PictureFiltersInput,
+            // so isAllSearchactive has to be false if we want to use the Meilisearch results
+            // by ANDing the isAllsearchActive flag with the isOldsearchActive flag we can make sure
+            // the isAllSearchActive property will always be false if we want to use Meilisearch
+            isAllSearchActive={isOldSearchActive && isAllSearchActive}
             hashbase={search}
             bulkOperations={[linkToCollection, bulkEdit]}
             resultPictureCallback={(pictures: number) => {

projects/bp-gallery/src/components/views/search/helpers/getSearchResultPictureIds.ts

@@ -30,13 +30,12 @@ const getSearchResultPictureIds = async (
     filter = filter === '' ? timeFilter : filter.concat(' AND ', timeFilter);
   }
 
+  // for reference: https://www.meilisearch.com/docs/reference/api/search
   const RESULT_LIMIT = 1000;
-  // this makes it so only documents that match all of the query terms are returned
   const MATCHING_STRATEGY = 'all';
 
   const settings = {
     limit: RESULT_LIMIT,
-    showMatchesPosition: true,
     matchingStrategy: MATCHING_STRATEGY,
     filter: filter,
   };

projects/bp-gallery/src/helpers/growthbook.ts

@@ -19,6 +19,7 @@ export type AppFeatures = {
   };
   geopictures_collection_id: string;
   start_view_default_tab_index: number;
+  old_search: boolean;
 };
 
 export type FeatureId = keyof AppFeatures;

projects/bp-gallery/yarn.lock

@@ -7126,6 +7126,11 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-use-promise@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/react-use-promise/-/react-use-promise-0.5.0.tgz#1abe26f73a9d55415c081ef5be74087840bac0a8"
+  integrity sha512-kpmnwDsXILLsEe4lxMT2iaJKQq1Wt4KuW2t6YPXwulAWSvnqwPAlj8wrRMQ5d/0+SutKR2qk41yJpeaV49bvUQ==
+
 react-use-storage-state@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/react-use-storage-state/-/react-use-storage-state-1.0.5.tgz#9b63690d59181ddb6b84d2dfa5fec86087b57eec"

projects/bp-strapi/config/plugins.js

@@ -107,6 +107,7 @@ module.exports = ({ env }) => ({
                 return transformedEntry;
               },
               settings: {
+                //for reference: https://www.meilisearch.com/docs/reference/api/settings
                 displayedAttributes: ["id"],
                 // the order of the attributes in searchableAttributes determines the priorization
                 // of search results i.e. a match in the first searchable attribute will always outrank a match in any other searchable attribute