Lucas Bordeau 5946b37712 Refactored object filter dropdown input state management (#11838)
This PR refactors the generic module object dropdown filter input.

We have multiple components for each filter type and each one was using
selectedFilterState and the applyRecordFilter hook to read and set its
value.

The main issue was that each component was forced to pass every property
of a RecordFilter to applyRecordFilter to only modify the value
property, thus creating a lot of unnecessary dependencies and tight
coupling between every component and hook that used the record filters.

Now we have each component only reading from a new
objectFilterDropdownCurrentRecordFilterComponentState, scoped to a
ObjectFilterDropdownComponentInstanceContext, thus whether we're in a
view bar dropdown, an editable filter chip dropdown or an advanced
filter dropdown, we know where to read the filter value from.

This component state might even be simplified by only storing the record
filter id, thus avoiding having to synchronize this state with its
counterpart in currentRecordFilterComponentState, but we should try
after the main refactor effort, as those two states aren't in the same
instance context.

We implement a new applyObjectFilterDropdownFilterValue hook to handle
the value setting from an object filter dropdown input component.
There's also a new useApplyObjectFilterDropdownOperand for doing the
same but for operand.

Another important thing that had to be done to keep a synchronous code
path was to set the states of each advanced filter row at the advanced
filter dropdown onOpen event, using useSetAdvancedFilterDropdownStates.

Finally we remove : useApplyRecordFilter, useSelectFilterUsedInDropdown
and selectedFilterComponentState which were making all of this zone
difficult to work with.

Closes https://github.com/twentyhq/core-team-issues/issues/718
Closes https://github.com/twentyhq/core-team-issues/issues/720
2025-05-02 17:28:45 +02:00
2024-11-06 14:24:07 +01:00
2025-04-09 17:35:25 +02:00
2025-04-03 14:26:19 +02:00
2025-03-05 14:27:17 +01:00
2024-01-10 17:05:23 +01:00
2025-03-07 18:19:42 +01:00
2025-04-16 11:46:37 +02:00


Twenty logo

The #1 Open-Source CRM

🌐 Website · 📚 Documentation · Roadmap · Discord · Figma


Companies view


Installation

See:
🚀 Self-hosting
🖥️ Local Setup

Does the world need another CRM?

We built Twenty for three reasons:

CRMs are too expensive, and users are trapped. Companies use locked-in customer data to hike prices. It shouldn't be that way.

A fresh start is required to build a better experience. We can learn from past mistakes and craft a cohesive experience inspired by new UX patterns from tools like Notion, Airtable or Linear.

We believe in Open-source and community. Hundreds of developers are already building Twenty together. Once we have plugin capabilities, a whole ecosystem will grow around it.


What You Can Do With Twenty

We're currently developing Twenty's beta version.

Please feel free to flag any specific needs you have by creating an issue.

Below are a few features we have implemented to date:

Add, filter, sort, edit, and track customers:

Companies view

Create one or several opportunities for each company:

Opportunities view

Track deals effortlessly with the email integration:

Emails

Tailor your data model to meet business needs:

Data model

See rich notes displayed in a timeline:

Rich notes

Create tasks on records

Tasks

Keyboard shortcuts

Connect your CRM to all your tools through our APIs and Webhooks.

API


Stack

Thanks

Chromatic Greptile Sentry Crowdin

Thanks to these amazing services that we use and recommend for UI testing (Chromatic), code review (Greptile), catching bugs (Sentry) and translating (Crowdin).

Join the Community

Description
No description provided
Readme AGPL-3.0 324 MiB
Languages
TypeScript 98.7%
MDX 1%