From d103bc629c9aca8610c31a3669e2453f84e5634a Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Wed, 15 Nov 2023 02:46:45 +0000 Subject: [PATCH] Topic links contribution functionality --- src/components/ReactIcons/GitHubIcon.tsx | 2 +- src/components/TopicDetail/TopicDetail.tsx | 63 ++++++++-------------- 2 files changed, 23 insertions(+), 42 deletions(-) diff --git a/src/components/ReactIcons/GitHubIcon.tsx b/src/components/ReactIcons/GitHubIcon.tsx index 083dcd2f9..7beb1dea6 100644 --- a/src/components/ReactIcons/GitHubIcon.tsx +++ b/src/components/ReactIcons/GitHubIcon.tsx @@ -13,7 +13,7 @@ export function GitHubIcon(props: GitHubIconProps) { ); diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx index 968e27cf1..489a4fdaa 100644 --- a/src/components/TopicDetail/TopicDetail.tsx +++ b/src/components/TopicDetail/TopicDetail.tsx @@ -15,7 +15,6 @@ import { } from '../../lib/resource-progress'; import { pageProgressMessage, sponsorHidden } from '../../stores/page'; import { TopicProgressButton } from './TopicProgressButton'; -import { ContributionForm } from './ContributionForm'; import { showLoginPopup } from '../../lib/popup'; import { useToast } from '../../hooks/use-toast'; import type { @@ -27,6 +26,7 @@ import { cn } from '../../lib/classname'; import { Ban, FileText, X } from 'lucide-react'; import { getUrlParams } from '../../lib/browser'; import { Spinner } from '../ReactIcons/Spinner'; +import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx'; type TopicDetailProps = { canSubmitContribution: boolean; @@ -44,7 +44,7 @@ const linkTypes: Record = { export function TopicDetail(props: TopicDetailProps) { const { canSubmitContribution } = props; - const [contributionAlertMessage, setContributionAlertMessage] = useState(''); + const [hasEnoughLinks, setHasEnoughLinks] = useState(false); const [isActive, setIsActive] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isContributing, setIsContributing] = useState(false); @@ -66,12 +66,10 @@ export function TopicDetail(props: TopicDetailProps) { // Close the topic detail when user clicks outside the topic detail useOutsideClick(topicRef, () => { setIsActive(false); - setIsContributing(false); }); useKeydown('Escape', () => { setIsActive(false); - setIsContributing(false); }); // Toggle topic is available even if the component UI is not active @@ -120,7 +118,6 @@ export function TopicDetail(props: TopicDetailProps) { setIsActive(true); sponsorHidden.set(true); - setContributionAlertMessage(''); setTopicId(topicId); setResourceType(resourceType); setResourceId(resourceId); @@ -159,6 +156,13 @@ export function TopicDetail(props: TopicDetailProps) { let topicHtml = ''; if (!isCustomResource) { topicHtml = response as string; + const topicDom = new DOMParser().parseFromString( + topicHtml, + 'text/html', + ); + const links = topicDom.querySelectorAll('a'); + + setHasEnoughLinks(links.length >= 3); } else { setLinks((response as RoadmapContentDocument)?.links || []); setTopicTitle((response as RoadmapContentDocument)?.title || ''); @@ -186,6 +190,8 @@ export function TopicDetail(props: TopicDetailProps) { } const hasContent = topicHtml?.length > 0 || links?.length > 0 || topicTitle; + const dataDir = resourceType === 'roadmap' ? 'roadmaps' : 'best-practices'; + const githubBaseUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/${dataDir}/${resourceId}/content`; return (
@@ -204,21 +210,6 @@ export function TopicDetail(props: TopicDetailProps) {
)} - {!isLoading && isContributing && ( - { - if (message) { - setContributionAlertMessage(message); - } - - setIsContributing(false); - }} - /> - )} - {!isContributing && !isLoading && !error && ( <> {/* Actions for the topic */} @@ -229,7 +220,6 @@ export function TopicDetail(props: TopicDetailProps) { resourceType={resourceType} onClose={() => { setIsActive(false); - setIsContributing(false); }} /> @@ -239,7 +229,6 @@ export function TopicDetail(props: TopicDetailProps) { className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" onClick={() => { setIsActive(false); - setIsContributing(false); }} > @@ -292,29 +281,21 @@ export function TopicDetail(props: TopicDetailProps) { )} {/* Contribution */} - {canSubmitContribution && ( + {canSubmitContribution && !hasEnoughLinks && (

- Help others learn by submitting links to learn more about this - topic{' '} + Help us improve this introduction and submit a link to a good + article, podcast, video, or any other resource that helped you + understand this topic better.

- + + Edit this Content +
)}