refactor(project): Redesign home page

- Removed all callas to sw360fetchdata function - Removed sw360fetchdata code - Disabled fetch for all components in home page and projects main page - Enable translation of Table noRecordsFound and navigation links NoRecordsFound message will only be shown when the data on table is null - Added proper layout in globals Signed-off-by: Helio Chissini de Castro <[email protected]>
eclipse-sw360 · Oct 10, 2023 · be7fd72 · be7fd72
1 parent d5a69b5
commit be7fd72
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 196 deletions.
diff --git a/src/app/[locale]/home/components/MyComponentsWidget.tsx b/src/app/[locale]/home/components/MyComponentsWidget.tsx
@@ -8,33 +8,31 @@
 // License-Filename: LICENSE
 
 import React, { useEffect, useState } from 'react'
-
 import { useTranslations } from 'next-intl'
 
 import HomeTableHeader from './HomeTableHeader'
-
-import { Table } from '@/components/sw360'
-import { sw360FetchData } from '@/utils/sw360fetchdata'
+import { Table } from 'next-sw360'
 
 function MyComponentsWidget() {
-    const [data, setData] = useState([])
+    const [data] = useState([])
     const t = useTranslations('default')
 
     useEffect(() => {
-        const fetchData = async () => {
-            const data = await sw360FetchData('/components/mycomponents', 'components')
-            setData(data.map((item: { name: string; description: string }) => [item.name, item.description]))
-        }
-        fetchData()
+        //     const fetchData = async () => {
+        //         const data = await sw360FetchData('/components/mycomponents', 'components')
+        //         setData(data.map((item: { name: string; description: string }) => [item.name, item.description]))
+        //     }
+        //     fetchData()
     })
 
     const title = t('My Components')
     const columns = [t('Component Name'), t('Description')]
+    const language = { noRecordsFound: t('NotOwnComponent') }
 
     return (
         <div>
             <HomeTableHeader title={title} />
-            <Table columns={columns} data={data} selector={false} />
+            <Table columns={columns} data={data} selector={false} language={language} />
         </div>
     )
 }

diff --git a/src/app/[locale]/home/components/MyProjectsWidget.tsx b/src/app/[locale]/home/components/MyProjectsWidget.tsx
@@ -8,40 +8,38 @@
 // License-Filename: LICENSE
 
 import React, { useEffect, useState } from 'react'
-
 import { useTranslations } from 'next-intl'
 
-import { Table } from '@/components/sw360'
-
+import { Table } from 'next-sw360'
 import HomeTableHeader from './HomeTableHeader'
-import { sw360FetchData } from '@/utils/sw360fetchdata'
 
 function MyProjectsWidget() {
-    const [data, setdata] = useState([])
+    const [data] = useState([])
     const t = useTranslations('default')
 
     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()
+        //     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()
     })
 
     const title = t('My Projects')
     const columns = [t('Project Name'), t('Description'), t('Approved Releases')]
+    const language = { noRecordsFound: t('NoProjectsFound') }
 
     return (
         <div>
             <HomeTableHeader title={title} />
-            <Table columns={columns} data={data} pagination={{ limit: 5 }} selector={false} />
+            <Table columns={columns} data={data} pagination={{ limit: 5 }} selector={false} language={language} />
         </div>
     )
 }

diff --git a/src/app/[locale]/home/components/MySubscriptionsWidget.tsx b/src/app/[locale]/home/components/MySubscriptionsWidget.tsx
@@ -14,21 +14,20 @@ import React, { useEffect, useState } from 'react'
 import { useTranslations } from 'next-intl'
 
 import HomeTableHeader from './HomeTableHeader'
-import { sw360FetchData } from '@/utils/sw360fetchdata'
 
 function MySubscriptionsWidget() {
-    const [componentData, setComponentData] = useState([])
-    const [releaseData, setReleaseData] = useState([])
+    const [componentData] = useState([])
+    const [releaseData] = useState([])
     const t = useTranslations('default')
 
     useEffect(() => {
-        const fetchData = async () => {
-            const componentData = await sw360FetchData('/components/mySubscriptions', 'components')
-            setComponentData(componentData.map((item: { name: string }) => [item.name]))
-            const releaseData = await sw360FetchData('/releases/mySubscriptions', 'releases')
-            setReleaseData(releaseData.map((item: { name: string }) => [item.name]))
-        }
-        fetchData()
+        //     const fetchData = async () => {
+        //         const componentData = await sw360FetchData('/components/mySubscriptions', 'components')
+        //         setComponentData(componentData.map((item: { name: string }) => [item.name]))
+        //         const releaseData = await sw360FetchData('/releases/mySubscriptions', 'releases')
+        //         setReleaseData(releaseData.map((item: { name: string }) => [item.name]))
+        //     }
+        //     fetchData()
     }, [])
 
     return (
@@ -58,6 +57,11 @@ function MySubscriptionsWidget() {
                     </ul>
                 </>
             )}
+            {releaseData.length === 0 && componentData.length === 0 && (
+                <>
+                    <div className='subscriptionBox'>{t('No subscriptions available')}</div>
+                </>
+            )}
         </div>
     )
 }

diff --git a/src/app/[locale]/home/components/MyTaskAssignmentsWidget.tsx b/src/app/[locale]/home/components/MyTaskAssignmentsWidget.tsx
@@ -8,33 +8,31 @@
 // License-Filename: LICENSE
 
 import React, { useState, useEffect } from 'react'
-
 import { useTranslations } from 'next-intl'
 
-import { Table } from '@/components/sw360'
-import { sw360FetchData } from '@/utils/sw360fetchdata'
-
+import { Table } from 'next-sw360'
 import HomeTableHeader from './HomeTableHeader'
 
 function MyTaskAssignmentsWidget() {
-    const [data, setData] = useState([])
+    const [data] = useState([])
     const t = useTranslations('default')
 
     useEffect(() => {
-        const fetchData = async () => {
-            const data = await sw360FetchData('/myTaskAssignments')
-            setData(data.map((item: { name: string; status: string }) => [item.name, item.status]))
-        }
-        fetchData()
+        //     const fetchData = async () => {
+        //         const data = await sw360FetchData('/myTaskAssignments')
+        //         setData(data.map((item: { name: string; status: string }) => [item.name, item.status]))
+        //     }
+        //     fetchData()
     })
 
     const title = t('My Task Assignments')
     const columns = [t('Document Name'), t('Status')]
+    const language = { noRecordsFound: t('NoTasksAssigned') }
 
     return (
         <div>
             <HomeTableHeader title={title} />
-            <Table columns={columns} data={data} />
+            <Table columns={columns} data={data} language={language} />
         </div>
     )
 }

diff --git a/src/app/[locale]/home/components/MyTaskSubmissionsWidget.tsx b/src/app/[locale]/home/components/MyTaskSubmissionsWidget.tsx
@@ -10,36 +10,36 @@
 import React, { useState, useEffect } from 'react'
 import { useTranslations } from 'next-intl'
 
-import { Table } from '@/components/sw360'
-import { sw360FetchData } from '@/utils/sw360fetchdata'
+import { Table } from 'next-sw360'
 
 import HomeTableHeader from './HomeTableHeader'
 
 function MyTaskSubmissionsWidget() {
-    const [data, setData] = useState([])
+    const [data] = useState([])
     const t = useTranslations('default')
 
     useEffect(() => {
-        const fetchData = async () => {
-            const data = await sw360FetchData('/myTaskSubmissions')
-            setData(
-                data.map((item: { name: string; status: string; actions: string }) => [
-                    item.name,
-                    item.status,
-                    item.actions,
-                ])
-            )
-        }
-        fetchData()
+        //     const fetchData = async () => {
+        //         const data = await sw360FetchData('/myTaskSubmissions')
+        //         setData(
+        //             data.map((item: { name: string; status: string; actions: string }) => [
+        //                 item.name,
+        //                 item.status,
+        //                 item.actions,
+        //             ])
+        //         )
+        //     }
+        //     fetchData()
     })
 
     const title = t('My Task Submissions')
     const columns = [t('Document Name'), t('Status'), t('Actions')]
+    const language = { noRecordsFound: t('NoModerationRequests') }
 
     return (
         <div>
             <HomeTableHeader title={title} />
-            <Table columns={columns} data={data} />
+            <Table columns={columns} data={data} language={language} />
         </div>
     )
 }

diff --git a/src/app/[locale]/home/components/RecentComponentsWidget.tsx b/src/app/[locale]/home/components/RecentComponentsWidget.tsx
@@ -13,26 +13,25 @@
 import React, { useEffect, useState } from 'react'
 
 import HomeTableHeader from './HomeTableHeader'
-import { sw360FetchData } from '@/utils/sw360fetchdata'
 import { useTranslations } from 'next-intl'
 
 function RecentComponentsWidget() {
-    const [data, setData] = useState([])
+    const [data] = useState([])
     const t = useTranslations('default')
 
     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()
+        //     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()
     }, [])
 
     return (

diff --git a/src/app/[locale]/home/components/RecentReleasesWidget.tsx b/src/app/[locale]/home/components/RecentReleasesWidget.tsx
@@ -13,27 +13,26 @@
 import React, { useState, useEffect } from 'react'
 
 import HomeTableHeader from './HomeTableHeader'
-import { sw360FetchData } from '@/utils/sw360fetchdata'
 import { useTranslations } from 'next-intl'
 
 function RecentReleasesWidget() {
-    const [data, setData] = useState([])
+    const [data] = useState([])
     const t = useTranslations('default')
 
     useEffect(() => {
-        const fetchData = async () => {
-            const data = await sw360FetchData('/releases/recentReleases', 'releases')
-            data &&
-                setData(
-                    data.map((item: { name: string }) => [
-                        <li key={''}>
-                            <span style={{ color: 'orange' }}>{item.name}</span>
-                        </li>,
-                    ])
-                )
-        }
-        fetchData()
-    }, [])
+        //     const fetchData = async () => {
+        //         const data = await sw360FetchData('/releases/recentReleases', 'releases')
+        //         data &&
+        //             setData(
+        //                 data.map((item: { name: string }) => [
+        //                     <li key={''}>
+        //                         <span style={{ color: 'orange' }}>{item.name}</span>
+        //                     </li>,
+        //                 ])
+        //             )
+        //     }
+        //     fetchData()
+    })
 
     return (
         <div className='content-container'>

diff --git a/src/app/[locale]/home/components/sw360fetchcompletedata.service.ts b/src/app/[locale]/home/components/sw360fetchcompletedata.service.ts
diff --git a/src/app/[locale]/projects/page.tsx b/src/app/[locale]/projects/page.tsx
@@ -15,7 +15,6 @@ import { useTranslations } from 'next-intl'
 import { Dropdown } from 'react-bootstrap'
 
 import { AdvancedSearch, PageButtonHeader, Table } from '@/components/sw360'
-import { sw360FetchData } from '@/utils/sw360fetchdata'
 
 interface ProjectType {
     name: string
@@ -144,9 +143,8 @@ function Project() {
     }
 
     useEffect(() => {
-        sw360FetchData('/projects?allDetails=true', 'projects').then((fetchedData) => {
-            setData(fetchedData as ProjectType[])
-        })
+        const testData: ProjectType = null
+        setData([testData])
     }, [])
 
     return (

diff --git a/src/components/sw360/Table/Table.tsx b/src/components/sw360/Table/Table.tsx
@@ -20,10 +20,13 @@ const defaultOptions = {
     selector: true,
     sort: true,
 }
+type MessageFormat = (...args: []) => string
+type Message = string | MessageFormat
+export type Language = { [key: string]: Message | Language }
 
 interface TableProps extends Partial<Config> {
     selector?: boolean
-    language?: any
+    language?: Language
 }
 
 class Table extends Component<TableProps, unknown> {

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -571,3 +571,12 @@ th {
     padding-right: 10px;
     padding-top: 20px;
 }
+
+.subscriptionBox {
+    border: 1px solid #2e5aac;
+    background-color: #eef2fa;
+    color: #2e5aac;
+    padding: 10px;
+    text-align: center;
+    font-size: small;
+}