FrEDA ReactJS-Basics

Basis des Frontend ist React-JS und das Boilerplate-Framework create-react-app. Für eine ausführliche Dokumentation bitte dort schauen:

https://create-react-app.dev/

appConfig.ts

Ist kein standard von React, dient aber zur schnellen und einfachen Konfiguration der FrEDA-Frontend-Apps und aktivierten Module:

appConfig erklärt

export const appConfig: AppConfig = {
  logo: "/freda.png", //Logo-Pfad, ausgehend vom "public" Ordner der App
  baseUrl: process.env.REACT_APP_GRAPHQL_HOST!.toString(), //baseURL, sollte so bleiben, da von .env der App
  useSSL: process.env.REACT_APP_USE_SSL!.toString().toLowerCase() === "true", //http oder https, kommt von .env
  primaryColor: { //Hauptfarbenschema
    main: '#002f5d', // Prodat-SQL Color Dark-Blue
    contrastText: '#fff',
  },
  secondaryColor: { //Sekundärfarbenschema
    main: '#0787fe', // Prodat-SQL Color Light-Blue
    contrastText: '#fff',
  },
  layout: "Desktop", //Möglichkeit zwischen 3 Layouts zu wählen "Mobile" | "Desktop" | "Responsive"
  getTranslation: useTrans, //Hook, welche App-Spezifische Übersetzung durchführt (z.B. GraphQL-Query)
  getTranslationComponent: Trans, //Komponente, welche das gleiche macht wie die Hook nur als Komponente
  getCurrentUser: useCurrentUser, //Hook, welche mit den aktuellen Nutzer zurückgibt
  modules: [   //module können hier hinzugefügt / angepasst werden
    {
      title: 'Warenausgang',
      roles: ['admin', 'spediteur'], //welche Rollen dürfen dieses Modul sehen? (Rollen aus Admin-UI nutzen)
      path: '/wareneingang', //Pfad
      icon: ReceiptIcon, //Icon, zu finden unter: https://material-ui.com/components/material-icons/
      routeComponent: Wareneingang, //eigentliche Komponente welche existieren muss
    },
    {
      title: 'Warenausgang Detail',
      roles: ['admin', 'spediteur'],
      path: '/wareneingang/:pNummer', //Beispiel eines Pfades mit Match-Parameter
      overwriteBreadcrumbTitle: true, //Möglichkeit für Desktop Titel im Breadcrumb zu überschreiben 
      routeComponent: WareneingangPositionen,
    },
    {
      title: 'Lieferscheine',
      roles: ['admin', 'lieferant'],
      path: '/lieferscheine',
      icon: SubjectIcon,
      routeComponent: Lieferscheine,
    },
  ]
}

useTrans & Trans

Beispiel einiger gängigen useTrans Hook und Trans Komponente. Diese fragt die Übersetzungen über die Prodat-Procedure get_field_alias ab:

import React, {useState} from 'react';
import gql from "graphql-tag";
import {useGetFieldAliasQuery} from "../../../graphql/types";
import {useContextCommonHelper} from "@freda-frontend/common";

gql`
  query getFieldAlias($fieldName: String!, $tablename: String) {
    fredaPublic {
      prodatalias {
        publicGetfieldalias(fieldname: $fieldName, fieldaliastablename: $tablename)
      }
    }
  }
`;

export const useTrans = (transString: string | null | undefined) => {
  const commonHelper = useContextCommonHelper();
  const {data} = useGetFieldAliasQuery({variables: {fieldName: commonHelper.camelToSnakeCase(transString ||"")}});
  const translatedString = data?.fredaPublic?.prodatalias?.publicGetfieldalias && data?.fredaPublic?.prodatalias?.publicGetfieldalias !== transString?.toLowerCase() ? data?.fredaPublic?.prodatalias?.publicGetfieldalias : transString;
  return translatedString!.toString();
};

type Props = {
  table?: string;
  fallback?: string
};

export const Trans: React.FC<Props> = (props) => {
  const [transString] = useState<string | null | undefined>(props.children?.toString());

  const translation = useTrans(transString);

  return (
    <React.Fragment>
      {translation}
    </React.Fragment>
  );
};

Routing

Das Routing ermöglicht die App in mehrere Seiten aufzuteilen. Durch Match-Parameter in der URL können auch dynamische Seiten generiert werden, welche z.B. für Detailseiten von Datensätzen genutzt werden.

Formular-Dialoge benötigen keine extra Route, es ist dennoch möglich auch Dialoge mit einer URL auszustatten.

dynamische Routes / URL-Match-Paramter

In einigen Fällen macht es Sinn dynamische URL-Routen wie /product/1342 anzugeben um Detailseiten zu generieren . Dynamische URL-Routen Match-Parameter können in jeder React-Komponente mit Hilfer dieser Funktion abgerufen werden:

const pNummer = decodeURIComponent(match.params.pNummer);
//der hintere Attributsname leitet sich von der Routenbezeichnung ab, in dem Fall wurde unter Modules konfiguriert: "/product/:pNummer"

URL-Parameter

In seltenen Fällen macht es Sinn URL-Paramter wie ?productId=1342 mizugeben. URL Parameter können in jeder React -Komponente mit Hilfer dieser Funktion abgerufen werden:

import qs from 'query-string';
/* --- component-stuff --*/
const productId = qs.parse(props.location.search).productId;
/* --- component-stuff --*/

Ein Anwendunsbeispiel findet sich in der Wareneingang-Detailseiten-Komponente, in welche es möglich ist über den paramter p in der URL ein Dialog zu öffnet wenn man die Komponente/Seite öffnet.

GraphQL-Client / Apollo

Hooks

useQuery, useMutation, useSubscription

useState

useContext

Context

States

local

global

Business-Logik in Komponenten