feat(sort-filter): search project by name #533

NicoSerranoP · 2024-12-06T23:05:59Z

Description
I am activating the new feature to search projects by name using the search bar. Behind the scenes what I am doing is I am taking the registryAddress and the search bar input and sending it to the server to perform a search. The server fetches all the metadata objects and add them to the projects. Later on it filters them comparing the search value and the metadata.name value.

Considerations
This current implementation performs the search on the server because it avoids problems with React <InfiniteLoading> and useinfiniteQuery in the client side. These two use pagination for better data efficiency and I did not want to break that feature.

Changes made

Implement search projects by name feature
Improve server fetching for performance
Housekeeping to delete console.log errors
Housekeeping to prevent hydration errors

@ctrlc03 @kittybest @crisgarner @0xmad what do you think? 😊

vercel · 2024-12-06T23:06:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maci-platform	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 5:47pm

0xmad · 2024-12-09T16:36:42Z

You can use useInfiniteQuery for pagination support and throttling or debouncing support with useDeferredValue to not send requests every time you type something in a search bar. Current solution is not optimized if we have a big number of projects and it sends the requests on every search input change.

kittybest

Thanks a lot! Just have a comment

kittybest · 2024-12-09T17:55:21Z

packages/interface/src/components/SortFilter.tsx

        options={["name_asc", "name_desc"]}
        value={`${orderBy}_${sortOrder}`}
-        onChange={async (sort) => {
-          const [order, sorting] = sort.split("_") as [OrderBy, SortOrder];
-
-          await setFilter({ orderBy: order, sortOrder: sorting }).catch();
-        }}
+        onChange={onChangeSortByDropdown}


Do you think we should have all the sortLabels back? including the time_asc and time_desc

I just moved the onChangeSortByDropdown code above to use it with useCallback to make it a bit more efficient 😊

My question is this sort only contains these two:

There should be time_asc and time_desc as well, now there's only options={["name_asc", "name_desc"]}, and it's not actually working even if I change the sortBy value.
But of course we could put this another issue.

NicoSerranoP · 2024-12-11T05:11:36Z

You can use useInfiniteQuery for pagination support and throttling or debouncing support with useDeferredValue to not send requests every time you type something in a search bar. Current solution is not optimized if we have a big number of projects and it sends the requests on every search input change.

I added the useDeferredValue in the Projects.tsx component. Is that okay? 😊

0xmad · 2024-12-11T16:37:25Z

You can use useInfiniteQuery for pagination support and throttling or debouncing support with useDeferredValue to not send requests every time you type something in a search bar. Current solution is not optimized if we have a big number of projects and it sends the requests on every search input change.

I added the useDeferredValue in the Projects.tsx component. Is that okay? 😊

You still need to use useInfiniteQuery for pagination support. Also, there are some configuration for requests optimization.
Imagine if you have a big number of projects and they all starts with your search input value. You fetch them all but you only need one page of results.

packages/interface/.env.example

packages/interface/src/components/ImageUpload.tsx

packages/interface/src/components/SingleRoundHome.tsx

packages/interface/src/layouts/BaseLayout.tsx

packages/interface/src/providers/index.tsx

NicoSerranoP · 2024-12-11T19:19:57Z

@kittybest @0xmad hi guys! 😊

I added the fixes for your current comments and also pushed my housekeeping fixes to prevent console errors. Could you review the file changes? I added a comment to each file to explain a bit more what I was doing.

After your final approval I will squash the commits to merge this PR

Thank you for your help :)

0xmad

@NicoSerranoP thanks, just some changes requested

packages/interface/src/components/ImageUpload.tsx

0xmad · 2024-12-11T19:48:52Z

packages/interface/src/components/ImageUpload.tsx

+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref: PolymorphicRef<ElementType>,


If you don't use this ref, you don't need to add it as second param

I tried but I am getting a console log error saying that forwardRef needs a function that receives two parameters and it is not possible to remove the second one (ref). What I did is change its name to _ and removed the types

0xmad · 2024-12-11T19:51:36Z

packages/interface/src/components/ImageUpload.tsx

+        control={control}
+        name={name}
+        render={({ field: { value, onChange, ...field } }) => (
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events


div shouldn't have onClick handlers.

This div contains the upload image button and the div icon. I tried to change <div> to <button> but it didn't work (we cannot have nested buttons)

packages/interface/src/components/ImageUpload.tsx

packages/interface/src/utils/fetchProjects.ts

packages/interface/src/components/ImageUpload.tsx

feat(sort-filter): get projects with metadata from server feat(sort-filter): search by name on the server fix(frontend): fix small react bugs fix(frontend): fix favicon.svg call in html meta fix(main): view projects button as router and not link fix(form): prevent undefined url call fix(frontend): activate ssr to prevent hydration errors fix(search): useDeferredValue to lag behind on search fix(image): prevent console.log error fix(image): pr comments fix(search): single if

kittybest · 2024-12-18T15:47:33Z

packages/interface/src/utils/fetchProjects.ts

+
+/**
+ * Fetch all approved projects with metadata
+ * @param registryAddress


there's another param called search

kittybest

Thanks for also the housekeeping! But maybe split the housekeeping part in another PR better in the future? make single PR only focus on single stuff.
For this PR is totally fine :)

NicoSerranoP requested review from ctrlc03, kittybest, 0xmad and crisgarner as code owners December 6, 2024 23:06

kittybest reviewed Dec 9, 2024

View reviewed changes

aguzmant103 linked an issue Dec 10, 2024 that may be closed by this pull request

Implement project search in registries branch #412

Open

vercel bot deployed to Preview December 11, 2024 05:14 View deployment

kittybest assigned NicoSerranoP Dec 11, 2024

kittybest added the enhancement New feature or request label Dec 11, 2024

NicoSerranoP commented Dec 11, 2024

View reviewed changes

packages/interface/.env.example Outdated Show resolved Hide resolved

vercel bot deployed to Preview December 11, 2024 19:14 View deployment

NicoSerranoP commented Dec 11, 2024

View reviewed changes

packages/interface/src/components/ImageUpload.tsx Show resolved Hide resolved

NicoSerranoP commented Dec 11, 2024

View reviewed changes

packages/interface/src/components/SingleRoundHome.tsx Outdated Show resolved Hide resolved

NicoSerranoP commented Dec 11, 2024

View reviewed changes

packages/interface/src/layouts/BaseLayout.tsx Outdated Show resolved Hide resolved

NicoSerranoP commented Dec 11, 2024

View reviewed changes

packages/interface/src/providers/index.tsx Outdated Show resolved Hide resolved

NicoSerranoP force-pushed the feat/projects-search-bar branch from aebbbdf to ccfc38e Compare December 11, 2024 19:22

vercel bot deployed to Preview December 11, 2024 19:28 View deployment

0xmad requested changes Dec 11, 2024

View reviewed changes

kittybest reviewed Dec 13, 2024

View reviewed changes

packages/interface/src/components/ImageUpload.tsx Show resolved Hide resolved

vercel bot deployed to Preview December 17, 2024 17:18 View deployment

NicoSerranoP force-pushed the feat/projects-search-bar branch from e80fe6e to 48e80f0 Compare December 17, 2024 17:34

NicoSerranoP force-pushed the feat/projects-search-bar branch from 48e80f0 to d6b0f56 Compare December 17, 2024 17:37

vercel bot deployed to Preview December 17, 2024 17:47 View deployment

kittybest reviewed Dec 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(sort-filter): search project by name #533

feat(sort-filter): search project by name #533

NicoSerranoP commented Dec 6, 2024 •

edited

Loading

vercel bot commented Dec 6, 2024 •

edited

Loading

0xmad commented Dec 9, 2024

kittybest left a comment

kittybest Dec 9, 2024

NicoSerranoP Dec 11, 2024

kittybest Dec 18, 2024

NicoSerranoP commented Dec 11, 2024

0xmad commented Dec 11, 2024

NicoSerranoP commented Dec 11, 2024

0xmad left a comment

0xmad Dec 11, 2024

NicoSerranoP Dec 17, 2024

0xmad Dec 11, 2024

NicoSerranoP Dec 17, 2024

kittybest Dec 18, 2024

kittybest left a comment

		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		ref: PolymorphicRef<ElementType>,

feat(sort-filter): search project by name #533

Are you sure you want to change the base?

feat(sort-filter): search project by name #533

Conversation

NicoSerranoP commented Dec 6, 2024 • edited Loading

vercel bot commented Dec 6, 2024 • edited Loading

0xmad commented Dec 9, 2024

kittybest left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NicoSerranoP commented Dec 11, 2024

0xmad commented Dec 11, 2024

NicoSerranoP commented Dec 11, 2024

0xmad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kittybest left a comment

Choose a reason for hiding this comment

NicoSerranoP commented Dec 6, 2024 •

edited

Loading

vercel bot commented Dec 6, 2024 •

edited

Loading