Extract AOE specific texts as messages.json

src/components/App.tsx

@@ -12,6 +12,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import { Item } from "../model";
+import { Messages, MessagesProvider } from "../context/MessagesContext";
 
 interface Params {
   page: string;
@@ -60,6 +61,8 @@ interface Data {
 
 export default function App() {
   const [data, setData] = React.useState<Data>();
+  const [messages, setMessages] = React.useState<Messages>();
+
   React.useEffect(() => {
     fetch(`${process.env.PUBLIC_URL}/rd.json`)
       .then((response) => response.json())
@@ -69,33 +72,44 @@ export default function App() {
       .catch((error) => {
         console.error("fetch data", error);
       });
+
+    fetch(`${process.env.PUBLIC_URL}/messages.json`)
+      .then((response) => response.json())
+      .then((messages: Messages) => {
+        setMessages(messages);
+      })
+      .catch((error) => {
+        console.error("fetch messages", error);
+      });
   }, []);
 
-  if (data) {
+  if (data && messages) {
     const { items, releases } = data;
     return (
-      <BrowserRouter basename={`${process.env.PUBLIC_URL}`}>
-        <Switch>
-          <Route path={"/:page(.+).html"}>
-            <div>
-              <div className="page">
-                <div className="page__header">
-                  <HeaderWithPageParam />
-                </div>
-                <div className={classNames("page__content")}>
-                  <RouterWithPageParam items={items} releases={releases} />
-                </div>
-                <div className="page__footer">
-                  <FooterWithPageParam items={items} />
+      <MessagesProvider messages={messages}>
+        <BrowserRouter basename={`${process.env.PUBLIC_URL}`}>
+          <Switch>
+            <Route path={"/:page(.+).html"}>
+              <div>
+                <div className="page">
+                  <div className="page__header">
+                    <HeaderWithPageParam />
+                  </div>
+                  <div className={classNames("page__content")}>
+                    <RouterWithPageParam items={items} releases={releases} />
+                  </div>
+                  <div className="page__footer">
+                    <FooterWithPageParam items={items} />
+                  </div>
                 </div>
               </div>
-            </div>
-          </Route>
-          <Route path={"/"}>
-            <Redirect to={"/index.html"} />
-          </Route>
-        </Switch>
-      </BrowserRouter>
+            </Route>
+            <Route path={"/"}>
+              <Redirect to={"/index.html"} />
+            </Route>
+          </Switch>
+        </BrowserRouter>
+      </MessagesProvider>
     );
   }
 

src/components/Footer/Footer.tsx

@@ -5,13 +5,16 @@ import FooterEnd from "../FooterEnd/FooterEnd";
 import { assetUrl, getItemPageNames, isMobileViewport } from "../../config";
 import { Item } from "../../model";
 import "./footer.scss";
-export default function Footer({
-  items,
-  pageName,
-}: {
+import { useMessages } from "../../context/MessagesContext";
+
+interface Props {
   items: Item[];
   pageName: string;
-}) {
+}
+
+const Footer: React.FC<Props> = ({ items, pageName }) => {
+  const { footerFootnote } = useMessages();
+
   return (
     <div
       className={classNames("footer", {
@@ -25,16 +28,11 @@ export default function Footer({
           <img src={assetUrl("logo.svg")} width="150px" height="60px" alt="" />
         }
       >
-        <span className="footnote">
-          AOE is a leading global provider of services for digital
-          transformation and digital business models. AOE relies exclusively on
-          established Enterprise Open Source technologies. This leads to
-          innovative solutions, digital products and portals in agile software
-          projects, and helps build long-lasting, strategic partnerships with
-          our customers.
-        </span>
+        <span className="footnote">{footerFootnote}</span>
       </Branding>
       <FooterEnd />
     </div>
   );
-}
+};
+
+export default Footer;

src/components/FooterEnd/FooterEnd.tsx

@@ -1,107 +1,45 @@
 import React from "react";
 import classNames from "classnames";
-import {
-  FaFacebookF,
-  FaTwitter,
-  FaLinkedinIn,
-  FaXing,
-  FaYoutube,
-  FaGithub,
-  FaInstagram,
-} from "react-icons/fa";
+import SocialIcon from "../SocialIcon/SocialIcon";
 import "./footerend.scss";
+import { useMessages } from "../../context/MessagesContext";
 
 interface Props {
   modifier?: "in-sidebar";
 }
 
-const FooterEnd: React.FC<Props> = ({ modifier }) => (
-  <div
-    className={classNames("footer-end", {
-      [`footer-end__${modifier}`]: modifier,
-    })}
-  >
-    <div className="footer-social">
-      <div className="footer-social__label">
-        <p>Follow us:</p>
+const FooterEnd: React.FC<Props> = ({ modifier }) => {
+  const { socialIcons } = useMessages();
+
+  return (
+    <div
+      className={classNames("footer-end", {
+        [`footer-end__${modifier}`]: modifier,
+      })}
+    >
+      <div className="footer-social">
+        <div className="footer-social__label">
+          <p>Follow us:</p>
+        </div>
+        <div className="footer-social__links">
+          {socialIcons.map(({ href, iconName }) => (
+            <SocialIcon href={href} iconName={iconName} />
+          ))}
+        </div>
       </div>
-      <div className="footer-social__links">
-        <a
-          href="https://www.facebook.com/aoepeople"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-icon-a"
-        >
-          <FaFacebookF className="social-icon" />
-        </a>
-
-        <a
-          href="https://twitter.com/aoepeople"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-icon-a"
-        >
-          <FaTwitter className="social-icon" />
-        </a>
-
-        <a
-          href="https://www.linkedin.com/company/aoe"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-icon-a"
-        >
-          <FaLinkedinIn className="social-icon" />
-        </a>
-
-        <a
-          href="https://www.xing.com/company/aoe"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-icon-a"
-        >
-          <FaXing className="social-icon" />
-        </a>
-
-        <a
-          href="https://www.instagram.com/aoepeople"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-icon-a"
-        >
-          <FaInstagram className="social-icon" />
-        </a>
-
-        <a
-          href="https://www.youtube.com/user/aoepeople"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-icon-a"
-        >
-          <FaYoutube className="social-icon" />
-        </a>
-
-        <a
-          href="https://github.com/aoepeople"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="social-icon-a"
-        >
-          <FaGithub className="social-icon" />
-        </a>
+      <div className="footer-copyright">
+        <p>
+          <a
+            href="https://www.aoe.com/en/imprint.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Legal Information
+          </a>
+        </p>
       </div>
     </div>
-    <div className="footer-copyright">
-      <p>
-        <a
-          href="https://www.aoe.com/en/imprint.html"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Legal Information
-        </a>
-      </p>
-    </div>
-  </div>
-);
+  );
+};
 
 export default FooterEnd;

src/components/SocialIcon/SocialIcon.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import {
+  FaFacebookF,
+  FaTwitter,
+  FaLinkedinIn,
+  FaXing,
+  FaYoutube,
+  FaGithub,
+  FaInstagram,
+} from "react-icons/fa";
+
+const icons = {
+  facebook: FaFacebookF,
+  twitter: FaTwitter,
+  linkedIn: FaLinkedinIn,
+  xing: FaXing,
+  instagram: FaInstagram,
+  youtube: FaYoutube,
+  github: FaGithub,
+};
+
+export interface Props {
+  href: string;
+  iconName: keyof typeof icons;
+}
+
+const SocialIcon: React.FC<Props> = ({ href, iconName }) => {
+  const Icon = icons[iconName];
+
+  if (Icon) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="social-icon-a"
+      >
+        <Icon className="social-icon" />
+      </a>
+    );
+  }
+  console.log(`The icon is unknown: ${iconName}`);
+  return null;
+};
+
+export default SocialIcon;

src/context/MessagesContext/index.tsx

@@ -0,0 +1,46 @@
+import { createContext, FC, useContext } from "react";
+import { Props as SocialIcon } from "../../components/SocialIcon/SocialIcon";
+
+interface Quadrant {
+  name: string;
+  description: string;
+}
+
+interface Ring {
+  name: string;
+  description: string;
+}
+
+interface PageHelp {
+  introduction: string[];
+  whatIsTheRadar: string[];
+  howItIsCreated: string[];
+  howShouldItBeUsed: string[];
+  quadrants: Quadrant[];
+  rings: Ring[];
+}
+
+export interface Messages {
+  footerFootnote: string;
+  socialIcons: SocialIcon[];
+  pageHelp: PageHelp;
+}
+
+const MessagesContext = createContext<Messages | undefined>(undefined);
+
+export const MessagesProvider: FC<{ messages: Messages }> = ({
+  messages,
+  children,
+}) => (
+  <MessagesContext.Provider value={messages}>
+    {children}
+  </MessagesContext.Provider>
+);
+
+export const useMessages = () => {
+  const context = useContext(MessagesContext);
+  if (context === undefined) {
+    throw new Error("useMessages must be used within a MessagesProvider");
+  }
+  return context;
+};