fix(h5p-react): corrected React imports for Jest (#1868)

Lumieducation · Nov 6, 2021 · ba02a8c · ba02a8c
1 parent 79cdaf3
commit ba02a8c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 53 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -33,11 +33,6 @@ module.exports = {
         'no-continue': 0,
         'no-case-declarations': 0,
         'prettier/prettier': 'error',
-        'react/destructuring-assignment': [
-            'error',
-            'always',
-            { ignoreClassFields: true }
-        ],
         '@typescript-eslint/typedef': [
             'error',
             {

diff --git a/packages/h5p-react/src/H5PEditorUI.tsx b/packages/h5p-react/src/H5PEditorUI.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import * as React from 'react';
+import { Component, createRef, ReactNode, RefObject } from 'react';
+
 import {
     defineElements,
     H5PEditorComponent as H5PEditorWebComponent
@@ -22,7 +24,7 @@ declare global {
     }
 }
 
-export default class H5PEditorUI extends React.Component<{
+interface IH5PEditorUIProps {
     contentId: string;
     loadContentCallback: (contentId: string) => Promise<
         IEditorModel & {
@@ -44,35 +46,15 @@ export default class H5PEditorUI extends React.Component<{
         contentId: string;
         metadata: IContentMetadata;
     }>;
-}> {
-    constructor(props: {
-        contentId: string;
-        loadContentCallback: (contentId: string) => Promise<
-            IEditorModel & {
-                library?: string;
-                metadata?: IContentMetadata;
-                params?: any;
-            }
-        >;
-        onLoaded?: (contentId: string, ubername: string) => void;
-        onSaved?: (contentId: string, metadata: IContentMetadata) => void;
-        onSaveError?: (errorMessage: string) => void;
-        saveContentCallback: (
-            contentId: string,
-            requestBody: {
-                library: string;
-                params: any;
-            }
-        ) => Promise<{
-            contentId: string;
-            metadata: IContentMetadata;
-        }>;
-    }) {
+}
+
+export default class H5PEditorUI extends Component<IH5PEditorUIProps> {
+    constructor(props: IH5PEditorUIProps) {
         super(props);
-        this.h5pEditor = React.createRef();
+        this.h5pEditor = createRef();
     }
 
-    private h5pEditor: React.RefObject<H5PEditorWebComponent>;
+    private h5pEditor: RefObject<H5PEditorWebComponent>;
 
     public componentDidMount(): void {
         this.registerEvents();
@@ -95,7 +77,7 @@ export default class H5PEditorUI extends React.Component<{
         return null;
     }
 
-    public render(): React.ReactNode {
+    public render(): ReactNode {
         return (
             <h5p-editor
                 ref={this.h5pEditor}
@@ -140,21 +122,23 @@ export default class H5PEditorUI extends React.Component<{
 
     private onEditorLoaded = (
         event: CustomEvent<{ contentId: string; ubername: string }>
-    ) => {
+    ): void => {
         if (this.props.onLoaded) {
             this.props.onLoaded(event.detail.contentId, event.detail.ubername);
         }
     };
 
     private onSaved = (
         event: CustomEvent<{ contentId: string; metadata: IContentMetadata }>
-    ) => {
+    ): void => {
         if (this.props.onSaved) {
             this.props.onSaved(event.detail.contentId, event.detail.metadata);
         }
     };
 
-    private onSaveError = async (event: CustomEvent<{ message: string }>) => {
+    private onSaveError = async (
+        event: CustomEvent<{ message: string }>
+    ): Promise<void> => {
         if (this.props.onSaveError) {
             this.props.onSaveError(event.detail.message);
         }

diff --git a/packages/h5p-react/src/H5PPlayerUI.tsx b/packages/h5p-react/src/H5PPlayerUI.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import { Component, createRef, ReactNode, RefObject } from 'react';
 
 import {
     defineElements,
@@ -23,27 +24,20 @@ declare global {
     }
 }
 
-export default class H5PPlayerUI extends React.Component<{
+interface IH5PPlayerUIProps {
     contentId: string;
     loadContentCallback: (contentId: string) => Promise<IPlayerModel>;
     onInitialized?: (contentId: string) => void;
     onxAPIStatement?: (statement: any, context: any, event: IxAPIEvent) => void;
-}> {
-    constructor(props: {
-        contentId: string;
-        loadContentCallback: (contentId: string) => Promise<IPlayerModel>;
-        onInitialized?: (contentId: string) => void;
-        onxAPIStatement?: (
-            statement: any,
-            context: any,
-            event: IxAPIEvent
-        ) => void;
-    }) {
+}
+
+export default class H5PPlayerUI extends Component<IH5PPlayerUIProps> {
+    constructor(props: IH5PPlayerUIProps) {
         super(props);
-        this.h5pPlayer = React.createRef();
+        this.h5pPlayer = createRef();
     }
 
-    private h5pPlayer: React.RefObject<H5PPlayerComponent>;
+    private h5pPlayer: RefObject<H5PPlayerComponent>;
 
     public componentDidMount(): void {
         this.registerEvents();
@@ -105,7 +99,7 @@ export default class H5PPlayerUI extends React.Component<{
         return this.h5pPlayer.current?.hasCopyrightInformation();
     }
 
-    public render(): React.ReactNode {
+    public render(): ReactNode {
         return (
             <h5p-player
                 ref={this.h5pPlayer}