Kamran Ahmed
2 years ago
parent
f83cd701e9
commit
78e4c38c97
23 changed files with 481 additions and 184 deletions
@ -1,29 +0,0 @@ |
||||
--- |
||||
const { ...props } = Astro.props; |
||||
|
||||
export type Props = astroHTML.JSX.HTMLAttributes & {}; |
||||
--- |
||||
|
||||
<div role='status'> |
||||
<svg |
||||
aria-hidden='true' |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
fill='none' |
||||
viewBox='0 0 24 24' |
||||
class:list={[`animate-spin h-5 w-5`, props.class]} |
||||
{...props} |
||||
> |
||||
<circle |
||||
class='stroke-[4px] opacity-25' |
||||
cx='12' |
||||
cy='12' |
||||
r='10' |
||||
stroke='currentColor'></circle> |
||||
<path |
||||
class='opacity-75' |
||||
fill='currentColor' |
||||
d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z' |
||||
></path> |
||||
</svg> |
||||
<span class='sr-only'>Loading</span> |
||||
</div> |
||||
@ -1,26 +0,0 @@ |
||||
export default function Spinner({ className }: { className?: string }) { |
||||
return ( |
||||
<div role="status"> |
||||
<svg |
||||
className={`h-5 w-5 animate-spin ${className}`} |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
fill="none" |
||||
viewBox="0 0 24 24" |
||||
> |
||||
<circle |
||||
className="stroke-[4px] opacity-25" |
||||
cx="12" |
||||
cy="12" |
||||
r="10" |
||||
stroke="currentColor" |
||||
></circle> |
||||
<path |
||||
className="opacity-75" |
||||
fill="currentColor" |
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" |
||||
></path> |
||||
</svg> |
||||
<span class="sr-only">Loading</span> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,212 @@ |
||||
import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; |
||||
import SpinnerIcon from '../../icons/spinner.svg'; |
||||
import CheckIcon from '../../icons/check.svg'; |
||||
import ResetIcon from '../../icons/reset.svg'; |
||||
import CloseIcon from '../../icons/close.svg'; |
||||
|
||||
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||
import { useLoadTopic } from '../../hooks/use-load-topic'; |
||||
import { httpGet } from '../../lib/http'; |
||||
import { isLoggedIn } from '../../lib/jwt'; |
||||
import { |
||||
isTopicDone, |
||||
ResourceType, |
||||
toggleMarkTopicDone, |
||||
} from '../../lib/user-resource-progress'; |
||||
import { useKeydown } from '../../hooks/use-keydown'; |
||||
|
||||
export function TopicDetail() { |
||||
const [isActive, setIsActive] = useState(false); |
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const [error, setError] = useState(''); |
||||
const [topicHtml, setTopicHtml] = useState(''); |
||||
|
||||
const [isDone, setIsDone] = useState<boolean>(); |
||||
const [isUpdatingProgress, setIsUpdatingProgress] = useState(true); |
||||
|
||||
const isGuest = useMemo(() => !isLoggedIn(), []); |
||||
const topicRef = useRef<HTMLDivElement>(null); |
||||
|
||||
// Details of the currently loaded topic
|
||||
const [topicId, setTopicId] = useState(''); |
||||
const [resourceId, setResourceId] = useState(''); |
||||
const [resourceType, setResourceType] = useState<ResourceType>('roadmap'); |
||||
|
||||
const toggleResourceProgress = (isDone: boolean) => { |
||||
setIsUpdatingProgress(true); |
||||
toggleMarkTopicDone({ topicId, resourceId, resourceType }, isDone) |
||||
.then(() => { |
||||
setIsDone(isDone); |
||||
setIsActive(false); |
||||
}) |
||||
.catch(err => { |
||||
alert(err.message); |
||||
console.error(err); |
||||
}) |
||||
.finally(() => { |
||||
setIsUpdatingProgress(false); |
||||
}); |
||||
|
||||
console.log('toggle', isDone); |
||||
}; |
||||
|
||||
// Load the topic status when the topic detail is active
|
||||
useEffect(() => { |
||||
if (!topicId || !resourceId || !resourceType) { |
||||
return; |
||||
} |
||||
|
||||
setIsUpdatingProgress(true); |
||||
isTopicDone({ topicId, resourceId, resourceType }) |
||||
.then((status: boolean) => { |
||||
setIsUpdatingProgress(false); |
||||
setIsDone(status); |
||||
}) |
||||
.catch(console.error); |
||||
}, [topicId, resourceId, resourceType]); |
||||
|
||||
// Close the topic detail when user clicks outside the topic detail
|
||||
useOutsideClick(topicRef, () => { |
||||
setIsActive(false); |
||||
}); |
||||
|
||||
useKeydown('Escape', () => { |
||||
setIsActive(false); |
||||
}); |
||||
|
||||
// Load the topic detail when the topic detail is active
|
||||
useLoadTopic(({ topicId, resourceType, resourceId }) => { |
||||
setIsLoading(true); |
||||
setIsActive(true); |
||||
|
||||
setTopicId(topicId); |
||||
setResourceType(resourceType); |
||||
setResourceId(resourceId); |
||||
|
||||
const topicPartial = topicId.replaceAll(':', '/'); |
||||
const topicUrl = |
||||
resourceType === 'roadmap' |
||||
? `/${resourceId}/${topicPartial}` |
||||
: `/best-practices/${resourceId}/${topicPartial}`; |
||||
|
||||
httpGet<string>( |
||||
topicUrl, |
||||
{}, |
||||
{ |
||||
headers: { |
||||
Accept: 'text/html', |
||||
}, |
||||
} |
||||
) |
||||
.then(({ response }) => { |
||||
if (!response) { |
||||
setError('Topic not found.'); |
||||
return; |
||||
} |
||||
|
||||
// It's full HTML with page body, head etc.
|
||||
// We only need the inner HTML of the #main-content
|
||||
const node = new DOMParser().parseFromString(response, 'text/html'); |
||||
const topicHtml = node?.getElementById('main-content')?.outerHTML || ''; |
||||
|
||||
setIsLoading(false); |
||||
setTopicHtml(topicHtml); |
||||
}) |
||||
.catch((err) => { |
||||
setError('Something went wrong. Please try again later.'); |
||||
setIsLoading(false); |
||||
}); |
||||
}); |
||||
|
||||
if (!isActive) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<div |
||||
ref={topicRef} |
||||
className="fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 sm:max-w-[600px] sm:p-6" |
||||
> |
||||
{isLoading && ( |
||||
<div className="flex w-full justify-center"> |
||||
<img |
||||
src={SpinnerIcon} |
||||
alt="Loading" |
||||
className="h-6 w-6 animate-spin fill-blue-600 text-gray-200 sm:h-12 sm:w-12" |
||||
/> |
||||
</div> |
||||
)} |
||||
|
||||
{!isLoading && !error && ( |
||||
<> |
||||
{/* Actions for the topic */} |
||||
<div className="mb-2"> |
||||
{isGuest && ( |
||||
<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={() => setIsActive(false)} |
||||
> |
||||
<img alt="Check" src={CheckIcon} /> |
||||
<span className="ml-2">Mark as Done</span> |
||||
</button> |
||||
)} |
||||
|
||||
{!isGuest && ( |
||||
<> |
||||
{isUpdatingProgress && ( |
||||
<button className="inline-flex cursor-default items-center rounded-md border border-gray-300 bg-white p-1 px-2 text-sm text-black"> |
||||
<img |
||||
alt="Check" |
||||
class="h-4 w-4 animate-spin" |
||||
src={SpinnerIcon} |
||||
/> |
||||
<span className="ml-2">Updating Status..</span> |
||||
</button> |
||||
)} |
||||
{!isUpdatingProgress && !isDone && ( |
||||
<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={() => toggleResourceProgress(true)} |
||||
> |
||||
<img alt="Check" class="h-4 w-4" src={CheckIcon} /> |
||||
<span className="ml-2">Mark as Done</span> |
||||
</button> |
||||
)} |
||||
|
||||
{!isUpdatingProgress && isDone && ( |
||||
<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={() => toggleResourceProgress(false)} |
||||
> |
||||
<img alt="Check" class="h-4" src={ResetIcon} /> |
||||
<span className="ml-2">Mark as Pending</span> |
||||
</button> |
||||
)} |
||||
</> |
||||
)} |
||||
|
||||
<button |
||||
type="button" |
||||
id="close-topic" |
||||
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)} |
||||
> |
||||
<img alt="Close" class="h-5 w-5" src={CloseIcon} /> |
||||
</button> |
||||
</div> |
||||
|
||||
{/* Topic Content */} |
||||
<div |
||||
id="topic-content" |
||||
className="prose prose-quoteless prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5" |
||||
dangerouslySetInnerHTML={{ __html: topicHtml }} |
||||
></div> |
||||
</> |
||||
)} |
||||
</div> |
||||
<div class="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import { useEffect, useState } from 'preact/hooks'; |
||||
|
||||
export function useKeydown(keyName: string, callback: any) { |
||||
useEffect(() => { |
||||
const listener = (event: any) => { |
||||
if (event.key.toLowerCase() === keyName.toLowerCase()) { |
||||
callback(); |
||||
} |
||||
}; |
||||
|
||||
window.addEventListener('keydown', listener); |
||||
return () => { |
||||
window.removeEventListener('keydown', listener); |
||||
}; |
||||
}, []); |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
import { useEffect } from 'preact/hooks'; |
||||
import type {ResourceType} from "../components/TopicDetail/TopicDetail"; |
||||
|
||||
type CallbackType = (data: { |
||||
resourceType: ResourceType; |
||||
resourceId: string; |
||||
topicId: string; |
||||
}) => void; |
||||
|
||||
export function useLoadTopic(callback: CallbackType) { |
||||
useEffect(() => { |
||||
function handleTopicClick(e: any) { |
||||
const { resourceType, resourceId, topicId } = e.detail; |
||||
|
||||
callback({ |
||||
resourceType, |
||||
resourceId, |
||||
topicId, |
||||
}); |
||||
} |
||||
|
||||
window.addEventListener(`roadmap.topic.click`, handleTopicClick); |
||||
window.addEventListener(`best-practice.topic.click`, handleTopicClick); |
||||
|
||||
return () => { |
||||
window.removeEventListener(`roadmap.topic.click`, handleTopicClick); |
||||
window.removeEventListener(`best-practice.topic.click`, handleTopicClick); |
||||
}; |
||||
}, []); |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
import { useEffect, useState } from 'preact/hooks'; |
||||
|
||||
export function useOutsideClick(ref: any, callback: any) { |
||||
useEffect(() => { |
||||
const listener = (event: any) => { |
||||
const isClickedOutside = !ref?.current?.contains(event.target); |
||||
if (isClickedOutside) { |
||||
callback(); |
||||
} |
||||
}; |
||||
|
||||
document.addEventListener('mousedown', listener); |
||||
document.addEventListener('touchstart', listener); |
||||
|
||||
return () => { |
||||
document.removeEventListener('mousedown', listener); |
||||
document.removeEventListener('touchstart', listener); |
||||
}; |
||||
}, [ref]); |
||||
} |
||||
|
Before Width: | Height: | Size: 230 B After Width: | Height: | Size: 208 B |
|
Before Width: | Height: | Size: 932 B After Width: | Height: | Size: 3.4 KiB |
@ -1,34 +0,0 @@ |
||||
import { httpGet, httpPatch } from './http'; |
||||
|
||||
export async function toggleMarkResourceDoneApi({ |
||||
resourceId, |
||||
resourceType, |
||||
topicId, |
||||
}: { |
||||
resourceId: string; |
||||
resourceType: 'roadmap' | 'best-practice'; |
||||
topicId: string; |
||||
}) { |
||||
return await httpPatch<{ |
||||
status: 'ok'; |
||||
}>(`${import.meta.env.PUBLIC_API_URL}/v1-toggle-mark-resource-done`, { |
||||
resourceId, |
||||
resourceType, |
||||
topicId, |
||||
}); |
||||
} |
||||
|
||||
export async function getUserResourceProgressApi({ |
||||
resourceId, |
||||
resourceType, |
||||
}: { |
||||
resourceId: string; |
||||
resourceType: 'roadmap' | 'best-practice'; |
||||
}) { |
||||
return await httpGet<{ |
||||
done: string[]; |
||||
}>(`${import.meta.env.PUBLIC_API_URL}/v1-get-user-resource-progress`, { |
||||
resourceId, |
||||
resourceType, |
||||
}); |
||||
} |
||||
@ -0,0 +1,112 @@ |
||||
import { httpGet, httpPatch } from './http'; |
||||
import Cookies from 'js-cookie'; |
||||
import { TOKEN_COOKIE_NAME } from './jwt'; |
||||
|
||||
export type ResourceType = 'roadmap' | 'best-practice'; |
||||
|
||||
type TopicMeta = { |
||||
topicId: string; |
||||
resourceType: ResourceType; |
||||
resourceId: string; |
||||
}; |
||||
|
||||
export async function isTopicDone(topic: TopicMeta): Promise<boolean> { |
||||
const { topicId, resourceType, resourceId } = topic; |
||||
const doneItems = await getUserResourceProgress(resourceType, resourceId); |
||||
|
||||
if (!doneItems) { |
||||
return false; |
||||
} |
||||
|
||||
return doneItems.includes(topicId); |
||||
} |
||||
|
||||
export async function toggleMarkTopicDone( |
||||
topic: TopicMeta, |
||||
isDone: boolean |
||||
): Promise<void> { |
||||
const { topicId, resourceType, resourceId } = topic; |
||||
|
||||
const { response, error } = await httpPatch<{ done: string[] }>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-toggle-mark-resource-done`, |
||||
{ |
||||
topicId, |
||||
resourceType, |
||||
resourceId, |
||||
isDone, |
||||
} |
||||
); |
||||
|
||||
if (error || !response?.done) { |
||||
throw new Error(error?.message || 'Something went wrong'); |
||||
} |
||||
|
||||
setUserResourceProgress(resourceType, resourceId, response.done); |
||||
} |
||||
export async function getUserResourceProgress( |
||||
resourceType: 'roadmap' | 'best-practice', |
||||
resourceId: string |
||||
): Promise<string[]> { |
||||
const progressKey = `${resourceType}-${resourceId}-progress`; |
||||
const rawProgress = localStorage.getItem(progressKey); |
||||
const progress = JSON.parse(rawProgress || 'null'); |
||||
|
||||
const progressTimestamp = progress?.timestamp; |
||||
const diff = new Date().getTime() - parseInt(progressTimestamp || '0', 10); |
||||
const isProgressExpired = diff > 10 * 60 * 1000; // 10 minutes
|
||||
|
||||
console.log(progressKey); |
||||
|
||||
if (!progress || isProgressExpired) { |
||||
return loadFreshProgress(resourceType, resourceId); |
||||
} |
||||
|
||||
return progress.done; |
||||
} |
||||
|
||||
async function loadFreshProgress( |
||||
resourceType: ResourceType, |
||||
resourceId: string |
||||
) { |
||||
const { response, error } = await httpGet<{ done: string[] }>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-resource-progress`, |
||||
{ |
||||
resourceType, |
||||
resourceId, |
||||
} |
||||
); |
||||
|
||||
if (error) { |
||||
if (error.status === 401) { |
||||
Cookies.remove(TOKEN_COOKIE_NAME); |
||||
window.location.reload(); |
||||
|
||||
return []; |
||||
} |
||||
|
||||
console.error(error); |
||||
return []; |
||||
} |
||||
|
||||
if (!response?.done) { |
||||
return []; |
||||
} |
||||
|
||||
setUserResourceProgress(resourceType, resourceId, response.done); |
||||
|
||||
return response.done; |
||||
} |
||||
|
||||
export function setUserResourceProgress( |
||||
resourceType: 'roadmap' | 'best-practice', |
||||
resourceId: string, |
||||
done: string[] |
||||
): void { |
||||
localStorage.setItem( |
||||
`${resourceType}-${resourceId}-progress`, |
||||
JSON.stringify({ |
||||
done, |
||||
timestamp: new Date().getTime(), |
||||
}) |
||||
); |
||||
} |
||||
Loading…
Reference in new issue