From 7aba00b3721a534668da9f972adf6ec0c28b871b Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Fri, 20 Oct 2023 01:20:21 +0600 Subject: [PATCH] Refactor Readonly editor --- .gitignore | 4 +- .../CustomRoadmap/FlowRoadmapRenderer.tsx | 28 +------------ .../MemberCustomProgressModal.tsx | 42 +++++-------------- .../UserProgress/UserCustomProgressModal.tsx | 34 ++++----------- 4 files changed, 24 insertions(+), 84 deletions(-) diff --git a/.gitignore b/.gitignore index 3e61d48a8..827ff5ee3 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,6 @@ pnpm-debug.log* /playwright-report/ /playwright/.cache/ tests-examples -*.csv \ No newline at end of file +*.csv + +/editor/* \ No newline at end of file diff --git a/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx b/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx index 640a32bd4..d6ea54058 100644 --- a/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx +++ b/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx @@ -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(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) { { renderResourceProgress('roadmap', roadmapId).then(() => { diff --git a/src/components/TeamProgress/MemberCustomProgressModal.tsx b/src/components/TeamProgress/MemberCustomProgressModal.tsx index 447dfed0c..e6bcf93ff 100644 --- a/src/components/TeamProgress/MemberCustomProgressModal.tsx +++ b/src/components/TeamProgress/MemberCustomProgressModal.tsx @@ -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( `${ 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( - `${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 && (
{ 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} diff --git a/src/components/UserProgress/UserCustomProgressModal.tsx b/src/components/UserProgress/UserCustomProgressModal.tsx index 9ff47e8dc..f79fd6068 100644 --- a/src/components/UserProgress/UserCustomProgressModal.tsx +++ b/src/components/UserProgress/UserCustomProgressModal.tsx @@ -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 { const { error, response } = await httpGet( `${ 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 { const { error, response: roadmapData } = await httpGet( - `${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) {
) => { 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'); - } + }, ); }); }}