Arik Chakma
3 months ago
parent
7da86f173b
commit
018a8d6f0f
5 changed files with 257 additions and 20 deletions
@ -0,0 +1,198 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { deleteUrlParam, getUrlParams } from '../../lib/browser'; |
||||||
|
import { ModalLoader } from '../UserProgress/ModalLoader'; |
||||||
|
import { Modal } from '../Modal'; |
||||||
|
import { httpGet, httpPost } from '../../lib/http'; |
||||||
|
import { |
||||||
|
submittedAlternatives, |
||||||
|
type AllowedVoteType, |
||||||
|
} from './ListProjectSolutions'; |
||||||
|
import { getRelativeTimeString } from '../../lib/date'; |
||||||
|
import { ArrowUpRight, ThumbsDown, ThumbsUp } from 'lucide-react'; |
||||||
|
import { VoteButton } from './VoteButton'; |
||||||
|
import { GitHubIcon } from '../ReactIcons/GitHubIcon'; |
||||||
|
import { isLoggedIn } from '../../lib/jwt'; |
||||||
|
import { showLoginPopup } from '../../lib/popup'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
|
||||||
|
type UserProjectSolutionResponse = { |
||||||
|
id?: string; |
||||||
|
|
||||||
|
startedAt?: Date; |
||||||
|
submittedAt?: Date; |
||||||
|
repositoryUrl?: string; |
||||||
|
|
||||||
|
upvotes?: number; |
||||||
|
downvotes?: number; |
||||||
|
|
||||||
|
voteType?: AllowedVoteType | 'none'; |
||||||
|
user: { |
||||||
|
id: string; |
||||||
|
name: string; |
||||||
|
avatar: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
type ProjectSolutionModalProps = { |
||||||
|
projectId: string; |
||||||
|
projectTitle: string; |
||||||
|
projectDescription: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ProjectSolutionModal(props: ProjectSolutionModalProps) { |
||||||
|
const { projectId, projectTitle, projectDescription } = props; |
||||||
|
|
||||||
|
const { u: userId } = getUrlParams(); |
||||||
|
if (!userId) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
const [error, setError] = useState(''); |
||||||
|
const [solution, setSolution] = useState<UserProjectSolutionResponse>(); |
||||||
|
|
||||||
|
const loadUserProjectSolution = async () => { |
||||||
|
setIsLoading(true); |
||||||
|
setError(''); |
||||||
|
|
||||||
|
const { response, error } = await httpGet<UserProjectSolutionResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-project-solution/${projectId}/${userId}`, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
setError(error?.message || 'Something went wrong'); |
||||||
|
setIsLoading(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setSolution(response); |
||||||
|
setIsLoading(false); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleSubmitVote = async ( |
||||||
|
solutionId: string, |
||||||
|
voteType: AllowedVoteType, |
||||||
|
) => { |
||||||
|
if (!isLoggedIn()) { |
||||||
|
showLoginPopup(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
pageProgressMessage.set('Submitting vote'); |
||||||
|
const { response, error } = await httpPost( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-vote-project/${solutionId}`, |
||||||
|
{ |
||||||
|
voteType, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Failed to submit vote'); |
||||||
|
pageProgressMessage.set(''); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
pageProgressMessage.set(''); |
||||||
|
setSolution((prev) => { |
||||||
|
if (!prev) { |
||||||
|
return prev; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
...prev, |
||||||
|
upvotes: response?.upvotes || 0, |
||||||
|
downvotes: response?.downvotes || 0, |
||||||
|
voteType, |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadUserProjectSolution().finally(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
if (isLoading || error) { |
||||||
|
return ( |
||||||
|
<ModalLoader |
||||||
|
text="Loading project solution..." |
||||||
|
isLoading={isLoading} |
||||||
|
error={error} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const avatar = solution?.user.avatar; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
onClose={() => { |
||||||
|
deleteUrlParam('u'); |
||||||
|
window.location.reload(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<div className="relative p-4"> |
||||||
|
<h1 className="text-xl font-semibold">{projectTitle}</h1> |
||||||
|
<p className="mt-1 max-w-xs text-sm text-gray-500"> |
||||||
|
{projectDescription} |
||||||
|
</p> |
||||||
|
|
||||||
|
<hr className="-mx-4 my-4 border-gray-300" /> |
||||||
|
|
||||||
|
<div className="flex items-center gap-1.5"> |
||||||
|
<img |
||||||
|
src={ |
||||||
|
avatar |
||||||
|
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}` |
||||||
|
: '/images/default-avatar.png' |
||||||
|
} |
||||||
|
alt={solution?.user?.name} |
||||||
|
className="mr-0.5 h-7 w-7 rounded-full" |
||||||
|
/> |
||||||
|
<span className="font-medium text-black">{solution?.user.name}</span> |
||||||
|
<span className="hidden sm:inline"> |
||||||
|
{submittedAlternatives[ |
||||||
|
Math.floor(Math.random() * submittedAlternatives.length) |
||||||
|
] || 'submitted their solution'} |
||||||
|
</span>{' '} |
||||||
|
<span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black"> |
||||||
|
{getRelativeTimeString(solution?.submittedAt!)} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="mt-4 flex items-center justify-between gap-2"> |
||||||
|
<a |
||||||
|
className="flex items-center gap-1 rounded-full border px-2 py-1 text-xs text-black transition-colors hover:border-black hover:bg-black hover:text-white" |
||||||
|
href={solution?.repositoryUrl} |
||||||
|
target="_blank" |
||||||
|
> |
||||||
|
<GitHubIcon className="h-4 w-4 text-current" /> |
||||||
|
View Solution |
||||||
|
</a> |
||||||
|
|
||||||
|
<div className="flex shrink-0 overflow-hidden rounded-full border"> |
||||||
|
<VoteButton |
||||||
|
icon={ThumbsUp} |
||||||
|
isActive={solution?.voteType === 'upvote'} |
||||||
|
count={solution?.upvotes || 0} |
||||||
|
onClick={() => { |
||||||
|
handleSubmitVote(solution?.id!, 'upvote'); |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<VoteButton |
||||||
|
icon={ThumbsDown} |
||||||
|
isActive={solution?.voteType === 'downvote'} |
||||||
|
count={solution?.downvotes || 0} |
||||||
|
hideCount={true} |
||||||
|
onClick={() => { |
||||||
|
handleSubmitVote(solution?.id!, 'downvote'); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue