Arik Chakma
4 months ago
parent
169a8f0356
commit
8db22e81b1
5 changed files with 298 additions and 26 deletions
@ -0,0 +1,102 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import { StartProjectModal } from './StartProjectModal'; |
||||||
|
import { SubmitProjectModal } from './SubmitProjectModal'; |
||||||
|
|
||||||
|
type ProjectMilestoneStripProps = { |
||||||
|
projectId: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ProjectMilestoneStrip(props: ProjectMilestoneStripProps) { |
||||||
|
const { projectId } = props; |
||||||
|
|
||||||
|
const [stepIndex, setStepIndex] = useState(0); |
||||||
|
const [isStartProjectModalOpen, setIsStartProjectModalOpen] = useState(false); |
||||||
|
const [isSubmitProjectModalOpen, setIsSubmitProjectModalOpen] = |
||||||
|
useState(false); |
||||||
|
|
||||||
|
const startProjectModal = isStartProjectModalOpen ? ( |
||||||
|
<StartProjectModal onClose={() => setIsStartProjectModalOpen(false)} /> |
||||||
|
) : null; |
||||||
|
const submitProjectModal = isSubmitProjectModalOpen ? ( |
||||||
|
<SubmitProjectModal |
||||||
|
onClose={() => setIsSubmitProjectModalOpen(false)} |
||||||
|
projectId={projectId} |
||||||
|
onSubmit={() => setStepIndex(2)} |
||||||
|
/> |
||||||
|
) : null; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{startProjectModal} |
||||||
|
{submitProjectModal} |
||||||
|
|
||||||
|
<div className="relative -mx-2 -mt-2 mb-5 rounded-lg bg-gray-100/70 p-5"> |
||||||
|
<div className="grid grid-cols-4"> |
||||||
|
<div className="flex flex-col"> |
||||||
|
<MilestoneStep isActive={stepIndex === 1} /> |
||||||
|
|
||||||
|
<button |
||||||
|
className="mt-3 text-left text-sm font-medium text-blue-600 underline underline-offset-2" |
||||||
|
onClick={() => setIsStartProjectModalOpen(true)} |
||||||
|
> |
||||||
|
Start Project |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col"> |
||||||
|
<MilestoneStep isActive={stepIndex === 2} position="middle" /> |
||||||
|
|
||||||
|
<button |
||||||
|
className="mt-3 text-sm font-medium text-blue-600 underline underline-offset-2" |
||||||
|
onClick={() => setIsSubmitProjectModalOpen(true)} |
||||||
|
> |
||||||
|
Submit Solution |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col"> |
||||||
|
<MilestoneStep isActive={stepIndex === 2} position="middle" /> |
||||||
|
|
||||||
|
<span className="mt-3 w-full text-center text-sm font-medium"> |
||||||
|
Get 5 Likes |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col"> |
||||||
|
<MilestoneStep isActive={stepIndex === 2} position="end" /> |
||||||
|
|
||||||
|
<span className="mt-3 w-full text-right text-sm font-medium"> |
||||||
|
Get 10 Likes |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type MilestoneStepProps = { |
||||||
|
isActive: boolean; |
||||||
|
position?: 'start' | 'middle' | 'end'; |
||||||
|
}; |
||||||
|
|
||||||
|
function MilestoneStep(props: MilestoneStepProps) { |
||||||
|
const { isActive = false, position = 'start' } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
'relative h-1 w-full bg-gray-300', |
||||||
|
isActive && 'bg-gray-500', |
||||||
|
)} |
||||||
|
> |
||||||
|
<span |
||||||
|
className={cn( |
||||||
|
'absolute -top-[4px] size-3 -translate-x-1/2 rounded-full border bg-white', |
||||||
|
isActive && 'border-black bg-black', |
||||||
|
position === 'start' && 'left-0', |
||||||
|
position === 'middle' && 'left-1/2', |
||||||
|
position === 'end' && 'right-0 translate-x-1/2', |
||||||
|
)} |
||||||
|
></span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import { X } from 'lucide-react'; |
||||||
|
import { Modal } from '../Modal'; |
||||||
|
|
||||||
|
type StartProjectModalProps = { |
||||||
|
onClose: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function StartProjectModal(props: StartProjectModalProps) { |
||||||
|
const { onClose } = props; |
||||||
|
|
||||||
|
const projectTips = [ |
||||||
|
'Create a repository on GitHub', |
||||||
|
'Develop the required functionality', |
||||||
|
'Add a readme and make sure to link to the project page', |
||||||
|
'Once you are done, make sure to come back and submit your solution to get feedback from others.', |
||||||
|
'Feel free to join our discord and ask for help if you get stuck.', |
||||||
|
]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||||
|
<h2 className="mb-0.5 text-xl font-semibold">Started working...</h2> |
||||||
|
<p className="text-balance text-sm text-gray-500"> |
||||||
|
You have started working on the project. Here are some tips to get most |
||||||
|
out of it. |
||||||
|
</p> |
||||||
|
|
||||||
|
<ul className="ml-4 mt-4 list-disc space-y-1.5 marker:text-gray-400"> |
||||||
|
{projectTips.map((tip) => { |
||||||
|
return ( |
||||||
|
<li key={tip} className="text-balance"> |
||||||
|
{tip} |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
|
||||||
|
<p className="mt-4 font-medium">Happy coding!</p> |
||||||
|
|
||||||
|
<button |
||||||
|
className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black" |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
<X className="h-5 w-5" /> |
||||||
|
</button> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,136 @@ |
|||||||
|
import { X } from 'lucide-react'; |
||||||
|
import { Modal } from '../Modal'; |
||||||
|
import { useState, type FormEvent } from 'react'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
|
||||||
|
type SubmitProjectModalProps = { |
||||||
|
onClose: () => void; |
||||||
|
projectId: string; |
||||||
|
onSubmit: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function SubmitProjectModal(props: SubmitProjectModalProps) { |
||||||
|
const { onClose, projectId, onSubmit } = props; |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
const [error, setError] = useState(''); |
||||||
|
const [successMessage, setSuccessMessage] = useState(''); |
||||||
|
const [repoUrl, setRepoUrl] = useState(''); |
||||||
|
|
||||||
|
const handleSubmit = async (e: FormEvent) => { |
||||||
|
e.preventDefault(); |
||||||
|
try { |
||||||
|
setIsLoading(true); |
||||||
|
setError(''); |
||||||
|
setSuccessMessage(''); |
||||||
|
|
||||||
|
const repoUrlParts = repoUrl |
||||||
|
.replace(/https?:\/\/(www\.)?github\.com/, '') |
||||||
|
.split('/'); |
||||||
|
const username = repoUrlParts[1]; |
||||||
|
const repoName = repoUrlParts[2]; |
||||||
|
|
||||||
|
if (!username || !repoName) { |
||||||
|
throw new Error('Invalid GitHub repository URL'); |
||||||
|
} |
||||||
|
|
||||||
|
const mainApiUrl = `https://api.github.com/repos/${username}/${repoName}`; |
||||||
|
|
||||||
|
const allContentsUrl = `${mainApiUrl}/contents`; |
||||||
|
const allContentsResponse = await fetch(allContentsUrl); |
||||||
|
if (!allContentsResponse.ok) { |
||||||
|
const errorData = await allContentsResponse.json(); |
||||||
|
if (errorData?.status === 404) { |
||||||
|
throw new Error('Repository not found'); |
||||||
|
} |
||||||
|
|
||||||
|
throw new Error('Failed to fetch repository contents'); |
||||||
|
} |
||||||
|
|
||||||
|
const allContentsData = await allContentsResponse.json(); |
||||||
|
if (!Array.isArray(allContentsData)) { |
||||||
|
throw new Error('Failed to fetch repository contents'); |
||||||
|
} |
||||||
|
|
||||||
|
const readmeFile = allContentsData.find( |
||||||
|
(file) => file.name.toLowerCase() === 'readme.md', |
||||||
|
); |
||||||
|
if (!readmeFile || !readmeFile.url) { |
||||||
|
throw new Error('Readme file not found'); |
||||||
|
} |
||||||
|
|
||||||
|
const readmeUrl = readmeFile.url; |
||||||
|
const response = await fetch(readmeUrl); |
||||||
|
if (!response.ok || response.status === 404) { |
||||||
|
throw new Error('Readme file not found'); |
||||||
|
} |
||||||
|
|
||||||
|
const data = await response.json(); |
||||||
|
if (!data.content) { |
||||||
|
throw new Error('Readme file not found'); |
||||||
|
} |
||||||
|
|
||||||
|
const readmeContent = window.atob(data.content); |
||||||
|
const projectUrl = `${window.location.origin}/projects/${projectId}`; |
||||||
|
if (!readmeContent.includes(projectUrl)) { |
||||||
|
throw new Error('Project URL not found in the readme file'); |
||||||
|
} |
||||||
|
|
||||||
|
// TODO: Make API call to update the project status
|
||||||
|
setSuccessMessage('Repository verified successfully'); |
||||||
|
setIsLoading(false); |
||||||
|
onSubmit(); |
||||||
|
} catch (error: any) { |
||||||
|
console.error(error); |
||||||
|
setError(error?.message || 'Failed to verify repository'); |
||||||
|
setIsLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||||
|
<h2 className="mb-0.5 text-xl font-semibold"> |
||||||
|
Submit Link to the GitHub repository |
||||||
|
</h2> |
||||||
|
<p className="text-balance text-sm text-gray-500"> |
||||||
|
Make sure to have a readme file in your project repository containing |
||||||
|
the link to this project page. |
||||||
|
</p> |
||||||
|
|
||||||
|
<form className="mt-4" onSubmit={handleSubmit}> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
className="w-full rounded-lg border border-gray-300 p-2 focus:border-gray-500 focus:outline-none" |
||||||
|
placeholder="https://github.com/kamranahmedse/developer-roadmap" |
||||||
|
value={repoUrl} |
||||||
|
onChange={(e) => setRepoUrl(e.target.value)} |
||||||
|
/> |
||||||
|
|
||||||
|
{error && ( |
||||||
|
<p className="mt-2 text-sm font-medium text-red-500">{error}</p> |
||||||
|
)} |
||||||
|
|
||||||
|
{successMessage && ( |
||||||
|
<p className="mt-2 text-sm font-medium text-green-500"> |
||||||
|
{successMessage} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
|
||||||
|
<button |
||||||
|
type="submit" |
||||||
|
className="mt-2 w-full rounded-lg bg-black p-2 font-medium text-white disabled:opacity-50" |
||||||
|
disabled={isLoading} |
||||||
|
> |
||||||
|
{isLoading ? 'Verifying...' : 'Verify'} |
||||||
|
</button> |
||||||
|
</form> |
||||||
|
|
||||||
|
<button |
||||||
|
className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black" |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
<X className="h-5 w-5" /> |
||||||
|
</button> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue