Tryag File Manager

/var/www/html/tpid-konsulin/konsulin-cust-react/src/views/Profile.tsx

import { Capacitor } from '@capacitor/core'
import images from 'assets/images'
import { MembershipCard, Modal, ProfileItem } from 'components'
import { API } from 'config/api'
import { MENU_PROFILE } from 'config/menu'
import { StorageKey } from 'config/storage'
import { useGlobalContext } from 'hooks/context'
import { useGet, usePost } from 'hooks/useRequest'
import React, { useEffect, useState } from 'react'
import Skeleton from 'react-loading-skeleton'
import { useNavigate } from 'react-router-dom'
import { initialName, LocalStorage } from 'utils'
import {
  ModalRegisterMerchantPending,
  ModalRegisterMerchantRejected,
} from 'views'

export const Profile: React.FC = () => {
  const storage = new LocalStorage()
  const navigate = useNavigate()
  const { openAlert, setSavedPhoneNumber } = useGlobalContext()
  const [showRegisterPending, setShowRegisterPending] = useState(false)
  const [showRegisterRejected, setShowRegisterRejected] = useState(false)
  const [srcProfile, setSrcProfile] = useState('')
  const [showSetting, setShowSetting] = useState(false)
  const [logout, postLogout] = usePost({ isLoading: false })
  const [infoMember, getInfoMember] = usePost({ isLoading: false })
  const [dataProfile, getDataProfile] = useGet({ isLoading: false })
  const [user, setUser] = useState<any>()

useEffect(() => {
    const { data } = infoMember
    if (data?.status === 'success') {
      setUser(data?.result)
    }
  }, [infoMember])

useEffect(() => {
    const { data } = dataProfile
    if (data?.status === 'success') {
      setSrcProfile(data?.result?.photo)
    }
  }, [dataProfile])

useEffect(() => {
    const { data } = infoMember
    if (data?.status === 'success') {
      setSavedPhoneNumber(data?.result?.user_info.phone?.replace('0', '62'))
    } else if (data?.status === 'fail') {
      console.log(data?.messages)
    }
  })

useEffect(() => {
    getInfoMember.getRequest(API.INFO_MEMBER)
    getDataProfile.getRequest(API.PROFILE_DETAIL)
  }, [])

useEffect(() => {
    const { data } = logout
    if (data?.status === 'success') {
      storage.remove(StorageKey.ACCESS_TOKEN)
      storage.remove(StorageKey.IS_LOGIN)
      storage.remove(StorageKey.CART)
      navigate('/', { replace: true })
      window.location.reload()
    } else if (data?.status === 'fail') {
      openAlert({ messages: data?.messages })
    }
  }, [logout])

const onSetting = () => {
    setShowSetting(true)
  }

const doLogout = () => {
    const deviceID = ''

openAlert({
      title: 'Konfirmasi',
      messages: 'Apakah Anda yakin ingin keluar?',
      btnCloseText: 'Tidak',
      isConfirm: true,
      callback: (e: any) => {
        if (e.isConfirm) {
          postLogout.getRequest(API.LOGOUT, { device_id: deviceID })
        }
      },
    })
  }

const onClickStore = () => {
    switch (user?.merchant_status) {
      case 'Pending':
        setShowRegisterPending(true)
        break
      case 'Rejected':
        setShowRegisterRejected(true)
        break
      case null:
        navigate('/info-merchant')
        break
      default:
        navigate('/my-store')
        break
    }
  }

return (
    <div className='-mt-[4rem]'>
      <div className='relative -mx-4'>
        <img className='absolute -mt-4 w-full' src={images.bg_profile} alt='' />
      </div>

{infoMember.isLoading ? (
          <div className='flex items-center mx-auto justify-center max-w-fit aspect-square rounded-full mt-[8%] text-center bg-neutral-10 text-3xl'>
            <Skeleton circle height={80} width={80} />
          </div>
        ) : user?.user_info?.url_photo ? (
          <img
            src={srcProfile}
            alt=''
            className='flex items-center mx-auto justify-center mt-[8%] aspect-square rounded-full text-center bg-white text-3xl w-20 h-20'
          />
        ) : (
          <div className='flex items-center mx-auto justify-center w-[25%] aspect-square rounded-full p-3 mt-[8%] text-center bg-white text-3xl'>
            {initialName(user?.user_info?.name)}
          </div>
        )}

<MembershipCard
          className='mb-12'
          item={{
            level: user?.user_info?.membership?.membership_name,
            icon: user?.user_info?.membership?.membership_image,
            point: user?.total_point,
            isLoading: infoMember.isLoading,
          }}
          onMembership={() => navigate('/membership')}
          onPoints={() => navigate('/points')}
        />

{MENU_PROFILE.map((item, index) => (
          <ProfileItem
            key={index}
            className='mb-4'
            item={item}
            onClick={item.label === 'Toko Saya' ? onClickStore : null}
          />
        ))}

<Modal
          dialogClassName={`!items-start !justify-start ${
            Capacitor.getPlatform() === 'ios' ? 'mt-12' : ''
          }`}
          show={showSetting}
          onHide={() => setShowSetting(false)}
        >
          <div className='bg-white rounded-lg'>
            <div
              className='flex items-center px-8 py-4'
              onClick={() => navigate('/profile/contact-info')}
            >
              <img
                src={images.ic_setting_yellow}
                alt=''
                className='w-6 h-6 mr-4'
              />
              <div className='text-sm'>{'Pengaturan Akun'}</div>
            </div>
            <div className='w-full h-px bg-neutral-10' />
            <div
              className='flex items-center px-8 py-4'
              onClick={() => navigate('/password-update')}
            >
              <img src={images.ic_lock} alt='' className='w-6 h-6 mr-4' />
              <div className='text-sm'>{'Ganti Password'}</div>
            </div>
          </div>
        </Modal>
      </div>

{user?.merchant_status === 'Pending' && (
        <ModalRegisterMerchantPending
          show={showRegisterPending}
          action={() => setShowRegisterPending(false)}
        />
      )}

{user?.merchant_status === 'Rejected' && (
        <ModalRegisterMerchantRejected
          show={showRegisterRejected}
          onHide={() => setShowRegisterRejected(false)}
        />
      )}
    </div>
  )
}