Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: dnd workspace list will cause page to reload #1848

Merged
merged 2 commits into from
Apr 7, 2023

Conversation

pengx17
Copy link
Collaborator

@pengx17 pengx17 commented Apr 7, 2023

Use useTransition to get rid of reloading issue when rearranging workspaces

🤖 Generated by Copilot at e07770a

Summary

🚫🔧🔄

This pull request improves the user interface and performance of the workspace list modal component. It adds a disabled prop and a transition effect to the modal, and refactors the workspaces data fetching logic to a separate component. It also updates the WorkspaceList component to accept a disabled prop.

We are the masters of the modal
We control the transition and the flow
We disable the list when we need to
We refactor the atom with our code

Walkthrough

  • Add disabled prop to WorkspaceList and WorkspaceListItem components to disable drag and drop and opacity when transitioning (link, link, link, link, link)
  • Use useTransition hook to create a transition state and function for the WorkspaceListModal component and pass it to the WorkspaceList component as the disabled prop (link, link)
  • Wrap the setWorkspaces function with the transition function to update the workspaces order after a drag and drop action without unmounting or remounting the modal component (link)
  • Move the workspaces data fetching and setting logic from WorkspaceListModal to a separate component WorkspacesSuspense in ./apps/web/src/layouts/index.tsx (link, link)

@pengx17 pengx17 requested a review from himself65 April 7, 2023 15:29
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:29 — with GitHub Actions Inactive
@vercel
Copy link

vercel bot commented Apr 7, 2023

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

Name Status Preview Comments Updated (UTC)
affine-preview ✅ Ready (Inspect) Visit Preview Apr 7, 2023 3:55pm
affine-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 7, 2023 3:55pm

@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:29 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:29 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:29 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:29 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:31 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:32 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:32 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:32 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:32 — with GitHub Actions Inactive
@vercel vercel bot temporarily deployed to Preview – affine-preview April 7, 2023 15:32 Inactive
@perfsee
Copy link

perfsee bot commented Apr 7, 2023

affine-toeverything

Bundle main

diff ------------------- Bundle Size Diff -------------------------

@@                       EntryPoint: main                        @@
##                     master …ix/dnd-reload                 +/- ##
===================================================================
< Bundle              2.89 MB        2.89 MB      +207 B(+0.01%)   
< Initial JS          1.81 MB        1.81 MB      +117 B(+0.01%)   
= Initial CSS         2.51 kB        2.51 kB                       
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~#
= Assets                   38             38                       
= Chunks                   36             36                       
= Packages                142            142                       
= Duplicates                7              7                       
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Warnings ~~~~~~~~~~~~~~~~~~~~~~~~~~~#
! Deduplicate versions of libraries                                
! Separate mixed content assets files                              
! Avoid non-minified assets                                        
! Avoid cache wasting                                              

@@                    EntryPoint: pages/_app                     @@
##                     master …ix/dnd-reload                 +/- ##
===================================================================
< Bundle              2.78 MB        2.78 MB      +207 B(+0.01%)   
< Initial JS           1.7 MB         1.7 MB      +117 B(+0.01%)   
= Initial CSS         2.51 kB        2.51 kB                       
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~#
= Assets                   36             36                       
= Chunks                   34             34                       
= Packages                142            142                       
= Duplicates                7              7                       
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Warnings ~~~~~~~~~~~~~~~~~~~~~~~~~~~#
! Deduplicate versions of libraries                                
! Separate mixed content assets files                              
! Avoid non-minified assets                                        
! Avoid cache wasting                                              

@@                   EntryPoint: pages/_error                    @@
##                     master …ix/dnd-reload                 +/- ##
===================================================================
= Bundle              16.5 kB        16.5 kB                       
= Initial JS          16.5 kB        16.5 kB                       
= Initial CSS             0 B            0 B                       
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~#
= Assets                    2              2                       
= Chunks                    2              2                       
= Packages                  5              5                       
= Duplicates                0              0                       

...and more

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Apr 7, 2023

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: d66cc6b
Status: ✅  Deploy successful!
Preview URL: https://6346ff34.affine.pages.dev
Branch Preview URL: https://0407-fix-dnd-reload.affine.pages.dev

View logs

@codecov
Copy link

codecov bot commented Apr 7, 2023

Codecov Report

Patch coverage: 100.00% and project coverage change: +1.08 🎉

Comparison is base (ea06df4) 73.70% compared to head (d66cc6b) 74.78%.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1848      +/-   ##
==========================================
+ Coverage   73.70%   74.78%   +1.08%     
==========================================
  Files         250      250              
  Lines        4757     4760       +3     
  Branches      930      924       -6     
==========================================
+ Hits         3506     3560      +54     
+ Misses       1052     1003      -49     
+ Partials      199      197       -2     
Flag Coverage Δ
e2etest 72.50% <100.00%> (+3.64%) ⬆️
storybook-test 42.01% <100.00%> (+0.07%) ⬆️
unittest 47.36% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...src/components/pure/workspace-list-modal/index.tsx 85.71% <ø> (+42.85%) ⬆️
apps/web/src/providers/ModalProvider.tsx 89.47% <100.00%> (+14.47%) ⬆️
.../component/src/components/workspace-list/index.tsx 100.00% <100.00%> (ø)

... and 18 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

@vercel vercel bot temporarily deployed to Preview – affine-storybook April 7, 2023 15:34 Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:49 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:50 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:50 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:50 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:50 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:52 — with GitHub Actions Inactive
@vercel vercel bot temporarily deployed to Preview – affine-preview April 7, 2023 15:52 Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:53 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:53 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:53 — with GitHub Actions Inactive
@pengx17 pengx17 temporarily deployed to development April 7, 2023 15:53 — with GitHub Actions Inactive
@vercel vercel bot temporarily deployed to Preview – affine-storybook April 7, 2023 15:55 Inactive
@himself65 himself65 merged commit d4b2b9a into master Apr 7, 2023
@himself65 himself65 deleted the 0407/fix/dnd-reload branch April 7, 2023 16:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

2 participants