twentyhq / twenty

Building a modern alternative to Salesforce, powered by the community.
https://twenty.com
GNU Affero General Public License v3.0
14.99k stars 1.47k forks source link

Save last view as the default view when I come back #5949

Open FelixMalfait opened 2 weeks ago

FelixMalfait commented 2 weeks ago

We recently introduced a localStorageEffect which enables us to persist recoil states in local Storage: https://github.com/twentyhq/twenty/blob/d045bcbb94a5027f8e4cafc129056653670a4b16/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/states/isNavigationSectionOpenComponentState.ts#L8 (in that case it's used to persist if the left-side menu is collapsed ; thanks to this effect if you refresh the page it will remain on the same state)

We should leverage this for the view switcher. If I'm on a view "filtered companies" and I refresh the page or I click on the left menu to go to people then come back to companies, I should remain on the Filtered companies view.

Marking as good first issue but it might be trickier than it seems as always!

greptile-apps[bot] commented 2 weeks ago

To save the last view as the default view, follow these steps:

  1. Persist Current View State:

    • Use localStorageEffect to persist the current view state in local storage.
    • Reference: packages/twenty-front/src/modules/ui/navigation/navigation-drawer/states/isNavigationSectionOpenComponentState.ts.
  2. Update View State Management:

    • Modify useGetCurrentView.ts to retrieve the view state from local storage when the component mounts.
    • Modify useSaveCurrentViewFiltersAndSorts.ts to save the current view state to local storage whenever it changes.
  3. Handle View Switching:

    • Update QueryParamsViewIdEffect.tsx to check local storage for the last view state and set it accordingly when switching views.

Example Code Snippet:

// In useGetCurrentView.ts
const currentViewState = useRecoilState(currentViewStateAtom);
useEffect(() => {
  const savedView = localStorage.getItem('lastView');
  if (savedView) {
    setCurrentViewState(savedView);
  }
}, []);

// In useSaveCurrentViewFiltersAndSorts.ts
useEffect(() => {
  localStorage.setItem('lastView', currentViewState);
}, [currentViewState]);

This will ensure that the last view is saved and restored appropriately.

References

freakchand commented 2 weeks ago

Hey Felix, Can you please assign this request to me?

FelixMalfait commented 2 weeks ago

Sure thanks @freakchand!