491 all projects (#492)

* Refactor auth flow; handle project fetch errors

On authentication, call TPEN.getUserProjects and dispatch a tpen-toast on error instead of letting failures be silent. Listen for tpen-user-projects-loaded to populate this.projects from TPEN.userProjects (avoids duplicate remote fetches). Register event listeners before calling TPEN.attachAuthentication. Also apply a small whitespace cleanup around an await(new Project(...).fetch()) call.

* Update list-navigation.js

* only draw once

* Update list-navigation.js

* local touch up suggestions

Author: cubap

components/projects/list-navigation.js

@@ -9,6 +9,7 @@ import { CleanupRegistry } from '../../utilities/CleanupRegistry.js'
  */
 export default class ProjectsListNavigation extends HTMLElement {
     #projects = []
+    #renderPromise = null
 
     /** @type {CleanupRegistry} Registry for cleanup handlers */
     cleanup = new CleanupRegistry()
@@ -117,25 +118,28 @@ export default class ProjectsListNavigation extends HTMLElement {
     }
 
     connectedCallback() {
-        TPEN.attachAuthentication(this)
-
-        this.cleanup.onEvent(TPEN.eventDispatcher, "tpen-authenticated", async (ev) => {
-            try {
-                this.projects = await TPEN.getUserProjects(ev.detail)
-            } catch (error) {
-                const status = error.status ?? 500
-                const text = error.statusText ?? error.message ?? "Internal Error"
-                const toast = new CustomEvent('tpen-toast', {
-                    detail: {
+        this.cleanup.onEvent(TPEN.eventDispatcher, "tpen-authenticated", (ev) => {
+            TPEN.getUserProjects(ev.detail) // ev.detail is the token
+                .catch((error) => {
+                    const status = error.status ?? 500
+                    const text = error.statusText ?? error.message ?? "Internal Error"
+                    TPEN.eventDispatcher.dispatch('tpen-toast', {
                         message: `Error fetching projects: ${text}`,
                         status: status
-                    }
+                    })
+                    const list = this.shadowRoot?.getElementById('projectsListView')
+                    if (list) list.innerHTML = `<li>Failed to load projects</li>`
                 })
-                TPEN.eventDispatcher.dispatch(toast)
-                this.shadowRoot.getElementById('projectsListView').innerHTML = `No projects found`
-            }
         })
 
+        // Listen for when projects are loaded
+        this.cleanup.onEvent(TPEN.eventDispatcher, "tpen-user-projects-loaded", () => {
+            this.projects = TPEN.userProjects
+            // Track the render promise to prevent concurrent updates
+            this.#renderPromise?.catch(() => {}) // Suppress if previous render failed
+        })
+        TPEN.attachAuthentication(this)
+
         // Handle empty recent activity signal from other components via central dispatcher
         this.cleanup.onEvent(TPEN.eventDispatcher, 'tpen-no-recent-activity', () => {
             // Show the welcome/empty state message
@@ -147,67 +151,95 @@ export default class ProjectsListNavigation extends HTMLElement {
         this.cleanup.run()
     }
     set projects(projects) {
+        // Only update if projects actually changed
+        if (this.#projects === projects) return
+        
         this.#projects = projects
-        this.updateList()
+        // Store the render promise so we can track pending updates
+        this.#renderPromise = this.updateList().catch((error) => {
+            // Error already handled in updateList, but store the rejection
+            // so we can suppress it if a new render starts
+            console.debug('Project list render failed:', error)
+        })
     }
     get projects() {
         return this.#projects
     }
 
     /**
      * Updates the project list in the DOM. Handles async permission checks.
+     * Catches any errors during rendering and shows an error message.
      */
     async updateList() {
-        const root = this.shadowRoot
-        let list = root.getElementById('projectsListView')
-        if (!this.#projects?.length) {
-            const welcome = document.createElement('section')
-            welcome.className = 'welcome-message'
-            welcome.innerHTML = `
-                    <p><strong>Welcome to TPEN!</strong></p>
-                    <p>Get started by creating your first project or importing a manuscript.</p>
-                    <ul class="welcome-list">
-                        <li aria-label="View Tutorials"><span aria-hidden="true">📚</span> <a href="https://three.t-pen.org/category/tutorials/" target="_blank" rel="noopener noreferrer">View Tutorials</a></li>
-                        <li aria-label="Frequently Asked Questions"><span aria-hidden="true">❓</span> <a href="https://three.t-pen.org/faq/" target="_blank" rel="noopener noreferrer">Frequently Asked Questions</a></li>
-                        <li aria-label="Find IIIF Resources"><span aria-hidden="true">🖼️</span> <a href="https://iiif.io/guides/finding_resources/" target="_blank" rel="noopener noreferrer">Find IIIF Resources</a></li>
-                    </ul>
-            `
-            if (list) list.replaceWith(welcome)
-            else {
-                const existingWelcome = root.querySelector('section.welcome-message')
-                if (existingWelcome) existingWelcome.replaceWith(welcome)
-                else root.appendChild(welcome)
+        try {
+            const root = this.shadowRoot
+            let list = root.getElementById('projectsListView')
+            if (!this.#projects?.length) {
+                const welcome = document.createElement('section')
+                welcome.className = 'welcome-message'
+                welcome.innerHTML = `
+                        <p><strong>Welcome to TPEN!</strong></p>
+                        <p>Get started by creating your first project or importing a manuscript.</p>
+                        <ul class="welcome-list">
+                            <li aria-label="View Tutorials"><span aria-hidden="true">📚</span> <a href="https://three.t-pen.org/category/tutorials/" target="_blank" rel="noopener noreferrer">View Tutorials</a></li>
+                            <li aria-label="Frequently Asked Questions"><span aria-hidden="true">❓</span> <a href="https://three.t-pen.org/faq/" target="_blank" rel="noopener noreferrer">Frequently Asked Questions</a></li>
+                            <li aria-label="Find IIIF Resources"><span aria-hidden="true">🖼️</span> <a href="https://iiif.io/guides/finding_resources/" target="_blank" rel="noopener noreferrer">Find IIIF Resources</a></li>
+                        </ul>
+                `
+                if (list) list.replaceWith(welcome)
+                else {
+                    const existingWelcome = root.querySelector('section.welcome-message')
+                    if (existingWelcome) existingWelcome.replaceWith(welcome)
+                    else root.appendChild(welcome)
+                }
+                return
             }
-            return
-        }
-        // Ensure the list element exists when we have projects
-        if (!list) {
-            list = document.createElement('ol')
-            list.id = 'projectsListView'
-            if (this.classList.contains('unbounded')) list.classList.add('unbounded')
-            const existingWelcome = root.querySelector('section.welcome-message')
-            if (existingWelcome) existingWelcome.replaceWith(list)
-            else root.appendChild(list)
-        } else {
-            list.innerHTML = ""
-        }
-        for (const project of this.#projects) {
-            let manageLink = ``
-            try {
-                await(new Project(project._id).fetch())
-                const isManageProjectPermission = CheckPermissions.checkEditAccess('PROJECT')
-                manageLink = isManageProjectPermission ? `<a title="Manage Project" part="project-opt" href="/project/manage?projectID=${project._id}" aria-label="Manage Project">⚙</a>` : ``
-            } catch (error) {
-                console.warn(`Failed to check permissions for project ${project._id}:`, error)
-            }
-            list.innerHTML += `
-                <li tpen-project-id="${project._id}">
-                    <a title="See Project Details" class="static" href="/project?projectID=${project._id}" part="project-link">
-                        ${project.label ?? project.title}
-                    </a>
-                    ${manageLink}
-                </li>
-            `
+            // Ensure the list element exists when we have projects
+            if (!list) {
+                list = document.createElement('ol')
+                list.id = 'projectsListView'
+                if (this.classList.contains('unbounded')) list.classList.add('unbounded')
+                const existingWelcome = root.querySelector('section.welcome-message')
+                if (existingWelcome) existingWelcome.replaceWith(list)
+                else root.appendChild(list)
+            } else {
+                list.innerHTML = ""
+            }
+            const projectItems = []
+            for (const project of this.#projects) {
+                let manageLink = ``
+                try {
+                    await (new Project(project._id).fetch())
+                    const isManageProjectPermission = CheckPermissions.checkEditAccess('PROJECT')
+                    manageLink = isManageProjectPermission ? `<a title="Manage Project" part="project-opt" href="/project/manage?projectID=${project._id}" aria-label="Manage Project">⚙</a>` : ``
+                } catch (error) {
+                    console.warn(`Failed to check permissions for project ${project._id}:`, error)
+                    // Continue rendering the project even if permission check fails
+                }
+                projectItems.push(`
+                    <li tpen-project-id="${project._id}">
+                        <a title="See Project Details" class="static" href="/project?projectID=${project._id}" part="project-link">
+                            ${project.label ?? project.title}
+                        </a>
+                        ${manageLink}
+                    </li>
+                `)
+            }
+            list.innerHTML = projectItems.join('')
+        } catch (error) {
+            // Handle any errors that occur during updateList
+            console.error('Error updating project list:', error)
+            const root = this.shadowRoot
+            if (!root) return // Shadow root was removed
+            
+            const list = root.getElementById('projectsListView')
+            if (list) {
+                list.innerHTML = `<li>Failed to load projects</li>`
+            }
+            TPEN.eventDispatcher.dispatch('tpen-toast', {
+                message: `Failed to load projects: ${error.message}`,
+                status: 500
+            })
         }
     }
 }