upgraded to latest ionic react hook form and swiper

Author: aaronksaunders

package-lock.json

@@ -3,37 +3,43 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@capacitor/core": "2.4.7",
-    "@hookform/error-message": "0.0.5",
-    "@ionic/react": "5.4.4",
-    "@ionic/react-router": "5.4.4",
+    "@capacitor/app": "1.1.1",
+    "@capacitor/core": "3.4.3",
+    "@capacitor/haptics": "1.1.4",
+    "@capacitor/ios": "3.4.3",
+    "@capacitor/keyboard": "1.2.2",
+    "@capacitor/status-bar": "1.0.8",
+    "@hookform/error-message": "2.0.0",
+    "@ionic/react": "^6.0.0",
+    "@ionic/react-router": "^6.0.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
-    "@types/jest": "^24.0.25",
-    "@types/node": "^12.12.24",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
-    "@types/react-router": "^5.1.4",
-    "@types/react-router-dom": "^5.1.3",
-    "ionicons": "5.2.3",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-hook-form": "^6.15.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
-    "typescript": "3.8.3"
+    "@types/jest": "^26.0.20",
+    "@types/node": "^12.19.15",
+    "@types/react": "^16.14.3",
+    "@types/react-dom": "^16.9.10",
+    "@types/react-router": "^5.1.11",
+    "@types/react-router-dom": "^5.1.7",
+    "ionicons": "6.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-hook-form": "7.29.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^5.0.0",
+    "swiper": "^8.0.7"
   },
   "scripts": {
-    "start": "FAST_REFRESH=false react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app"
+      "react-app",
+      "react-app/jest"
     ]
   },
   "browserslist": {
@@ -49,8 +55,9 @@
     ]
   },
   "devDependencies": {
-    "@capacitor/cli": "2.4.7",
-    "@ionic/lab": "3.2.10"
+    "@capacitor/cli": "3.4.3",
+    "@ionic/cli": "6.19.0",
+    "@ionic/lab": "3.2.11"
   },
   "description": "An Ionic project"
 }

package.json

@@ -4,7 +4,10 @@ import { ErrorMessage } from "@hookform/error-message";
 import React from "react";
 
 export const BasicInfo: React.FC<any> = ({ next }) => {
-  const { register, errors } = useFormContext(); // retrieve all hook methods
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext(); // retrieve all hook methods
 
   return (
     <div className="slide-main ion-padding">
@@ -13,21 +16,19 @@ export const BasicInfo: React.FC<any> = ({ next }) => {
         <IonItem lines="none">
           <IonInput
             autocomplete="new-password"
-            name="first"
             placeholder="First Name"
             type="text"
-            ref={register({ required: "First Name Is Required" })}
+            {...register("first", { required: "First Name Is Required" })}
           ></IonInput>
         </IonItem>
         <ErrorMessage errors={errors} name="first" />
 
         <IonItem lines="none" style={{ marginTop: 8 }}>
           <IonInput
             autocomplete="new-password"
-            name="last"
             placeholder="Last Name"
             type="text"
-            ref={register({ required: "Last Name Is Required" })}
+            {...register("last", { required: "Last Name Is Required" })}
           ></IonInput>
         </IonItem>
         <ErrorMessage errors={errors} name="last" />

src/pages/BasicInfo.tsx

@@ -8,26 +8,24 @@ import { ErrorMessage } from "@hookform/error-message";
 import React from "react";
 
 const ContactInfo: React.FC<any> = ({ prev }) => {
-  const { register, errors } = useFormContext(); // retrieve all hook methods
+  const { register, formState: { errors }, } = useFormContext(); // retrieve all hook methods
   return (
     <div className="slide-main ion-padding">
       <div className="form-content">
         <h1>Contact Information</h1>
         <IonItem lines="none">
           <IonInput
-            name="email"
             placeholder="Email Address"
             type="email"
-            ref={register({ required: "Email Is Required" })}
+            {...register("email", { required: "Email Is Required" })}
           ></IonInput>
         </IonItem>
         <ErrorMessage errors={errors} name="email" />
 
         <IonItem lines="none" style={{ marginTop: 8 }}>
           <IonInput
-            name="phone"
             placeholder="Phone Number"
-            ref={register({ required: "Phone Number Is Required" })}
+            {...register("phone", { required: "Phone Number Is Required" })}
           ></IonInput>
         </IonItem>
         <ErrorMessage errors={errors} name="phone" />

src/pages/ContactInfo.tsx

@@ -11,4 +11,15 @@
 
 .form-footer {
     float: right !important;
+}
+
+.a-slide {
+  height: 100%;
+  background-color: grey;
+  font-size: 30px;
+  padding: 16px;
+}
+
+.noSwipingClass {
+  margin: auto;
 }

src/pages/Home.css

@@ -6,11 +6,16 @@ import {
   IonToolbar,
   IonSlides,
   IonSlide,
+  setupIonicReact,
 } from "@ionic/react";
 
 // react hook form
 import { FormProvider, useForm } from "react-hook-form";
 
+//swiper
+import { Swiper, SwiperSlide } from "swiper/react";
+// Import Swiper styles
+import 'swiper/css';
 
 import React, { useEffect, useRef, useState } from "react";
 
@@ -19,35 +24,36 @@ import BasicInfo from "./BasicInfo";
 import PasswordInfo from "./PasswordInfo";
 import ContactInfo from "./ContactInfo";
 
+setupIonicReact();
+
 const slideOpts = {
   initialSlide: 0,
   speed: 400,
 };
 
 const Home: React.FC = () => {
-  const mySlides = useRef<any>(null);
+  const [mySlides, setMySlides] = useState<any>(null)
   const [formData, setFormData] = useState<any>();
 
   const methods = useForm();
   const { handleSubmit, trigger } = methods;
 
-
   useEffect(() => {
-    mySlides.current.lockSwipes(true);
+    // mySlides?.lockSwipes(true);
   });
 
   const next = async (fields: any) => {
     const result = await trigger(fields);
     if (!result) return;
-    await mySlides.current.lockSwipes(false);
-    await mySlides.current.slideNext();
-    await mySlides.current.lockSwipes(true);
+    // await mySlides?.lockSwipes(false);
+    await mySlides?.slideNext();
+    // await mySlides?.lockSwipes(true);
   };
 
   const prev = async () => {
-    await mySlides.current.lockSwipes(false);
-    await mySlides.current.slidePrev();
-    await mySlides.current.lockSwipes(true);
+    // await mySlides?.lockSwipes(false);
+    await mySlides?.slidePrev();
+    // await mySlides?.lockSwipes(true);
   };
 
   const onSubmit = (data: any) => {
@@ -64,18 +70,25 @@ const Home: React.FC = () => {
       </IonHeader>
       <IonContent fullscreen className="ion-padding">
         <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(onSubmit)}  autoComplete="off">
-            <IonSlides pager={true} options={slideOpts} ref={mySlides}>
-              <IonSlide>
-                <BasicInfo next={next} />
-              </IonSlide>
-              <IonSlide>
+          <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
+            <Swiper
+              spaceBetween={50}
+              slidesPerView={1}
+              noSwiping={true}
+              noSwipingClass="noSwipingClass"
+              onSlideChange={() => console.log("slide change")}
+              onSwiper={(swiper) => setMySlides(swiper)}
+            >
+              <SwiperSlide  className="noSwipingClass">
+                <BasicInfo next={next} className="noSwiping"/>
+              </SwiperSlide>
+              <SwiperSlide  className="noSwipingClass">
                 <PasswordInfo next={next} prev={prev} />
-              </IonSlide>
-              <IonSlide>
+              </SwiperSlide>
+              <SwiperSlide className="noSwipingClass">
                 <ContactInfo prev={prev} />
-              </IonSlide>
-            </IonSlides>
+              </SwiperSlide>
+            </Swiper>
           </form>
         </FormProvider>
         <div style={{ fontSize: "smaller" }}>

src/pages/Home.tsx

@@ -4,29 +4,31 @@ import { ErrorMessage } from "@hookform/error-message";
 import React from "react";
 
 const PasswordInfo: React.FC<any> = ({ next, prev }) => {
-  const { register, errors, getValues } = useFormContext(); // retrieve all hook methods
+  const {
+    register,
+    formState: { errors },
+    getValues,
+  } = useFormContext(); // retrieve all hook methods
   return (
     <div className="slide-main ion-padding">
       <div className="form-content">
         <h1>Password Information</h1>
         <IonItem lines="none">
           <IonInput
             autocomplete="new-password"
-            name="password-1"
             placeholder="Password"
             type="password"
-            ref={register({ required: "Password Is Required" })}
+            {...register("password-1", { required: "Password Is Required" })}
           ></IonInput>
         </IonItem>
         <ErrorMessage errors={errors} name="password-1" />
 
         <IonItem lines="none" style={{ marginTop: 8 }}>
           <IonInput
             autocomplete="new-password"
-            name="password-2"
             placeholder="Confirm Password"
             type="password"
-            ref={register({
+            {...register("password-2", {
               validate: {
                 noMatch: (value: string) => {
                   return value !== getValues("password-1")