Page MenuHomePhabricator
Differential D8294

[web] Update button label after successful copy
ClosedPublic
Actions

Authored by tomek on Jun 22 2023, 8:55 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 31, 5:11 PM
Unknown Object (File)
Sun, Mar 30, 9:11 PM
Unknown Object (File)
Sat, Mar 15, 5:59 PM
Unknown Object (File)
Mon, Mar 10, 1:48 AM
Unknown Object (File)
Thu, Mar 6, 7:35 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
View All Files
Subscribers
ashoat

Details

Reviewers
bartek
kamil
inka
Commits
rCOMM9bfaa6dc2a89: [web] Update button label after successful copy
Summary

Change button label after successful action.

Depends on D8246

Test Plan

Click copy button and check if the label changes.
Click it repeatedly and check if the label changes back only after 2s. from the last click.
Click it and close modal - nothing should break.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

tomek created this revision.Jun 22 2023, 8:55 AM
Herald added a subscriber: ashoat. · View Herald TranscriptJun 22 2023, 8:56 AM
Harbormaster returned this revision to the author for changes because remote builds failed.Jun 22 2023, 9:18 AM
Harbormaster failed remote builds in B20432: Diff 28006!
tomek requested review of this revision.Jun 23 2023, 1:38 AM
kamil accepted this revision.Jun 23 2023, 2:40 AM
kamil added inline comments.
web/invite-links/view-invite-link-modal.react.js
33–40 ↗(On Diff #28006)

I think this code is duplicated, wondering about wrapping this in a hook, what do you think?

This revision is now accepted and ready to land.Jun 23 2023, 2:40 AM
tomek added a child revision: D8306: [web] Allow other types of icons in menu item.Jun 23 2023, 8:51 AM
Harbormaster completed remote builds in B20432: Diff 28006.Jun 26 2023, 4:13 AM
tomek updated this revision to Diff 28150.Jun 27 2023, 3:52 AM

Create and use resetting state hook

tomek requested review of this revision.Jun 27 2023, 3:53 AM
tomek added inline comments.
web/invite-links/view-invite-link-modal.react.js
33–40 ↗(On Diff #28006)

Good idea! Created a generic hook with resetting state for this.

Harbormaster completed remote builds in B20533: Diff 28150.Jun 27 2023, 4:09 AM
kamil accepted this revision.Jun 27 2023, 6:07 AM
kamil added inline comments.
lib/hooks/useResettingState.js
9

probably having (T => T) | T defined as a separate type in hook-types.js as it can be reused might be a good option, but I do not feel strongly about this

This revision is now accepted and ready to land.Jun 27 2023, 6:07 AM
tomek added inline comments.Jun 27 2023, 8:13 AM
lib/hooks/useResettingState.js
9

Might be a good idea, but I don't think we're going to use it frequently - we can add it when there are more usages.

Closed by commit rCOMM9bfaa6dc2a89: [web] Update button label after successful copy (authored by tomek). · Explain WhyJun 27 2023, 8:20 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM9bfaa6dc2a89: [web] Update button label after successful copy.
ashoat mentioned this in D8027: [web] Scrolling to the edited message when it overflows.Jun 28 2023, 5:36 PM
ashoat added inline comments.Jun 28 2023, 5:39 PM
lib/hooks/useResettingState.js
1 ↗(On Diff #28177)

We generally name files use-resetting-state.js

tomek added inline comments.Jun 29 2023, 5:37 AM
lib/hooks/useResettingState.js
1 ↗(On Diff #28177)

Ah, sorry about that! After all these years it still isn't intuitive to me. Created a diff fixing the name D8368.

Revision Contents
Changeset List

PathSize
lib/
hooks/
26 lines
web/
invite-links/
17 lines
utils/
19 lines

Diff 28150

View Options

lib/hooks/useResettingState.js

Show First 20 Lines • Show All 65 Lines • ▼ Show 20 Lines
This runs the same two processes as the web app, but for the landing page. Note that the `landing.build.cjs` file (similar to the web app’s `app.build.cjs` file) is consumed by the Node server. This runs the same two processes as the web app, but for the landing page. Note that the `landing.build.cjs` file (similar to the web app’s `app.build.cjs` file) is consumed by the Node server.
# Debugging # Debugging
## React Developer Tools ## React Developer Tools
- For web, you can access the React Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Components” or “Profiler” tabs. This should work in both our development environment and in production. - For web, you can access the React Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Components” or “Profiler” tabs. This should work in both our development environment and in production.
- For iOS and Android, TODO - For iOS and Android, you can access the React Developer Tools by running `cd native && yarn react-devtools`. If you want to use it along with the JS debugger (see [Debugging JavaScript](#debugging-javascript)), you should open the JS debugger first, then open React Developer Tools, and finally refresh the app via the dev menu. More details on using React Developer Tools with React Native can be found [here](https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-native).
## Redux Developer Tools ## Redux Developer Tools
- For web, you can access the Redux Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Redux” tab. This should work in both our development environment and in production, although in production you won’t be able to see Redux actions from before you opened up the Redux dev tools. - For web, you can access the Redux Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Redux” tab. This should work in both our development environment and in production, although in production you won’t be able to see Redux actions from before you opened up the Redux dev tools.
- For iOS and Android, you can access the Redux Developer Tools through the Chrome extension’s Remote DevTools functionality. First, to open the Remote DevTools, right click on any webpage, go into the “Redux DevTools” menu, and select “Open Remote DevTools”. Then hit “Settings”, select “Use custom (local) server”, and configure it to connect to `localhost` on port 8043. This will connect to the `remotedev-server` instance that you started when you ran `cd native && yarn dev`. - For iOS and Android, you can access the Redux Developer Tools through the Chrome extension’s Remote DevTools functionality. First, to open the Remote DevTools, right click on any webpage, go into the “Redux DevTools” menu, and select “Open Remote DevTools”. Then hit “Settings”, select “Use custom (local) server”, and configure it to connect to `localhost` on port 8043. This will connect to the `remotedev-server` instance that you started when you ran `cd native && yarn dev`.
## Debugging JavaScript ## Debugging JavaScript
- For web, you can just use your browser of choice’s dev tools. - For web, you can just use your browser of choice’s dev tools.
- For iOS and Android, you can use the dev menu in dev builds to open up a JS debugger, where you can set breakpoints via the `debugger` expression. - For iOS and Android, you can use the dev menu in dev builds to open up a JS debugger, where you can set breakpoints via the `debugger` expression.
View Options

web/invite-links/view-invite-link-modal.react.js

Show First 20 Lines • Show All 65 Lines • ▼ Show 20 Lines
This runs the same two processes as the web app, but for the landing page. Note that the `landing.build.cjs` file (similar to the web app’s `app.build.cjs` file) is consumed by the Node server. This runs the same two processes as the web app, but for the landing page. Note that the `landing.build.cjs` file (similar to the web app’s `app.build.cjs` file) is consumed by the Node server.
# Debugging # Debugging
## React Developer Tools ## React Developer Tools
- For web, you can access the React Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Components” or “Profiler” tabs. This should work in both our development environment and in production. - For web, you can access the React Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Components” or “Profiler” tabs. This should work in both our development environment and in production.
- For iOS and Android, TODO - For iOS and Android, you can access the React Developer Tools by running `cd native && yarn react-devtools`. If you want to use it along with the JS debugger (see [Debugging JavaScript](#debugging-javascript)), you should open the JS debugger first, then open React Developer Tools, and finally refresh the app via the dev menu. More details on using React Developer Tools with React Native can be found [here](https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-native).
## Redux Developer Tools ## Redux Developer Tools
- For web, you can access the Redux Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Redux” tab. This should work in both our development environment and in production, although in production you won’t be able to see Redux actions from before you opened up the Redux dev tools. - For web, you can access the Redux Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Redux” tab. This should work in both our development environment and in production, although in production you won’t be able to see Redux actions from before you opened up the Redux dev tools.
- For iOS and Android, you can access the Redux Developer Tools through the Chrome extension’s Remote DevTools functionality. First, to open the Remote DevTools, right click on any webpage, go into the “Redux DevTools” menu, and select “Open Remote DevTools”. Then hit “Settings”, select “Use custom (local) server”, and configure it to connect to `localhost` on port 8043. This will connect to the `remotedev-server` instance that you started when you ran `cd native && yarn dev`. - For iOS and Android, you can access the Redux Developer Tools through the Chrome extension’s Remote DevTools functionality. First, to open the Remote DevTools, right click on any webpage, go into the “Redux DevTools” menu, and select “Open Remote DevTools”. Then hit “Settings”, select “Use custom (local) server”, and configure it to connect to `localhost` on port 8043. This will connect to the `remotedev-server` instance that you started when you ran `cd native && yarn dev`.
## Debugging JavaScript ## Debugging JavaScript
- For web, you can just use your browser of choice’s dev tools. - For web, you can just use your browser of choice’s dev tools.
- For iOS and Android, you can use the dev menu in dev builds to open up a JS debugger, where you can set breakpoints via the `debugger` expression. - For iOS and Android, you can use the dev menu in dev builds to open up a JS debugger, where you can set breakpoints via the `debugger` expression.
View Options

web/utils/tooltip-action-utils.js

Show First 20 Lines • Show All 65 Lines • ▼ Show 20 Lines
This runs the same two processes as the web app, but for the landing page. Note that the `landing.build.cjs` file (similar to the web app’s `app.build.cjs` file) is consumed by the Node server. This runs the same two processes as the web app, but for the landing page. Note that the `landing.build.cjs` file (similar to the web app’s `app.build.cjs` file) is consumed by the Node server.
# Debugging # Debugging
## React Developer Tools ## React Developer Tools
- For web, you can access the React Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Components” or “Profiler” tabs. This should work in both our development environment and in production. - For web, you can access the React Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Components” or “Profiler” tabs. This should work in both our development environment and in production.
- For iOS and Android, TODO - For iOS and Android, you can access the React Developer Tools by running `cd native && yarn react-devtools`. If you want to use it along with the JS debugger (see [Debugging JavaScript](#debugging-javascript)), you should open the JS debugger first, then open React Developer Tools, and finally refresh the app via the dev menu. More details on using React Developer Tools with React Native can be found [here](https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-native).
## Redux Developer Tools ## Redux Developer Tools
- For web, you can access the Redux Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Redux” tab. This should work in both our development environment and in production, although in production you won’t be able to see Redux actions from before you opened up the Redux dev tools. - For web, you can access the Redux Developer Tools through the Chrome extension by opening the Chrome Developer Tools and selecting the “Redux” tab. This should work in both our development environment and in production, although in production you won’t be able to see Redux actions from before you opened up the Redux dev tools.
- For iOS and Android, you can access the Redux Developer Tools through the Chrome extension’s Remote DevTools functionality. First, to open the Remote DevTools, right click on any webpage, go into the “Redux DevTools” menu, and select “Open Remote DevTools”. Then hit “Settings”, select “Use custom (local) server”, and configure it to connect to `localhost` on port 8043. This will connect to the `remotedev-server` instance that you started when you ran `cd native && yarn dev`. - For iOS and Android, you can access the Redux Developer Tools through the Chrome extension’s Remote DevTools functionality. First, to open the Remote DevTools, right click on any webpage, go into the “Redux DevTools” menu, and select “Open Remote DevTools”. Then hit “Settings”, select “Use custom (local) server”, and configure it to connect to `localhost` on port 8043. This will connect to the `remotedev-server` instance that you started when you ran `cd native && yarn dev`.
## Debugging JavaScript ## Debugging JavaScript
- For web, you can just use your browser of choice’s dev tools. - For web, you can just use your browser of choice’s dev tools.
- For iOS and Android, you can use the dev menu in dev builds to open up a JS debugger, where you can set breakpoints via the `debugger` expression. - For iOS and Android, you can use the dev menu in dev builds to open up a JS debugger, where you can set breakpoints via the `debugger` expression.