Rework search page: show all service offerings [#88]

- Re enable ServiceOffering component
- Simplify loading of the data in useEffect
- Use semantically correct components
- Introduce new generic components to structure better the component (Main, LoadingIndicator, CardContainer)
- Refactor css styling in order to match the new data structure
- Reorganize translations

Signed-off-by: Zoltan M. <[email protected]>
Signed-off-by: Zoltan Magyari <[email protected]>

public/locales/de/translation.json

@@ -4,7 +4,6 @@
   },
   "left-menu": {
     "home": "Startseite",
-    "service-offerings": "Service Offerings",
     "resources": "Ressourcen",
     "participants": "Teilnehmer",
     "provide": "Bereitstellen",
@@ -507,10 +506,11 @@
     "download-file": "Turtle-Datei herunterladen",
     "download-json": "Json-Datei herunterladen"
   },
+  "service-offerings": {
+    "title": "Dienstleistungen",
+    "titles": "Dienstleistungsangebote"
+  },
   "resources": {
-    "is-gaia-x-compliant": "Gaia-X konform",
-    "not-gaia-x-compliant": "Nicht Gaia-X konform",
-    "not-authenticated": "Nicht berechtigt",
     "search-bar-text": "Suchen Sie nach speziellen Ressourcen oder Angeboten"
   },
   "ontologies": {
@@ -529,5 +529,12 @@
     "no-shapes-available": "Keine Shapes gefunden",
     "related-shapes": "Verwandte Shapes",
     "not-found": "Shape nicht gefunden"
+  },
+  "common": {
+    "is-gaia-x-compliant": "Gaia-X konform",
+    "not-gaia-x-compliant": "Nicht Gaia-X konform",
+    "not-authenticated": "Nicht berechtigt",
+    "results": "Ergebnisse",
+    "is-loading": "es wird geladen..."
   }
 }

public/locales/en/translation.json

@@ -5,7 +5,6 @@
   "left-menu": {
     "home": "Home",
     "resources": "Resources",
-    "service-offerings": "Service Offerings",
     "services": "Services",
     "data": "Data",
     "provider": "Provider",
@@ -509,10 +508,11 @@
     "download-file": "Download turtle file",
     "download-json": "Download json file"
   },
+  "service-offerings": {
+    "title": "Services",
+    "titles": "Service Offerings"
+  },
   "resources": {
-    "is-gaia-x-compliant": "Gaia-X compliant",
-    "not-gaia-x-compliant": "Not Gaia-X compliant",
-    "not-authenticated": "Not authenticated",
     "search-bar-text": "Search for special Resources or Service Offerings"
   },
   "ontologies": {
@@ -531,5 +531,12 @@
     "no-shapes-available": "No shapes available",
     "related-shapes": "Related Shapes",
     "not-found": "Shape not found"
+  },
+  "common": {
+    "is-gaia-x-compliant": "Gaia-X compliant",
+    "not-gaia-x-compliant": "Not Gaia-X compliant",
+    "not-authenticated": "You are not authenticated!",
+    "results": "results",
+    "is-loading": "loading..."
   }
 }

src/components/cardContainer/CardContainer.tsx

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from 'react';
+
+interface IResultContainer {
+    children: ReactNode;
+    isLoaded: boolean;
+}
+
+const CardContainer: FC<IResultContainer> = ({ children, isLoaded }) => {
+  return (
+    <div className={'card-container'}>
+      {isLoaded && children}
+    </div>
+  )
+}
+
+export default CardContainer;

src/components/cards/SelfDescriptionCard.tsx

@@ -2,7 +2,7 @@ import Title from 'components/Title/Title';
 import GaiaXButton from 'components/buttons/GaiaXButton';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { ServiceOffering, Resource } from 'utils/dataMapper';
+import { Resource, ServiceOffering } from 'utils/dataMapper';
 
 import { Ontology } from '../../utils/ontologyMapper';
 
@@ -46,18 +46,18 @@ export default function SelfDescriptionCard({
   };
 
   return (
-    <div className={styles.card}>
-      <div className={styles.label}>
+    <article className={styles.card}>
+      <section className={styles.label}>
         <Title>{label}</Title>
         {isGaiaXComlpiant === undefined ? null : (
           isGaiaXComlpiant ? (
-            <p>{t('resources.is-gaia-x-compliant')}</p>
+            <p>{t('common.is-gaia-x-compliant')}</p>
           ) : (
-            <p>{t('resources.not-gaia-x-compliant')}</p>
+            <p>{t('common.not-gaia-x-compliant')}</p>
           )
         )}
-      </div>
-      <div className={styles.content}>
+      </section>
+      <section className={styles.content}>
         <Title>{name}</Title>
         <p>{description}</p>
         <div className={styles.button}>
@@ -66,7 +66,7 @@ export default function SelfDescriptionCard({
             handleOnClick={handleNavigationToDetailsPage}
           />
         </div>
-      </div>
-    </div>
+      </section>
+    </article>
   );
 }

src/components/header/Header.tsx

@@ -10,13 +10,11 @@ interface IHeader {
 
 const Header: FC<IHeader> = ({ title }) => {
   return (
-    <div className={styles['container']}>
-      <header className={styles['header-container']}>
-        <div className={styles['header-title']}>
-          <Title>{title}</Title>
-        </div>
-      </header>
-    </div>
+    <header className={styles['header-container']}>
+      <div className={styles['header-title']}>
+        <Title>{title}</Title>
+      </div>
+    </header>
   );
 };
 

src/components/itemCard/ItemCard.tsx

@@ -25,9 +25,9 @@ const ItemCard: FC<IItemCard> = ({ label, isGaiaXCompliant, ontology, shape }) =
         <Title>{label}</Title>
         {isGaiaXCompliant === undefined ? null : (
           isGaiaXCompliant ? (
-            <p>{t('resources.is-gaia-x-compliant')}</p>
+            <p>{t('common.is-gaia-x-compliant')}</p>
           ) : (
-            <p>{t('resources.not-gaia-x-compliant')}</p>
+            <p>{t('common.not-gaia-x-compliant')}</p>
           )
         )}
       </div>

src/components/loading_view/LoadingIndicator.css

@@ -0,0 +1,10 @@
+.newCarLoader {
+    display: flex;
+    justify-content: center;
+}
+
+.car {
+    width: 100px;
+    height: 100px;
+}
+

src/components/loading_view/LoadingIndicator.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import car from '../../assets/car.gif';
+
+import styles from './LoadingIndicator.css';
+
+interface ILoadingIndicator {
+    isLoading: boolean
+}
+
+const LoadingIndicator: FC<ILoadingIndicator> = ({ isLoading }) => {
+  const { t } = useTranslation()
+
+  if (isLoading) {
+    return (
+      <div className={styles.newCarLoader}>
+        <img src={car} alt={t('common.is-loading')} className={'car'}/>
+      </div>
+    )
+  }
+  return <></>
+}
+
+export default LoadingIndicator

src/components/main/Main.css

@@ -0,0 +1,4 @@
+.content {
+    margin-top: 20px;
+}
+

src/components/main/Main.tsx

@@ -0,0 +1,26 @@
+import { FC, ReactNode, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AuthContext } from '../../context/AuthContextProvider';
+
+import styles from './Main.css'
+
+interface IMain {
+    children: ReactNode
+}
+
+const Main: FC<IMain> = ({ children }) => {
+  const authContext = useContext(AuthContext);
+  const { t } = useTranslation();
+
+  if (authContext.isAuthenticated) {
+    return (
+      <main className={styles.content}>
+        {children}
+      </main>
+    )
+  }
+  return <p>{t('common.not-authenticated')}</p>
+}
+
+export default Main;