Refactor to fix editor scaling issues (#4618)
* Ignore editor file * Integrate Readonly Editor * Remove logs * Implement minimum height * Implement Custom Roadmap Modal * Implement Custom Roadmap progress modal * Implement Readonly Editor * Implement utils * Update `gitignore` * Fix generate renderer script * Refactor UI * Add Empty Roadmap state * Upgrade dependencies and editor update * Update deployment workflow * Update roadmap header * Update dependencies * Refactor Readonly editor * Add Readonly Dummy Editor * Add editor to gitignore * Add Assume Unchanged * Add editor in the tailwind * Fix tailwind issue * Fix URL for add friends * Add share with friends functionality * Update workflow --------- Co-authored-by: Arik Chakma <arikchangma@gmail.com>pull/4622/head
Kamran Ahmed
1 year ago
committed by
GitHub
parent
d46cf26812
commit
3a0e588530
37 changed files with 3180 additions and 1600 deletions
@ -0,0 +1,14 @@ |
|||||||
|
export function ReadonlyEditor(props: any) { |
||||||
|
return ( |
||||||
|
<div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black"> |
||||||
|
<h2 className="mb-2 text-xl font-semibold">Private Component</h2> |
||||||
|
<p className="mb-4"> |
||||||
|
Renderer is a private component. If you are a collaborator and have |
||||||
|
access to it. Run the following command: |
||||||
|
</p> |
||||||
|
<code className="mt-5 rounded-md bg-gray-800 p-2 text-white"> |
||||||
|
npm run generate-renderer |
||||||
|
</code> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,158 @@ |
|||||||
|
import { ReadonlyEditor } from '../../../editor/readonly-editor'; |
||||||
|
import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { |
||||||
|
renderResourceProgress, |
||||||
|
updateResourceProgress, |
||||||
|
type ResourceProgressType, |
||||||
|
renderTopicProgress, |
||||||
|
refreshProgressCounters, |
||||||
|
} from '../../lib/resource-progress'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import type { Node } from 'reactflow'; |
||||||
|
import { useCallback, type MouseEvent, useMemo, useState, useRef } from 'react'; |
||||||
|
import { EmptyRoadmap } from './EmptyRoadmap'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
type FlowRoadmapRendererProps = { |
||||||
|
roadmap: RoadmapDocument; |
||||||
|
}; |
||||||
|
|
||||||
|
export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) { |
||||||
|
const { roadmap } = props; |
||||||
|
const roadmapId = String(roadmap._id!); |
||||||
|
|
||||||
|
const [hideRenderer, setHideRenderer] = useState(false); |
||||||
|
const editorWrapperRef = useRef<HTMLDivElement>(null); |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
async function updateTopicStatus( |
||||||
|
topicId: string, |
||||||
|
newStatus: ResourceProgressType, |
||||||
|
) { |
||||||
|
pageProgressMessage.set('Updating progress'); |
||||||
|
updateResourceProgress( |
||||||
|
{ |
||||||
|
resourceId: roadmapId, |
||||||
|
resourceType: 'roadmap', |
||||||
|
topicId, |
||||||
|
}, |
||||||
|
newStatus, |
||||||
|
) |
||||||
|
.then(() => { |
||||||
|
renderTopicProgress(topicId, newStatus); |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
toast.error('Something went wrong, please try again.'); |
||||||
|
console.error(err); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
refreshProgressCounters(); |
||||||
|
}); |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const handleTopicRightClick = useCallback((e: MouseEvent, node: Node) => { |
||||||
|
const target = e?.currentTarget as HTMLDivElement; |
||||||
|
if (!target) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isCurrentStatusDone = target?.classList.contains('done'); |
||||||
|
updateTopicStatus(node.id, isCurrentStatusDone ? 'pending' : 'done'); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleTopicShiftClick = useCallback((e: MouseEvent, node: Node) => { |
||||||
|
const target = e?.currentTarget as HTMLDivElement; |
||||||
|
if (!target) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isCurrentStatusLearning = target?.classList.contains('learning'); |
||||||
|
updateTopicStatus( |
||||||
|
node.id, |
||||||
|
isCurrentStatusLearning ? 'pending' : 'learning', |
||||||
|
); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleTopicAltClick = useCallback((e: MouseEvent, node: Node) => { |
||||||
|
const target = e?.currentTarget as HTMLDivElement; |
||||||
|
if (!target) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isCurrentStatusSkipped = target?.classList.contains('skipped'); |
||||||
|
updateTopicStatus(node.id, isCurrentStatusSkipped ? 'pending' : 'skipped'); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleTopicClick = useCallback((e: MouseEvent, node: Node) => { |
||||||
|
const target = e?.currentTarget as HTMLDivElement; |
||||||
|
if (!target) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
window.dispatchEvent( |
||||||
|
new CustomEvent('roadmap.node.click', { |
||||||
|
detail: { |
||||||
|
topicId: node.id, |
||||||
|
resourceId: roadmapId, |
||||||
|
resourceType: 'roadmap', |
||||||
|
isCustomResource: true, |
||||||
|
}, |
||||||
|
}), |
||||||
|
); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleLinkClick = useCallback((linkId: string, href: string) => { |
||||||
|
if (!href) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isExternalLink = href.startsWith('http'); |
||||||
|
if (isExternalLink) { |
||||||
|
window.open(href, '_blank'); |
||||||
|
} else { |
||||||
|
window.location.href = href; |
||||||
|
} |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{hideRenderer && ( |
||||||
|
<EmptyRoadmap |
||||||
|
roadmapId={roadmapId} |
||||||
|
canManage={roadmap.canManage} |
||||||
|
className="grow" |
||||||
|
/> |
||||||
|
)} |
||||||
|
<ReadonlyEditor |
||||||
|
ref={editorWrapperRef} |
||||||
|
roadmap={roadmap} |
||||||
|
className={cn( |
||||||
|
roadmap?.nodes?.length === 0 |
||||||
|
? 'grow' |
||||||
|
: 'min-h-0 max-md:min-h-[1000px]', |
||||||
|
)} |
||||||
|
onRendered={() => { |
||||||
|
renderResourceProgress('roadmap', roadmapId).then(() => { |
||||||
|
if (roadmap?.nodes?.length === 0) { |
||||||
|
setHideRenderer(true); |
||||||
|
editorWrapperRef?.current?.classList.add('hidden'); |
||||||
|
} |
||||||
|
}); |
||||||
|
}} |
||||||
|
onTopicClick={handleTopicClick} |
||||||
|
onTopicRightClick={handleTopicRightClick} |
||||||
|
onTopicShiftClick={handleTopicShiftClick} |
||||||
|
onTopicAltClick={handleTopicAltClick} |
||||||
|
onButtonNodeClick={handleLinkClick} |
||||||
|
onLinkClick={handleLinkClick} |
||||||
|
fontFamily="Balsamiq Sans" |
||||||
|
fontURL="/fonts/balsamiq.woff2" |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,53 +0,0 @@ |
|||||||
svg text tspan { |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
text-rendering: optimizeSpeed; |
|
||||||
} |
|
||||||
|
|
||||||
svg > g[data-type='topic'], |
|
||||||
svg > g[data-type='subtopic'], |
|
||||||
svg > g > g[data-type='link-item'], |
|
||||||
svg > g[data-type='button'] { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
svg > g[data-type='topic']:hover > rect { |
|
||||||
fill: #d6d700; |
|
||||||
} |
|
||||||
|
|
||||||
svg > g[data-type='subtopic']:hover > rect { |
|
||||||
fill: #f3c950; |
|
||||||
} |
|
||||||
svg > g[data-type='button']:hover { |
|
||||||
opacity: 0.8; |
|
||||||
} |
|
||||||
|
|
||||||
svg .done rect { |
|
||||||
fill: #cbcbcb !important; |
|
||||||
} |
|
||||||
|
|
||||||
svg .done text, |
|
||||||
svg .skipped text { |
|
||||||
text-decoration: line-through; |
|
||||||
} |
|
||||||
|
|
||||||
svg > g[data-type='topic'].learning > rect + text, |
|
||||||
svg > g[data-type='topic'].done > rect + text { |
|
||||||
fill: black; |
|
||||||
} |
|
||||||
|
|
||||||
svg > g[data-type='subtipic'].done > rect + text, |
|
||||||
svg > g[data-type='subtipic'].learning > rect + text { |
|
||||||
fill: #cbcbcb; |
|
||||||
} |
|
||||||
|
|
||||||
svg .learning rect { |
|
||||||
fill: #dad1fd !important; |
|
||||||
} |
|
||||||
svg .learning text { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
|
|
||||||
svg .skipped rect { |
|
||||||
fill: #496b69 !important; |
|
||||||
} |
|
||||||
@ -1,177 +0,0 @@ |
|||||||
import { useCallback, useEffect, useRef, useState } from 'react'; |
|
||||||
import { Renderer } from '../../../renderer'; |
|
||||||
import './RoadmapRenderer.css'; |
|
||||||
import { |
|
||||||
renderResourceProgress, |
|
||||||
updateResourceProgress, |
|
||||||
type ResourceProgressType, |
|
||||||
renderTopicProgress, |
|
||||||
refreshProgressCounters, |
|
||||||
} from '../../lib/resource-progress'; |
|
||||||
import { pageProgressMessage } from '../../stores/page'; |
|
||||||
import { useToast } from '../../hooks/use-toast'; |
|
||||||
import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal'; |
|
||||||
import { EmptyRoadmap } from './EmptyRoadmap'; |
|
||||||
|
|
||||||
type RoadmapRendererProps = { |
|
||||||
roadmap: RoadmapDocument; |
|
||||||
}; |
|
||||||
|
|
||||||
type RoadmapNodeDetails = { |
|
||||||
nodeId: string; |
|
||||||
nodeType: string; |
|
||||||
targetGroup: SVGElement; |
|
||||||
}; |
|
||||||
|
|
||||||
export function getNodeDetails( |
|
||||||
svgElement: SVGElement |
|
||||||
): RoadmapNodeDetails | null { |
|
||||||
const targetGroup = (svgElement?.closest('g') as SVGElement) || {}; |
|
||||||
|
|
||||||
const nodeId = targetGroup?.dataset?.nodeId; |
|
||||||
const nodeType = targetGroup?.dataset?.type; |
|
||||||
if (!nodeId || !nodeType) return null; |
|
||||||
|
|
||||||
return { nodeId, nodeType, targetGroup }; |
|
||||||
} |
|
||||||
|
|
||||||
export const allowedClickableNodeTypes = [ |
|
||||||
'topic', |
|
||||||
'subtopic', |
|
||||||
'button', |
|
||||||
'link-item', |
|
||||||
]; |
|
||||||
|
|
||||||
export function RoadmapRenderer(props: RoadmapRendererProps) { |
|
||||||
const { roadmap } = props; |
|
||||||
const roadmapRef = useRef<HTMLDivElement>(null); |
|
||||||
const roadmapId = roadmap._id!; |
|
||||||
|
|
||||||
const toast = useToast(); |
|
||||||
const [hideRenderer, setHideRenderer] = useState(false); |
|
||||||
|
|
||||||
async function updateTopicStatus( |
|
||||||
topicId: string, |
|
||||||
newStatus: ResourceProgressType |
|
||||||
) { |
|
||||||
pageProgressMessage.set('Updating progress'); |
|
||||||
updateResourceProgress( |
|
||||||
{ |
|
||||||
resourceId: roadmapId, |
|
||||||
resourceType: 'roadmap', |
|
||||||
topicId, |
|
||||||
}, |
|
||||||
newStatus |
|
||||||
) |
|
||||||
.then(() => { |
|
||||||
renderTopicProgress(topicId, newStatus); |
|
||||||
}) |
|
||||||
.catch((err) => { |
|
||||||
toast.error('Something went wrong, please try again.'); |
|
||||||
console.error(err); |
|
||||||
}) |
|
||||||
.finally(() => { |
|
||||||
pageProgressMessage.set(''); |
|
||||||
refreshProgressCounters(); |
|
||||||
}); |
|
||||||
|
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
const handleSvgClick = useCallback((e: MouseEvent) => { |
|
||||||
const target = e.target as SVGElement; |
|
||||||
const { nodeId, nodeType, targetGroup } = getNodeDetails(target) || {}; |
|
||||||
if (!nodeId || !nodeType || !allowedClickableNodeTypes.includes(nodeType)) |
|
||||||
return; |
|
||||||
|
|
||||||
if (nodeType === 'button' || nodeType === 'link-item') { |
|
||||||
const link = targetGroup?.dataset?.link || ''; |
|
||||||
const isExternalLink = link.startsWith('http'); |
|
||||||
if (isExternalLink) { |
|
||||||
window.open(link, '_blank'); |
|
||||||
} else { |
|
||||||
window.location.href = link; |
|
||||||
} |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
const isCurrentStatusLearning = targetGroup?.classList.contains('learning'); |
|
||||||
const isCurrentStatusSkipped = targetGroup?.classList.contains('skipped'); |
|
||||||
|
|
||||||
if (e.shiftKey) { |
|
||||||
e.preventDefault(); |
|
||||||
updateTopicStatus( |
|
||||||
nodeId, |
|
||||||
isCurrentStatusLearning ? 'pending' : 'learning' |
|
||||||
); |
|
||||||
return; |
|
||||||
} else if (e.altKey) { |
|
||||||
e.preventDefault(); |
|
||||||
updateTopicStatus(nodeId, isCurrentStatusSkipped ? 'pending' : 'skipped'); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
window.dispatchEvent( |
|
||||||
new CustomEvent('roadmap.node.click', { |
|
||||||
detail: { |
|
||||||
topicId: nodeId, |
|
||||||
resourceId: roadmap?._id, |
|
||||||
resourceType: 'roadmap', |
|
||||||
isCustomResource: true, |
|
||||||
}, |
|
||||||
}) |
|
||||||
); |
|
||||||
}, []); |
|
||||||
|
|
||||||
const handleSvgRightClick = useCallback((e: MouseEvent) => { |
|
||||||
e.preventDefault(); |
|
||||||
|
|
||||||
const target = e.target as SVGElement; |
|
||||||
const { nodeId, nodeType, targetGroup } = getNodeDetails(target) || {}; |
|
||||||
if (!nodeId || !nodeType || !allowedClickableNodeTypes.includes(nodeType)) |
|
||||||
return; |
|
||||||
|
|
||||||
if (nodeType === 'button' || nodeType === 'link-item') { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
const isCurrentStatusDone = targetGroup?.classList.contains('done'); |
|
||||||
updateTopicStatus(nodeId, isCurrentStatusDone ? 'pending' : 'done'); |
|
||||||
}, []); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!roadmapRef?.current) return; |
|
||||||
roadmapRef?.current?.addEventListener('click', handleSvgClick); |
|
||||||
roadmapRef?.current?.addEventListener('contextmenu', handleSvgRightClick); |
|
||||||
|
|
||||||
return () => { |
|
||||||
roadmapRef?.current?.removeEventListener('click', handleSvgClick); |
|
||||||
roadmapRef?.current?.removeEventListener( |
|
||||||
'contextmenu', |
|
||||||
handleSvgRightClick |
|
||||||
); |
|
||||||
}; |
|
||||||
}, []); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="flex grow bg-gray-50 pb-8 pt-4 sm:pt-12"> |
|
||||||
<div className="container !max-w-[1000px]"> |
|
||||||
<Renderer |
|
||||||
ref={roadmapRef} |
|
||||||
roadmap={{ nodes: roadmap?.nodes!, edges: roadmap?.edges! }} |
|
||||||
onRendered={() => { |
|
||||||
renderResourceProgress('roadmap', roadmapId).then(() => { |
|
||||||
if (roadmap?.nodes?.length === 0) { |
|
||||||
setHideRenderer(true); |
|
||||||
roadmapRef?.current?.classList.add('hidden'); |
|
||||||
} |
|
||||||
}); |
|
||||||
}} |
|
||||||
/> |
|
||||||
{hideRenderer && ( |
|
||||||
<EmptyRoadmap roadmapId={roadmapId} canManage={roadmap.canManage} /> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -0,0 +1,294 @@ |
|||||||
|
import { |
||||||
|
useCallback, |
||||||
|
useEffect, |
||||||
|
useState, |
||||||
|
type MouseEvent, |
||||||
|
useRef, |
||||||
|
} from 'react'; |
||||||
|
import { Spinner } from '../ReactIcons/Spinner'; |
||||||
|
import '../FrameRenderer/FrameRenderer.css'; |
||||||
|
import type { TeamMember } from './TeamProgressPage'; |
||||||
|
import { httpGet } from '../../lib/http'; |
||||||
|
import { |
||||||
|
renderTopicProgress, |
||||||
|
type ResourceProgressType, |
||||||
|
type ResourceType, |
||||||
|
updateResourceProgress, |
||||||
|
} from '../../lib/resource-progress'; |
||||||
|
import CloseIcon from '../../icons/close.svg'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { useAuth } from '../../hooks/use-auth'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import type { GetRoadmapResponse } from '../CustomRoadmap/CustomRoadmap'; |
||||||
|
import { ReadonlyEditor } from '../../../editor/readonly-editor'; |
||||||
|
import type { Node } from 'reactflow'; |
||||||
|
import { useKeydown } from '../../hooks/use-keydown'; |
||||||
|
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||||
|
import { MemberProgressModalHeader } from './MemberProgressModalHeader'; |
||||||
|
|
||||||
|
export type ProgressMapProps = { |
||||||
|
member: TeamMember; |
||||||
|
teamId: string; |
||||||
|
resourceId: string; |
||||||
|
resourceType: 'roadmap' | 'best-practice'; |
||||||
|
onClose: () => void; |
||||||
|
onShowMyProgress: () => void; |
||||||
|
isCustomResource?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export type MemberProgressResponse = { |
||||||
|
removed: string[]; |
||||||
|
done: string[]; |
||||||
|
learning: string[]; |
||||||
|
skipped: string[]; |
||||||
|
}; |
||||||
|
|
||||||
|
export function MemberCustomProgressModal(props: ProgressMapProps) { |
||||||
|
const { |
||||||
|
resourceId, |
||||||
|
member, |
||||||
|
resourceType, |
||||||
|
onShowMyProgress, |
||||||
|
teamId, |
||||||
|
onClose, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const user = useAuth(); |
||||||
|
const isCurrentUser = user?.email === member.email; |
||||||
|
|
||||||
|
const popupBodyEl = useRef<HTMLDivElement>(null); |
||||||
|
const [roadmap, setRoadmap] = useState<GetRoadmapResponse | null>(null); |
||||||
|
const [memberProgress, setMemberProgress] = |
||||||
|
useState<MemberProgressResponse>(); |
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
useKeydown('Escape', () => onClose()); |
||||||
|
useOutsideClick(popupBodyEl, () => onClose()); |
||||||
|
|
||||||
|
async function getMemberProgress( |
||||||
|
teamId: string, |
||||||
|
memberId: string, |
||||||
|
resourceType: string, |
||||||
|
resourceId: string, |
||||||
|
) { |
||||||
|
const { error, response } = await httpGet<MemberProgressResponse>( |
||||||
|
`${ |
||||||
|
import.meta.env.PUBLIC_API_URL |
||||||
|
}/v1-get-member-resource-progress/${teamId}/${memberId}?resourceType=${resourceType}&resourceId=${resourceId}`,
|
||||||
|
); |
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Failed to get member progress'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setMemberProgress(response); |
||||||
|
|
||||||
|
return response; |
||||||
|
} |
||||||
|
|
||||||
|
async function getRoadmap() { |
||||||
|
const { response, error } = await httpGet<GetRoadmapResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${resourceId}`, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Failed to load roadmap'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setRoadmap(response); |
||||||
|
|
||||||
|
return response; |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!resourceId || !resourceType || !teamId) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(true); |
||||||
|
Promise.all([ |
||||||
|
getRoadmap(), |
||||||
|
getMemberProgress(teamId, member._id, resourceType, resourceId), |
||||||
|
]) |
||||||
|
.then(() => {}) |
||||||
|
.catch((err) => { |
||||||
|
console.error(err); |
||||||
|
toast.error(err?.message || 'Something went wrong. Please try again!'); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
setIsLoading(false); |
||||||
|
}); |
||||||
|
}, [member]); |
||||||
|
|
||||||
|
function updateTopicStatus(topicId: string, newStatus: ResourceProgressType) { |
||||||
|
if (!resourceId || !resourceType || !isCurrentUser) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
pageProgressMessage.set('Updating progress'); |
||||||
|
updateResourceProgress( |
||||||
|
{ |
||||||
|
resourceId: resourceId, |
||||||
|
resourceType: resourceType as ResourceType, |
||||||
|
topicId, |
||||||
|
}, |
||||||
|
newStatus, |
||||||
|
) |
||||||
|
.then(() => { |
||||||
|
renderTopicProgress(topicId, newStatus); |
||||||
|
getMemberProgress(teamId, member._id, resourceType, resourceId).then( |
||||||
|
(data) => { |
||||||
|
setMemberProgress(data); |
||||||
|
}, |
||||||
|
); |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
alert('Something went wrong, please try again.'); |
||||||
|
console.error(err); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
}); |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const handleTopicRightClick = useCallback((e: MouseEvent, node: Node) => { |
||||||
|
if (!isCurrentUser) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const target = e?.currentTarget as HTMLDivElement; |
||||||
|
if (!target) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isCurrentStatusDone = target?.classList.contains('done'); |
||||||
|
updateTopicStatus(node.id, isCurrentStatusDone ? 'pending' : 'done'); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleTopicShiftClick = useCallback((e: MouseEvent, node: Node) => { |
||||||
|
if (!isCurrentUser) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const target = e?.currentTarget as HTMLDivElement; |
||||||
|
if (!target) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isCurrentStatusLearning = target?.classList.contains('learning'); |
||||||
|
updateTopicStatus( |
||||||
|
node.id, |
||||||
|
isCurrentStatusLearning ? 'pending' : 'learning', |
||||||
|
); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleTopicAltClick = useCallback((e: MouseEvent, node: Node) => { |
||||||
|
if (!isCurrentUser) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const target = e?.currentTarget as HTMLDivElement; |
||||||
|
if (!target) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isCurrentStatusSkipped = target?.classList.contains('skipped'); |
||||||
|
updateTopicStatus(node.id, isCurrentStatusSkipped ? 'pending' : 'skipped'); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleLinkClick = useCallback((linkId: string, href: string) => { |
||||||
|
if (!href || !isCurrentUser) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isExternalLink = href.startsWith('http'); |
||||||
|
if (isExternalLink) { |
||||||
|
window.open(href, '_blank'); |
||||||
|
} else { |
||||||
|
window.location.href = href; |
||||||
|
} |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"> |
||||||
|
<div |
||||||
|
id="original-roadmap" |
||||||
|
className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto" |
||||||
|
> |
||||||
|
<div |
||||||
|
className="relative rounded-lg bg-white pt-[1px] shadow" |
||||||
|
ref={popupBodyEl} |
||||||
|
> |
||||||
|
<MemberProgressModalHeader |
||||||
|
resourceId={resourceId} |
||||||
|
member={member} |
||||||
|
progress={memberProgress} |
||||||
|
isCurrentUser={isCurrentUser} |
||||||
|
onShowMyProgress={onShowMyProgress} |
||||||
|
isLoading={isLoading} |
||||||
|
/> |
||||||
|
|
||||||
|
{!isLoading && roadmap && ( |
||||||
|
<div className="px-4 pb-2"> |
||||||
|
<ReadonlyEditor |
||||||
|
variant="modal" |
||||||
|
roadmap={roadmap!} |
||||||
|
className="min-h-[400px]" |
||||||
|
onRendered={() => { |
||||||
|
const { |
||||||
|
removed = [], |
||||||
|
done = [], |
||||||
|
learning = [], |
||||||
|
skipped = [], |
||||||
|
} = memberProgress || {}; |
||||||
|
|
||||||
|
done.forEach((id: string) => renderTopicProgress(id, 'done')); |
||||||
|
learning.forEach((id: string) => |
||||||
|
renderTopicProgress(id, 'learning'), |
||||||
|
); |
||||||
|
skipped.forEach((id: string) => |
||||||
|
renderTopicProgress(id, 'skipped'), |
||||||
|
); |
||||||
|
removed.forEach((id: string) => |
||||||
|
renderTopicProgress(id, 'removed'), |
||||||
|
); |
||||||
|
}} |
||||||
|
onTopicRightClick={handleTopicRightClick} |
||||||
|
onTopicShiftClick={handleTopicShiftClick} |
||||||
|
onTopicAltClick={handleTopicAltClick} |
||||||
|
onButtonNodeClick={handleLinkClick} |
||||||
|
onLinkClick={handleLinkClick} |
||||||
|
fontFamily="Balsamiq Sans" |
||||||
|
fontURL="/fonts/balsamiq.woff2" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{isLoading && ( |
||||||
|
<div className="flex w-full justify-center"> |
||||||
|
<Spinner |
||||||
|
isDualRing={false} |
||||||
|
className="mb-4 mt-2 h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-8 sm:w-8" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
<button |
||||||
|
type="button" |
||||||
|
className={`absolute right-2.5 top-3 z-50 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:text-gray-900 lg:hidden ${ |
||||||
|
isCurrentUser ? 'hover:bg-gray-800' : 'hover:bg-gray-100' |
||||||
|
}`}
|
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
<img alt={'close'} src={CloseIcon.src} className="h-4 w-4" /> |
||||||
|
<span className="sr-only">Close modal</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,148 @@ |
|||||||
|
import type { MemberProgressResponse } from './MemberCustomProgressModal'; |
||||||
|
import type { TeamMember } from './TeamProgressPage'; |
||||||
|
|
||||||
|
type MemberProgressModalHeaderProps = { |
||||||
|
member: TeamMember; |
||||||
|
progress?: MemberProgressResponse; |
||||||
|
resourceId: string; |
||||||
|
isLoading: boolean; |
||||||
|
onShowMyProgress: () => void; |
||||||
|
isCurrentUser: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function MemberProgressModalHeader( |
||||||
|
props: MemberProgressModalHeaderProps |
||||||
|
) { |
||||||
|
const { |
||||||
|
progress: memberProgress, |
||||||
|
member, |
||||||
|
resourceId, |
||||||
|
isLoading, |
||||||
|
onShowMyProgress, |
||||||
|
isCurrentUser, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const removedTopics = memberProgress?.removed || []; |
||||||
|
const memberDone = |
||||||
|
memberProgress?.done.filter((id) => !removedTopics.includes(id)).length || |
||||||
|
0; |
||||||
|
const memberLearning = |
||||||
|
memberProgress?.learning.filter((id) => !removedTopics.includes(id)) |
||||||
|
.length || 0; |
||||||
|
const memberSkipped = |
||||||
|
memberProgress?.skipped.filter((id) => !removedTopics.includes(id)) |
||||||
|
.length || 0; |
||||||
|
|
||||||
|
const currProgress = member.progress.find((p) => p.resourceId === resourceId); |
||||||
|
const memberTotal = currProgress?.total || 0; |
||||||
|
|
||||||
|
const progressPercentage = Math.round((memberDone / memberTotal) * 100); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{isCurrentUser && ( |
||||||
|
<div className="sticky top-1 z-50 mx-1 mb-0 mt-1 rounded-xl bg-gray-900 p-4 text-gray-300"> |
||||||
|
<h2 className={'mb-1.5 text-base'}> |
||||||
|
Follow the Instructions below to update your progress |
||||||
|
</h2> |
||||||
|
<ul className="flex flex-col gap-1"> |
||||||
|
<li className="leading-loose"> |
||||||
|
<kbd className="rounded-md bg-yellow-200 px-2 py-1.5 text-xs text-gray-900"> |
||||||
|
Right Mouse Click |
||||||
|
</kbd>{' '} |
||||||
|
on a topic to mark as{' '} |
||||||
|
<span className={'font-medium text-white'}>Done</span>. |
||||||
|
</li> |
||||||
|
<li className="leading-loose"> |
||||||
|
<kbd className="rounded-md bg-yellow-200 px-2 py-1.5 text-xs text-gray-900"> |
||||||
|
Shift |
||||||
|
</kbd>{' '} |
||||||
|
+{' '} |
||||||
|
<kbd className="rounded-md bg-yellow-200 px-2 py-1.5 text-xs text-gray-900"> |
||||||
|
Click |
||||||
|
</kbd>{' '} |
||||||
|
on a topic to mark as{' '} |
||||||
|
<span className="font-medium text-white">In progress</span>. |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
<div className="p-4"> |
||||||
|
{!isCurrentUser && ( |
||||||
|
<div className="mb-5 mt-0 text-left md:mt-4 md:text-center"> |
||||||
|
<h2 className={'mb-1 text-lg font-bold md:text-2xl'}> |
||||||
|
{member.name}'s Progress |
||||||
|
</h2> |
||||||
|
<p |
||||||
|
className={ |
||||||
|
'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base' |
||||||
|
} |
||||||
|
> |
||||||
|
You are looking at {member.name}'s progress.{' '} |
||||||
|
<button |
||||||
|
className="text-blue-600 underline" |
||||||
|
onClick={onShowMyProgress} |
||||||
|
> |
||||||
|
View your progress |
||||||
|
</button> |
||||||
|
. |
||||||
|
</p> |
||||||
|
<p className={'block text-gray-500 md:hidden'}> |
||||||
|
<button |
||||||
|
className="text-blue-600 underline" |
||||||
|
onClick={onShowMyProgress} |
||||||
|
> |
||||||
|
View your progress. |
||||||
|
</button> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<p |
||||||
|
className={`-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 className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
||||||
|
<span>{progressPercentage}</span>% Done |
||||||
|
</span> |
||||||
|
|
||||||
|
<span> |
||||||
|
<span>{memberDone}</span> of <span>{memberTotal}</span> done |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
<p |
||||||
|
className={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${ |
||||||
|
isLoading ? 'striped-loader' : '' |
||||||
|
}`}
|
||||||
|
> |
||||||
|
<span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
||||||
|
<span>{progressPercentage}</span>% Done |
||||||
|
</span> |
||||||
|
|
||||||
|
<span> |
||||||
|
<span>{memberDone}</span> completed |
||||||
|
</span> |
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span data-progress-learning="">{memberLearning}</span> in progress |
||||||
|
</span> |
||||||
|
|
||||||
|
{memberSkipped > 0 && ( |
||||||
|
<> |
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span data-progress-skipped="">{memberSkipped}</span> skipped |
||||||
|
</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span data-progress-total="">{memberTotal}</span> Total |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
import { ErrorIcon } from "../ReactIcons/ErrorIcon"; |
||||||
|
import { Spinner } from "../ReactIcons/Spinner"; |
||||||
|
|
||||||
|
type ProgressLoadingErrorProps = { |
||||||
|
isLoading: boolean; |
||||||
|
error: string; |
||||||
|
} |
||||||
|
|
||||||
|
export function ProgressLoadingError(props: ProgressLoadingErrorProps) { |
||||||
|
const { isLoading, error } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"> |
||||||
|
<div className="relative mx-auto flex h-full w-full items-center justify-center"> |
||||||
|
<div className="popup-body relative rounded-lg bg-white p-5 shadow"> |
||||||
|
<div className="flex items-center"> |
||||||
|
{isLoading && ( |
||||||
|
<> |
||||||
|
<Spinner className="h-6 w-6" isDualRing={false} /> |
||||||
|
<span className="ml-3 text-lg font-semibold"> |
||||||
|
Loading user progress... |
||||||
|
</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
{error && ( |
||||||
|
<> |
||||||
|
<ErrorIcon additionalClasses="h-6 w-6 text-red-500" /> |
||||||
|
<span className="ml-3 text-lg font-semibold">{error}</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,218 @@ |
|||||||
|
import { useEffect, useMemo, useRef, useState, type RefObject } from 'react'; |
||||||
|
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||||
|
import { useKeydown } from '../../hooks/use-keydown'; |
||||||
|
import { httpGet } from '../../lib/http'; |
||||||
|
import type { ResourceType } from '../../lib/resource-progress'; |
||||||
|
import { topicSelectorAll } from '../../lib/resource-progress'; |
||||||
|
import CloseIcon from '../../icons/close.svg'; |
||||||
|
import { deleteUrlParam, getUrlParams } from '../../lib/browser'; |
||||||
|
import { useAuth } from '../../hooks/use-auth'; |
||||||
|
import type { GetRoadmapResponse } from '../CustomRoadmap/CustomRoadmap'; |
||||||
|
import { ReadonlyEditor } from '../../../editor/readonly-editor'; |
||||||
|
import { ProgressLoadingError } from './ProgressLoadingError'; |
||||||
|
import { UserProgressModalHeader } from './UserProgressModalHeader'; |
||||||
|
|
||||||
|
export type ProgressMapProps = { |
||||||
|
userId?: string; |
||||||
|
resourceId: string; |
||||||
|
resourceType: ResourceType; |
||||||
|
onClose?: () => void; |
||||||
|
isCustomResource?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
type UserProgressResponse = { |
||||||
|
user: { |
||||||
|
_id: string; |
||||||
|
name: string; |
||||||
|
}; |
||||||
|
progress: { |
||||||
|
total: number; |
||||||
|
done: string[]; |
||||||
|
learning: string[]; |
||||||
|
skipped: string[]; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
export function UserCustomProgressModal(props: ProgressMapProps) { |
||||||
|
const { |
||||||
|
resourceId, |
||||||
|
resourceType, |
||||||
|
userId: propUserId, |
||||||
|
onClose: onModalClose, |
||||||
|
isCustomResource, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const { s: userId = propUserId } = getUrlParams(); |
||||||
|
if (!userId) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const resourceSvgEl = useRef<HTMLDivElement>(null); |
||||||
|
const popupBodyEl = useRef<HTMLDivElement>(null); |
||||||
|
const currentUser = useAuth(); |
||||||
|
|
||||||
|
const [roadmap, setRoadmap] = useState<GetRoadmapResponse | null>(null); |
||||||
|
const [showModal, setShowModal] = useState(!!userId); |
||||||
|
const [progressResponse, setProgressResponse] = |
||||||
|
useState<UserProgressResponse>(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
const [error, setError] = useState(''); |
||||||
|
|
||||||
|
async function getUserProgress( |
||||||
|
userId: string, |
||||||
|
resourceType: string, |
||||||
|
resourceId: string, |
||||||
|
): Promise<UserProgressResponse | undefined> { |
||||||
|
const { error, response } = await httpGet<UserProgressResponse>( |
||||||
|
`${ |
||||||
|
import.meta.env.PUBLIC_API_URL |
||||||
|
}/v1-get-user-progress/${userId}?resourceType=${resourceType}&resourceId=${resourceId}`,
|
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
throw error || new Error('Something went wrong. Please try again!'); |
||||||
|
} |
||||||
|
|
||||||
|
return response; |
||||||
|
} |
||||||
|
|
||||||
|
async function getRoadmapSVG(): Promise<GetRoadmapResponse> { |
||||||
|
const { error, response: roadmapData } = await httpGet<GetRoadmapResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${resourceId}`, |
||||||
|
); |
||||||
|
if (error || !roadmapData) { |
||||||
|
throw error || new Error('Something went wrong. Please try again!'); |
||||||
|
} |
||||||
|
|
||||||
|
setRoadmap(roadmapData); |
||||||
|
return roadmapData; |
||||||
|
} |
||||||
|
|
||||||
|
function onClose() { |
||||||
|
deleteUrlParam('s'); |
||||||
|
setError(''); |
||||||
|
setShowModal(false); |
||||||
|
|
||||||
|
if (onModalClose) { |
||||||
|
onModalClose(); |
||||||
|
} else { |
||||||
|
window.location.reload(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
useKeydown('Escape', () => { |
||||||
|
onClose(); |
||||||
|
}); |
||||||
|
|
||||||
|
useOutsideClick(popupBodyEl, () => { |
||||||
|
onClose(); |
||||||
|
}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!resourceId || !resourceType || !userId) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(true); |
||||||
|
Promise.all([ |
||||||
|
getRoadmapSVG(), |
||||||
|
getUserProgress(userId, resourceType, resourceId), |
||||||
|
]) |
||||||
|
.then(([_, user]) => { |
||||||
|
if (!user) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setProgressResponse(user); |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
setError(err?.message || 'Something went wrong. Please try again!'); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
setIsLoading(false); |
||||||
|
}); |
||||||
|
}, [userId]); |
||||||
|
|
||||||
|
if (currentUser?.id === userId) { |
||||||
|
deleteUrlParam('s'); |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
if (!showModal) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
if (isLoading || error) { |
||||||
|
return <ProgressLoadingError isLoading={isLoading} error={error || ''} />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
id={'user-progress-modal'} |
||||||
|
className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50" |
||||||
|
> |
||||||
|
<div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto"> |
||||||
|
<div |
||||||
|
ref={popupBodyEl} |
||||||
|
className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`} |
||||||
|
> |
||||||
|
<UserProgressModalHeader |
||||||
|
isLoading={isLoading} |
||||||
|
progressResponse={progressResponse} |
||||||
|
/> |
||||||
|
|
||||||
|
<div ref={resourceSvgEl} className="px-4 pb-2"> |
||||||
|
<ReadonlyEditor |
||||||
|
variant="modal" |
||||||
|
roadmap={roadmap!} |
||||||
|
className="min-h-[400px]" |
||||||
|
onRendered={(wrapperRef: RefObject<HTMLDivElement>) => { |
||||||
|
const { |
||||||
|
done = [], |
||||||
|
learning = [], |
||||||
|
skipped = [], |
||||||
|
} = progressResponse?.progress || {}; |
||||||
|
|
||||||
|
done?.forEach((topicId: string) => { |
||||||
|
topicSelectorAll(topicId, wrapperRef?.current!).forEach( |
||||||
|
(el) => { |
||||||
|
el.classList.add('done'); |
||||||
|
}, |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
learning?.forEach((topicId: string) => { |
||||||
|
topicSelectorAll(topicId, wrapperRef?.current!).forEach( |
||||||
|
(el) => { |
||||||
|
el.classList.add('learning'); |
||||||
|
}, |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
skipped?.forEach((topicId: string) => { |
||||||
|
topicSelectorAll(topicId, wrapperRef?.current!).forEach( |
||||||
|
(el) => { |
||||||
|
el.classList.add('skipped'); |
||||||
|
}, |
||||||
|
); |
||||||
|
}); |
||||||
|
}} |
||||||
|
fontFamily="Balsamiq Sans" |
||||||
|
fontURL="/fonts/balsamiq.woff2" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button |
||||||
|
type="button" |
||||||
|
className={`absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-gray-100 bg-transparent p-1.5 text-sm text-gray-400 hover:text-gray-900 lg:hidden`} |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
<img alt={'close'} src={CloseIcon.src} className="h-4 w-4" /> |
||||||
|
<span className="sr-only">Close modal</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,79 @@ |
|||||||
|
import type { UserProgressResponse } from './UserProgressModal'; |
||||||
|
|
||||||
|
type UserProgressModalHeaderProps = { |
||||||
|
isLoading: boolean; |
||||||
|
progressResponse: UserProgressResponse | undefined; |
||||||
|
}; |
||||||
|
|
||||||
|
export function UserProgressModalHeader(props: UserProgressModalHeaderProps) { |
||||||
|
const { isLoading, progressResponse } = props; |
||||||
|
|
||||||
|
const user = progressResponse?.user; |
||||||
|
const progress = progressResponse?.progress; |
||||||
|
|
||||||
|
const userProgressTotal = progress?.total || 0; |
||||||
|
const userDone = progress?.done?.length || 0; |
||||||
|
const progressPercentage = |
||||||
|
Math.round((userDone / userProgressTotal) * 100) || 0; |
||||||
|
const userLearning = progress?.learning?.length || 0; |
||||||
|
const userSkipped = progress?.skipped?.length || 0; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="p-4"> |
||||||
|
<div className="mb-5 mt-0 min-h-[28px] text-left sm:text-center md:mt-4 md:h-[60px]"> |
||||||
|
<h2 className={'mb-1 text-lg font-bold md:text-2xl'}> |
||||||
|
{user?.name}'s Progress |
||||||
|
</h2> |
||||||
|
<p |
||||||
|
className={ |
||||||
|
'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base' |
||||||
|
} |
||||||
|
> |
||||||
|
You can close this popup and start tracking your progress. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<p |
||||||
|
className={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden`} |
||||||
|
> |
||||||
|
<span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
||||||
|
<span>{progressPercentage}</span>% Done |
||||||
|
</span> |
||||||
|
|
||||||
|
<span> |
||||||
|
<span>{userDone}</span> of <span>{userProgressTotal}</span> done |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
<p |
||||||
|
className={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${ |
||||||
|
isLoading ? 'striped-loader' : '' |
||||||
|
}`}
|
||||||
|
> |
||||||
|
<span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
||||||
|
<span>{progressPercentage}</span>% Done |
||||||
|
</span> |
||||||
|
|
||||||
|
<span> |
||||||
|
<span>{userDone}</span> completed |
||||||
|
</span> |
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span>{userLearning}</span> in progress |
||||||
|
</span> |
||||||
|
|
||||||
|
{userSkipped > 0 && ( |
||||||
|
<> |
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span>{userSkipped}</span> skipped |
||||||
|
</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span>{userProgressTotal}</span> Total |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue