Refactoring in Onboarding steps

src/pages/Onboarding2.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from "mobx-react-lite";
 import { registrationStore } from "../store/store";
@@ -24,36 +24,22 @@ const Onboarding2 = observer(()=>{
       ...dataRegistration,
       [event.target.id]: newValue
     })
+    if(!Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
+      setFillingForm(true)
+    }
   }
 
   const saveStoreRegistration = ()=>{
-    Object.keys(dataRegistration).forEach(item=>{
-      let element=document.getElementById(item)
-      if(dataRegistration[item]) {
-        element.style.borderColor=""
-      } else {
-        element.style.borderColor="red"
-      }
-    })
-    if(Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
-      return
-    } else {
-      setFillingForm(true)
+    if(fillingForm) {
+      registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item=>{
+        return{
+          key: `${item}`,
+          value: dataRegistration[item]
+        }
+      }))
     }
-    registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item=>{
-      return{
-        key: `${item}`,
-        value: dataRegistration[item]
-      }
-    }))
   }
 
-  useEffect(()=>{
-    if(fillingForm===true) {
-      document.getElementById("signup").click()
-    }
-  },[fillingForm])
-
   return (
     <main className="bg-white">
 

src/pages/Onboarding3.jsx

@@ -6,19 +6,18 @@ import {registrationStore} from "../store/store";
 import { passphrase } from "@liskhq/lisk-client";
 
 function Onboarding3() {
-  const [passPhrase, setPassPhrase] = useState(registrationStore.passPhrase.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
+  const [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase))
   function generatePassPhrase() {
     let phrase = passphrase.Mnemonic.generateMnemonic()
     registrationStore.savePassPhrase(phrase)
-    let newPassPhrase = registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index }))
-    setPassPhrase(newPassPhrase)
+    setPassPhrase(convertPhraseToArray(registrationStore.passPhrase))
   }
 
   function savePassPhraseInStore (copiedPhrase) {
-    let phrasePaste = copiedPhrase.trim().replace(/\s+/g, ' ').split(' ')
+    let phrasePaste = convertPhraseToArray(copiedPhrase.trim())
     if(phrasePaste.length===12) {
-      registrationStore.savePassPhrase(copiedPhrase)
-      setPassPhrase(phrasePaste.map((item, index) => ({str:item, id:index })))
+      registrationStore.savePassPhrase(copiedPhrase.trim())
+      setPassPhrase(phrasePaste)
     } else {
       return false
     }
@@ -28,6 +27,10 @@ function Onboarding3() {
     navigator.clipboard.readText().then(res=>savePassPhraseInStore(res))
   }
 
+  function convertPhraseToArray(phrase) {
+    return phrase.split(' ').map((item, index) => ({str:item, id:index }))
+  }
+
 
   return (
     <main className="bg-white">

src/pages/Onboarding4.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
@@ -7,24 +7,23 @@ import { registrationStore } from "../store/store";
 
 const Onboarding4 = observer(()=>{
 
-  const [checkBoxesSelected, setCheckBoxesSelected] = useState(false)
+  const [checkBoxesSelected, setCheckBoxesSelected] = useState([])
 
   function createAccount () {
-    let checkBoxes=[...document.getElementsByClassName("form-checkbox")]
-    if(checkBoxes.find(item=>item.checked===false)) {
-      return
-    } else {
+    if(checkBoxesSelected.length===2) {
       registrationStore.pushAccountData()
-      setCheckBoxesSelected(true)
-
     }
   }
 
-  useEffect(()=>{
-    if(checkBoxesSelected===true) {
-      document.getElementById("link-dashboard").click()
+  function saveCheckBoxesValues(e) {
+    const { id, checked } = e.target
+    setCheckBoxesSelected([...checkBoxesSelected, id])
+    if (!checked) {
+      setCheckBoxesSelected(checkBoxesSelected.filter(item=>item!==id))
     }
-  },[checkBoxesSelected])
+  }
+
+  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="first_name").value
 
   return (
     <main className="bg-white">
@@ -81,20 +80,20 @@ const Onboarding4 = observer(()=>{
                     <circle className="text-emerald-100" cx="32" cy="32" r="32" />
                     <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
                   </svg>
-                  <h1 className="text-3xl text-slate-800 font-bold mb-8">{registrationStore.accountData.find(item=>item.key="first_name").key ? `Nice to meet you, ${registrationStore.accountData.find(item=>item.key="first_name").value} 🙌` : 'Please, go back step 2'}</h1>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-8">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1>
                   <button onClick={()=>createAccount()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
-                    <Link id="link-dashboard" to={checkBoxesSelected && "/dashboard"}>Go To Profile -&gt;</Link>
+                    <Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/dashboard"}>Go To Profile -&gt;</Link>
                   </button>
                 </div>
 
                 <div className="flex items-center justify-between">
                   <div className="mr-1">
                     <label className="flex items-center">
-                      <input type="checkbox" className="form-checkbox" />
+                      <input id="checkbox-1" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
                       <span className="text-sm ml-2">I understand that Idntty cannot recover pass phrase</span>
                     </label>
                     <label className="flex items-center">
-                      <input type="checkbox" className="form-checkbox" />
+                      <input id="checkbox-2" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
                       <div className="text-sm ml-2">
                         I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
                       </div>