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

Don't do a full page load when clicking the follow button #28872

Merged
merged 1 commit into from
Jan 20, 2024

Conversation

yardenshoham
Copy link
Member

  • Use htmx to perform the button request
    • hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' to authenticate (we should probably learn to reuse this)
    • hx-post="{{.ContextUser.HomeLink}}?action=follow" to send a POST request to follow the user
    • hx-target="#profile-avatar-card" to target the card div for replacement
    • hx-swap="outerHTML" to replace the card (as opposed to its inner content) with the new card that shows the new follower count and button color
  • Change the backend response to return a <div> tag (the card) instead of a redirect to the user page

Before

before

After

after

- Use htmx to perform the button request
  - `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` to authenticate (we should probably learn to reuse this)
  - `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST request to follow the user
  - `hx-target="#profile-avatar-card"` to target the card div for replacement
  - `hx-swap="outerHTML"` to replace the card (as opposed to its inner content) with the new card that shows the new follower count and button color
- Change the backend response to return a `<div>` tag (the card) instead of a redirect to the user page

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jan 20, 2024
@pull-request-size pull-request-size bot added the size/S Denotes a PR that changes 10-29 lines, ignoring generated files. label Jan 20, 2024
@delvh delvh added type/enhancement An improvement of existing functionality topic/ui-interaction Change the process how users use Gitea instead of the visual appearance labels Jan 20, 2024
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jan 20, 2024
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jan 20, 2024
@6543 6543 merged commit 1df06e3 into go-gitea:main Jan 20, 2024
25 checks passed
@GiteaBot GiteaBot added this to the 1.22.0 milestone Jan 20, 2024
@yardenshoham yardenshoham deleted the follow-htmx branch January 21, 2024 07:36
6543 added a commit to 6543-forks/gitea that referenced this pull request Jan 21, 2024
@6543 6543 added the skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. label Jan 21, 2024
@6543
Copy link
Member

6543 commented Jan 21, 2024

#28879

@6543 6543 mentioned this pull request Jan 21, 2024
zjjhot added a commit to zjjhot/gitea that referenced this pull request Jan 22, 2024
* giteaofficial/main:
  [skip ci] Updated licenses and gitignores
  Prevent anonymous container access if `RequireSignInView` is enabled (go-gitea#28877)
  Don't show new pr button when page is not compare pull (go-gitea#26431)
  Avoid duplicate JS error messages on UI (go-gitea#28873)
  Fix branch list bug which displayed default branch twice (go-gitea#28878)
  Revert adding htmx until we finaly decide to add it (go-gitea#28879)
  Don't do a full page load when clicking the follow button (go-gitea#28872)
  Don't do a full page load when clicking the subscribe button (go-gitea#28871)
  Fix incorrect PostgreSQL connection string for Unix sockets (go-gitea#28865)
  Run `npm audit fix` (go-gitea#28866)
  Fix migrate storage bug (go-gitea#28830)
  Set the `isPermaLink` attribute to `false` in the `guid` sub-element (go-gitea#28860)
  In administration documentation about environment variables, point to those for the Go runtime instead of Go compiler (go-gitea#28859)
  Move doctor package from modules to services (go-gitea#28856)
  Add support for sha256 repositories (go-gitea#23894)
  Fix incorrect action duration time when rerun the job before executed once (go-gitea#28364)
  Fix some RPM registry flaws (go-gitea#28782)
  tests: missing refs/ in bare repositories (go-gitea#28844)
  Fix archive creating LFS hooks and breaking pull requests (go-gitea#28848)
henrygoodman pushed a commit to henrygoodman/gitea that referenced this pull request Jan 31, 2024
…8872)

- Use htmx to perform the button request
- `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` to authenticate (we
should probably learn to reuse this)
- `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST
request to follow the user
- `hx-target="#profile-avatar-card"` to target the card div for
replacement
- `hx-swap="outerHTML"` to replace the card (as opposed to its inner
content) with the new card that shows the new follower count and button
color
- Change the backend response to return a `<div>` tag (the card) instead
of a redirect to the user page

# Before

![before](https://github.com/go-gitea/gitea/assets/20454870/86899d15-41c9-42ed-bd85-253b9caac7f8)

# After

![after](https://github.com/go-gitea/gitea/assets/20454870/59455d96-548c-4a81-a5b0-fab1dc1e87ef)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
silverwind pushed a commit to silverwind/gitea that referenced this pull request Feb 20, 2024
…8872)

- Use htmx to perform the button request
- `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` to authenticate (we
should probably learn to reuse this)
- `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST
request to follow the user
- `hx-target="#profile-avatar-card"` to target the card div for
replacement
- `hx-swap="outerHTML"` to replace the card (as opposed to its inner
content) with the new card that shows the new follower count and button
color
- Change the backend response to return a `<div>` tag (the card) instead
of a redirect to the user page

# Before

![before](https://github.com/go-gitea/gitea/assets/20454870/86899d15-41c9-42ed-bd85-253b9caac7f8)

# After

![after](https://github.com/go-gitea/gitea/assets/20454870/59455d96-548c-4a81-a5b0-fab1dc1e87ef)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 6, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. size/S Denotes a PR that changes 10-29 lines, ignoring generated files. skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. topic/ui-interaction Change the process how users use Gitea instead of the visual appearance type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants