https://roadmap.sh/assets/user-progress-modal-ClwaJPrJ.js

1import{j as e}from"./jsx-runtime-u17CrQMm.js";/* empty css                       */import{f as A,r as d}from"./chunk-LFPYN7LY-KHkXXmUu.js";import{h as q}from"./http-4vaxVFLS.js";import{t as y}from"./resource-progress-Cd5izrVF.js";import{M as D}from"./modal-loader-DeNzE1eJ.js";import{y as H}from"./index-H4kIRCHQ.js";import{u as E}from"./useQuery-HO6iJ4v2.js";import{b as $}from"./resource-progress-CgvwhPqs.js";import{u as F}from"./use-auth-D6DdYpn1.js";import{s as _}from"./jwt-CjJO7hEe.js";import{X as z}from"./x-CB3unu--.js";function B(g){const{isLoading:r,progressResponse:l}=g,h=l?.user,n=l?.progress,s=n?.total||0,c=n?.done?.length||0,o=Math.round(c/s*100)||0,i=n?.learning?.length||0,m=n?.skipped?.length||0;return e.jsxs("div",{className:"p-4",children:[e.jsxs("div",{className:"mt-0 mb-5 min-h-[28px] text-left sm:text-center md:mt-4 md:h-[60px]",children:[e.jsxs("h2",{className:"mb-1 text-lg font-bold md:text-2xl",children:[h?.name,"'s Progress"]}),e.jsx("p",{className:"hidden text-xs text-gray-500 sm:text-sm md:block md:text-base",children:"You can close this popup and start tracking your progress."})]}),e.jsxs("p",{className:"-mx-4 mb-3 flex items-center justify-start border-t border-b px-4 py-2 text-sm sm:hidden",children:[e.jsxs("span",{className:"mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium text-yellow-900 uppercase",children:[e.jsx("span",{children:o}),"% Done"]}),e.jsxs("span",{children:[e.jsx("span",{children:c})," of ",e.jsx("span",{children:s})," done"]})]}),e.jsxs("p",{className:`-mx-4 mb-3 hidden items-center justify-center border-t border-b py-2 text-sm sm:flex ${r?"striped-loader":""}`,children:[e.jsxs("span",{className:"mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium text-yellow-900 uppercase",children:[e.jsx("span",{children:o}),"% Done"]}),e.jsxs("span",{children:[e.jsx("span",{children:c})," completed"]}),e.jsx("span",{className:"mx-1.5 text-gray-400",children:"·"}),e.jsxs("span",{children:[e.jsx("span",{children:i})," in progress"]}),m>0&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"mx-1.5 text-gray-400",children:"·"}),e.jsxs("span",{children:[e.jsx("span",{children:m})," skipped"]})]}),e.jsx("span",{className:"mx-1.5 text-gray-400",children:"·"}),e.jsxs("span",{children:[e.jsx("span",{children:s})," Total"]})]})]})}function re(g){const{resourceId:r,resourceType:l="roadmap",userId:h,onClose:n}=g,[s,c]=A(),o=s.get("s")||h,i=d.useRef(null),m=d.useRef(null),b=F(),[w,v]=d.useState(!1);d.useEffect(()=>{!o||!r||v(!0)},[o,r]);let f=_.appUrl;l==="roadmap"?f+=`/${r}.json`:f+=`/best-practices/${r}.json`;const{data:N,isLoading:S,error:L}=E({queryKey:["resource-svg",{resourceType:l,resourceId:r}],queryFn:async()=>{const a=await q(f,void 0,{headers:{"Content-Type":"application/json"}});return H(a)}}),{data:u,isLoading:k,error:P}=E($({resourceId:r,resourceType:l,userId:o}));function M(){s.delete("s"),s.delete("roadmapId"),c(s,{preventScrollReset:!0}),v(!1),n&&n()}if(d.useEffect(()=>{const a=i.current;if(!a||!u)return;const{progress:U}=u,{done:C,learning:I,skipped:T}=U||{done:[],learning:[],skipped:[]};C?.forEach(t=>{y(t,a).forEach(p=>{p.classList.add("done")})}),I?.forEach(t=>{y(t,a).forEach(p=>{p.classList.add("learning")})}),T?.forEach(t=>{y(t,a).forEach(p=>{p.classList.add("skipped")})}),a.querySelectorAll(".clickable-group").forEach(t=>{t.classList.remove("clickable-group")}),a.querySelectorAll("[data-group-id]").forEach(t=>{t.removeAttribute("data-group-id")})},[i,u,N]),d.useEffect(()=>{b?.id===o&&(s.delete("s"),c(s,{preventScrollReset:!0}))},[b?.id,o]),!o||!r||!w)return null;const x=S||k,j=!x&&(L||P),R=j?j?.message||"Something went wrong. Please try again!":void 0;return x||j?e.jsx(D,{text:"Loading user progress...",isLoading:x,error:R}):e.jsx("div",{id:"user-progress-modal",className:"fixed top-0 right-0 left-0 z-100 h-full items-center justify-center overflow-x-hidden overflow-y-auto overscroll-contain bg-black/50",children:e.jsx("div",{className:"relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto",children:e.jsxs("div",{ref:m,className:"popup-body relative rounded-lg bg-white pt-px shadow",children:[e.jsx(B,{isLoading:x,progressResponse:u}),e.jsx("div",{id:"editor-roadmap",ref:i,className:"px-4 pb-2",dangerouslySetInnerHTML:{__html:N?.outerHTML||""}}),e.jsxs("button",{type:"button",className:"absolute top-3 right-2.5 ml-auto inline-flex items-center rounded-lg bg-gray-100 p-1.5 text-sm text-gray-400 hover:text-gray-900",onClick:M,children:[e.jsx(z,{className:"h-4 w-4"}),e.jsx("span",{className:"sr-only",children:"Close modal"})]})]})})})}export{re as U};