Merge pull request eclipse-sw360#150 from eclipse-sw360/heliocastro/h…

…ome_fetch

Home page improvements

nextauth.d.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Helio Chissini de Castro, 2023. Part of the SW360 Frontend Project.
+
+// This program and the accompanying materials are made
+// available under the terms of the Eclipse Public License 2.0
+// which is available at https://www.eclipse.org/legal/epl-2.0/
+
+// SPDX-License-Identifier: EPL-2.0
+// License-Filename: LICENSE
+
+import 'next-auth'
+
+interface SW360User extends DefaultUser {
+    access_token: string
+    exp: number
+    expires_in: number
+    iat: number
+    jti: string
+    refresh_token: string
+    scope: string
+    token_type: string
+}
+
+declare module 'next-auth' {
+    type User = SW360User
+    interface Session {
+        user?: User
+    }
+}
+
+declare module 'next-auth/jwt' {
+    type JWT = SW360User
+}

src/app/[locale]/home/components/MyComponentsWidget.tsx

@@ -7,23 +7,69 @@
 // SPDX-License-Identifier: EPL-2.0
 // License-Filename: LICENSE
 
-import React, { useEffect, useState } from 'react'
+import { useSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+import { Spinner } from 'react-bootstrap'
 
+import { HttpStatus } from '@/object-types'
+import { ApiUtils, CommonUtils } from '@/utils'
+import { Table, _ } from 'next-sw360'
 import HomeTableHeader from './HomeTableHeader'
-import { Table } from 'next-sw360'
 
 function MyComponentsWidget() {
-    const [data] = useState([])
+    const [data, setData] = useState([])
     const t = useTranslations('default')
+    const params = useSearchParams()
+    const [loading, setLoading] = useState(true)
+    const { data: session } = useSession()
+
+    const fetchData = useCallback(
+        async (queryUrl: string, signal: AbortSignal) => {
+            const response = await ApiUtils.GET(queryUrl, session?.user?.access_token, signal)
+            if (response.status == HttpStatus.OK) {
+                const data = await response.json()
+                return data
+            } else {
+                return undefined
+            }
+        },
+        [session]
+    )
 
     useEffect(() => {
-        //     const fetchData = async () => {
-        //         const data = await sw360FetchData('/components/mycomponents', 'components')
-        //         setData(data.map((item: { name: string; description: string }) => [item.name, item.description]))
-        //     }
-        //     fetchData()
-    })
+        setLoading(true)
+        const searchParams = Object.fromEntries(params)
+        const queryUrl = CommonUtils.createUrlWithParams('components/mycomponents', searchParams)
+
+        const controller = new AbortController()
+        const signal = controller.signal
+
+        fetchData(queryUrl, signal)
+            .then((components: any) => {
+                console.log(components)
+                if (!CommonUtils.isNullOrUndefined(components['_embedded']['sw360:components'])) {
+                    setData(
+                        components['_embedded']['sw360:components'].map(
+                            (item: { name: string; description: string; id: string }) => [
+                                _(<Link href={'components/detail/' + item.id}>{item.name}</Link>),
+                                CommonUtils.truncateText(item.description, 40),
+                            ]
+                        )
+                    )
+                    setLoading(false)
+                }
+            })
+            .catch(() => {
+                console.error('False to fetch components')
+            })
+
+        return () => {
+            controller.abort()
+        }
+    }, [fetchData, params, session])
 
     const title = t('My Components')
     const columns = [t('Component Name'), t('Description')]
@@ -32,7 +78,13 @@ function MyComponentsWidget() {
     return (
         <div>
             <HomeTableHeader title={title} />
-            <Table columns={columns} data={data} selector={false} language={language} />
+            {loading == false ? (
+                <Table columns={columns} data={data} pagination={{ limit: 5 }} selector={false} language={language} />
+            ) : (
+                <div className='col-12'>
+                    <Spinner className='spinner' />
+                </div>
+            )}
         </div>
     )
 }

src/app/[locale]/home/components/MyProjectsWidget.tsx

@@ -7,30 +7,74 @@
 // SPDX-License-Identifier: EPL-2.0
 // License-Filename: LICENSE
 
-import React, { useEffect, useState } from 'react'
+import { useSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
+import { useSearchParams } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+import { Spinner } from 'react-bootstrap'
 
-import { Table } from 'next-sw360'
+import { HttpStatus } from '@/object-types'
+import { ApiUtils, CommonUtils } from '@/utils'
+import { Table, _ } from 'next-sw360'
+
+import Link from 'next/link'
 import HomeTableHeader from './HomeTableHeader'
 
 function MyProjectsWidget() {
-    const [data] = useState([])
+    const [data, setData] = useState([])
     const t = useTranslations('default')
+    const params = useSearchParams()
+    const [loading, setLoading] = useState(true)
+    const { data: session } = useSession()
+
+    const fetchData = useCallback(
+        async (queryUrl: string, signal: AbortSignal) => {
+            const response = await ApiUtils.GET(queryUrl, session?.user?.access_token, signal)
+            if (response.status == HttpStatus.OK) {
+                const myprojects = await response.json()
+                return myprojects
+            } else {
+                return undefined
+            }
+        },
+        [session]
+    )
 
     useEffect(() => {
-        //     const fetchData = async () => {
-        //         const data = await sw360FetchData('/projects/myprojects', 'projects')
-        //         data &&
-        //             setdata(
-        //                 data.map((item: { name: string; description: string; version: string }) => [
-        //                     item.name,
-        //                     item.description,
-        //                     item.version,
-        //                 ])
-        //             )
-        //     }
-        //     fetchData()
-    })
+        setLoading(true)
+        const searchParams = Object.fromEntries(params)
+        const queryUrl = CommonUtils.createUrlWithParams('projects/myprojects', searchParams)
+
+        const controller = new AbortController()
+        const signal = controller.signal
+
+        fetchData(queryUrl, signal)
+            .then((projects: any) => {
+                if (!CommonUtils.isNullOrUndefined(projects['_embedded']['sw360:projects'])) {
+                    setData(
+                        projects['_embedded']['sw360:projects'].map(
+                            (item: { name: string; description: string; version: string; _links: any }) => [
+                                _(
+                                    <Link href={'projects/detail/' + CommonUtils.getIdFromUrl(item._links.self.href)}>
+                                        {item.name} ({item.version})
+                                    </Link>
+                                ),
+                                CommonUtils.truncateText(item.description, 40),
+                                item.version,
+                            ]
+                        )
+                    )
+                    setLoading(false)
+                }
+            })
+            .catch(() => {
+                console.error('False to fetch components')
+            })
+
+        return () => {
+            controller.abort()
+        }
+    }, [fetchData, params, session])
 
     const title = t('My Projects')
     const columns = [t('Project Name'), t('Description'), t('Approved Releases')]
@@ -39,7 +83,13 @@ function MyProjectsWidget() {
     return (
         <div>
             <HomeTableHeader title={title} />
-            <Table columns={columns} data={data} pagination={{ limit: 5 }} selector={false} language={language} />
+            {loading == false ? (
+                <Table columns={columns} data={data} pagination={{ limit: 5 }} selector={false} language={language} />
+            ) : (
+                <div className='col-12'>
+                    <Spinner className='spinner' />
+                </div>
+            )}
         </div>
     )
 }

src/app/[locale]/licenses/LicenseIndex.tsx

@@ -9,34 +9,30 @@
 
 'use client'
 
-import { Check2Circle, XCircle } from 'react-bootstrap-icons'
-import { signOut } from 'next-auth/react'
-import { Spinner } from 'react-bootstrap'
-import { useSearchParams } from 'next/navigation'
+import { signOut, useSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
-import React, { useEffect, useState, useCallback } from 'react'
+import { useSearchParams } from 'next/navigation'
+import React, { useCallback, useEffect, useState } from 'react'
+import { Spinner } from 'react-bootstrap'
+import { Check2Circle, XCircle } from 'react-bootstrap-icons'
 
-import { _, PageButtonHeader, QuickFilter, Table } from 'next-sw360'
+import { HttpStatus } from '@/object-types'
 import { ApiUtils, CommonUtils } from '@/utils'
-import { HttpStatus, Session } from '@/object-types'
+import { PageButtonHeader, QuickFilter, Table, _ } from 'next-sw360'
 
 const headerButtons = {
     'Add License': { link: '/licenses/add', type: 'primary' },
     'Export Spreadsheet': { link: '/licenses/export', type: 'secondary' },
 }
 
-interface Props {
-    session?: Session
-    length?: number
-}
-
-function LicensesPage({ session }: Props) {
+function LicensesPage() {
     const params = useSearchParams()
     const t = useTranslations('default')
     const [search, setSearch] = useState({})
     const [loading, setLoading] = useState(true)
     const [licenseData, setLicenseData] = useState([])
+    const { data: session } = useSession()
 
     const fetchData: any = useCallback(
         async (queryUrl: string, signal: unknown) => {
@@ -50,7 +46,7 @@ function LicensesPage({ session }: Props) {
                 return []
             }
         },
-        [session.user.access_token]
+        [session]
     )
 
     useEffect(() => {

src/app/[locale]/licenses/page.tsx

@@ -7,19 +7,15 @@
 // SPDX-License-Identifier: EPL-2.0
 // License-Filename: LICENSE
 
-import { getServerSession } from 'next-auth'
-import { authOptions } from '@/app/api/auth/[...nextauth]/route'
-import LicenseIndex from './LicenseIndex'
 import { Metadata } from 'next'
-import { Session } from '@/object-types'
+import LicenseIndex from './LicenseIndex'
 
 export const metadata: Metadata = {
     title: 'Licenses',
 }
 
 async function LicensesPage() {
-    const session: Session = await getServerSession(authOptions)
-    return <LicenseIndex session={session} />
+    return <LicenseIndex />
 }
 
 export default LicensesPage

src/app/api/auth/[...nextauth]/route.ts

@@ -8,11 +8,12 @@
 // SPDX-License-Identifier: EPL-2.0
 // License-Filename: LICENSE
 
-import UserCredentialInfo from '@/object-types/UserCredentialInfo'
 import NextAuth, { NextAuthOptions } from 'next-auth'
 import CredentialsProvider from 'next-auth/providers/credentials'
-import AuthService from '@/services/auth.service'
+
 import { CREDENTIAL_PROVIDER } from '@/object-types/Constants'
+import UserCredentialInfo from '@/object-types/UserCredentialInfo'
+import AuthService from '@/services/auth.service'
 
 export const authOptions: NextAuthOptions = {
     secret: process.env.AUTH_SECRET,
@@ -29,6 +30,7 @@ export const authOptions: NextAuthOptions = {
                     password: password,
                 }
                 const authToken = AuthService.generateToken(userCredential)
+
                 return authToken as any
             },
         }),