[PLA-1648] add token collection name

[zlayine]

PR Type

Enhancement

---

Description

• Added new columns for displaying collection and token names in the respective tables.
• Implemented methods to fetch and display names for collections and tokens.
• Added a new method fetchUrl in the ApiService to fetch data from a given URL.
• Renamed fetchURL to fetchPlatformURL and updated its usage in the store.

---

Changes walkthrough 📝

Relevant files

Enhancement

Collections.vue Add and display collection names in Collections table.      resources/js/components/pages/Collections.vue Added a new column for collection names in the table. Implemented logic to fetch and display collection names. Introduced methods getCollectionName, setCollectionNames, and fetchUri to handle name retrieval. +51/-1    Tokens.vue Add and display token names in Tokens table.                          resources/js/components/pages/Tokens.vue Added a new column for token names in the table. Implemented logic to fetch and display token names. Introduced methods getTokenName, setTokenNames, and fetchUri to handle name retrieval. +51/-1    index.ts Add fetchUrl method and rename fetchURL.                                  resources/js/api/index.ts Added a new method fetchUrl to fetch data from a given URL. Renamed fetchURL to fetchPlatformURL. +10/-1    index.ts Update method call to fetchPlatformURL.                                    resources/js/store/index.ts Updated method call from fetchURL to fetchPlatformURL. +1/-1

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Review 🔍

⏱️ Estimated effort to review [1-5]	4, because the PR involves multiple files and significant logic changes including API interactions, data fetching, and UI updates. The asynchronous operations and error handling also add complexity to the review.
🧪 Relevant tests	No
⚡ Possible issues	Possible Bug: The setCollectionNames and setTokenNames functions use asynchronous mapping without proper handling of the Promise resolution, which might lead to race conditions or unhandled promises.
	Performance Concern: The setCollectionNames and setTokenNames functions are called every time new data is fetched, which could lead to excessive API requests and slow down the application if not cached or throttled properly.
🔒 Security concerns	No

Code feedback:

---

relevant file	resources/js/components/pages/Collections.vue
suggestion	Consider using Promise.all for handling multiple asynchronous operations efficiently in setCollectionNames. This change will ensure that all names are fetched before updating the state, which can prevent incomplete data rendering and improve performance. [important]
relevant line	collections.value.items.map(async (item) => {

---

relevant file	resources/js/components/pages/Tokens.vue
suggestion	Implement error handling for the fetchUri function to manage failed HTTP requests gracefully. This could include retry logic or fallback values to enhance the robustness of token name fetching. [important]
relevant line	const res = await ApiService.fetchUrl(uri);

---

relevant file	resources/js/api/index.ts
suggestion	Add error handling in the fetchUrl method to manage exceptions and provide fallback mechanisms, ensuring the application's stability in case of network issues or bad responses. [important]
relevant line	return ApiService.request({

---

relevant file	resources/js/components/pages/Collections.vue
suggestion	Optimize the getCollectionName function by caching results to avoid redundant network requests. This can significantly improve performance, especially for large collections. [medium]
relevant line	const uri = collection.attributes.find((attr) => attr.key === 'uri')?.value;

---

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Ensure all promises are handled correctly in setCollectionNames by using Promise.all Refactor the setCollectionNames function to handle promises correctly. The current implementation of using map with an async function can lead to unhandled promises. Use Promise.all to ensure all promises are resolved before proceeding. resources/js/components/pages/Collections.vue [298-307] -collections.value.items.map(async (item) => { +await Promise.all(collections.value.items.map(async (item) => { if (collectionNames.value[`${item.collectionId}`]) { return item; } const name = await getCollectionName(item); collectionNames.value = { ...collectionNames.value, [`${item.collectionId}`]: name }; return item; -}); +})); Suggestion importance[1-10]: 10 Why: The suggestion addresses a potential bug by ensuring that all promises are resolved before proceeding. This is crucial for the correct functioning of the setCollectionNames function and prevents unhandled promises.	10
Error handling	Improve error handling in the fetchUri function to enhance debugging and error tracking Consider using a more robust error handling mechanism in the fetchUri function. Instead of returning a default value of '-', it would be beneficial to either throw an error or handle it more explicitly to aid in debugging and error tracking. resources/js/components/pages/Collections.vue [311-321] try { const res = await ApiService.fetchUrl(uri); const json = JSON.parse(res); if (json.name) { return json.name; } - return '-'; + throw new Error('Name not found in response'); } catch (e) { - return '-'; + console.error('Failed to fetch URI:', uri, e); + throw e; // Rethrow or handle error appropriately } Suggestion importance[1-10]: 9 Why: The suggestion improves error handling by providing more informative error messages and rethrowing the error, which aids in debugging and error tracking. This is a significant improvement for maintainability and reliability.	9
	Implement error handling in the fetchUrl method to manage failed requests and provide more informative errors Add error handling for the fetchUrl method in the ApiService class to manage failed HTTP requests gracefully. resources/js/api/index.ts [152-158] static async fetchUrl(url: string) { - return ApiService.request({ - url: url, - method: HttpMethods.GET, - credentials: undefined, - mode: undefined, - }); + try { + const response = await ApiService.request({ + url: url, + method: HttpMethods.GET, + credentials: undefined, + mode: undefined, + }); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response; + } catch (e) { + console.error('Request failed', e); + throw e; + } } Suggestion importance[1-10]: 9 Why: Adding error handling to the fetchUrl method enhances the robustness of the code by managing failed HTTP requests gracefully and providing more informative error messages. This is important for debugging and reliability.	9
Performance	Use Vue's set method to update collectionNames reactively and efficiently Optimize the reactivity and efficiency of updating collectionNames by using Vue's reactivity system correctly, instead of spreading and overwriting the entire object. resources/js/components/pages/Collections.vue [303-304] const name = await getCollectionName(item); -collectionNames.value = { ...collectionNames.value, [`${item.collectionId}`]: name }; +Vue.set(collectionNames.value, item.collectionId, name); Suggestion importance[1-10]: 8 Why: The suggestion optimizes the reactivity and efficiency of updating collectionNames by using Vue's reactivity system correctly. This improves performance and ensures that the reactivity system works as intended.	8

[enjinabner]

suggestion