Updating everything with react17

config-overrides.js

@@ -0,0 +1,9 @@
+/* config-overrides.js */
+const { override, fixBabelImports } = require("customize-cra");
+
+module.exports = override(
+  fixBabelImports("import", {
+    libraryName: "antd",
+    libraryDirectory: "es",
+  })
+);

package.json

@@ -25,43 +25,50 @@
   },
   "homepage": "https://github.com/hugobarragon/react-quizzes",
   "dependencies": {
+    "@ant-design/icons": "^4.6.2",
     "@types/lodash.clonedeep": "^4.5.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/node": "12.12.3",
     "@types/uuid": "^3.4.9",
-    "antd": "^3.26.20",
+    "antd": "^4.16.3",
     "iso-639-1": "^2.1.9",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-quill": "^1.3.5",
+    "react-quill": "^2.0.0-beta.2",
+    "react-use": "^17.2.4",
     "uuid": "^3.4.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^24.9.1",
     "@types/react": "^16.14.8",
     "@types/react-dom": "^16.9.13",
+    "babel-plugin-import": "^1.13.3",
     "copyfiles": "^2.4.1",
+    "customize-cra": "^1.0.0",
     "gh-pages": "^3.2.1",
     "react": "^16.14.0",
+    "react-app-rewired": "^2.1.8",
     "react-dom": "^16.14.0",
     "react-scripts": "^3.4.4",
+    "serve": "^12.0.0",
     "typescript": "^3.9.9"
   },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
     "compile": "tsc -p ./tsconfig.compile.json",
     "postcompile": "copyfiles  -u 1 src/**/*.css lib/",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
-    "test": "react-scripts test",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/Quiz/Quiz.tsx

@@ -1,76 +1,68 @@
-import React, { PureComponent } from "react";
+import React from "react";
 import QuizzContext, {
   getDefaultContext,
-  IQuizzContext
+  IQuizzContext,
 } from "../QuizzContext";
 import TranslatedText from "../translations/TranslatedText";
 import { Empty, Button, Form } from "antd";
 
-class Quizz extends PureComponent<any, any> {
+const { Item: FormItem, useForm } = Form;
+
+function Quizz(props: any) {
+  const { data, submitButton = true, ...rest } = props;
+  const [form] = useForm();
+  const contextValue = getDefaultContext(rest as IQuizzContext);
+
   // submit handler
-  handleSubmit(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+  function handleSubmit(e: React.MouseEvent<HTMLElement, MouseEvent>) {
     e.preventDefault();
-    const { onSubmit, form } = this.props;
+    const { onSubmit } = props;
 
-    form.validateFields((err: any, values: any) => {
-      if (!err) {
-        if (typeof onSubmit === "function") {
-          // sends values to parent if has onSubmit
-          onSubmit(values);
-        }
+    form.validateFields().then((values: any) => {
+      if (typeof onSubmit === "function") {
+        // sends values to parent if has onSubmit
+        onSubmit(values);
       }
     });
   }
 
-  static defaultProps = {
-    submitButton: true
-  };
+  return (
+    <div className="react-quizzes-quizz">
+      <QuizzContext.Provider value={contextValue}>
+        <Form className="react-quizzes-quizz" form={form}>
+          {data.map((item: any) => {
+            const current_key = item.element;
+            // searchs for the current input on the toolbox to get the component
+            const found_toolbox_input = contextValue["toolBox"].find(
+              (toolBoxInput: any) => current_key === toolBoxInput.key
+            ) as any;
+            // finds input and wrapps it with delete and edit button
+            const Component = found_toolbox_input
+              ? found_toolbox_input.Component
+              : Empty;
 
-  render() {
-    const { form, data, submitButton, ...rest } = this.props,
-      contextValue = getDefaultContext(rest as IQuizzContext);
-    return (
-      <div className="react-quizzes-quizz">
-        <QuizzContext.Provider value={contextValue}>
-          <Form className="react-quizzes-quizz">
-            {data.map((item: any) => {
-              const current_key = item.element;
-              // searchs for the current input on the toolbox to get the component
-              const found_toolbox_input = contextValue["toolBox"].find(
-                (toolBoxInput: any) => current_key === toolBoxInput.key
-              ) as any;
-              // finds input and wrapps it with delete and edit button
-              const Component = found_toolbox_input
-                ? found_toolbox_input.Component
-                : Empty;
-
-              return (
-                <Component
-                  // render the toolbox component
-                  key={item.id}
-                  form={form}
-                  toolboxData={found_toolbox_input}
-                  inputData={item}
-                  language={contextValue["language"]}
-                />
-              );
-            })}
-            {submitButton ? (
-              <Form.Item>
-                <Button
-                  type="primary"
-                  htmlType="submit"
-                  onClick={this.handleSubmit.bind(this)}
-                >
-                  <TranslatedText id="btn.submit" />
-                </Button>
-              </Form.Item>
-            ) : null}
-          </Form>
-        </QuizzContext.Provider>
-      </div>
-    );
-  }
+            return (
+              <Component
+                // render the toolbox component
+                key={item.id}
+                form={form}
+                toolboxData={found_toolbox_input}
+                inputData={item}
+                language={contextValue["language"]}
+              />
+            );
+          })}
+          {submitButton ? (
+            <FormItem>
+              <Button type="primary" htmlType="submit" onClick={handleSubmit}>
+                <TranslatedText id="btn.submit" />
+              </Button>
+            </FormItem>
+          ) : null}
+        </Form>
+      </QuizzContext.Provider>
+    </div>
+  );
 }
 
-export default Form.create<any>()(Quizz);
+export default Quizz;

src/QuizzBuilder/FormBuilder.tsx

@@ -1,21 +1,20 @@
 import React, { useReducer, memo, useEffect } from "react";
 import { reducer, initialState } from "./reducer/reducer";
-import Row from "antd/es/row/index";
-import Col from "antd/es/col/index";
+import { Col, Row } from "antd";
 import ToolBox from "./ToolBoxContainer";
 import FormPreview from "./FormPreview/FormPreview";
 import QuizzContext, { getDefaultContext } from "../QuizzContext";
 import { usePrevious } from "../customHooks";
 import isEqual from "lodash.isequal";
 import "../assets/FormBuilder.css";
 
-export default memo(function(props: any) {
+export default memo(function (props: any) {
   const { onChange, initialValue, ...rest } = props,
     [state, dispatch] = useReducer(reducer, initialState(initialValue)),
     contextValue = {
       ...getDefaultContext(rest),
       state,
-      dispatch
+      dispatch,
     },
     formData = state.get("data");
   const previousFormData = usePrevious(formData);

src/QuizzBuilder/FormPreview/ElementWrapper/DeleteButton.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from "react";
-import Button from "antd/es/button/index";
-import Popconfirm from "antd/es/popconfirm/index";
+import { Button, Popconfirm } from "antd";
 import { deleteElement } from "../../reducer/actions";
 import QuizzContext, { IQuizzBuilderContext } from "../../../QuizzContext";
 import TranslatedText from "../../../translations/TranslatedText";
@@ -18,7 +17,7 @@ export default (props: any) => {
       okText={<TranslatedText id="btn.yes" />}
       cancelText={<TranslatedText id="btn.no" />}
     >
-      <Button type="danger" icon="delete" shape="circle" />
+      <Button type="primary" danger icon="delete" shape="circle" />
     </Popconfirm>
   );
 };

src/QuizzBuilder/FormPreview/ElementWrapper/EditElement/SideDrawer/SettingsForm/CustomFormInput/OptionsInput/OptionsInput.tsx

@@ -11,13 +11,8 @@ import AddInputOption from "./AddInputOption";
 const { TabPane } = Tabs;
 
 export default forwardRef((props: any, ref) => {
-  const {
-    value,
-    onChange,
-    currentLanguage,
-    setLanguage,
-    languagesList
-  } = props;
+  const { value, onChange, currentLanguage, setLanguage, languagesList } =
+    props;
 
   // handles on change ofr text and value
   function onChangeInput(index: number, content: string, language?: string) {
@@ -83,7 +78,7 @@ export default forwardRef((props: any, ref) => {
                   <Input
                     key={i}
                     value={option.text[language]}
-                    onChange={e => onChangeInput(i, e.target.value, language)}
+                    onChange={(e) => onChangeInput(i, e.target.value, language)}
                   />
                 ))}
               </TabPane>
@@ -101,14 +96,15 @@ export default forwardRef((props: any, ref) => {
               <Col span={20}>
                 <Input
                   value={option.value}
-                  onChange={e => onChangeInput(i, e.target.value)}
+                  onChange={(e) => onChangeInput(i, e.target.value)}
                 />
               </Col>
               <Col style={{ textAlign: "center" }} span={4}>
                 {i > 0 ? (
                   /* only show delete button if not first option */
                   <Button
-                    type="danger"
+                    type="primary"
+                    danger
                     icon="delete"
                     shape="circle"
                     onClick={() => onDelete(i)}

src/QuizzBuilder/FormPreview/ElementWrapper/EditElement/SideDrawer/SettingsForm/CustomFormInput/QuillFormInput/index.tsx

@@ -64,7 +64,7 @@ const modules = {
   },
 };
 
-export default forwardRef((props: any, ref) => {
+export default forwardRef((props: any, ref: any) => {
   const {
     value,
     defaultValue,
@@ -93,7 +93,7 @@ export default forwardRef((props: any, ref) => {
   }
   return (
     <Tabs
-      ref={ref as any}
+      // ref={ref}
       onChange={setLanguage}
       activeKey={currentLanguage}
       tabBarExtraContent={

src/QuizzBuilder/FormPreview/ElementWrapper/EditElement/SideDrawer/SettingsForm/SettingsForm.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from "react";
-import { FormComponentProps } from "antd/lib/form/Form";
+import { FormProps } from "antd/es/form";
 import { Form, Checkbox } from "antd";
 import QuillFormInput from "./CustomFormInput/QuillFormInput";
 import TranslatedText from "../../../../../../translations/TranslatedText";
@@ -8,7 +8,7 @@ import cloneDeep from "lodash.clonedeep";
 
 // this must be a class component because of parent components acessing the prop "wrappedComponentRef"
 // to be able to access form props and make a custom submit on parent for example.
-interface DrawerFormProps extends FormComponentProps {
+interface DrawerFormProps extends FormProps {
   [k: string]: any;
 }
 class DrawerForm extends PureComponent<DrawerFormProps, any> {
@@ -19,7 +19,7 @@ class DrawerForm extends PureComponent<DrawerFormProps, any> {
 
     this.state = {
       languagesList,
-      currentLanguage: languagesList[0]
+      currentLanguage: languagesList[0],
     };
   }
 
@@ -46,7 +46,7 @@ class DrawerForm extends PureComponent<DrawerFormProps, any> {
 
     setFieldsValue({ questions, options });
     this.setState({
-      languagesList: Object.keys(questions)
+      languagesList: Object.keys(questions),
     });
   };
 
@@ -73,7 +73,7 @@ class DrawerForm extends PureComponent<DrawerFormProps, any> {
     this.setState(
       {
         currentLanguage: listLanguages[0],
-        languagesList: listLanguages
+        languagesList: listLanguages,
       },
       () => {
         // fix's bug that some times one of the updates was lost
@@ -86,7 +86,7 @@ class DrawerForm extends PureComponent<DrawerFormProps, any> {
     const {
         form,
         // toolboxData,
-        inputData
+        inputData,
       } = this.props,
       { currentLanguage, languagesList } = this.state,
       { getFieldDecorator } = form,
@@ -97,7 +97,7 @@ class DrawerForm extends PureComponent<DrawerFormProps, any> {
         <Form.Item label={<TranslatedText id="settings.form.questions" />}>
           {getFieldDecorator("questions", {
             initialValue: questions,
-            rules: [{ required: true, message: "Required field" }]
+            rules: [{ required: true, message: "Required field" }],
           })(
             <QuillFormInput
               currentLanguage={currentLanguage}
@@ -112,7 +112,7 @@ class DrawerForm extends PureComponent<DrawerFormProps, any> {
           <Form.Item label={<TranslatedText id="settings.form.options" />}>
             {getFieldDecorator("options", {
               initialValue: options,
-              rules: [{ required: true, message: "Required field" }]
+              rules: [{ required: true, message: "Required field" }],
             })(
               <OptionsInput
                 languagesList={languagesList}
@@ -125,7 +125,7 @@ class DrawerForm extends PureComponent<DrawerFormProps, any> {
         <Form.Item>
           {getFieldDecorator("required", {
             initialValue: required,
-            valuePropName: "checked"
+            valuePropName: "checked",
           })(
             <Checkbox>
               <TranslatedText id="settings.form.required" />

src/QuizzBuilder/FormPreview/ElementWrapper/EditElement/SideDrawer/index.tsx

@@ -4,7 +4,7 @@ import BottomButtons from "../../../../../ReusableComponents/BottomButtons";
 import SettingsForm from "./SettingsForm/SettingsForm";
 import TranslatedText from "../../../../../translations/TranslatedText";
 import QuizzContext, {
-  IQuizzBuilderContext
+  IQuizzBuilderContext,
 } from "../../../../../QuizzContext";
 import { patchElement } from "../../../../reducer/actions";
 import styles from "./drawer.module.css";
@@ -45,12 +45,7 @@ export default function SettingsDrawer(props: any) {
           inputData={inputData}
         />
       </Row>
-      <Row
-        type="flex"
-        justify="space-between"
-        align="bottom"
-        style={{ height: "10%" }}
-      >
+      <Row justify="space-between" align="bottom" style={{ height: "10%" }}>
         <BottomButtons onClose={closeDrawer} onSubmit={onFormSubmit} />
       </Row>
     </Drawer>