From 07fc63014123e96afc08964f1234f03410b5cbd2 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Tue, 30 Apr 2024 07:26:54 +0500
Subject: [PATCH 1/8] new -> AccountDataMain

---
 .../components/AccountData/AccountData.jsx    | 115 +-------------
 .../AccountDataMain/AccountDataMain.jsx       | 141 ++++++++++++++++++
 2 files changed, 143 insertions(+), 113 deletions(-)
 create mode 100644 src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx

diff --git a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
index 23fe7ed..23c6a26 100644
--- a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
@@ -5,21 +5,19 @@ import Input from '../../../../../../components/Input/Input'
 import Choose from '../../../../../../components/Choose/Choose'
 import Loading from '../../../../../../components/Loading/Loading'
 import Message from '../../../../../../components/Message/Message'
-import Avatar from '../utils/Avatar'
 import AvatarToEdit from '../utils/AvatarToEdit'
 import Alert from '../../../../../../components/Alert/Alert'
 import Tooplit from '../../../../../../components/Tooplit/Tooplit'
+import AccountDataMain from './components/AccountDataMain/AccountDataMain'
 
 import { loadLocal } from '../../../../../../js/db/localStorage'
 import {
   getAccount,
   editUser,
-  logout as dbLogout,
   deleteAccount as dbDeleteAccount,
 } from '../../../../../../js/account/account'
 import { getData } from '../../../../../../js/utils/form'
 import { msgData } from '../../../../../../js/utils/message'
-import { elText } from '../../../../../../js/utils/copy'
 import { load } from '../../../../../../js/db/db'
 import { getImgBlob } from '../../../../../../js/utils/img'
 import { avatars } from '../utils/getAvatar'
@@ -28,19 +26,14 @@ import './AccountData.css'
 
 export default function AccountData() {
   const form = useRef(null)
-  const nameRef = useRef(null)
-  const usernameRef = useRef(null)
   const deleteRef = useRef(null)
   const [account, setAccount] = useState(false)
   const [editing, setEditing] = useState(false)
   const [saving, setSaving] = useState(false)
-  const [logingout, setLogingout] = useState(false)
   const [deleting, setDeleting] = useState(false)
   const [showTooplit, setShowTooplit] = useState(false)
   const [tooplitPos, setTooplitPos] = useState({ x: 0, y: 0 })
   const [profileImg, setProfileImg] = useState('')
-  const [bigProfilePic, setBigProfilePic] = useState(false)
-  const [openProfilePic, setOpenProfilePic] = useState(false)
   const [message, setMessage] = useState({
     text: '',
     type: 'error',
@@ -53,8 +46,6 @@ export default function AccountData() {
     async function loadAccount() {
       const account = await getAccount(username)
       setAccount(account)
-
-      if (account?.img?.img) setOpenProfilePic(true)
     }
     loadAccount()
   }, [saving])
@@ -104,21 +95,6 @@ export default function AccountData() {
     )
   }
 
-  function copy(elRef) {
-    const msg = elText(elRef)
-
-    setMessage({ ...msg, type: 'success', show: true })
-    setTimeout(
-      () => setMessage({ ...message, show: false }),
-      msgData.time * 1000
-    )
-  }
-
-  async function logoutAccount() {
-    const username = loadLocal('quran').accounts.active
-    dbLogout(username)
-  }
-
   async function deleteAccount() {
     const username = loadLocal('quran').accounts.active
     const dbPassword = await load(`accounts/${username}/user/password`)
@@ -381,92 +357,5 @@ export default function AccountData() {
     )
   }
 
-  return (
-    <>
-      <div className="df_ai_ce list_y">
-        <div className="w_max loading_area df_jc_sb list_y bd_ra">
-          <Message show={message.show} type={message.type}>
-            {message.msg}
-          </Message>
-          <div className="list_y df_f_ce">
-            <Avatar
-              style={{ width: '80px', fontSize: '40px' }}
-              onClick={() => openProfilePic && setBigProfilePic(true)}
-            ></Avatar>
-            {bigProfilePic && (
-              <Alert onHide={() => setBigProfilePic(false)} simple="true">
-                <div
-                  className="df_f_ce"
-                  onClick={() => setBigProfilePic(false)}
-                >
-                  <Avatar
-                    style={{ width: '400px', fontSize: '200px' }}
-                  ></Avatar>
-                </div>
-              </Alert>
-            )}
-            <div className="list_y df_jc_ce_child">
-              <div className="fz_big">
-                <b ref={nameRef} className="name" onClick={() => copy(nameRef)}>
-                  {account?.name}
-                </b>
-              </div>
-              <div
-                className="txt_opa fz_small w_100"
-                onClick={() => copy(usernameRef)}
-              >
-                @<span ref={usernameRef}>{account?.username}</span>
-              </div>
-            </div>
-          </div>
-          {!account && <Loading>Main account</Loading>}
-        </div>
-        {account && (
-          <div className="list_y df_jc_ce df_jc_ce_child">
-            <Button
-              className="list_x_small medium"
-              onClick={() => setEditing(true)}
-            >
-              <span className="material-symbols-outlined fz_normal">edit</span>
-              <span>Edit</span>
-            </Button>
-            <Button
-              className="list_x_small medium red"
-              onClick={() => setLogingout(true)}
-            >
-              <span className="material-symbols-outlined fz_normal">
-                logout
-              </span>
-              <span>Log out</span>
-            </Button>
-            <Button
-              className="list_x_small medium"
-              colorful="true"
-              onClick={() => (window.location.href = 'account/login')}
-            >
-              <span className="material-symbols-outlined fz_normal">
-                add_circle
-              </span>
-              <span>Add account</span>
-            </Button>
-          </div>
-        )}
-      </div>
-      {logingout && (
-        <Alert title="Log out" onHide={() => setLogingout(false)}>
-          <div>
-            You should <b>reload</b> the page to apply changes.
-          </div>
-          <div className="df_jc_end">
-            <Button className="list_x red" onClick={logoutAccount}>
-              <span className="material-symbols-outlined fz_normal">
-                logout
-              </span>
-              <span>Log out</span>
-            </Button>
-          </div>
-        </Alert>
-      )}
-    </>
-  )
+  return <AccountDataMain setEditing={setEditing} />
 }
diff --git a/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx b/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx
new file mode 100644
index 0000000..32a2c8e
--- /dev/null
+++ b/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx
@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react'
+
+import Message from '../../../../../../../../components/Message/Message'
+import Avatar from '../../../utils/Avatar'
+import Alert from '../../../../../../../../components/Alert/Alert'
+import Button from '../../../../../../../../components/Button/Button'
+import Loading from '../../../../../../../../components/Loading/Loading'
+
+import { loadLocal } from '../../../../../../../../js/db/localStorage'
+import { getAccount, logout } from '../../../../../../../../js/account/account'
+import { elText } from '../../../../../../../../js/utils/copy'
+import { msgData } from '../../../../../../../../js/utils/message'
+
+export default function AccountDataMain({ setEditing }) {
+  const nameRef = useRef(null)
+  const usernameRef = useRef(null)
+  const [account, setAccount] = useState(false)
+  const [bigProfilePic, setBigProfilePic] = useState(false)
+  const [logingout, setLogingout] = useState(false)
+  const [openProfilePic, setOpenProfilePic] = useState(false)
+  const [message, setMessage] = useState({
+    text: '',
+    type: 'error',
+    show: false,
+  })
+
+  useEffect(() => {
+    const username = loadLocal('quran').accounts.active
+    async function loadAccount() {
+      const account = await getAccount(username)
+      setAccount(account)
+
+      if (account?.img?.img) setOpenProfilePic(true)
+    }
+    loadAccount()
+  }, [])
+
+  function copy(elRef) {
+    const msg = elText(elRef)
+
+    setMessage({ ...msg, type: 'success', show: true })
+    setTimeout(
+      () => setMessage({ ...message, show: false }),
+      msgData.time * 1000
+    )
+  }
+
+  async function logoutAccount() {
+    const username = loadLocal('quran').accounts.active
+    logout(username)
+  }
+
+  return (
+    <>
+      <div className="df_ai_ce list_y">
+        <div className="w_max loading_area df_jc_sb list_y bd_ra">
+          <Message show={message.show} type={message.type}>
+            {message.msg}
+          </Message>
+          <div className="list_y df_f_ce">
+            <Avatar
+              style={{ width: '80px', fontSize: '40px' }}
+              onClick={() => openProfilePic && setBigProfilePic(true)}
+            ></Avatar>
+            {bigProfilePic && (
+              <Alert onHide={() => setBigProfilePic(false)} simple="true">
+                <div
+                  className="df_f_ce"
+                  onClick={() => setBigProfilePic(false)}
+                >
+                  <Avatar
+                    style={{ width: '400px', fontSize: '200px' }}
+                  ></Avatar>
+                </div>
+              </Alert>
+            )}
+            <div className="list_y df_jc_ce_child">
+              <div className="fz_big">
+                <b ref={nameRef} className="name" onClick={() => copy(nameRef)}>
+                  {account?.name}
+                </b>
+              </div>
+              <div
+                className="txt_opa fz_small w_100"
+                onClick={() => copy(usernameRef)}
+              >
+                @<span ref={usernameRef}>{account?.username}</span>
+              </div>
+            </div>
+          </div>
+          {!account && <Loading>Main account</Loading>}
+        </div>
+        {account && (
+          <div className="list_y df_jc_ce df_jc_ce_child">
+            <Button
+              className="list_x_small medium"
+              onClick={() => setEditing(true)}
+            >
+              <span className="material-symbols-outlined fz_normal">edit</span>
+              <span>Edit</span>
+            </Button>
+            <Button
+              className="list_x_small medium red"
+              onClick={() => setLogingout(true)}
+            >
+              <span className="material-symbols-outlined fz_normal">
+                logout
+              </span>
+              <span>Log out</span>
+            </Button>
+            <Button
+              className="list_x_small medium"
+              colorful="true"
+              onClick={() => (window.location.href = 'account/login')}
+            >
+              <span className="material-symbols-outlined fz_normal">
+                add_circle
+              </span>
+              <span>Add account</span>
+            </Button>
+          </div>
+        )}
+      </div>
+      {logingout && (
+        <Alert title="Log out" onHide={() => setLogingout(false)}>
+          <div>
+            You should <b>reload</b> the page to apply changes.
+          </div>
+          <div className="df_jc_end">
+            <Button className="list_x red" onClick={logoutAccount}>
+              <span className="material-symbols-outlined fz_normal">
+                logout
+              </span>
+              <span>Log out</span>
+            </Button>
+          </div>
+        </Alert>
+      )}
+    </>
+  )
+}

From 7d45192b9f104b9706000b835082e5e9624b5847 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Tue, 30 Apr 2024 07:46:39 +0500
Subject: [PATCH 2/8] get Account data from AccountData.jsx

---
 .../components/Account/components/AccountData/AccountData.jsx | 2 +-
 .../components/AccountDataMain/AccountDataMain.jsx            | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
index 23c6a26..0f1e094 100644
--- a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
@@ -357,5 +357,5 @@ export default function AccountData() {
     )
   }
 
-  return <AccountDataMain setEditing={setEditing} />
+  return <AccountDataMain account={account} setEditing={setEditing} />
 }
diff --git a/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx b/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx
index 32a2c8e..bf8eed3 100644
--- a/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx
@@ -11,10 +11,9 @@ import { getAccount, logout } from '../../../../../../../../js/account/account'
 import { elText } from '../../../../../../../../js/utils/copy'
 import { msgData } from '../../../../../../../../js/utils/message'
 
-export default function AccountDataMain({ setEditing }) {
+export default function AccountDataMain({ account, setEditing }) {
   const nameRef = useRef(null)
   const usernameRef = useRef(null)
-  const [account, setAccount] = useState(false)
   const [bigProfilePic, setBigProfilePic] = useState(false)
   const [logingout, setLogingout] = useState(false)
   const [openProfilePic, setOpenProfilePic] = useState(false)
@@ -28,7 +27,6 @@ export default function AccountDataMain({ setEditing }) {
     const username = loadLocal('quran').accounts.active
     async function loadAccount() {
       const account = await getAccount(username)
-      setAccount(account)
 
       if (account?.img?.img) setOpenProfilePic(true)
     }

From 6124151fbe1ffbe0e10e743eb686cccd6cdd9a64 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Tue, 30 Apr 2024 07:51:07 +0500
Subject: [PATCH 3/8] new -> AccountDataNotFound

---
 .../components/AccountData/AccountData.jsx    | 59 +------------------
 .../AccountDataNotFound.jsx                   | 58 ++++++++++++++++++
 2 files changed, 60 insertions(+), 57 deletions(-)
 create mode 100644 src/pages/Main/components/Account/components/AccountData/components/AccountDataNotFound/AccountDataNotFound.jsx

diff --git a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
index 0f1e094..4b42d1e 100644
--- a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
@@ -8,6 +8,7 @@ import Message from '../../../../../../components/Message/Message'
 import AvatarToEdit from '../utils/AvatarToEdit'
 import Alert from '../../../../../../components/Alert/Alert'
 import Tooplit from '../../../../../../components/Tooplit/Tooplit'
+import AccountDataNotFound from './components/AccountDataNotFound/AccountDataNotFound'
 import AccountDataMain from './components/AccountDataMain/AccountDataMain'
 
 import { loadLocal } from '../../../../../../js/db/localStorage'
@@ -148,63 +149,7 @@ export default function AccountData() {
     fileInput.value = ''
   }
 
-  if (account === null)
-    return (
-      <>
-        <div className="list_y mar_ce df_ai_ce">
-          <div className="list_x fz_big">
-            <span className="txt_red">There is no account with</span>
-            <b>@{loadLocal('quran').accounts.active}</b>
-          </div>
-          <div className="list_x">
-            <div
-              className="con_bg_gradient con_ha list_x df_ai_ce"
-              onClick={() => (window.location.href = '/account/signup')}
-            >
-              <span className="material-symbols-outlined fz_normal">
-                person_add
-              </span>
-              <span>Sign up</span>
-            </div>
-            <div
-              className="con_bg_df con_ha list_x df_ai_ce"
-              onClick={() => (window.location.href = '/account/login')}
-            >
-              <span className="material-symbols-outlined fz_normal">login</span>
-              <span>Log in</span>
-            </div>
-          </div>
-          <div className="df_fd_cl w_100 df_ai_ce">
-            <div className="title">Reasons</div>
-            <div className="line_x"></div>
-          </div>
-          <div className="reasons_area">
-            <div className="con_bg_df">
-              1. Account deleted due to inactivity.
-            </div>
-            <div className="con_bg_df">
-              2. Mistaken deletion during maintenance.
-            </div>
-            <div className="con_bg_df">3. Technical error during creation.</div>
-            <div className="con_bg_df">4. Flagged for suspicious activity.</div>
-            <div className="con_bg_df">
-              5. Data corruption or loss incident.
-            </div>
-            <div className="con_bg_df">6. System upgrade complications.</div>
-            <div className="con_bg_df">
-              7. Intentional removal for policy violation.
-            </div>
-            <div className="con_bg_df">
-              8. Account archived during restructuring.
-            </div>
-            <div className="con_bg_df">
-              9. Inadvertent loss during data transfer.
-            </div>
-            <div className="con_bg_df">10. Security breach precautions.</div>
-          </div>
-        </div>
-      </>
-    )
+  if (account === null) return <AccountDataNotFound />
 
   if (editing) {
     return (
diff --git a/src/pages/Main/components/Account/components/AccountData/components/AccountDataNotFound/AccountDataNotFound.jsx b/src/pages/Main/components/Account/components/AccountData/components/AccountDataNotFound/AccountDataNotFound.jsx
new file mode 100644
index 0000000..a679e2c
--- /dev/null
+++ b/src/pages/Main/components/Account/components/AccountData/components/AccountDataNotFound/AccountDataNotFound.jsx
@@ -0,0 +1,58 @@
+import { loadLocal } from '../../../../../../../../js/db/localStorage'
+
+export default function AccountDataNotFound() {
+  const reasonsArray = [
+    'Account deleted due to inactivity',
+    'Mistaken deletion during maintenance',
+    'Technical error during creation',
+    'Flagged for suspicious activity',
+    'Data corruption or loss incident',
+    'System upgrade complications',
+    'Intentional removal for policy violation',
+    'Account archived during restructuring',
+    'Inadvertent loss during data transfer',
+    'Security breach precautions',
+  ]
+
+  return (
+    <>
+      <div className="list_y mar_ce df_ai_ce">
+        <div className="list_x fz_big">
+          <span className="txt_red">There is no account with</span>
+          <b>@{loadLocal('quran').accounts.active}</b>
+        </div>
+        <div className="list_x">
+          <div
+            className="con_bg_gradient con_ha list_x df_ai_ce"
+            onClick={() => (window.location.href = '/account/signup')}
+          >
+            <span className="material-symbols-outlined fz_normal">
+              person_add
+            </span>
+            <span>Sign up</span>
+          </div>
+          <div
+            className="con_bg_df con_ha list_x df_ai_ce"
+            onClick={() => (window.location.href = '/account/login')}
+          >
+            <span className="material-symbols-outlined fz_normal">login</span>
+            <span>Log in</span>
+          </div>
+        </div>
+        <div className="df_fd_cl w_100 df_ai_ce">
+          <div className="title">Reasons</div>
+          <div className="line_x"></div>
+        </div>
+        <div className="reasons_area">
+          {reasonsArray.map((reason, i) => {
+            return (
+              <div className="con_bg_df" key={i}>
+                {reason}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
+}

From 8e65009d70b0022fe9a858aad7f0d52d43ae0666 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Tue, 30 Apr 2024 08:39:11 +0500
Subject: [PATCH 4/8] AccountDataMain fixed

---
 .../components/AccountDataMain/AccountDataMain.jsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx b/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx
index bf8eed3..09d52b5 100644
--- a/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/components/AccountDataMain/AccountDataMain.jsx
@@ -11,17 +11,17 @@ import { getAccount, logout } from '../../../../../../../../js/account/account'
 import { elText } from '../../../../../../../../js/utils/copy'
 import { msgData } from '../../../../../../../../js/utils/message'
 
-export default function AccountDataMain({ account, setEditing }) {
+export default function AccountDataMain({
+  account,
+  message,
+  setMessage,
+  setEditing,
+}) {
   const nameRef = useRef(null)
   const usernameRef = useRef(null)
   const [bigProfilePic, setBigProfilePic] = useState(false)
   const [logingout, setLogingout] = useState(false)
   const [openProfilePic, setOpenProfilePic] = useState(false)
-  const [message, setMessage] = useState({
-    text: '',
-    type: 'error',
-    show: false,
-  })
 
   useEffect(() => {
     const username = loadLocal('quran').accounts.active

From 0d2412b890e6a11b130caa537673f98356318e81 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Tue, 30 Apr 2024 08:39:26 +0500
Subject: [PATCH 5/8] new -> AccountDataEditing

---
 .../components/AccountData/AccountData.jsx    | 294 ++----------------
 .../AccountDataEditing/AccountDataEditing.jsx | 274 ++++++++++++++++
 2 files changed, 294 insertions(+), 274 deletions(-)
 create mode 100644 src/pages/Main/components/Account/components/AccountData/components/AccountDataEditing/AccountDataEditing.jsx

diff --git a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
index 4b42d1e..690cc43 100644
--- a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
@@ -1,46 +1,23 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 
-import Button from '../../../../../../components/Button/Button'
-import Input from '../../../../../../components/Input/Input'
-import Choose from '../../../../../../components/Choose/Choose'
-import Loading from '../../../../../../components/Loading/Loading'
-import Message from '../../../../../../components/Message/Message'
-import AvatarToEdit from '../utils/AvatarToEdit'
-import Alert from '../../../../../../components/Alert/Alert'
-import Tooplit from '../../../../../../components/Tooplit/Tooplit'
 import AccountDataNotFound from './components/AccountDataNotFound/AccountDataNotFound'
 import AccountDataMain from './components/AccountDataMain/AccountDataMain'
+import AccountDataEditing from './components/AccountDataEditing/AccountDataEditing'
 
 import { loadLocal } from '../../../../../../js/db/localStorage'
-import {
-  getAccount,
-  editUser,
-  deleteAccount as dbDeleteAccount,
-} from '../../../../../../js/account/account'
-import { getData } from '../../../../../../js/utils/form'
-import { msgData } from '../../../../../../js/utils/message'
-import { load } from '../../../../../../js/db/db'
-import { getImgBlob } from '../../../../../../js/utils/img'
-import { avatars } from '../utils/getAvatar'
+import { getAccount } from '../../../../../../js/account/account'
 
 import './AccountData.css'
 
 export default function AccountData() {
-  const form = useRef(null)
-  const deleteRef = useRef(null)
   const [account, setAccount] = useState(false)
   const [editing, setEditing] = useState(false)
   const [saving, setSaving] = useState(false)
-  const [deleting, setDeleting] = useState(false)
-  const [showTooplit, setShowTooplit] = useState(false)
-  const [tooplitPos, setTooplitPos] = useState({ x: 0, y: 0 })
-  const [profileImg, setProfileImg] = useState('')
   const [message, setMessage] = useState({
     text: '',
     type: 'error',
     show: false,
   })
-  const profilePicLimit = 5 * 1024 * 1024
 
   useEffect(() => {
     const username = loadLocal('quran').accounts.active
@@ -51,256 +28,25 @@ export default function AccountData() {
     loadAccount()
   }, [saving])
 
-  useEffect(() => {
-    setProfileImg(account?.img?.img)
-  }, [editing])
-
-  async function saveChanges() {
-    setSaving(true)
-
-    const formData = getData(form.current)
-    if (!formData.ok) {
-      setMessage({ msg: formData.msg, type: 'error', show: true })
-      setTimeout(
-        () => setMessage({ ...message, show: false }),
-        msgData.time * 1000
-      )
-      setSaving(false)
-      return
-    }
-
-    const username = loadLocal('quran').accounts.active
-
-    const userNewData = { ...formData, img: { img: profileImg } }
-    const editedData = await editUser(username, userNewData)
-
-    avatars.get(username).img = profileImg
-
-    if (!editedData.ok) {
-      setMessage({ msg: editedData.msg, type: editedData.msgType, show: true })
-      setTimeout(
-        () => setMessage({ ...message, show: false }),
-        msgData.time * 1000
-      )
-      setSaving(false)
-      return
-    }
-
-    setSaving(false)
-    setEditing(false)
-
-    setMessage({ msg: 'Changes saved', type: 'success', show: true })
-    setTimeout(
-      () => setMessage({ ...message, show: false }),
-      msgData.time * 1000
-    )
-  }
-
-  async function deleteAccount() {
-    const username = loadLocal('quran').accounts.active
-    const dbPassword = await load(`accounts/${username}/user/password`)
-    const password = deleteRef.current?.value
-
-    const correct = dbPassword === password
-
-    if (!correct) {
-      setMessage({ msg: 'Password is not matching', type: 'error', show: true })
-      setTimeout(
-        () => setMessage({ ...message, show: false }),
-        msgData.time * 1000
-      )
-      return
-    }
-
-    dbDeleteAccount(username)
-  }
-
-  function showUpTooplit(e) {
-    const { clientX: x, clientY: y } = e
-
-    setTooplitPos({ x, y })
-    setShowTooplit(true)
-  }
-
-  function clickFileInput(e) {
-    const fileInput = e.target?.querySelector('input[type="file"]')
-    fileInput?.click()
-  }
-
-  async function uploadFile(e) {
-    const fileInput = e.target
-    if (!fileInput) return
-
-    const file = fileInput.files[0]
-    if (file.size > profilePicLimit) {
-      setMessage({ msg: 'Max file size is 5MB', type: 'error', show: true })
-      setTimeout(
-        () => setMessage({ ...message, show: false }),
-        msgData.time * 1000
-      )
-      return
-    }
-
-    const blob = await getImgBlob(file)
-
-    setProfileImg(blob)
-    setShowTooplit(false)
-
-    fileInput.value = ''
-  }
-
   if (account === null) return <AccountDataNotFound />
-
-  if (editing) {
+  if (editing)
     return (
-      <div className="df_f_ce">
-        <div className="con_bd_cl loading_area list_y main_w_small" ref={form}>
-          <Message show={message.show} type={message.type}>
-            {message.msg}
-          </Message>
-          <div className="df_jc_sb df_ai_ce">
-            <b>Edit</b>
-            <div className="list_x">
-              <Button
-                className="list_x_small red"
-                onClick={() => setDeleting(true)}
-              >
-                <span className="material-symbols-outlined fz_normal">
-                  delete
-                </span>
-                <span>Delete</span>
-              </Button>
-              <Button
-                className="list_x_small"
-                onClick={() => setEditing(false)}
-              >
-                <span className="material-symbols-outlined fz_normal">
-                  close
-                </span>
-                <span>Close</span>
-              </Button>
-            </div>
-          </div>
-          <div className="list_x df_ai_ce">
-            <AvatarToEdit
-              style={{ height: '70px', fontSize: '35px' }}
-              img={profileImg}
-            >
-              <div className="avatar_edit_btns">
-                <div
-                  className="con bg_blur_theme_more blur_ha bd_ra_50 df_f_ce"
-                  onClick={showUpTooplit}
-                >
-                  <span className="material-symbols-outlined">edit</span>
-                </div>
-              </div>
-            </AvatarToEdit>
-            {showTooplit && (
-              <Tooplit onHide={() => setShowTooplit(false)} pos={tooplitPos}>
-                <div className="list_y_small">
-                  <div
-                    className="con_ha list_x df_ai_ce txt_main"
-                    onClick={clickFileInput}
-                  >
-                    <span className="material-symbols-outlined fz_normal">
-                      cloud_upload
-                    </span>
-                    <span>Upload</span>
-                    <input type="file" accept="image/*" onChange={uploadFile} />
-                  </div>
-                  {profileImg && (
-                    <div
-                      className="con_ha list_x df_ai_ce txt_red"
-                      onClick={() => {
-                        setProfileImg('')
-                        setShowTooplit(false)
-                      }}
-                    >
-                      <span className="material-symbols-outlined fz_normal">
-                        delete
-                      </span>
-                      <span>Delete</span>
-                    </div>
-                  )}
-                </div>
-              </Tooplit>
-            )}
-            <div className="list_y w_100 df_ai_ce_child">
-              <div className="list_x">
-                <span className="material-symbols-outlined">person</span>
-                <Input
-                  type="text"
-                  label="Name"
-                  value={account?.name}
-                  maxLength="20"
-                  autoFocus
-                />
-              </div>
-              <div className="list_x">
-                <span className="material-symbols-outlined">
-                  alternate_email
-                </span>
-                <Input
-                  type="text"
-                  label="Username"
-                  value={account?.username}
-                  maxLength="20"
-                />
-              </div>
-            </div>
-          </div>
-          <Choose axe="x" label="Gender" iOption={account?.gender}>
-            <div className="list_x df_ai_ce" option="male">
-              <span className="material-symbols-outlined fz_normal gender_male">
-                male
-              </span>
-              <div>Male</div>
-            </div>
-            <div className="list_x df_ai_ce" option="female">
-              <span className="material-symbols-outlined fz_normal gender_female">
-                female
-              </span>
-              <div>Female</div>
-            </div>
-          </Choose>
-          <Button
-            className="df_f_ce list_x medium"
-            colorful="true"
-            onClick={saveChanges}
-          >
-            <span className="material-symbols-outlined fz_big">
-              check_circle
-            </span>
-            <span>Save changes</span>
-          </Button>
-          {saving && <Loading>Saving</Loading>}
-        </div>
-        {deleting && (
-          <Alert title="Delete account" onHide={() => setDeleting(false)}>
-            <Input
-              ref={deleteRef}
-              type="password"
-              label="Password"
-              maxLength="20"
-              autoFocus
-              areaProps={{ className: 'con_bg_dr' }}
-            />
-            <div>
-              You should <b>reload</b> the page to apply changes.
-            </div>
-            <div className="df_jc_end">
-              <Button className="list_x red" onClick={deleteAccount}>
-                <span className="material-symbols-outlined fz_normal">
-                  delete
-                </span>
-                <span>Delete</span>
-              </Button>
-            </div>
-          </Alert>
-        )}
-      </div>
+      <AccountDataEditing
+        account={account}
+        saving={saving}
+        message={message}
+        setEditing={setEditing}
+        setSaving={setSaving}
+        setMessage={setMessage}
+      />
     )
-  }
 
-  return <AccountDataMain account={account} setEditing={setEditing} />
+  return (
+    <AccountDataMain
+      account={account}
+      message={message}
+      setMessage={setMessage}
+      setEditing={setEditing}
+    />
+  )
 }
diff --git a/src/pages/Main/components/Account/components/AccountData/components/AccountDataEditing/AccountDataEditing.jsx b/src/pages/Main/components/Account/components/AccountData/components/AccountDataEditing/AccountDataEditing.jsx
new file mode 100644
index 0000000..f6b900a
--- /dev/null
+++ b/src/pages/Main/components/Account/components/AccountData/components/AccountDataEditing/AccountDataEditing.jsx
@@ -0,0 +1,274 @@
+import { useEffect, useRef, useState } from 'react'
+
+import Message from '../../../../../../../../components/Message/Message'
+import Button from '../../../../../../../../components/Button/Button'
+import Input from '../../../../../../../../components/Input/Input'
+import Choose from '../../../../../../../../components/Choose/Choose'
+import Loading from '../../../../../../../../components/Loading/Loading'
+import AvatarToEdit from '../../../utils/AvatarToEdit'
+import Alert from '../../../../../../../../components/Alert/Alert'
+import Tooplit from '../../../../../../../../components/Tooplit/Tooplit'
+
+import { deleteAccount as dbDeleteAccount } from '../../../../../../../../js/account/account'
+import { getImgBlob } from '../../../../../../../../js/utils/img'
+import { msgData } from '../../../../../../../../js/utils/message'
+import { getData } from '../../../../../../../../js/utils/form'
+import { loadLocal } from '../../../../../../../../js/db/localStorage'
+import { editUser } from '../../../../../../../../js/account/account'
+import { avatars } from '../../../utils/getAvatar'
+import { load } from '../../../../../../../../js/db/db'
+
+export default function AccountDataEditing({
+  account,
+  saving,
+  message,
+  setEditing,
+  setSaving,
+  setMessage,
+}) {
+  const form = useRef(null)
+  const deleteRef = useRef(null)
+  const [deleting, setDeleting] = useState(false)
+  const [showTooplit, setShowTooplit] = useState(false)
+  const [tooplitPos, setTooplitPos] = useState({ x: 0, y: 0 })
+  const [profileImg, setProfileImg] = useState('')
+  const profilePicLimit = 5 * 1024 * 1024
+
+  useEffect(() => {
+    setProfileImg(account?.img?.img)
+  }, [])
+
+  async function saveChanges() {
+    setSaving(true)
+
+    const formData = getData(form.current)
+    if (!formData.ok) {
+      setMessage({ msg: formData.msg, type: 'error', show: true })
+      setTimeout(
+        () => setMessage({ ...message, show: true }),
+        msgData.time * 1000
+      )
+      setSaving(false)
+      return
+    }
+
+    const username = loadLocal('quran').accounts.active
+
+    const userNewData = { ...formData, img: { img: profileImg } }
+    const editedData = await editUser(username, userNewData)
+
+    avatars.get(username).img = profileImg
+
+    if (!editedData.ok) {
+      setMessage({ msg: editedData.msg, type: editedData.msgType, show: true })
+      setTimeout(
+        () => setMessage({ ...message, show: true }),
+        msgData.time * 1000
+      )
+      setSaving(false)
+      return
+    }
+
+    setSaving(false)
+    setEditing(false)
+
+    setMessage({ msg: 'Changes saved', type: 'success', show: true })
+    setTimeout(
+      () => setMessage({ ...message, show: true }),
+      msgData.time * 1000
+    )
+  }
+
+  async function deleteAccount() {
+    const username = loadLocal('quran').accounts.active
+    const dbPassword = await load(`accounts/${username}/user/password`)
+    const password = deleteRef.current?.value
+
+    const correct = dbPassword === password
+
+    if (!correct) {
+      setMessage({ msg: 'Password is not matching', type: 'error', show: true })
+      setTimeout(
+        () => setMessage({ ...message, show: false }),
+        msgData.time * 1000
+      )
+      return
+    }
+
+    dbDeleteAccount(username)
+  }
+
+  function showUpTooplit(e) {
+    const { clientX: x, clientY: y } = e
+
+    setTooplitPos({ x, y })
+    setShowTooplit(true)
+  }
+
+  function clickFileInput(e) {
+    const fileInput = e.target?.querySelector('input[type="file"]')
+    fileInput?.click()
+  }
+
+  async function uploadFile(e) {
+    const fileInput = e.target
+    if (!fileInput) return
+
+    const file = fileInput.files[0]
+    if (file.size > profilePicLimit) {
+      setMessage({ msg: 'Max file size is 5MB', type: 'error', show: true })
+      setTimeout(
+        () => setMessage({ ...message, show: false }),
+        msgData.time * 1000
+      )
+      return
+    }
+
+    const blob = await getImgBlob(file)
+
+    setProfileImg(blob)
+    setShowTooplit(false)
+
+    fileInput.value = ''
+  }
+
+  return (
+    <div className="df_f_ce">
+      <Message show={message.show} type={message.type}>
+        {message.msg}
+      </Message>
+      <div className="con_bd_cl loading_area list_y main_w_small" ref={form}>
+        <div className="df_jc_sb df_ai_ce">
+          <b>Edit</b>
+          <div className="list_x">
+            <Button
+              className="list_x_small red"
+              onClick={() => setDeleting(true)}
+            >
+              <span className="material-symbols-outlined fz_normal">
+                delete
+              </span>
+              <span>Delete</span>
+            </Button>
+            <Button className="list_x_small" onClick={() => setEditing(false)}>
+              <span className="material-symbols-outlined fz_normal">close</span>
+              <span>Close</span>
+            </Button>
+          </div>
+        </div>
+        <div className="list_x df_ai_ce">
+          <AvatarToEdit
+            style={{ height: '70px', fontSize: '35px' }}
+            img={profileImg}
+          >
+            <div className="avatar_edit_btns">
+              <div
+                className="con bg_blur_theme_more blur_ha bd_ra_50 df_f_ce"
+                onClick={showUpTooplit}
+              >
+                <span className="material-symbols-outlined">edit</span>
+              </div>
+            </div>
+          </AvatarToEdit>
+          {showTooplit && (
+            <Tooplit onHide={() => setShowTooplit(false)} pos={tooplitPos}>
+              <div className="list_y_small">
+                <div
+                  className="con_ha list_x df_ai_ce txt_main"
+                  onClick={clickFileInput}
+                >
+                  <span className="material-symbols-outlined fz_normal">
+                    cloud_upload
+                  </span>
+                  <span>Upload</span>
+                  <input type="file" accept="image/*" onChange={uploadFile} />
+                </div>
+                {profileImg && (
+                  <div
+                    className="con_ha list_x df_ai_ce txt_red"
+                    onClick={() => {
+                      setProfileImg('')
+                      setShowTooplit(false)
+                    }}
+                  >
+                    <span className="material-symbols-outlined fz_normal">
+                      delete
+                    </span>
+                    <span>Delete</span>
+                  </div>
+                )}
+              </div>
+            </Tooplit>
+          )}
+          <div className="list_y w_100 df_ai_ce_child">
+            <div className="list_x">
+              <span className="material-symbols-outlined">person</span>
+              <Input
+                type="text"
+                label="Name"
+                value={account?.name}
+                maxLength="20"
+                autoFocus
+              />
+            </div>
+            <div className="list_x">
+              <span className="material-symbols-outlined">alternate_email</span>
+              <Input
+                type="text"
+                label="Username"
+                value={account?.username}
+                maxLength="20"
+              />
+            </div>
+          </div>
+        </div>
+        <Choose axe="x" label="Gender" iOption={account?.gender}>
+          <div className="list_x df_ai_ce" option="male">
+            <span className="material-symbols-outlined fz_normal gender_male">
+              male
+            </span>
+            <div>Male</div>
+          </div>
+          <div className="list_x df_ai_ce" option="female">
+            <span className="material-symbols-outlined fz_normal gender_female">
+              female
+            </span>
+            <div>Female</div>
+          </div>
+        </Choose>
+        <Button
+          className="df_f_ce list_x medium"
+          colorful="true"
+          onClick={saveChanges}
+        >
+          <span className="material-symbols-outlined fz_big">check_circle</span>
+          <span>Save changes</span>
+        </Button>
+        {saving && <Loading>Saving</Loading>}
+      </div>
+      {deleting && (
+        <Alert title="Delete account" onHide={() => setDeleting(false)}>
+          <Input
+            ref={deleteRef}
+            type="password"
+            label="Password"
+            maxLength="20"
+            autoFocus
+            areaProps={{ className: 'con_bg_dr' }}
+          />
+          <div>
+            You should <b>reload</b> the page to apply changes.
+          </div>
+          <div className="df_jc_end">
+            <Button className="list_x red" onClick={deleteAccount}>
+              <span className="material-symbols-outlined fz_normal">
+                delete
+              </span>
+              <span>Delete</span>
+            </Button>
+          </div>
+        </Alert>
+      )}
+    </div>
+  )
+}

From 44530df20290f6bb480752e99f35eb9f1e123919 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Tue, 30 Apr 2024 08:40:18 +0500
Subject: [PATCH 6/8] renaming

---
 .../Account/components/AccountData/AccountData.jsx        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
index 690cc43..5cc6cfe 100644
--- a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
@@ -21,11 +21,11 @@ export default function AccountData() {
 
   useEffect(() => {
     const username = loadLocal('quran').accounts.active
-    async function loadAccount() {
-      const account = await getAccount(username)
-      setAccount(account)
+    async function loadData() {
+      const data = await getAccount(username)
+      setAccount(data)
     }
-    loadAccount()
+    loadData()
   }, [saving])
 
   if (account === null) return <AccountDataNotFound />

From 8ef30f63be0f78eb8cff1f2b0fa0b8259d12c9d0 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Tue, 30 Apr 2024 08:44:49 +0500
Subject: [PATCH 7/8] message improved

---
 .../Account/components/AccountData/AccountData.jsx          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
index 5cc6cfe..8fa2f82 100644
--- a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
@@ -15,7 +15,7 @@ export default function AccountData() {
   const [saving, setSaving] = useState(false)
   const [message, setMessage] = useState({
     text: '',
-    type: 'error',
+    type: 'default',
     show: false,
   })
 
@@ -28,6 +28,10 @@ export default function AccountData() {
     loadData()
   }, [saving])
 
+  useEffect(() => {
+    setMessage({ ...message, show: false })
+  }, [editing])
+
   if (account === null) return <AccountDataNotFound />
   if (editing)
     return (

From adb6839183ec63340025db72bbc59b6ce32fe4b8 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Tue, 30 Apr 2024 08:48:20 +0500
Subject: [PATCH 8/8] import improved

---
 .../components/Account/components/AccountData/AccountData.jsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
index 8fa2f82..7d873b6 100644
--- a/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
+++ b/src/pages/Main/components/Account/components/AccountData/AccountData.jsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 
 import AccountDataNotFound from './components/AccountDataNotFound/AccountDataNotFound'
-import AccountDataMain from './components/AccountDataMain/AccountDataMain'
 import AccountDataEditing from './components/AccountDataEditing/AccountDataEditing'
+import AccountDataMain from './components/AccountDataMain/AccountDataMain'
 
 import { loadLocal } from '../../../../../../js/db/localStorage'
 import { getAccount } from '../../../../../../js/account/account'