48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { useModal } from 'App/components/Modal';
|
|
import { useStore } from 'App/mstore';
|
|
import { observer } from 'mobx-react-lite';
|
|
import GettingStartedModal from './GettingStartedModal';
|
|
import CircleProgress from './CircleProgress';
|
|
|
|
function GettingStartedProgress() {
|
|
const { showModal } = useModal();
|
|
|
|
const {
|
|
settingsStore: { gettingStarted },
|
|
userStore,
|
|
} = useStore();
|
|
const { isLoggedIn } = userStore;
|
|
|
|
useEffect(() => {
|
|
if (isLoggedIn) {
|
|
gettingStarted.fetchData();
|
|
}
|
|
}, [isLoggedIn]);
|
|
|
|
const clickHandler = () => {
|
|
showModal(<GettingStartedModal list={gettingStarted.steps} />, { right: true, width: 450 });
|
|
};
|
|
return gettingStarted.status === 'completed' ? null : (
|
|
<div className="mr-4 flex items-cetner cursor-pointer hover:bg-active-blue px-4">
|
|
<div className="flex items-center cursor-pointer" onClick={clickHandler}>
|
|
<CircleProgress
|
|
label={gettingStarted.label}
|
|
percentage={gettingStarted.percentageCompleted}
|
|
/>
|
|
<div className="ml-2">
|
|
<div className="text-lg color-teal" style={{ lineHeight: '15px' }}>
|
|
Setup
|
|
</div>
|
|
<div className="color-gray-meidum text-sm">
|
|
{gettingStarted.numPending}
|
|
{' '}
|
|
Pending
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(GettingStartedProgress);
|