fix(Changelog): Fixed changelog errors when API response status is OK

but empty body

Author: amritkv

src/app/[locale]/admin/obligations/changelog/[id]/components/Changelog.tsx

@@ -56,14 +56,18 @@ function ChangeLog({ obligationId }: { obligationId: string }): JSX.Element {
                     const err = (await response.json()) as ErrorDetails
                     throw new Error(err.message)
                 }
-
-                const data = (await response.json()) as EmbeddedChangeLogs
-
-                setChangeLogList(
-                    CommonUtils.isNullOrUndefined(data['_embedded']['sw360:changeLogs'])
-                        ? []
-                        : data['_embedded']['sw360:changeLogs'],
-                )
+                const responseText = await response.text()
+                if (CommonUtils.isNullEmptyOrUndefinedString(responseText)) {
+                    setChangeLogList([])
+                    return
+                } else {
+                    const data = JSON.parse(responseText) as EmbeddedChangeLogs
+                    setChangeLogList(
+                        CommonUtils.isNullOrUndefined(data['_embedded']['sw360:changeLogs'])
+                            ? []
+                            : data['_embedded']['sw360:changeLogs'],
+                    )
+                }
             } catch (error) {
                 if (error instanceof DOMException && error.name === 'AbortError') {
                     return

src/app/[locale]/components/detail/[id]/components/DetailOverview.tsx

@@ -112,12 +112,11 @@ const DetailOverview = ({ componentId }: Props): ReactNode => {
 
         fetchData(`changelog/document/${componentId}`)
             .then((changeLogs: EmbeddedChangelogs | undefined) => {
-                if (changeLogs === undefined) return
-                setChangeLogList(
-                    CommonUtils.isNullOrUndefined(changeLogs['_embedded']['sw360:changeLogs'])
-                        ? []
-                        : changeLogs['_embedded']['sw360:changeLogs'],
-                )
+                if (changeLogs && CommonUtils.isNullOrUndefined(changeLogs._embedded['sw360:changeLogs'])) {
+                    setChangeLogList([])
+                } else {
+                    setChangeLogList(changeLogs?._embedded?.['sw360:changeLogs'] || [])
+                }
             })
             .catch((err) => console.error(err))
 

src/app/[locale]/packages/detail/[id]/components/Changelog.tsx

@@ -11,19 +11,16 @@
 
 import ChangeLogDetail from '@/components/ChangeLog/ChangeLogDetail/ChangeLogDetail'
 import ChangeLogList from '@/components/ChangeLog/ChangeLogList/ChangeLogList'
-import { Changelogs, HttpStatus } from '@/object-types'
-import { ApiUtils } from '@/utils'
+import { Changelogs, Embedded, HttpStatus } from '@/object-types'
+import MessageService from '@/services/message.service'
+import { ApiUtils, CommonUtils } from '@/utils'
 import { signOut, useSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
 import { notFound } from 'next/navigation'
 import { ReactNode, useEffect, useState } from 'react'
 import { Nav, Tab } from 'react-bootstrap'
 
-interface PackageChangelogs {
-    _embedded: {
-        'sw360:changeLogs': Array<Changelogs>
-    }
-}
+type EmbeddedChangeLogs = Embedded<Changelogs, 'sw360:changeLogs'>
 
 function ChangeLog({ packageId }: { packageId: string }): ReactNode {
     const t = useTranslations('default')
@@ -56,12 +53,24 @@ function ChangeLog({ packageId }: { packageId: string }): ReactNode {
                 } else if (response.status !== HttpStatus.OK) {
                     return notFound()
                 }
-
-                const data = (await response.json()) as PackageChangelogs
-
-                setChangeLogList(data['_embedded']['sw360:changeLogs'])
-            } catch (e) {
-                console.error(e)
+                const responseText = await response.text()
+                if (CommonUtils.isNullEmptyOrUndefinedString(responseText)) {
+                    setChangeLogList([])
+                    return
+                } else {
+                    const data = JSON.parse(responseText) as EmbeddedChangeLogs
+                    setChangeLogList(
+                        CommonUtils.isNullOrUndefined(data['_embedded']['sw360:changeLogs'])
+                            ? []
+                            : data['_embedded']['sw360:changeLogs'],
+                    )
+                }
+            } catch (error: unknown) {
+                if (error instanceof DOMException && error.name === 'AbortError') {
+                    return
+                }
+                const message = error instanceof Error ? error.message : String(error)
+                MessageService.error(message)
             }
         })()
 

src/app/[locale]/projects/detail/[id]/components/Changelog.tsx

@@ -19,6 +19,7 @@ import { AccessControl } from '@/components/AccessControl/AccessControl'
 import ChangeLogDetail from '@/components/ChangeLog/ChangeLogDetail/ChangeLogDetail'
 import ChangeLogList from '@/components/ChangeLog/ChangeLogList/ChangeLogList'
 import { Changelogs, Embedded, HttpStatus, UserGroupType } from '@/object-types'
+import MessageService from '@/services/message.service'
 import { ApiUtils, CommonUtils } from '@/utils'
 
 type EmbeddedChangeLogs = Embedded<Changelogs, 'sw360:changeLogs'>
@@ -60,16 +61,24 @@ function ChangeLog({
                 } else if (response.status !== HttpStatus.OK) {
                     return notFound()
                 }
-
-                const data = (await response.json()) as EmbeddedChangeLogs
-
-                setChangeLogList(
-                    CommonUtils.isNullOrUndefined(data['_embedded']['sw360:changeLogs'])
-                        ? []
-                        : data['_embedded']['sw360:changeLogs'],
-                )
-            } catch (e) {
-                console.error(e)
+                const responseText = await response.text()
+                if (CommonUtils.isNullEmptyOrUndefinedString(responseText)) {
+                    setChangeLogList([])
+                    return
+                } else {
+                    const data = JSON.parse(responseText) as EmbeddedChangeLogs
+                    setChangeLogList(
+                        CommonUtils.isNullOrUndefined(data['_embedded']['sw360:changeLogs'])
+                            ? []
+                            : data['_embedded']['sw360:changeLogs'],
+                    )
+                }
+            } catch (error: unknown) {
+                if (error instanceof DOMException && error.name === 'AbortError') {
+                    return
+                }
+                const message = error instanceof Error ? error.message : String(error)
+                MessageService.error(message)
             }
         })()
 

src/app/[locale]/requests/moderationRequest/[id]/components/currentComponent/CurrentComponentDetail.tsx

@@ -95,11 +95,11 @@ const CurrentComponentDetail = ({ componentId }: Props): ReactNode => {
 
         fetchData(`changelog/document/${componentId}`)
             .then((changeLogs: EmbeddedChangelogs | undefined) => {
-                setChangeLogList(
-                    CommonUtils.isNullOrUndefined(changeLogs?._embedded['sw360:changeLogs'])
-                        ? []
-                        : changeLogs._embedded['sw360:changeLogs'],
-                )
+                if (changeLogs && CommonUtils.isNullOrUndefined(changeLogs._embedded['sw360:changeLogs'])) {
+                    setChangeLogList([])
+                } else {
+                    setChangeLogList(changeLogs?._embedded?.['sw360:changeLogs'] || [])
+                }
             })
             .catch((err) => console.error(err))
     }, [componentId, fetchData])