1
0
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:
Kamran Ahmed
2023-10-21 19:42:55 +01:00
committed by GitHub
parent d46cf26812
commit 3a0e588530
37 changed files with 3191 additions and 1611 deletions

View File

@@ -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}