mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-10-03 20:31:52 +02:00
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>
This commit is contained in:
@@ -9,9 +9,8 @@ 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 { Spinner } from '../ReactIcons/Spinner';
|
||||
import { ErrorIcon } from '../ReactIcons/ErrorIcon';
|
||||
import { renderFlowJSON } from '../../../renderer/renderer';
|
||||
import { ProgressLoadingError } from './ProgressLoadingError';
|
||||
import { UserProgressModalHeader } from './UserProgressModalHeader';
|
||||
|
||||
export type ProgressMapProps = {
|
||||
userId?: string;
|
||||
@@ -21,7 +20,7 @@ export type ProgressMapProps = {
|
||||
isCustomResource?: boolean;
|
||||
};
|
||||
|
||||
type UserProgressResponse = {
|
||||
export type UserProgressResponse = {
|
||||
user: {
|
||||
_id: string;
|
||||
name: string;
|
||||
@@ -40,7 +39,6 @@ export function UserProgressModal(props: ProgressMapProps) {
|
||||
resourceType,
|
||||
userId: propUserId,
|
||||
onClose: onModalClose,
|
||||
isCustomResource,
|
||||
} = props;
|
||||
|
||||
const { s: userId = propUserId } = getUrlParams();
|
||||
@@ -69,12 +67,6 @@ export function UserProgressModal(props: ProgressMapProps) {
|
||||
resourceJsonUrl += `/best-practices/${resourceId}.json`;
|
||||
}
|
||||
|
||||
if (isCustomResource) {
|
||||
resourceJsonUrl = `${
|
||||
import.meta.env.PUBLIC_API_URL
|
||||
}/v1-get-roadmap/${resourceId}`;
|
||||
}
|
||||
|
||||
async function getUserProgress(
|
||||
userId: string,
|
||||
resourceType: string,
|
||||
@@ -101,12 +93,6 @@ export function UserProgressModal(props: ProgressMapProps) {
|
||||
throw error || new Error('Something went wrong. Please try again!');
|
||||
}
|
||||
|
||||
if (isCustomResource) {
|
||||
return await renderFlowJSON({
|
||||
nodes: roadmapJson?.nodes || [],
|
||||
edges: roadmapJson?.edges || [],
|
||||
});
|
||||
}
|
||||
return await wireframeJSONToSVG(roadmapJson, {
|
||||
fontURL: '/fonts/balsamiq.woff2',
|
||||
});
|
||||
@@ -180,14 +166,6 @@ export function UserProgressModal(props: ProgressMapProps) {
|
||||
el.removeAttribute('data-group-id');
|
||||
});
|
||||
|
||||
svg.querySelectorAll('[data-node-id]').forEach((el) => {
|
||||
el.removeAttribute('data-node-id');
|
||||
});
|
||||
|
||||
svg.querySelectorAll('[data-type]').forEach((el) => {
|
||||
el.removeAttribute('data-type');
|
||||
});
|
||||
|
||||
setResourceSvg(svg);
|
||||
setProgressResponse(user);
|
||||
})
|
||||
@@ -199,16 +177,6 @@ export function UserProgressModal(props: ProgressMapProps) {
|
||||
});
|
||||
}, [userId]);
|
||||
|
||||
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;
|
||||
|
||||
if (currentUser?.id === userId) {
|
||||
deleteUrlParam('s');
|
||||
return null;
|
||||
@@ -219,31 +187,7 @@ export function UserProgressModal(props: ProgressMapProps) {
|
||||
}
|
||||
|
||||
if (isLoading || error) {
|
||||
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>
|
||||
);
|
||||
return <ProgressLoadingError isLoading={isLoading} error={error} />;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -256,62 +200,10 @@ export function UserProgressModal(props: ProgressMapProps) {
|
||||
ref={popupBodyEl}
|
||||
className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`}
|
||||
>
|
||||
<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>
|
||||
<UserProgressModalHeader
|
||||
isLoading={isLoading}
|
||||
progressResponse={progressResponse}
|
||||
/>
|
||||
|
||||
<div
|
||||
ref={resourceSvgEl}
|
||||
|
Reference in New Issue
Block a user