Migrate FAQ page into the Typesense backend #401

ekamuktia · 2021-07-25T07:36:17Z

Closes #377

Description

Using react-instantsearch-dom, creating custom components for SearchBox, Hits, and RefinementList

Current Tasks

Create custom components for SearchBox, Hits, and RefinementList
Update url query parameters based on search keyword/filter

netlify · 2021-07-25T07:36:22Z

✔️ Deploy Preview for wargabantuwarga ready!

🔨 Explore the source changes: c719fb6

🔍 Inspect the deploy log: https://app.netlify.com/sites/wargabantuwarga/deploys/61112a64ec09e70008223f64

😎 Browse the preview: https://deploy-preview-401--wargabantuwarga.netlify.app

# Conflicts: # pages/faq.tsx

…wargabantuwarga.com into feature/typesense-faq

famasya · 2021-07-25T12:17:21Z

Neat!

Should we highlight relevant words in the search results? I think it will provide clarity for the user, as it gives context why presented results are relevant.

resir014 · 2021-07-25T12:18:47Z

@ekamuktia After some discussions with @zainfathoni earlier, we decided to go forward with using Typesense, since the current search infrastructure gave us more problems than expected (e.g. #405). Therefore we need to migrate to Typesense sooner than expected.

Let's see if we can get this up and running asap as a proof-of-concept, so we can apply it to other places (e.g. province search).

…wargabantuwarga.com into feature/typesense-faq

ekamuktia · 2021-07-25T13:39:25Z

@resir014 @zainfathoni
The UI itself is customizeable, so it doesn't matter whether we use original typesense widget (https://www.algolia.com/doc/guides/building-search-ui/widgets/showcase/react/) or customize it to current UI
On my local development, the problem is solved but somehow on the deploy preview the handleFilterChange doesn't work.
Changed it to non modal filter because I thought it's probably the problem, but same thing still happens.
Any idea why?

Local:

bandicam.2021-07-25.19-46-51-524.mp4

Deploy Preview:

bandicam.2021-07-25.20-09-17-685.mp4

components/search/custom-instant-search.tsx

resir014 · 2021-07-26T16:12:51Z

lib/typesense.ts

+}) {
+  const searchAdapter = new TypesenseInstantSearchAdapter({
+    server: {
+      apiKey: "FByczfHEjsTCihgkkYlq2YbAgUKMoyVP", // Be sure to use the search-only-api-key


I think we should start storing these secrets on an environment variable. @zainfathoni what do you think?

Agreed. Just let me or @resir014 know what environment variable to store, Mbak @ekamuktia, we can do it for you. 😁

# Conflicts: # __tests__/pages/faq.test.tsx

resir014 · 2021-07-27T02:01:40Z

@zainfathoni @ekamuktia Created an environment variable in the Netlify dashboard called NEXT_PUBLIC_TYPESENSE_API_KEY. Let's put all secret values (e.g. apiKey) there.

zainfathoni · 2021-07-27T04:40:28Z

What about the GitHub Actions build, @resir014? I think we should also put some env vars on the GitHub Secrets, shouldn't we?

… into feature/typesense-faq � Conflicts: � _content/home-page.md

codecov · 2021-07-27T15:20:52Z

Codecov Report

Merging #401 (6f35e72) into main (d6bc5e1) will decrease coverage by 27.47%.
The diff coverage is 36.50%.

❗ Current head 6f35e72 differs from pull request most recent head c719fb6. Consider uploading reports for the commit c719fb6 to get more accurate results

@@             Coverage Diff             @@
##             main     #401       +/-   ##
===========================================
- Coverage   79.69%   52.22%   -27.48%     
===========================================
  Files         110       90       -20     
  Lines        1266     1057      -209     
  Branches      418      321       -97     
===========================================
- Hits         1009      552      -457     
- Misses        251      498      +247     
- Partials        6        7        +1

Impacted Files	Coverage Δ
components/search/refinement-modal.tsx	`0.00% <0.00%> (ø)`
components/search/custom-instant-search.tsx	`31.94% <31.94%> (ø)`
components/faq-list.tsx	`33.33% <33.33%> (ø)`
components/search/custom-refinement-list.tsx	`33.33% <33.33%> (ø)`
components/search/custom-search-box.tsx	`37.50% <37.50%> (ø)`
components/search/custom-hits.tsx	`100.00% <100.00%> (ø)`
lib/typesense.ts	`100.00% <100.00%> (ø)`
pages/faq.tsx	`100.00% <100.00%> (ø)`
components/contact-details.tsx	`0.00% <0.00%> (-100.00%)`	⬇️
components/open-map-button.tsx	`0.00% <0.00%> (-100.00%)`	⬇️
... and 93 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d6bc5e1...c719fb6. Read the comment docs.

ekamuktia · 2021-07-27T16:36:03Z

@zainfathoni @ekamuktia Created an environment variable in the Netlify dashboard called NEXT_PUBLIC_TYPESENSE_API_KEY. Let's put all secret values (e.g. apiKey) there.

For this, how can I use it on the code? Like this process.env.NEXT_PUBLIC_TYPESENSE_API_KEY?

@famasya @zainfathoni @resir014
Finally, I found the problem why the filter didn't work on deploy preview and fixed it.
Some things to note:

For FAQ, I couldn't find way to sort it based on the document order (tried objectID:asc and id:asc, but both failed)
For test case, since the data is from index, then it cannot use mock data. Test case needs to be updated.
Since I'm using new components, some functionality still not applied here (loading, empty state, preserve url parameter, etc)

famasya · 2021-07-27T16:58:32Z

@zainfathoni @ekamuktia Created an environment variable in the Netlify dashboard called NEXT_PUBLIC_TYPESENSE_API_KEY. Let's put all secret values (e.g. apiKey) there.

For this, how can I use it on the code? Like this process.env.NEXT_PUBLIC_TYPESENSE_API_KEY?

@famasya @zainfathoni @resir014
Finally, I found the problem why the filter didn't work on deploy preview and fixed it.
Some things to note:

For FAQ, I couldn't find way to sort it based on the document order (tried objectID:asc and id:asc, but both failed)

For test case, since the data is from index, then it cannot use mock data. Test case needs to be updated.

Since I'm using new components, some functionality still not applied here (loading, empty state, preserve url parameter, etc)

For the sorting, it's intended since the schema I wrote doesn't store any numeric value to be sorted. Results are sorted by relevance by default.

Do you need any sortable field for this @ekamuktia ? If so, I'll put that on

zainfathoni · 2021-07-27T23:30:13Z

@zainfathoni @ekamuktia Created an environment variable in the Netlify dashboard called NEXT_PUBLIC_TYPESENSE_API_KEY. Let's put all secret values (e.g. apiKey) there.

For this, how can I use it on the code? Like this process.env.NEXT_PUBLIC_TYPESENSE_API_KEY?

Yes, something like that.
And to make it work in the GitHub actions, you need to pass secrets.NEXT_PUBLIC_TYPESENSE_API_KEY to the env: property in the configuration.

I've updated the GitHub Secrets accordingly.

… into feature/typesense-faq � Conflicts: � pages/faq.tsx

ekamuktia · 2021-07-28T11:51:02Z

Tried to use process.env.NEXT_PUBLIC_TYPESENSE_API_KEY but the testing failed so I can't commit/push.
Tried adding setupFiles: ["dotenv/config"] in jest.config.js as mentioned here but it didn't work.

ekamuktia · 2021-07-28T11:53:31Z

For the sorting, it's intended since the schema I wrote doesn't store any numeric value to be sorted. Results are sorted by relevance by default.

Do you need any sortable field for this @ekamuktia ? If so, I'll put that on

@famasya
For FAQ, I may need it based on the row order on the sheet (just like current order)
And for Contact data, I need to order by verifikasi

… into feature/typesense-faq � Conflicts: � __tests__/pages/faq.test.tsx � package.json � pages/faq.tsx � yarn.lock

…wargabantuwarga.com into feature/typesense-faq

mazipan · 2021-08-08T23:20:58Z

Putting a reference: https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/

In case we want to support static filtering via path param

mazipan · 2021-08-11T12:02:49Z

How can I checkout from this branch ya 😂?

zainfathoni · 2021-08-12T22:49:31Z

How can I checkout from this branch ya 😂?

You can use GitHub VSCode Extension, Mas @mazipan.
There's an option to checkout to the Pull Request, and when you make commits on top of it, you can push it into the remote branch, even if the branch is on a forked repository. 😎

bikkimahato · 2022-04-26T17:10:05Z

__tests__/pages/faq.test.tsx

+// import { faqBuilder } from "~/lib/__mocks__/builders/faq";
+// import faqs from "~/lib/data/faqs";


Commented code should not be pushed.

bikkimahato · 2022-04-26T17:10:14Z

__tests__/pages/faq.test.tsx

-import faqs from "~/lib/data/faqs";
+import FaqPage from "../../pages/faq";
+
+// import { perBuild } from "@jackfranklin/test-data-bot";


Commented code should not be pushed.

bikkimahato · 2022-04-26T17:11:00Z

components/search/custom-instant-search.tsx

+        const filtersParam: { [key: string]: string[] } = {};
+        const filterFields = filterSettings?.map((cur) => cur.field) ?? [];
+        Object.entries(queryParams).forEach(([key, value]) => {
+          if (key == "q") {


Please use strict equality operator ===

bikkimahato · 2022-04-26T17:11:20Z

components/search/custom-instant-search.tsx

+            if (keywordsParam) {
+              searchParams.query = keywordsParam;
+            }
+          } else if (key == "sort") {


Please use strict equality operator ===

init faq typesense

9ef8171

ekamuktia marked this pull request as draft July 25, 2021 07:36

ekamuktia and others added 5 commits July 25, 2021 14:54

Merge remote-tracking branch 'origin/main' into feature/typesense-faq

67b7b95

# Conflicts: # pages/faq.tsx

Merge branch 'main' into feature/typesense-faq

94b56ec

change FaqData to Faq

0f12a6a

Merge branch 'feature/typesense-faq' of https://github.com/ekamuktia/…

a817d3d

…wargabantuwarga.com into feature/typesense-faq

filter to modal

a81eacc

ekamuktia and others added 6 commits July 25, 2021 19:18

change router to window

5894fbf

filter params type

9283a2e

remove modal

b32bd9c

Merge branch 'main' into feature/typesense-faq

cb2a1da

change to usetouter

81034e4

Merge branch 'feature/typesense-faq' of https://github.com/ekamuktia/…

c7c61b2

…wargabantuwarga.com into feature/typesense-faq

ekamuktia added 3 commits July 25, 2021 20:47

usefiltermodal as config, console log for debug

fb896f7

usefiltermodal as optional

25a7800

usefiltermodal false

7dda93a

famasya mentioned this pull request Jul 26, 2021

Refactor use-search to use a properly-typed fuzzy-search library #197

Closed

2 tasks

resir014 requested changes Jul 26, 2021

View reviewed changes

components/search/custom-instant-search.tsx Outdated Show resolved Hide resolved

resir014 reviewed Jul 26, 2021

View reviewed changes

Merge remote-tracking branch 'origin/main' into feature/typesense-faq

f5a0a0f

# Conflicts: # __tests__/pages/faq.test.tsx

ekamuktia added 2 commits July 27, 2021 22:05

Merge branch 'main' of https://github.com/ekamuktia/wargabantuwarga.com…

ebf6efb

… into feature/typesense-faq � Conflicts: � _content/home-page.md

fix: refinement list select option value

aaac2f1

fix: remove console log

6f35e72

ekamuktia and others added 2 commits July 28, 2021 18:33

Merge branch 'main' of https://github.com/ekamuktia/wargabantuwarga.com…

de04d15

… into feature/typesense-faq � Conflicts: � pages/faq.tsx

Merge branch 'main' into feature/typesense-faq

96cb318

Merge branch 'main' into feature/typesense-faq

2ab64b7

famasya mentioned this pull request Jul 29, 2021

Change query param to path param #486

Open

3 tasks

baraeb92 assigned ekamuktia Aug 4, 2021

baraeb92 added enhancement New feature or request help wanted Extra attention is needed high-priority Issue with high priority labels Aug 4, 2021

baraeb92 added this to In progress in Kanban Board via automation Aug 4, 2021

baraeb92 added this to High priority in Prioritization Aug 4, 2021

baraeb92 added this to the Long-term Plan milestone Aug 4, 2021

resir014 mentioned this pull request Aug 8, 2021

Migrate to typesense as search backend #374

Open

14 tasks

ekamuktia added 2 commits August 8, 2021 22:30

Merge branch 'main' of https://github.com/ekamuktia/wargabantuwarga.com…

69aebe7

… into feature/typesense-faq � Conflicts: � __tests__/pages/faq.test.tsx � package.json � pages/faq.tsx � yarn.lock

Merge branch 'feature/typesense-faq' of https://github.com/ekamuktia/…

6a761e2

…wargabantuwarga.com into feature/typesense-faq

mazipan mentioned this pull request Aug 9, 2021

Improve Province page meta description by adding category and month, year #335

Open

Merge branch 'main' into feature/typesense-faq

c719fb6

bikkimahato reviewed Apr 26, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate FAQ page into the Typesense backend #401

Migrate FAQ page into the Typesense backend #401

ekamuktia commented Jul 25, 2021 •

edited

netlify bot commented Jul 25, 2021 •

edited

famasya commented Jul 25, 2021

resir014 commented Jul 25, 2021

ekamuktia commented Jul 25, 2021

resir014 Jul 26, 2021

zainfathoni Jul 26, 2021

resir014 commented Jul 27, 2021

zainfathoni commented Jul 27, 2021

codecov bot commented Jul 27, 2021 •

edited

ekamuktia commented Jul 27, 2021

famasya commented Jul 27, 2021 •

edited

zainfathoni commented Jul 27, 2021 •

edited

ekamuktia commented Jul 28, 2021 •

edited

ekamuktia commented Jul 28, 2021

mazipan commented Aug 8, 2021 •

edited

mazipan commented Aug 11, 2021

zainfathoni commented Aug 12, 2021

bikkimahato Apr 26, 2022

bikkimahato Apr 26, 2022

bikkimahato Apr 26, 2022

bikkimahato Apr 26, 2022

		// import { faqBuilder } from "~/lib/__mocks__/builders/faq";
		// import faqs from "~/lib/data/faqs";

Migrate FAQ page into the Typesense backend #401

Are you sure you want to change the base?

Migrate FAQ page into the Typesense backend #401

Conversation

ekamuktia commented Jul 25, 2021 • edited

Description

Current Tasks

netlify bot commented Jul 25, 2021 • edited

famasya commented Jul 25, 2021

resir014 commented Jul 25, 2021

ekamuktia commented Jul 25, 2021

resir014 Jul 26, 2021

Choose a reason for hiding this comment

zainfathoni Jul 26, 2021

Choose a reason for hiding this comment

resir014 commented Jul 27, 2021

zainfathoni commented Jul 27, 2021

codecov bot commented Jul 27, 2021 • edited

Codecov Report

ekamuktia commented Jul 27, 2021

famasya commented Jul 27, 2021 • edited

zainfathoni commented Jul 27, 2021 • edited

ekamuktia commented Jul 28, 2021 • edited

ekamuktia commented Jul 28, 2021

mazipan commented Aug 8, 2021 • edited

mazipan commented Aug 11, 2021

zainfathoni commented Aug 12, 2021

bikkimahato Apr 26, 2022

Choose a reason for hiding this comment

bikkimahato Apr 26, 2022

Choose a reason for hiding this comment

bikkimahato Apr 26, 2022

Choose a reason for hiding this comment

bikkimahato Apr 26, 2022

Choose a reason for hiding this comment

ekamuktia commented Jul 25, 2021 •

edited

netlify bot commented Jul 25, 2021 •

edited

codecov bot commented Jul 27, 2021 •

edited

famasya commented Jul 27, 2021 •

edited

zainfathoni commented Jul 27, 2021 •

edited

ekamuktia commented Jul 28, 2021 •

edited

mazipan commented Aug 8, 2021 •

edited