|
|
@ -58,7 +58,8 @@ export function UserProgressModal(props: ProgressMapProps) { |
|
|
|
resourceId: string |
|
|
|
resourceId: string |
|
|
|
) { |
|
|
|
) { |
|
|
|
const { error, response } = await httpGet<UserProgressResponse>( |
|
|
|
const { error, response } = await httpGet<UserProgressResponse>( |
|
|
|
`${import.meta.env.PUBLIC_API_URL |
|
|
|
`${ |
|
|
|
|
|
|
|
import.meta.env.PUBLIC_API_URL |
|
|
|
}/v1-get-user-progress/${userId}?resourceType=${resourceType}&resourceId=${resourceId}` |
|
|
|
}/v1-get-user-progress/${userId}?resourceType=${resourceType}&resourceId=${resourceId}` |
|
|
|
); |
|
|
|
); |
|
|
|
if (error || !response) { |
|
|
|
if (error || !response) { |
|
|
@ -128,10 +129,11 @@ export function UserProgressModal(props: ProgressMapProps) { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, [userId]); |
|
|
|
}, [userId]); |
|
|
|
|
|
|
|
|
|
|
|
const user = useMemo(() => userResponse, [userResponse]) |
|
|
|
const user = useMemo(() => userResponse, [userResponse]); |
|
|
|
const userProgressTotal = user?.progress?.total || 0; |
|
|
|
const userProgressTotal = user?.progress?.total || 0; |
|
|
|
const userDone = user?.progress?.done?.length || 0; |
|
|
|
const userDone = user?.progress?.done?.length || 0; |
|
|
|
const progressPercentage = Math.round((userDone / userProgressTotal) * 100) || 0 |
|
|
|
const progressPercentage = |
|
|
|
|
|
|
|
Math.round((userDone / userProgressTotal) * 100) || 0; |
|
|
|
const userLearning = user?.progress?.learning?.length || 0; |
|
|
|
const userLearning = user?.progress?.learning?.length || 0; |
|
|
|
const userSkipped = user?.progress?.skipped?.length || 0; |
|
|
|
const userSkipped = user?.progress?.skipped?.length || 0; |
|
|
|
|
|
|
|
|
|
|
@ -147,7 +149,17 @@ export function UserProgressModal(props: ProgressMapProps) { |
|
|
|
class="popup-body relative rounded-lg bg-white pt-[1px] shadow" |
|
|
|
class="popup-body relative rounded-lg bg-white pt-[1px] shadow" |
|
|
|
> |
|
|
|
> |
|
|
|
<div className="p-4"> |
|
|
|
<div className="p-4"> |
|
|
|
<div className="mb-5 mt-0 text-left md:mt-4 md:text-center"> |
|
|
|
<div className="mb-5 mt-0 min-h-[28px] text-left sm:h-[60px] md:mt-4 md:text-center"> |
|
|
|
|
|
|
|
{isLoading && ( |
|
|
|
|
|
|
|
<div class="flex w-full justify-center"> |
|
|
|
|
|
|
|
<Spinner |
|
|
|
|
|
|
|
isDualRing={false} |
|
|
|
|
|
|
|
className="h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-8 sm:w-8" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
{!isLoading && ( |
|
|
|
|
|
|
|
<> |
|
|
|
<h2 className={'mb-1 text-lg font-bold md:text-2xl'}> |
|
|
|
<h2 className={'mb-1 text-lg font-bold md:text-2xl'}> |
|
|
|
{user?.user.name}'s Progress |
|
|
|
{user?.user.name}'s Progress |
|
|
|
</h2> |
|
|
|
</h2> |
|
|
@ -158,9 +170,12 @@ export function UserProgressModal(props: ProgressMapProps) { |
|
|
|
> |
|
|
|
> |
|
|
|
You are looking at {user?.user.name}'s progress. |
|
|
|
You are looking at {user?.user.name}'s progress. |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p |
|
|
|
<p |
|
|
|
class={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden ${isLoading ? 'striped-loader' : '' |
|
|
|
class={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden ${ |
|
|
|
|
|
|
|
isLoading ? 'striped-loader' : '' |
|
|
|
}`}
|
|
|
|
}`}
|
|
|
|
> |
|
|
|
> |
|
|
|
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
|
|
|
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
|
|
@ -172,7 +187,8 @@ export function UserProgressModal(props: ProgressMapProps) { |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<p |
|
|
|
<p |
|
|
|
class={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${isLoading ? 'striped-loader' : '' |
|
|
|
class={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${ |
|
|
|
|
|
|
|
isLoading ? 'striped-loader' : '' |
|
|
|
}`}
|
|
|
|
}`}
|
|
|
|
> |
|
|
|
> |
|
|
|
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
|
|
|
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
|
|
|