WIP PWA for Grain
feat: add comment sheet to timeline page
+35
-1
+35
-1
src/components/pages/grain-timeline.js
+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
}