appview: pages: fix star `hx-target` bug #336

merged

opened by

boltless.me 4 months ago targeting master from boltless.me/core: push-lnnlktvkuluq

POST /star's template was whole repoActions fragment but hx-target was set to #starBtn only. Resulting wrapper div copied every time when user starred/unstarred the repo.

This wasn't noticeable because fork button next to it was invisible due to undefined .DisableFork field on RepoStarFragment

Signed-off-by: Seongmin Lee boltlessengineer@proton.me

options

unified split

Changed files

+54 -54

appview

pages

pages.go

templates

layouts

repobase.html

repo

fragments

repoActions.html

repoStar.html

state

star.go

+3 -3

appview/pages/pages.go

···

       448
       448
        
       	return p.executePlain("user/fragments/editPins", w, params)

     

       449
       449
        
       }

     

       450
       450
        
       

     

       451
       451
       -
       type RepoActionsFragmentParams struct {

     

       451
       451
       +
       type RepoStarFragmentParams struct {

     

       452
       452
        
       	IsStarred bool

     

       453
       453
        
       	RepoAt    syntax.ATURI

     

       454
       454
        
       	Stats     db.RepoStats

     

       455
       455
        
       }

     

       456
       456
        
       

     

       457
       457
       -
       func (p *Pages) RepoActionsFragment(w io.Writer, params RepoActionsFragmentParams) error {

     

       458
       458
       -
       	return p.executePlain("repo/fragments/repoActions", w, params)

     

       457
       457
       +
       func (p *Pages) RepoStarFragment(w io.Writer, params RepoStarFragmentParams) error {

     

       458
       458
       +
       	return p.executePlain("repo/fragments/repoStar", w, params)

     

       459
       459
        
       }

     

       460
       460
        
       

     

       461
       461
        
       type RepoDescriptionParams struct {

+23 -1

appview/pages/templates/layouts/repobase.html

···

       19
       19
        
                 <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>

     

       20
       20
        
               </div>

     

       21
       21
        
       

     

       22
       22
       -
               {{ template "repo/fragments/repoActions" .RepoInfo }}

     

       22
       22
       +
               <div class="flex items-center gap-2 z-auto">

     

       23
       23
       +
                 {{ template "repo/fragments/repoStar" .RepoInfo }}

     

       24
       24
       +
                 {{ if .RepoInfo.DisableFork }}

     

       25
       25
       +
                   <button

     

       26
       26
       +
                     class="btn text-sm no-underline hover:no-underline flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"

     

       27
       27
       +
                     disabled

     

       28
       28
       +
                     title="Empty repositories cannot be forked"

     

       29
       29
       +
                   >

     

       30
       30
       +
                     {{ i "git-fork" "w-4 h-4" }}

     

       31
       31
       +
                     fork

     

       32
       32
       +
                   </button>

     

       33
       33
       +
                 {{ else }}

     

       34
       34
       +
                   <a

     

       35
       35
       +
                     class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"

     

       36
       36
       +
                     hx-boost="true"

     

       37
       37
       +
                     href="/{{ .RepoInfo.FullName }}/fork"

     

       38
       38
       +
                   >

     

       39
       39
       +
                     {{ i "git-fork" "w-4 h-4" }}

     

       40
       40
       +
                     fork

     

       41
       41
       +
                     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       42
       42
       +
                   </a>

     

       43
       43
       +
                 {{ end }}

     

       44
       44
       +
               </div>

     

       23
       45
        
             </div>

     

       24
       46
        
             {{ template "repo/fragments/repoDescription" . }}

     

       25
       47
        
           </section>

-48

appview/pages/templates/repo/fragments/repoActions.html

···

       1
       1
       -
       {{ define "repo/fragments/repoActions" }}

     

       2
       2
       -
           <div class="flex items-center gap-2 z-auto">

     

       3
       3
       -
               <button

     

       4
       4
       -
                   id="starBtn"

     

       5
       5
       -
                   class="btn disabled:opacity-50 disabled:cursor-not-allowed flex gap-2 items-center group"

     

       6
       6
       -
                   {{ if .IsStarred }}

     

       7
       7
       -
                       hx-delete="/star?subject={{ .RepoAt }}&countHint={{ .Stats.StarCount }}"

     

       8
       8
       -
                   {{ else }}

     

       9
       9
       -
                       hx-post="/star?subject={{ .RepoAt }}&countHint={{ .Stats.StarCount }}"

     

       10
       10
       -
                   {{ end }}

     

       11
       11
       -
       

     

       12
       12
       -
                   hx-trigger="click"

     

       13
       13
       -
                   hx-target="#starBtn"

     

       14
       14
       -
                   hx-swap="outerHTML"

     

       15
       15
       -
                   hx-disabled-elt="#starBtn"

     

       16
       16
       -
               >

     

       17
       17
       -
                 {{ if .IsStarred }}

     

       18
       18
       -
                     {{ i "star" "w-4 h-4 fill-current" }}

     

       19
       19
       -
                 {{ else }}

     

       20
       20
       -
                     {{ i "star" "w-4 h-4" }}

     

       21
       21
       -
                 {{ end }}

     

       22
       22
       -
                 <span class="text-sm">

     

       23
       23
       -
                     {{ .Stats.StarCount }}

     

       24
       24
       -
                 </span>

     

       25
       25
       -
                 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       26
       26
       -
               </button>

     

       27
       27
       -
               {{ if .DisableFork }}

     

       28
       28
       -
                   <button

     

       29
       29
       -
                       class="btn text-sm no-underline hover:no-underline flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"

     

       30
       30
       -
                       disabled

     

       31
       31
       -
                       title="Empty repositories cannot be forked"

     

       32
       32
       -
                   >

     

       33
       33
       -
                       {{ i "git-fork" "w-4 h-4" }}

     

       34
       34
       -
                       fork

     

       35
       35
       -
                   </button>

     

       36
       36
       -
               {{ else }}

     

       37
       37
       -
                   <a

     

       38
       38
       -
                       class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"

     

       39
       39
       -
                       hx-boost="true"

     

       40
       40
       -
                       href="/{{ .FullName }}/fork"

     

       41
       41
       -
                   >

     

       42
       42
       -
                       {{ i "git-fork" "w-4 h-4" }}

     

       43
       43
       -
                       fork

     

       44
       44
       -
                       {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       45
       45
       -
                   </a>

     

       46
       46
       -
               {{ end }}

     

       47
       47
       -
           </div>

     

       48
       48
       -
       {{ end }}

+26

appview/pages/templates/repo/fragments/repoStar.html

···

       1
       1
       +
       {{ define "repo/fragments/repoStar" }}

     

       2
       2
       +
           <button

     

       3
       3
       +
               id="starBtn"

     

       4
       4
       +
               class="btn disabled:opacity-50 disabled:cursor-not-allowed flex gap-2 items-center group"

     

       5
       5
       +
               {{ if .IsStarred }}

     

       6
       6
       +
                   hx-delete="/star?subject={{ .RepoAt }}&countHint={{ .Stats.StarCount }}"

     

       7
       7
       +
               {{ else }}

     

       8
       8
       +
                   hx-post="/star?subject={{ .RepoAt }}&countHint={{ .Stats.StarCount }}"

     

       9
       9
       +
               {{ end }}

     

       10
       10
       +
       

     

       11
       11
       +
               hx-trigger="click"

     

       12
       12
       +
               hx-target="this"

     

       13
       13
       +
               hx-swap="outerHTML"

     

       14
       14
       +
               hx-disabled-elt="#starBtn"

     

       15
       15
       +
           >

     

       16
       16
       +
               {{ if .IsStarred }}

     

       17
       17
       +
                   {{ i "star" "w-4 h-4 fill-current" }}

     

       18
       18
       +
               {{ else }}

     

       19
       19
       +
                   {{ i "star" "w-4 h-4" }}

     

       20
       20
       +
               {{ end }}

     

       21
       21
       +
               <span class="text-sm">

     

       22
       22
       +
                   {{ .Stats.StarCount }}

     

       23
       23
       +
               </span>

     

       24
       24
       +
               {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       25
       25
       +
           </button>

     

       26
       26
       +
       {{ end }}

+2 -2

appview/state/star.go

···

       74
       74
        
       

     

       75
       75
        
       		s.notifier.NewStar(r.Context(), star)

     

       76
       76
        
       

     

       77
       77
       -
       		s.pages.RepoActionsFragment(w, pages.RepoActionsFragmentParams{

     

       77
       77
       +
       		s.pages.RepoStarFragment(w, pages.RepoStarFragmentParams{

     

       78
       78
        
       			IsStarred: true,

     

       79
       79
        
       			RepoAt:    subjectUri,

     

       80
       80
        
       			Stats: db.RepoStats{

     
···

       116
       116
        
       

     

       117
       117
        
       		s.notifier.DeleteStar(r.Context(), star)

     

       118
       118
        
       

     

       119
       119
       -
       		s.pages.RepoActionsFragment(w, pages.RepoActionsFragmentParams{

     

       119
       119
       +
       		s.pages.RepoStarFragment(w, pages.RepoStarFragmentParams{

     

       120
       120
        
       			IsStarred: false,

     

       121
       121
        
       			RepoAt:    subjectUri,

     

       122
       122
        
       			Stats: db.RepoStats{