Lucas Bordeau 9e00a67b25 Fix kanban loading bug (#12042)
Fixes https://github.com/twentyhq/core-team-issues/issues/956

This PR fixes a bug that appeared when switching between two kanban
views multiple times.

Steps to reproduce : 
- Go to kanban view A
- Go to kanban view B
- Go back to kanban view A

Video before : 


https://github.com/user-attachments/assets/4fa789ae-7187-498e-82b4-ee7896cd95d1

Video after : 


https://github.com/user-attachments/assets/2b323a2d-2f76-405d-9abd-38fe72ee2214

The problem was that we allowed a hook to take a nullable parameter that
can be nullable between page switch, and threw when it was undefined.

In order to be more cautious in the future, let's be sure that we don't
throw for undefined props of a hook, when it is expected that those
props can be in an undefined state for several React render loops, while
fetching new data.

Here I identified the parent effect : `<RecordIndexBoardDataLoader />`
that loads all states for a board when we switch between views, for each
column, by calling `<RecordIndexBoardColumnLoaderEffect />` in a
`.map()`.

Each `RecordIndexBoardColumnLoaderEffect` was calling
`useLoadRecordIndexBoardColumn` with a potentially undefined
`boardFieldMetadataId`.

So to fix this, I cut the render flow higher than the throw in
`useLoadRecordIndexBoardColumn`, and by doing that I was able to ensure
that `recordIndexKanbanFieldMetadataItem` in
`RecordIndexBoardDataLoader` was already defined when using it inside
`useLoadRecordIndexBoardColumn`.

`recordIndexKanbanFieldMetadataItem` was unnecessarily fetched two
times, one time in `RecordIndexBoardDataLoader` and another time in its
child `useLoadRecordIndexBoardColumn` hook.

By implementing this flow-cut higher up, I could then remove the `|
null` in TypeScript in children components, and expect a defined value
in all the children of `RecordIndexBoardDataLoader`, thus removing the
need to ask ourselves if we should throw or not in
`useLoadRecordIndexBoardColumn`.
2025-05-15 10:27:47 +02:00
2025-05-14 16:35:51 +05:30
2024-11-06 14:24:07 +01:00
2025-05-15 10:27:47 +02: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 1.1 GiB
Languages
TypeScript 98.7%
MDX 1%