WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add comment sheet to timeline page

+35 -1
+35 -1
src/components/pages/grain-timeline.js
··· 2 2 import { grainApi } from '../../services/grain-api.js'; 3 3 import { recordCache } from '../../services/record-cache.js'; 4 4 import { queryCache } from '../../services/query-cache.js'; 5 + import { auth } from '../../services/auth.js'; 5 6 import '../templates/grain-feed-layout.js'; 6 7 import '../organisms/grain-gallery-card.js'; 8 + import '../organisms/grain-comment-sheet.js'; 7 9 import '../molecules/grain-pull-to-refresh.js'; 8 10 import '../atoms/grain-spinner.js'; 9 11 ··· 14 16 _refreshing: { state: true }, 15 17 _hasMore: { state: true }, 16 18 _cursor: { state: true }, 17 - _error: { state: true } 19 + _error: { state: true }, 20 + _commentSheetOpen: { state: true }, 21 + _commentGalleryUri: { state: true } 18 22 }; 19 23 20 24 static styles = css` ··· 47 51 this._hasMore = true; 48 52 this._cursor = null; 49 53 this._error = null; 54 + this._commentSheetOpen = false; 55 + this._commentGalleryUri = ''; 50 56 51 57 // Check cache synchronously to avoid flash 52 58 this.#initFromCache(); ··· 153 159 this.#observer.observe(sentinel); 154 160 } 155 161 162 + #handleCommentClick(e) { 163 + const galleryUri = e.target.closest('grain-gallery-card')?.gallery?.uri; 164 + if (!galleryUri) return; 165 + 166 + if (!auth.isAuthenticated) { 167 + this.dispatchEvent(new CustomEvent('show-login', { 168 + bubbles: true, 169 + composed: true 170 + })); 171 + return; 172 + } 173 + 174 + this._commentGalleryUri = galleryUri; 175 + this._commentSheetOpen = true; 176 + } 177 + 178 + #handleCommentSheetClose() { 179 + this._commentSheetOpen = false; 180 + this._commentGalleryUri = ''; 181 + } 182 + 156 183 render() { 157 184 return html` 158 185 <grain-feed-layout> 159 186 <grain-pull-to-refresh 160 187 ?refreshing=${this._refreshing} 161 188 @refresh=${this.#handleRefresh} 189 + @comment-click=${this.#handleCommentClick} 162 190 > 163 191 ${this._error ? html` 164 192 <p class="error">${this._error}</p> ··· 176 204 177 205 ${this._loading ? html`<grain-spinner></grain-spinner>` : ''} 178 206 </grain-pull-to-refresh> 207 + 208 + <grain-comment-sheet 209 + ?open=${this._commentSheetOpen} 210 + galleryUri=${this._commentGalleryUri} 211 + @close=${this.#handleCommentSheetClose} 212 + ></grain-comment-sheet> 179 213 </grain-feed-layout> 180 214 `; 181 215 }