Tryag File Manager

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

import images from 'assets/images'
import { Header, RefreshContent, Tabs } from 'components'
import { API } from 'config/api'
import { useGlobalContext } from 'hooks/context'
import { usePost } from 'hooks/useRequest'
import React, { useEffect, useState } from 'react'
import Skeleton from 'react-loading-skeleton'
import { useNavigate } from 'react-router-dom'
import PullToRefresh from 'react-simple-pull-to-refresh'

export const Membership: React.FC = () => {
  const navigate = useNavigate()
  const { openAlert, savedPoints } = useGlobalContext()
  const [allTab, setAllTab] = useState<any>()
  const [selectedTab, setSelectedTab] = useState<any>([])
  // const [selectedTab, setSelectedTab] = useState()
  const [progress, setProgress] = useState<any>('0%')
  const [dataDetailMember, getDetailMember] = usePost({ isLoading: false })

useEffect(() => {
    const { data } = dataDetailMember
    if (data?.status === 'success') {
      let tmp: any = []
      setProgress(
        (data?.result?.user_membership?.user?.progress_now /
          data?.result?.user_membership?.user?.progress_max) *
          100 +
          '%'
      )

data?.result?.all_membership?.forEach((item: any) => {
        tmp.push({
          ...item,
          isSelected: false,
          title: item?.membership_name,
          key: item?.membership_name,
          content: item?.benefit_text,
          // to: `${item?.membership_name}`,
        })
      })
      tmp.map((item: any) => {
        if (
          item.membership_name ===
          data?.result?.user_membership?.membership_name
        ) {
          setSelectedTab(item)
        }
      })
      setAllTab([...tmp])
    } else if (data?.status === 'fail') {
      openAlert({ messages: data?.messages })
    }
  }, [dataDetailMember])

let member = dataDetailMember?.data?.result
  useEffect(() => {
    getDetailMember.getRequest(API.DETAIL_MEMBER)
  }, [])

const onRefreshPull = async () => {
    getDetailMember.getRequest(API.DETAIL_MEMBER)
  }

return (
    <div>
      <Header label='Memberships' onBackClick={() => navigate(-1)} />

<div className='-mx-4 px-4 bg-white'>
        <PullToRefresh
          onRefresh={onRefreshPull}
          isPullable
          refreshingContent={<RefreshContent type='release' />}
          pullingContent={<RefreshContent type='pull' />}
        >
          <div>
            <div className='bg-white -mt-4 -mx-4 p-4 mb-3'>
              {dataDetailMember.isLoading ? (
                <div className='w-[393px] h-[194px] shadow-md drop-shadow-sm rounded-lg px-8'>
                  <div className='top-6 left-6 text-white mt-2'>
                    <Skeleton height={30} width={80} />
                    <Skeleton height={30} width={120} />
                    <div className='flex mt-4 items-center'>
                      <Skeleton width={24} height={24} circle />
                      <Skeleton height={20} width={40} className='ml-4' />
                    </div>
                  </div>
                  <div className='absolute bottom-4 right-4 '>
                    <Skeleton height={20} width={50} />
                    <Skeleton height={30} width={80} />
                  </div>
                </div>
              ) : (
                <div className='relative'>
                  <img
                    src={member?.user_membership?.membership_card}
                    alt=''
                    className='w-full rounded-lg shadow-md'
                  />
                  <div className='absolute top-6 left-6 text-white shadow-lg'>
                    <img
                      src={images.ic_konsulin_white}
                      alt=''
                      className='w-1/5'
                    />
                    <div className='font-medium text-lg my-5'>
                      {member?.user_membership?.user?.name}
                    </div>
                    <div className='flex items-center'>
                      <img
                        src={member?.user_membership?.membership_image}
                        alt=''
                        className='w-6 h-6 mr-2'
                      />
                      <div className='font-medium text-xs'>
                        {member?.user_membership?.membership_name}
                      </div>
                    </div>
                  </div>

<div className='absolute bottom-4 right-4 text-white text-right'>
                    <div className='text-xs mb-1'>{'Points'}</div>
                    <div className='font-semi-bold text-xl'>{savedPoints}</div>
                  </div>
                </div>
              )}

<div className='font-semi-bold text-neutral-30 text-xs my-6'>
                {'POINT CAPS MEMBER'}
              </div>

<div className='relative pt-8'>
                <div
                  className='absolute top-0 font-semi-bold text-yellow text-xl text-right'
                  style={{ width: progress }}
                >
                  {member?.user_membership?.user?.progress_now}
                </div>
                <div className='w-full bg-neutral-10 h-4 rounded-lg'>
                  <div
                    className='bg-yellow h-4 rounded-lg'
                    style={{ width: progress }}
                  />
                </div>

{dataDetailMember.isLoading ? (
                  <div className='font-semi-bold text-xs text-right mt-2 flex mr-auto max-w-content w-full justify-end'>
                    <div className='flex'>
                      <Skeleton width={20} /> / <Skeleton width={20} />
                    </div>
                  </div>
                ) : (
                  <div className='font-semi-bold text-xs text-right mt-2'>
                    <span className='text-primary-base'>
                      {member?.user_membership?.user?.progress_now}
                    </span>
                    {` / ${member?.user_membership?.user?.progress_max}`}
                  </div>
                )}

<div className='flex mt-4 px-2'>
                  {dataDetailMember.isLoading ? (
                    <Skeleton width={20} height={20} className='mr-4' />
                  ) : (
                    <img
                      src={images.ic_star_point}
                      alt=''
                      className='w-4 h-4'
                    />
                  )}
                  {dataDetailMember.isLoading ? (
                    <div className='flex flex-col'>
                      <Skeleton width={320} height={16} />
                      <Skeleton width={280} height={16} />
                    </div>
                  ) : (
                    <div
                      className='text-xs ml-2'
                      dangerouslySetInnerHTML={{
                        __html: member?.user_membership?.user?.description,
                      }}
                    >
                      {/* {member?.user_membership?.user?.description} */}
                    </div>
                  )}
                </div>
              </div>
            </div>
            <div className='bg-white -mx-4 p-4'>
              <Tabs
                className='mx-0'
                items={allTab}
                isNotNavigated={true}
                indicatorActive={selectedTab.key}
                onClickTab={(e) => setSelectedTab(e)}
              />

{dataDetailMember.isLoading ? (
                <div>
                  <Skeleton width={260} />
                  <Skeleton width={260} />
                  <Skeleton width={160} />
                </div>
              ) : (
                <div
                  className='text-xxs py-4'
                  dangerouslySetInnerHTML={{
                    __html: selectedTab.content?.replace(/\n/g, '<br />'),
                  }}
                />
              )}
            </div>
          </div>
        </PullToRefresh>
      </div>
    </div>
  )
}