refactor the App.js

Author: UndeadMe

src/Components/Panel/Panel.jsx

@@ -3,24 +3,27 @@ import { createPortal } from 'react-dom';
 
 // import styles of this component
 import styles from './Panel.module.css'
+
 // import other component
 import UserCard from './UserCard/UserCard'
 import UserInformation from './UserInformation/UserInformation'
 import UserChangePassword from './UserChangePassword/UserChangePassword'
+
 // import other pkgs
 import { UserEdit, Lock, ProfileCircle, Code1 } from "iconsax-react";
 import { Row, Col, Container, Button } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 
+// import utils
+import { getStorage, updateStorage } from './../../utils/storage';
+
 class Panel extends PureComponent {
     constructor(props) {
         super(props)
         this.myVerifyUser = this.getUserFromStorage()
 
         this.state = {
-            user: {
-                ...this.initState(this.myVerifyUser)
-            },
+            user: {...this.initState(this.myVerifyUser)},
             toggle: 'information',
         }
 
@@ -61,46 +64,28 @@ class Panel extends PureComponent {
     }
 
     getUserFromStorage() {
-        const users = JSON.parse(localStorage.getItem('users'))
-        const userId = localStorage.getItem("id")
+        const users = getStorage('users')
+        const userId = getStorage('id')
         const myVerifyUser = users.find(user => user.id === userId)
 
         return myVerifyUser
     }
 
     initState({ id, username, email, birthday, password, confirmPassword, isLogin, firstName, lastName }) {
-        return ({
-            id,
-            username,
-            email,
-            birthday,
-            password,
-            firstName,
-            lastName,
-            confirmPassword,
-            isLogin,
-        })
-    }
-
-    updateStorage() {
-        const users = JSON.parse(localStorage.getItem('users'))
-        const myVerifyUserIdx = users.findIndex(user => user.id === this.state.user.id)
-        users.splice(myVerifyUserIdx, 1)
-        users.push(this.state.user)
-        localStorage.setItem('users', JSON.stringify(users))
+        return ({ id, username, email, birthday, password, firstName, lastName, confirmPassword, isLogin, })
     }
 
     logOut() {
         this.changeUserInformation(['isLogin'], [false])
     }
 
     componentDidUpdate() {
-        this.updateStorage()
+        updateStorage(getStorage('users'), this.state.user)
         !this.state.user.isLogin && this.props.onLogOut()
     }
 
     changeToggle(toggle) {
-        this.setState({ toggle, })
+        this.setState({ toggle })
     }
 
     changeUserInformation(keyInfos, valInfos) {

src/utils/storage.js

@@ -3,14 +3,14 @@ export const getStorage = storage => {
     return JSON.parse(localStorage.getItem(storage))
 }
 
-export const setUserId = id => localStorage.setItem('id', id)
+export const setUserId = id => localStorage.setItem('id', id) 
 
 export const setUserInStorage = (storage, value) => localStorage.setItem(storage, JSON.stringify([ ...value ]))
 
 export const updateStorage = (users, myUser, login) => {
     const myVerifyUserIdx = users.findIndex(user => user.id === myUser.id)
     users.splice(myVerifyUserIdx, 1)
-    myUser.isLogin = login
+    if (login) myUser.isLogin = login
     users.push(myUser)
     setUserInStorage('users', users)
 }