github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor Readonly editor

Browse Source
feat/readonly-editor
Arik Chakma 1 year ago
parent aa2bb3484b
commit 7aba00b372
4 changed files with 24 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .gitignore
  2. 28
      src/components/CustomRoadmap/FlowRoadmapRenderer.tsx
  3. 42
      src/components/TeamProgress/MemberCustomProgressModal.tsx
  4. 34
      src/components/UserProgress/UserCustomProgressModal.tsx

4
.gitignore vendored
Unescape View File

@ -27,4 +27,6 @@ pnpm-debug.log*
/playwright-report/
/playwright/.cache/
tests-examples
*.csv
*.csv
/editor/*

28
src/components/CustomRoadmap/FlowRoadmapRenderer.tsx
Unescape View File

@ -1,4 +1,4 @@
import { ReadonlyEditor } from '@roadmapsh/web-draw/src/editor/readonly-editor';
import { ReadonlyEditor } from '../../../editor/readonly-editor';
import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
import {
renderResourceProgress,
@ -11,12 +11,6 @@ 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 {
INITIAL_DESKTOP_ZOOM,
INITIAL_MOBILE_ZOOM,
calculateDimensions,
} from '@roadmapsh/web-draw/src/editor/utils/roadmap';
import { isMobile } from '@roadmapsh/web-draw/src/editor/utils/is-mobile';
import { EmptyRoadmap } from './EmptyRoadmap';
import { cn } from '../../lib/classname';
@ -31,20 +25,7 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
const [hideRenderer, setHideRenderer] = useState(false);
const editorWrapperRef = useRef<HTMLDivElement>(null);
const initialZoom = useMemo(
() => (isMobile() ? INITIAL_MOBILE_ZOOM : INITIAL_DESKTOP_ZOOM),
[],
);
const toast = useToast();
const { measuredHeight } = useMemo(
() =>
calculateDimensions({
nodes: roadmap?.nodes,
padding: 100,
}),
[roadmap?.nodes],
);
async function updateTopicStatus(
topicId: string,
@ -150,15 +131,10 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
<ReadonlyEditor
ref={editorWrapperRef}
roadmap={roadmap}
style={{
height: measuredHeight * initialZoom,
}}
className={cn(
roadmap?.nodes?.length === 0
? 'grow'
: isMobile()
? 'min-h-0'
: 'min-h-[1000px]',
: 'min-h-0 max-md:min-h-[1000px]',
)}
onRendered={() => {
renderResourceProgress('roadmap', roadmapId).then(() => {

42
src/components/TeamProgress/MemberCustomProgressModal.tsx
Unescape View File

@ -3,9 +3,7 @@ import {
useEffect,
useState,
type MouseEvent,
useMemo,
useRef,
type RefObject,
} from 'react';
import { Spinner } from '../ReactIcons/Spinner';
import '../FrameRenderer/FrameRenderer.css';
@ -22,10 +20,8 @@ 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 '@roadmapsh/web-draw/src/editor/readonly-editor';
import { ReadonlyEditor } from '../../../editor/readonly-editor';
import type { Node } from 'reactflow';
import { calculateDimensions } from '@roadmapsh/web-draw/src/editor/utils/roadmap';
import { isMobile } from '@roadmapsh/web-draw/src/editor/utils/is-mobile';
import { useKeydown } from '../../hooks/use-keydown';
import { useOutsideClick } from '../../hooks/use-outside-click';
import { MemberProgressModalHeader } from './MemberProgressModalHeader';
@ -67,17 +63,6 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
const [isLoading, setIsLoading] = useState(true);
const toast = useToast();
const initialZoom = useMemo(() => (isMobile() ? 0.35 : 0.7), []);
const { measuredHeight } = useMemo(
() =>
calculateDimensions({
nodes: roadmap?.nodes || [],
padding: 100,
}),
[roadmap?.nodes]
);
useKeydown('Escape', () => onClose());
useOutsideClick(popupBodyEl, () => onClose());
@ -85,12 +70,12 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
teamId: string,
memberId: string,
resourceType: string,
resourceId: 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}`
}/v1-get-member-resource-progress/${teamId}/${memberId}?resourceType=${resourceType}&resourceId=${resourceId}`,
);
if (error || !response) {
toast.error(error?.message || 'Failed to get member progress');
@ -104,7 +89,7 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
async function getRoadmap() {
const { response, error } = await httpGet<GetRoadmapResponse>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${resourceId}`
`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${resourceId}`,
);
if (error || !response) {
@ -149,14 +134,14 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
resourceType: resourceType as ResourceType,
topicId,
},
newStatus
newStatus,
)
.then(() => {
renderTopicProgress(topicId, newStatus);
getMemberProgress(teamId, member._id, resourceType, resourceId).then(
(data) => {
setMemberProgress(data);
}
},
);
})
.catch((err) => {
@ -197,7 +182,7 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
const isCurrentStatusLearning = target?.classList.contains('learning');
updateTopicStatus(
node.id,
isCurrentStatusLearning ? 'pending' : 'learning'
isCurrentStatusLearning ? 'pending' : 'learning',
);
}, []);
@ -250,13 +235,8 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
{!isLoading && roadmap && (
<div className="px-4 pb-2">
<ReadonlyEditor
variant="modal"
roadmap={roadmap!}
style={{
height: measuredHeight * initialZoom,
}}
zoom={{
initial: initialZoom,
}}
className="min-h-[400px]"
onRendered={() => {
const {
@ -268,13 +248,13 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
done.forEach((id: string) => renderTopicProgress(id, 'done'));
learning.forEach((id: string) =>
renderTopicProgress(id, 'learning')
renderTopicProgress(id, 'learning'),
);
skipped.forEach((id: string) =>
renderTopicProgress(id, 'skipped')
renderTopicProgress(id, 'skipped'),
);
removed.forEach((id: string) =>
renderTopicProgress(id, 'removed')
renderTopicProgress(id, 'removed'),
);
}}
onTopicRightClick={handleTopicRightClick}

34
src/components/UserProgress/UserCustomProgressModal.tsx
Unescape View File

@ -8,9 +8,7 @@ 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 '@roadmapsh/web-draw/src/editor/readonly-editor';
import { isMobile } from '@roadmapsh/web-draw/src/editor/utils/is-mobile';
import { calculateDimensions } from '@roadmapsh/web-draw/src/editor/utils/roadmap';
import { ReadonlyEditor } from '../../../editor/readonly-editor';
import { ProgressLoadingError } from './ProgressLoadingError';
import { UserProgressModalHeader } from './UserProgressModalHeader';
@ -61,26 +59,15 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState('');
const initialZoom = useMemo(() => (isMobile() ? 0.35 : 0.7), []);
const { measuredHeight } = useMemo(
() =>
calculateDimensions({
nodes: roadmap?.nodes || [],
padding: 100,
}),
[roadmap?.nodes]
);
async function getUserProgress(
userId: string,
resourceType: string,
resourceId: 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}`
}/v1-get-user-progress/${userId}?resourceType=${resourceType}&resourceId=${resourceId}`,
);
if (error || !response) {
@ -92,7 +79,7 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
async function getRoadmapSVG(): Promise<GetRoadmapResponse> {
const { error, response: roadmapData } = await httpGet<GetRoadmapResponse>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${resourceId}`
`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${resourceId}`,
);
if (error || !roadmapData) {
throw error || new Error('Something went wrong. Please try again!');
@ -177,13 +164,8 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
<div ref={resourceSvgEl} className="px-4 pb-2">
<ReadonlyEditor
variant="modal"
roadmap={roadmap!}
style={{
height: measuredHeight * initialZoom,
}}
zoom={{
initial: initialZoom,
}}
className="min-h-[400px]"
onRendered={(wrapperRef: RefObject<HTMLDivElement>) => {
const {
@ -196,7 +178,7 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
topicSelectorAll(topicId, wrapperRef?.current!).forEach(
(el) => {
el.classList.add('done');
}
},
);
});
@ -204,7 +186,7 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
topicSelectorAll(topicId, wrapperRef?.current!).forEach(
(el) => {
el.classList.add('learning');
}
},
);
});
@ -212,7 +194,7 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
topicSelectorAll(topicId, wrapperRef?.current!).forEach(
(el) => {
el.classList.add('skipped');
}
},
);
});
}}

Write Preview
Loading…
Cancel
Save