web/app: fix lint issues

nakamauwu · Oct 17, 2024 · cfd6a5c · cfd6a5c
1 parent e686e3b
commit cfd6a5c
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 701 deletions.
diff --git a/web/app/components/app-header.js b/web/app/components/app-header.js
@@ -163,7 +163,6 @@ function showNotification(n) {
     const sysn = new Notification(title, {
         body,
         tag: n.id,
-        timestamp: n.issuedAt,
         data: n,
         icon: location.origin + "/icons/logo-circle-512.png",
     })

diff --git a/web/app/components/home-page.js b/web/app/components/home-page.js
@@ -78,7 +78,7 @@ function HomePage() {
                 setEndReached(true)
             }
         }, err => {
-            const msg = mode === ("timeline" ? "could not fetch more timeline items: " : "could not fetch more posts: ") + err.message
+            const msg = (mode === "timeline" ? "could not fetch more timeline items: " : "could not fetch more posts: ") + err.message
             console.error(msg)
             setToast({ type: "error", content: msg })
         }).finally(() => {
@@ -165,7 +165,7 @@ function HomePage() {
                 <p class="loader" aria-busy="true" aria-live="polite">${mode === "timeline"
                 ? translate("homePage.loading.timeline")
                 : translate("homePage.loading.posts")}
-                <p>
+                </p>
             ` : html`
                 <div role="tabpanel" id="${mode}-tabpanel" aria-labelledby="${mode}-tab">
                 ${posts.length === 0 ? html`
@@ -184,11 +184,12 @@ function HomePage() {
                         <p class="loader" aria-busy="true" aria-live="polite">${mode === "timeline"
                         ? translate("homePage.loading.timeline")
                         : translate("homePage.loading.posts")}
-                        <p>
+                        </p>
                     ` : endReached ? html`
                         <p>${translate("homePage.end")}</p>
                     ` : null}
                 `}
+                </div>
             `}
         </main>
         ${toast !== null ? html`<toast-item .toast=${toast}></toast-item>` : null}
@@ -472,7 +473,7 @@ function PostForm() {
                             </g>
                         </g>
                     </svg>
-                    <span>${translate("postForm.submit")}</button>
+                    <span>${translate("postForm.submit")}</span>
                 </button>
                 </div>
             ` : null}

diff --git a/web/app/components/notifications-page.js b/web/app/components/notifications-page.js
@@ -205,11 +205,11 @@ function NotificationsPage() {
                 <h1>Notifications</h1>
                 <div class="notifications-controls">
                     ${window.Notification ? html`
-                    <label class="switch-wrapper">
-                        <input type="checkbox" role="switch" name="notifications_enabled" .checked=${notificationsEnabled}
-                            @change=${onNotifyInputChange}>
-                        <span>Notify?</span>
-                    </label>
+                        <label class="switch-wrapper">
+                            <input type="checkbox" role="switch" name="notifications_enabled" .checked=${notificationsEnabled}
+                                @change=${onNotifyInputChange}>
+                            <span>Notify?</span>
+                        </label>
                     ` : null}
                     <button .disabled=${markingAllAsRead} @click=${onReadAllBtnClick}>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -228,35 +228,36 @@ function NotificationsPage() {
                 </div>
             </div>
             ${err !== null ? html`
-            <p class="error" role="alert">Could not fetch notifications: ${err.message}</p>
+                <p class="error" role="alert">Could not fetch notifications: ${err.message}</p>
             ` : fetching ? html`
-            <p class="loader" aria-busy="true" aria-live="polite">Loading notifications... please wait.<p>
-                    ` : html`
-                    ${queue.length !== 0 ? html`
+                <p class="loader" aria-busy="true" aria-live="polite">Loading notifications... please wait.</p>
+            ` : html`
+                ${queue.length !== 0 ? html`
                     <button class="queue-btn" @click=${onQueueBtnClick}>${queue.length} new notifications</button>
-                    ` : null}
-                    ${notifications.length === 0 ? html`
+                ` : null}
+                ${notifications.length === 0 ? html`
                     <p>0 notifications</p>
-                    ` : html`
+                ` : html`
                     <div class="notifications" role="feed">
-                        ${repeat(notifications, n => n.id, n => html`<notification-item .notification=${n}></notification-item>
-                        `)}
+                        ${repeat(notifications, n => n.id, n => html`<notification-item .notification=${n}></notification-item>`)}
                     </div>
                     ${!noMoreNotifications ? html`
-                    <intersectable-comp @is-intersecting=${loadMore}></intersectable-comp>
-                    <p class="loader" aria-busy="true" aria-live="polite">Loading notifications... please wait.<p>
-                            ` : endReached ? html`
-                            <p>End reached.</p>
-                            ` : null}
-                            `}
-                            `}
+                        <intersectable-comp @is-intersecting=${loadMore}></intersectable-comp>
+                        <p class="loader" aria-busy="true" aria-live="polite">Loading notifications... please wait.</p>
+                    ` : endReached ? html`<p>End reached.</p>` : null}
+                `}
+            `}
         </main>
         ${toast !== null ? html`<toast-item .toast=${toast}></toast-item>` : null}
     `
 }
 
 customElements.define("notifications-page", component(NotificationsPage, { useShadowDOM: false }))
 
+/**
+ * @param {Object} props
+ * @param {import("../types.js").Notification} props.notification
+ */
 function NotificationItem({ notification: initialNotification }) {
     const [_, setHasUnreadNotifications] = useStore(hasUnreadNotificationsStore)
     const [notification, setNotification] = useState(initialNotification)
@@ -355,7 +356,6 @@ function NotificationItem({ notification: initialNotification }) {
     `
 }
 
-// @ts-ignore
 customElements.define("notification-item", component(NotificationItem, { useShadowDOM: false }))
 
 function fetchNotifications(before = "", last = pageSize) {

diff --git a/web/app/components/post-page.js b/web/app/components/post-page.js
@@ -115,7 +115,7 @@ function PostPage({ postID }) {
                     ${postErr !== null ? html`
                         <p class="error" role="alert">Could not fetch post: ${postErr.message}</p>
                     ` : fetching ? html`
-                        <p class="loader" aria-busy="true" aria-live="polite">Loading post... please wait.<p>
+                        <p class="loader" aria-busy="true" aria-live="polite">Loading post... please wait.</p>
                     ` : html`
                         <post-item .post=${post} .type=${"post"} @resource-deleted=${onPostDeleted}></post-item>
                     `}
@@ -126,7 +126,7 @@ function PostPage({ postID }) {
                 ${commentsErr !== null ? html`
                     <p class="error" role="alert">Could not fetch comments: ${commentsErr.message}</p>
                 ` : fetching ? html`
-                    <p class="loader" aria-busy="true" aria-live="polite">Loading comments... please wait.<p>
+                    <p class="loader" aria-busy="true" aria-live="polite">Loading comments... please wait.</p>
                 ` : html`
                     ${comments.length === 0 ? html`
                         <p>0 comments</p>
@@ -236,7 +236,7 @@ function CommentForm({ postID }) {
             ${content !== "" ? html`
                 <button .disabled=${fetching}>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="paper-plane"><rect width="24" height="24" opacity="0"/><path d="M21 4a1.31 1.31 0 0 0-.06-.27v-.09a1 1 0 0 0-.2-.3 1 1 0 0 0-.29-.19h-.09a.86.86 0 0 0-.31-.15H20a1 1 0 0 0-.3 0l-18 6a1 1 0 0 0 0 1.9l8.53 2.84 2.84 8.53a1 1 0 0 0 1.9 0l6-18A1 1 0 0 0 21 4zm-4.7 2.29l-5.57 5.57L5.16 10zM14 18.84l-1.86-5.57 5.57-5.57z"/></g></g></svg>
-                    <span>Comment</button>
+                    <span>Comment</span>
                 </button>
             ` : null}
         </form>

diff --git a/web/app/components/search-page.js b/web/app/components/search-page.js
@@ -75,7 +75,7 @@ function SearchPage() {
             ${err !== null ? html`
                 <p class="error" role="alert">Could not fetch users: ${err.message}</p>
             ` : fetching ? html`
-                <p class="loader" aria-busy="true" aria-live="polite">Loading users... please wait.<p>
+                <p class="loader" aria-busy="true" aria-live="polite">Loading users... please wait.</p>
             ` : html`
                 ${users.length === 0 ? html`
                     <p>0 results</p>
@@ -85,7 +85,7 @@ function SearchPage() {
                     </div>
                     ${!noMoreUsers ? html`
                         <intersectable-comp @is-intersecting=${loadMore}></intersectable-comp>
-                        <p class="loader" aria-busy="true" aria-live="polite">Loading users... please wait.<p>
+                        <p class="loader" aria-busy="true" aria-live="polite">Loading users... please wait.</p>
                     ` : endReached ? html`
                         <p>End reached.</p>
                     ` : null}

diff --git a/web/app/components/tagged-posts-page.js b/web/app/components/tagged-posts-page.js
@@ -99,25 +99,26 @@ function TaggedPostsPage({ tag }) {
             ` : fetching ? html`
                 <p class="loader" aria-busy="true" aria-live="polite">
                     Loading tagged posts... please wait.
-                <p>
+                </p>
             ` : html`
                 <div role="tabpanel" id="tabpanel" aria-labelledby="tab">
                 ${posts.length === 0 ? html`
                     <p>0 posts</p>
                 ` : html`
                     <div class="posts" role="feed">
-                        ${repeat(posts, p => p.id, p => html`<post-item .post=${p} .type="post"
+                        ${repeat(posts, p => p.id, p => html`<post-item .post=${p} .type=${"post"}
                             @resource-deleted=${onPostDeleted}></post-item>`)}
                     </div>
                     ${!noMore ? html`
                         <intersectable-comp @is-intersecting=${loadMore}></intersectable-comp>
                         <p class="loader" aria-busy="true" aria-live="polite">
                             Loading tagged posts... please wait.
-                        <p>
+                        </p>
                     ` : endReached ? html`
                         <p>End reached</p>
                     ` : null}
                 `}
+                </div>
             `}
         </main>
         ${toast !== null ? html`<toast-item .toast=${toast}></toast-item>` : null}

diff --git a/web/app/components/user-followees-page.js b/web/app/components/user-followees-page.js
@@ -68,7 +68,7 @@ function UserFolloweesPage({ username }) {
             ${err !== null ? html`
                 <p class="error" role="alert">Could not fetch followees: ${err.message}</p>
             ` : fetching ? html`
-                <p class="loader" aria-busy="true" aria-live="polite">Loading followees... please wait.<p>
+                <p class="loader" aria-busy="true" aria-live="polite">Loading followees... please wait.</p>
             ` : html`
                 ${users.length === 0 ? html`
                     <p>0 followees</p>
@@ -78,7 +78,7 @@ function UserFolloweesPage({ username }) {
                     </div>
                     ${!noMoreUsers ? html`
                         <intersectable-comp @is-intersecting=${loadMore}></intersectable-comp>
-                        <p class="loader" aria-busy="true" aria-live="polite">Loading users... please wait.<p>
+                        <p class="loader" aria-busy="true" aria-live="polite">Loading users... please wait.</p>
                     ` : endReached ? html`
                         <p>End reached.</p>
                     ` : null}

diff --git a/web/app/components/user-followers-page.js b/web/app/components/user-followers-page.js
@@ -68,7 +68,7 @@ function UserFollowersPage({ username }) {
             ${err !== null ? html`
                 <p class="error" role="alert">Could not fetch followers: ${err.message}</p>
             ` : fetching ? html`
-                <p class="loader" aria-busy="true" aria-live="polite">Loading followers... please wait.<p>
+                <p class="loader" aria-busy="true" aria-live="polite">Loading followers... please wait.</p>
             ` : html`
                 ${users.length === 0 ? html`
                     <p>0 followers</p>
@@ -78,7 +78,7 @@ function UserFollowersPage({ username }) {
                     </div>
                     ${!noMoreUsers ? html`
                         <intersectable-comp @is-intersecting=${loadMore}></intersectable-comp>
-                        <p class="loader" aria-busy="true" aria-live="polite">Loading users... please wait.<p>
+                        <p class="loader" aria-busy="true" aria-live="polite">Loading users... please wait.</p>
                     ` : endReached ? html`
                         <p>End reached.</p>
                     ` : null}

diff --git a/web/app/components/user-page.js b/web/app/components/user-page.js
@@ -141,34 +141,34 @@ function UserPage({ username }) {
                     ${err !== null ? html`
                     <p class="error" role="alert">Could not fetch user: ${err.message}</p>
                     ` : fetching ? html`
-                    <p class="loader" aria-busy="true" aria-live="polite">Loading user... please wait.<p>
-                            ` : html`
-                            <user-profile .user=${user} @user-updated=${onUserUpdated} @avatar-updated=${onAvatarUpdated} @cover-updated=${onCoverUpdated}></user-profile>
-                            `}
+                    <p class="loader" aria-busy="true" aria-live="polite">Loading user... please wait.</p>
+                    ` : html`
+                    <user-profile .user=${user} @user-updated=${onUserUpdated} @avatar-updated=${onAvatarUpdated} @cover-updated=${onCoverUpdated}></user-profile>
+                    `}
                 </div>
             </div>
             <div class="container posts-wrapper">
                 <h2>Posts</h2>
                 ${err !== null ? html`
                 <p class="error" role="alert">Could not fetch posts: ${err.message}</p>
                 ` : fetching ? html`
-                <p class="loader" aria-busy="true" aria-live="polite">Loading posts... please wait.<p>
-                        ` : html`
-                        ${posts.length === 0 ? html`
-                        <p>0 posts</p>
-                        ` : html`
-                        <div class="posts" role="feed">
-                            ${repeat(posts, p => p.id, p => html`<post-item .post=${p} .type=${"post"}
-                                @resource-deleted=${onPostDeleted}></post-item>`)}
-                        </div>
-                        ${!noMorePosts ? html`
-                        <intersectable-comp @is-intersecting=${loadMore}></intersectable-comp>
-                        <p class="loader" aria-busy="true" aria-live="polite">Loading posts... please wait.</p>
-                        ` : endReached ? html`
-                        <p>End reached.</p>
-                        ` : null}
-                        `}
-                        `}
+                <p class="loader" aria-busy="true" aria-live="polite">Loading posts... please wait.</p>
+                ` : html`
+                ${posts.length === 0 ? html`
+                <p>0 posts</p>
+                ` : html`
+                <div class="posts" role="feed">
+                    ${repeat(posts, p => p.id, p => html`<post-item .post=${p} .type=${"post"}
+                        @resource-deleted=${onPostDeleted}></post-item>`)}
+                </div>
+                ${!noMorePosts ? html`
+                <intersectable-comp @is-intersecting=${loadMore}></intersectable-comp>
+                <p class="loader" aria-busy="true" aria-live="polite">Loading posts... please wait.</p>
+                ` : endReached ? html`
+                <p>End reached.</p>
+                ` : null}
+                `}
+                `}
             </div>
         </main>
         ${toast !== null ? html`<toast-item .toast=${toast}></toast-item>` : null}