use binder from context to make extensions it testable

scm-ui/ui-components/src/avatar/AvatarImage.tsx

@@ -1,25 +1,26 @@
-import React, {FC} from "react";
-import { binder } from "@scm-manager/ui-extensions";
+import React, { FC } from "react";
 import { Image } from "..";
 import { Person } from "./Avatar";
 import { EXTENSION_POINT } from "./Avatar";
+import { useBinder } from "@scm-manager/ui-extensions";
 
 type Props = {
   person: Person;
   representation?: "rounded" | "rounded-border";
 };
 
-const AvatarImage:FC<Props> = ({person, representation = "rounded-border"}) => {
-    const avatarFactory = binder.getExtension(EXTENSION_POINT);
-    if (avatarFactory) {
-      const avatar = avatarFactory(person);
+const AvatarImage: FC<Props> = ({ person, representation = "rounded-border" }) => {
+  const binder = useBinder();
+  const avatarFactory = binder.getExtension(EXTENSION_POINT);
+  if (avatarFactory) {
+    const avatar = avatarFactory(person);
 
-      const className = representation === "rounded" ? "is-rounded" : "has-rounded-border";
+    const className = representation === "rounded" ? "is-rounded" : "has-rounded-border";
 
-      return <Image className={className} src={avatar} alt={person.name} />;
-    }
+    return <Image className={className} src={avatar} alt={person.name} />;
+  }
 
-    return null;
+  return null;
 };
 
 export default AvatarImage;

scm-ui/ui-components/src/avatar/AvatarWrapper.tsx

@@ -1,18 +1,13 @@
-import React, { Component, ReactNode } from "react";
-import { binder } from "@scm-manager/ui-extensions";
+import React, { FC } from "react";
+import { useBinder } from "@scm-manager/ui-extensions";
 import { EXTENSION_POINT } from "./Avatar";
 
-type Props = {
-  children: ReactNode;
+const AvatarWrapper: FC = ({ children }) => {
+  const binder = useBinder();
+  if (binder.hasExtension(EXTENSION_POINT)) {
+    return <>{children}</>;
+  }
+  return null;
 };
 
-class AvatarWrapper extends Component<Props> {
-  render() {
-    if (binder.hasExtension(EXTENSION_POINT)) {
-      return <>{this.props.children}</>;
-    }
-    return null;
-  }
-}
-
 export default AvatarWrapper;

scm-ui/ui-components/src/layout/Footer.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { FC } from "react";
 import { Me, Links } from "@scm-manager/ui-types";
 import { Link } from "react-router-dom";
-import { binder } from "@scm-manager/ui-extensions";
+import { useBinder } from "@scm-manager/ui-extensions";
 import { AvatarWrapper, AvatarImage } from "../avatar";
 
 type Props = {
@@ -10,56 +10,53 @@ type Props = {
   links: Links;
 };
 
-class Footer extends React.Component<Props> {
-  render() {
-    const { me, version, links } = this.props;
-    if (!me) {
-      return "";
-    }
-
-    const extensionProps = { me, links };
-    const extensions = binder.getExtensions("footer.links", extensionProps);
-
-    return (
-      <footer className="footer">
-        <div className="container is-centered has-text-centered ">
-          <p className="is-size-6 columns is-centered">
-            <AvatarWrapper>
-              <figure className="media-left">
-                <p className="image is-24x24 is-rounded">
-                  <AvatarImage person={me} representation="rounded" />
-                </p>
-              </figure>
-            </AvatarWrapper>
-            <Link to={"/me"}>{me.displayName}</Link>
-          </p>
-          <hr className={"has-background-grey-lighter"} />
-          <p>
-            <a href="https://www.scm-manager.org/" target="_blank">
-              SCM-Manager {version}
-            </a>
-            {extensions.map(Ext => (
-              <>
-                {" "}
-                | <Ext {...extensionProps} />
-              </>
-            ))}
-          </p>
-          <br />
-          <p>
-            Powered by{" "}
-            <a target="_blank" href="https://cloudogu.com/">
-              Cloudogu GmbH
-            </a>{" "}
-            | Learn more about{" "}
-            <a href="https://www.scm-manager.org/" target="_blank">
-              SCM-Manager
-            </a>
-          </p>
-        </div>
-      </footer>
-    );
+const Footer: FC<Props> = ({ me, version, links }) => {
+  const binder = useBinder();
+  if (!me) {
+    return null;
   }
-}
+  const extensionProps = { me, links };
+  const extensions = binder.getExtensions("footer.links", extensionProps);
+
+  return (
+    <footer className="footer">
+      <div className="container is-centered has-text-centered ">
+        <p className="is-size-6 columns is-centered">
+          <AvatarWrapper>
+            <figure className="media-left">
+              <p className="image is-24x24 is-rounded">
+                <AvatarImage person={me} representation="rounded" />
+              </p>
+            </figure>
+          </AvatarWrapper>
+          <Link to={"/me"}>{me.displayName}</Link>
+        </p>
+        <hr className={"has-background-grey-lighter"} />
+        <p>
+          <a href="https://www.scm-manager.org/" target="_blank">
+            SCM-Manager {version}
+          </a>
+          {extensions.map(Ext => (
+            <>
+              {" "}
+              | <Ext {...extensionProps} />
+            </>
+          ))}
+        </p>
+        <br />
+        <p>
+          Powered by{" "}
+          <a target="_blank" href="https://cloudogu.com/">
+            Cloudogu GmbH
+          </a>{" "}
+          | Learn more about{" "}
+          <a href="https://www.scm-manager.org/" target="_blank">
+            SCM-Manager
+          </a>
+        </p>
+      </div>
+    </footer>
+  );
+};
 
 export default Footer;