info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-19 07:31:24 +02:00
Code Issues Releases Wiki Activity

Refactor update topic progress functionality

Browse Source
This commit is contained in:
Kamran Ahmed
2023-05-14 03:05:54 +01:00
parent 4a049b2a7a
commit d3d2ae5889
2 changed files with 10 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/TopicDetail/TopicDetail.tsx
View File

@@ -45,6 +45,7 @@ export function TopicDetail() {
} }
}; };
// Close the topic detail when user clicks outside the topic detail // Close the topic detail when user clicks outside the topic detail
useOutsideClick(topicRef, () => { useOutsideClick(topicRef, () => {
setIsActive(false); setIsActive(false);
@@ -169,6 +170,7 @@ export function TopicDetail() {
topicId={topicId} topicId={topicId}
resourceId={resourceId} resourceId={resourceId}
resourceType={resourceType} resourceType={resourceType}
onShowLoginPopup={showLoginPopup}
onClose={() => { onClose={() => {
setIsActive(false); setIsActive(false);
}} }}

69
src/components/TopicDetail/TopicProgressButton.tsx
View File

@@ -1,9 +1,6 @@
import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
import { useOutsideClick } from '../../hooks/use-outside-click'; import { useOutsideClick } from '../../hooks/use-outside-click';
import CheckIcon from '../../icons/check.svg';
import DownIcon from '../../icons/down.svg'; import DownIcon from '../../icons/down.svg';
import ProgressIcon from '../../icons/progress.svg';
import ResetIcon from '../../icons/reset.svg';
import SpinnerIcon from '../../icons/spinner.svg'; import SpinnerIcon from '../../icons/spinner.svg';
import { isLoggedIn } from '../../lib/jwt'; import { isLoggedIn } from '../../lib/jwt';
import { import {
@@ -19,6 +16,7 @@ type TopicProgressButtonProps = {
resourceId: string; resourceId: string;
resourceType: ResourceType; resourceType: ResourceType;
onShowLoginPopup: () => void;
onClose: () => void; onClose: () => void;
}; };
@@ -30,7 +28,7 @@ const statusColors: Record<ResourceProgressType, string> = {
}; };
export function TopicProgressButton(props: TopicProgressButtonProps) { export function TopicProgressButton(props: TopicProgressButtonProps) {
const { topicId, resourceId, resourceType, onClose } = props; const { topicId, resourceId, resourceType, onClose, onShowLoginPopup } = props;
const [isUpdatingProgress, setIsUpdatingProgress] = useState(true); const [isUpdatingProgress, setIsUpdatingProgress] = useState(true);
const [progress, setProgress] = useState<ResourceProgressType>('pending'); const [progress, setProgress] = useState<ResourceProgressType>('pending');
@@ -59,6 +57,12 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
}, [topicId, resourceId, resourceType]); }, [topicId, resourceId, resourceType]);
const handleUpdateResourceProgress = (progress: ResourceProgressType) => { const handleUpdateResourceProgress = (progress: ResourceProgressType) => {
if (isGuest) {
onClose();
onShowLoginPopup();
return;
}
setIsUpdatingProgress(true); setIsUpdatingProgress(true);
updateResourceProgress( updateResourceProgress(
{ {
@@ -170,61 +174,4 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
)} )}
</div> </div>
); );
if (isGuest) {
return (
<div className="flex items-center gap-2">
<button
data-popup="login-popup"
className="inline-flex items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700"
onClick={onClose}
>
<img alt="Check" class="w-3" src={CheckIcon} />
<span className="ml-2">Mark as Done</span>
</button>
<button
data-popup="login-popup"
className="inline-flex items-center rounded-md bg-[#dad1fd] p-1 px-2 text-sm text-[#0E033B] hover:bg-[#C4B6FC]"
onClick={onClose}
>
<img alt="Learning" class="w-4" src={ProgressIcon} />
<span className="ml-2">In Progress</span>
</button>
</div>
);
}
return (
<div class="flex items-center gap-2 rounded-md">
{allowMarkingDone && (
<button
className="inline-flex items-center rounded-md border border-green-600 bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700"
onClick={() => handleUpdateResourceProgress('done')}
>
<img alt="Check" class="w-3" src={CheckIcon} />
<span className="ml-1">Done</span>
</button>
)}
{allowMarkingLearning && (
<button
className="inline-flex items-center rounded-md bg-[#dad1fd] p-1 px-2 text-sm text-[#0E033B] hover:bg-[#C4B6FC]"
onClick={() => handleUpdateResourceProgress('learning')}
>
<img alt="Learning" className="w-4" src={ProgressIcon} />
<span className="ml-1">Doing</span>
</button>
)}
{allowMarkingPending && (
<button
className="inline-flex items-center rounded-md border border-red-600 bg-red-600 p-1 px-2 text-sm text-white hover:bg-red-700"
onClick={() => handleUpdateResourceProgress('pending')}
>
<img alt="Check" class="h-4" src={ResetIcon} />
<span className="ml-2">Pending</span>
</button>
)}
</div>
);
} }