feat: project without submission (#8530)
Arik Chakma
2 days ago
committed by
GitHub
parent
05db236a3c
commit
d36af2d3fa
10 changed files with 364 additions and 65 deletions
@ -0,0 +1,74 @@ |
||||
import { useMutation } from '@tanstack/react-query'; |
||||
import { queryClient } from '../../stores/query-client'; |
||||
import { Modal } from '../Modal'; |
||||
import { httpPost } from '../../lib/query-http'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { Loader2Icon } from 'lucide-react'; |
||||
import { projectStatusOptions } from '../../queries/project'; |
||||
|
||||
type CompleteProjectConfirmationProps = { |
||||
projectId: string; |
||||
onClose: () => void; |
||||
}; |
||||
|
||||
export function CompleteProjectConfirmation( |
||||
props: CompleteProjectConfirmationProps, |
||||
) { |
||||
const { onClose, projectId } = props; |
||||
|
||||
const toast = useToast(); |
||||
|
||||
const { mutate: completeProject, isPending: isCompletingProject } = |
||||
useMutation( |
||||
{ |
||||
mutationFn: () => { |
||||
return httpPost<{ |
||||
startedAt: Date; |
||||
}>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-mark-as-done-project/${projectId}`, |
||||
{}, |
||||
); |
||||
}, |
||||
onSettled: () => { |
||||
queryClient.invalidateQueries(projectStatusOptions(projectId)); |
||||
}, |
||||
onError: (error) => { |
||||
toast.error(error?.message || 'Failed to start project'); |
||||
}, |
||||
onSuccess: () => { |
||||
onClose(); |
||||
}, |
||||
}, |
||||
queryClient, |
||||
); |
||||
|
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||
<h2 className="mb-2 flex items-center gap-2.5 text-xl font-semibold"> |
||||
Complete Project |
||||
</h2> |
||||
<p className="text-sm text-gray-500"> |
||||
Are you sure you want to mark this project as completed? |
||||
</p> |
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-2"> |
||||
<button |
||||
onClick={onClose} |
||||
className="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-200" |
||||
> |
||||
Cancel |
||||
</button> |
||||
<button |
||||
onClick={() => completeProject()} |
||||
className="flex h-9 items-center justify-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700" |
||||
> |
||||
{isCompletingProject ? ( |
||||
<Loader2Icon className="h-4 w-4 animate-spin stroke-[2.5]" /> |
||||
) : ( |
||||
'Complete Project' |
||||
)} |
||||
</button> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,71 @@ |
||||
import { useMutation } from '@tanstack/react-query'; |
||||
import { queryClient } from '../../stores/query-client'; |
||||
import { Modal } from '../Modal'; |
||||
import { httpPost } from '../../lib/query-http'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { Loader2Icon } from 'lucide-react'; |
||||
import { projectStatusOptions } from '../../queries/project'; |
||||
|
||||
type StartProjectConfirmationProps = { |
||||
projectId: string; |
||||
onClose: () => void; |
||||
}; |
||||
|
||||
export function StartProjectConfirmation(props: StartProjectConfirmationProps) { |
||||
const { onClose, projectId } = props; |
||||
|
||||
const toast = useToast(); |
||||
|
||||
const { mutate: startProject, isPending: isStartingProject } = useMutation( |
||||
{ |
||||
mutationFn: () => { |
||||
return httpPost<{ |
||||
startedAt: Date; |
||||
}>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-start-project/${projectId}`, |
||||
{}, |
||||
); |
||||
}, |
||||
onSettled: () => { |
||||
queryClient.invalidateQueries(projectStatusOptions(projectId)); |
||||
}, |
||||
onSuccess: () => { |
||||
onClose(); |
||||
}, |
||||
onError: (error) => { |
||||
toast.error(error?.message || 'Failed to start project'); |
||||
}, |
||||
}, |
||||
queryClient, |
||||
); |
||||
|
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||
<h2 className="mb-2 flex items-center gap-2.5 text-xl font-semibold"> |
||||
Start Project |
||||
</h2> |
||||
<p className="text-sm text-gray-500"> |
||||
Are you sure you want to start this project? |
||||
</p> |
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-2"> |
||||
<button |
||||
onClick={onClose} |
||||
className="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-200" |
||||
> |
||||
Cancel |
||||
</button> |
||||
<button |
||||
onClick={() => startProject()} |
||||
className="flex h-9 items-center justify-center gap-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-700" |
||||
> |
||||
{isStartingProject ? ( |
||||
<Loader2Icon className="h-4 w-4 animate-spin stroke-[2.5]" /> |
||||
) : ( |
||||
'Start Project' |
||||
)} |
||||
</button> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,123 @@ |
||||
import { CheckIcon, PlayIcon } from 'lucide-react'; |
||||
import { useEffect, useState } from 'react'; |
||||
import { StartProjectConfirmation } from '../StartProjectConfirmation'; |
||||
import { projectStatusOptions } from '../../../queries/project'; |
||||
import { queryClient } from '../../../stores/query-client'; |
||||
import { useQuery } from '@tanstack/react-query'; |
||||
import { cn } from '../../../lib/classname'; |
||||
import { isLoggedIn } from '../../../lib/jwt'; |
||||
import { showLoginPopup } from '../../../lib/popup'; |
||||
import { getRelativeTimeString } from '../../../lib/date'; |
||||
import { CompleteProjectConfirmation } from '../CompleteProjectConfirmation'; |
||||
|
||||
type ProjectTrackingActionsProps = { |
||||
projectId: string; |
||||
}; |
||||
|
||||
export function ProjectTrackingActions(props: ProjectTrackingActionsProps) { |
||||
const { projectId } = props; |
||||
|
||||
const { data: projectStatus } = useQuery( |
||||
projectStatusOptions(projectId), |
||||
queryClient, |
||||
); |
||||
|
||||
const [isLoading, setIsLoading] = useState(true); |
||||
const [isStartingProject, setIsStartingProject] = useState(false); |
||||
const [isCompletingProject, setIsCompletingProject] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
if (!projectStatus) { |
||||
return; |
||||
} |
||||
|
||||
setIsLoading(false); |
||||
}, [projectStatus]); |
||||
|
||||
const { startedAt, submittedAt } = projectStatus || {}; |
||||
const formattedStartedAt = startedAt ? getRelativeTimeString(startedAt) : ''; |
||||
const formattedSubmittedAt = submittedAt |
||||
? getRelativeTimeString(submittedAt) |
||||
: ''; |
||||
const isCompleted = !!submittedAt; |
||||
|
||||
return ( |
||||
<> |
||||
{isStartingProject && ( |
||||
<StartProjectConfirmation |
||||
onClose={() => setIsStartingProject(false)} |
||||
projectId={projectId} |
||||
/> |
||||
)} |
||||
|
||||
{isCompletingProject && ( |
||||
<CompleteProjectConfirmation |
||||
onClose={() => setIsCompletingProject(false)} |
||||
projectId={projectId} |
||||
/> |
||||
)} |
||||
|
||||
{!startedAt && ( |
||||
<button |
||||
onClick={() => { |
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
setIsStartingProject(true); |
||||
}} |
||||
className={cn( |
||||
'relative flex items-center gap-1.5 overflow-hidden rounded-full bg-purple-600 py-1 pr-2.5 pl-2 text-sm text-white hover:bg-purple-700', |
||||
isLoading && 'bg-white text-gray-500', |
||||
)} |
||||
disabled={isLoading} |
||||
> |
||||
<PlayIcon size={13} /> |
||||
<span>Start Working</span> |
||||
|
||||
{isLoading && ( |
||||
<div |
||||
className={cn('striped-loader absolute inset-0 z-10 bg-white')} |
||||
/> |
||||
)} |
||||
</button> |
||||
)} |
||||
|
||||
{startedAt && !isLoading && ( |
||||
<div className="flex flex-col gap-1"> |
||||
<button |
||||
onClick={() => setIsCompletingProject(true)} |
||||
className={cn( |
||||
'relative flex items-center gap-1.5 overflow-hidden rounded-full bg-green-600 py-1 pr-2.5 pl-2 text-sm text-white hover:bg-green-700', |
||||
isCompleted && |
||||
'cursor-default bg-gray-200 text-gray-500 hover:bg-gray-200', |
||||
)} |
||||
disabled={isCompleted} |
||||
> |
||||
<CheckIcon size={13} className="stroke-[2.5]" /> |
||||
{isCompleted ? ( |
||||
<span>Completed</span> |
||||
) : ( |
||||
<span>Mark as Completed</span> |
||||
)} |
||||
</button> |
||||
|
||||
<div className="text-end text-xs text-gray-500"> |
||||
{isCompleted ? ( |
||||
<> |
||||
Completed{' '} |
||||
<span className="font-medium">{formattedSubmittedAt}</span> |
||||
</> |
||||
) : ( |
||||
<> |
||||
Started working{' '} |
||||
<span className="font-medium">{formattedStartedAt}</span> |
||||
</> |
||||
)} |
||||
</div> |
||||
</div> |
||||
)} |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
import { queryOptions } from '@tanstack/react-query'; |
||||
import { httpGet } from '../lib/query-http'; |
||||
import { isLoggedIn } from '../lib/jwt'; |
||||
|
||||
type ProjectStatusResponse = { |
||||
id?: string; |
||||
|
||||
startedAt?: Date; |
||||
submittedAt?: Date; |
||||
repositoryUrl?: string; |
||||
|
||||
upvotes: number; |
||||
downvotes: number; |
||||
}; |
||||
|
||||
export function projectStatusOptions(projectId: string) { |
||||
return queryOptions({ |
||||
queryKey: ['project-status', projectId], |
||||
queryFn: () => { |
||||
return httpGet<ProjectStatusResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-project-status/${projectId}`, |
||||
{}, |
||||
); |
||||
}, |
||||
}); |
||||
} |
||||
Loading…
Reference in new issue