Merge pull request #224 from siemens/home/refactor

fix(home_page): Fixed recent components on home page

messages/de.json

@@ -463,6 +463,7 @@
     "No": "Nein",
     "No Records Found": "Keine Daten gefunden",
     "No attachments yet": "Noch keine Anhänge.",
+    "No recent components available": "",
     "No subscriptions available": "Keine Abonnements verfügbar.",
     "NoModerationRequests": "Sie haben keine offenen Moderationsanfragen.",
     "NoProjectsFound": "Es gibt keine Projekte mit Ihrer Auswahl.",

messages/en.json

@@ -482,6 +482,7 @@
         "No": "No",
         "No Records Found": "No Records Found",
         "No attachments yet": "No attachments yet.",
+        "No recent components available": "No recent components available",
         "No subscriptions available": "No subscriptions available.",
         "NoModerationRequests": "You do not have any open moderation requests.",
         "NoProjectsFound": "There are no projects found with your selection.",

messages/es.json

@@ -463,6 +463,7 @@
     "No": "No",
     "No Records Found": "No Records Found",
     "No attachments yet": "Todavía no hay apegos.",
+    "No recent components available": "",
     "No subscriptions available": "No hay suscripciones disponibles.",
     "NoModerationRequests": "Usted no tiene ninguna solicitud de moderación abierta.",
     "NoProjectsFound": "No hay proyectos encontrados con su selección.",

messages/fr.json

@@ -463,6 +463,7 @@
     "No": "Numéro",
     "No Records Found": "Aucun document trouvé",
     "No attachments yet": "Pas encore de pièces jointes.",
+    "No recent components available": "",
     "No subscriptions available": "Aucun abonnement disponible.",
     "NoModerationRequests": "Vous n'avez aucune demande ouverte de modération.",
     "NoProjectsFound": "Il n'y a aucun projet trouvé avec votre sélection.",

messages/ja.json

@@ -462,6 +462,7 @@
     "No": "否",
     "No Records Found": "レコードが見つかりませんでした",
     "No attachments yet": "添付ファイルはまだありません",
+    "No recent components available": "",
     "No subscriptions available": "利用できるサブスクリプションはありません。",
     "NoModerationRequests": "オープンなモデレーションリクエストはありません。",
     "NoProjectsFound": "選択したプロジェクトは見つかりませんでした。",

messages/ko.json

@@ -462,6 +462,7 @@
     "No": "이름 *",
     "No Records Found": "기록 없음",
     "No attachments yet": "아직 첨부되지 않았습니다.",
+    "No recent components available": "",
     "No subscriptions available": "구독이 없습니다.",
     "NoModerationRequests": "당신은 어떤 오픈 모멘트 요청이 없습니다.",
     "NoProjectsFound": "선택 사항이 없습니다.",

messages/pt-BR.json

@@ -462,6 +462,7 @@
     "No": "Não",
     "No Records Found": "Nenhum Registo Encontrado",
     "No attachments yet": "Ainda não há anexos.",
+    "No recent components available": "",
     "No subscriptions available": "Nenhuma assinatura disponível.",
     "NoModerationRequests": "Você não tem nenhuma solicitação de moderação aberta.",
     "NoProjectsFound": "Não foram encontrados projetos com sua seleção.",

messages/vi.json

@@ -462,6 +462,7 @@
     "No": "KHÔNG",
     "No Records Found": "Không có dữ liệu được tìm thấy",
     "No attachments yet": "Chưa có tệp đính kèm nào.",
+    "No recent components available": "",
     "No subscriptions available": "Không có đăng ký có sẵn.",
     "NoModerationRequests": "Bạn không có bất kỳ yêu cầu kiểm duyệt mở nào.",
     "NoProjectsFound": "Không có dự án nào được tìm thấy với lựa chọn của bạn.",

messages/zh-CN.json

@@ -462,6 +462,7 @@
     "No": "不",
     "No Records Found": "没有找到记录",
     "No attachments yet": "还没有附件。",
+    "No recent components available": "",
     "No subscriptions available": "没有可用的订阅。",
     "NoModerationRequests": "您没有任何开放的审核请求。",
     "NoProjectsFound": "没有找到您选择的项目。",

messages/zh-TW.json

@@ -462,6 +462,7 @@
     "No": "不",
     "No Records Found": "找不到紀錄",
     "No attachments yet": "還沒有附件",
+    "No recent components available": "",
     "No subscriptions available": "沒有訂閱 。",
     "NoModerationRequests": "你沒有任何開放的溫和要求。",
     "NoProjectsFound": "您的選擇沒有找到任何專案 。",

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

@@ -10,36 +10,80 @@
 
 'use-client'
 
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
 import HomeTableHeader from './HomeTableHeader'
 import { useTranslations } from 'next-intl'
+import { ApiUtils, CommonUtils } from '@/utils/index'
+import { signOut, useSession } from 'next-auth/react'
+import { notFound } from 'next/navigation'
+import { Component, HttpStatus, Embedded } from '@/object-types'
+import { Spinner } from 'react-bootstrap'
+import Link from 'next/link'
+
+type EmbeddedComponent = Embedded<Component, 'sw360:components'>
+
 
 function RecentComponentsWidget() {
-    const [data] = useState([])
+    const [recentComponent, setRecentComponent] = useState([])
     const t = useTranslations('default')
+    const [loading, setLoading] = useState(true)
+    const { data: session, status } = useSession()
+
+    const fetchData = useCallback(
+        async (url: string) => {
+            const response = await ApiUtils.GET(url, session.user.access_token)
+            if (response.status == HttpStatus.OK) {
+                const data = await response.json() as EmbeddedComponent
+                return data
+            } else if (response.status == HttpStatus.UNAUTHORIZED) {
+                return signOut()
+            } else {
+                notFound()
+            }
+        },[session]
+    )
 
     useEffect(() => {
-        //     const fetchData = async () => {
-        //         const data = await sw360FetchData('/components/recentComponents', 'components')
-        //         data &&
-        //             setData(
-        //                 data.map((item: { name: string }) => [
-        //                     <li key={item.name}>
-        //                         <span style={{ color: 'orange' }}>{item.name}</span>
-        //                     </li>,
-        //                 ])
-        //             )
-        //     }
-        //     fetchData()
-    }, [])
+        setLoading(true)
+        void fetchData('components/recentComponents').then((components: EmbeddedComponent) => {
+            if (!CommonUtils.isNullOrUndefined(components['_embedded']['sw360:components'])) {
+                setRecentComponent(
+                    components['_embedded']['sw360:components'].map((item: Component) => [
+                        <li key={item.name}>
+                            <Link href={'components/detail/' + item.id}
+                                  style={{ color: 'orange', textDecoration: 'none' }}
+                                >
+                                {item.name}
+                            </Link>
+                        </li>,
+                        ])
+                    )
+                    setLoading(false)
+                }})
+    }, [fetchData, session])
 
+    if (status === 'unauthenticated') {
+        signOut()
+    } else {
     return (
         <div className='content-container'>
             <HomeTableHeader title={t('Recent Components')} />
-            <ul style={{ listStyleType: 'disc', color: 'black' }}>{data}</ul>
+            {loading == false ? (
+                <ul style={{ listStyleType: 'disc', color: 'black' }}>{recentComponent}</ul>
+            ) : (
+                <div className='col-12'>
+                    <Spinner className='spinner' />
+                </div>
+            )}
+            {recentComponent.length === 0 && (
+                <>
+                    <div className='subscriptionBox'>{t('No recent components available')}</div>
+                </>
+            )}
         </div>
-    )
+        )
+    }
 }
 
 // We need use this to override typescript issue