info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-23 01:13:03 +02:00
Code Issues Releases Wiki Activity

Add upgrade and limits checks

Browse Source
This commit is contained in:
Kamran Ahmed
2025-07-29 21:56:33 +01:00
parent 3557132752
commit 989015c766
2 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx
View File

@@ -14,6 +14,8 @@ import { queryClient } from '../../stores/query-client';
import { userResourceProgressOptions } from '../../queries/resource-progress';
import { useAuth } from '../../hooks/use-auth';
import { roadmapJSONOptions } from '../../queries/roadmap';
import { isLoggedIn } from '../../lib/jwt';
import { showLoginPopup } from '../../lib/popup';
type PersonalizedRoadmapProps = {
roadmapId: string;
@@ -200,7 +202,14 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
) : (
<button
className="group inline-flex items-center gap-1.5 border-b-2 border-b-transparent px-2 pb-2.5 text-sm font-normal text-gray-400 transition-colors hover:text-gray-700"
onClick={() => setIsModalOpen(true)}
onClick={() => {
if (!isLoggedIn()) {
showLoginPopup();
return;
}
setIsModalOpen(true);
}}
disabled={isGenerating}
>
{isGenerating ? (

28
src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx
View File

@@ -1,6 +1,10 @@
import { PersonStandingIcon, Trash2 } from 'lucide-react';
import { useId, useState, type FormEvent } from 'react';
import { Modal } from '../Modal';
import { queryClient } from '../../stores/query-client';
import { aiLimitOptions } from '../../queries/ai-course';
import { useQuery } from '@tanstack/react-query';
import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
type PersonalizedRoadmapModalProps = {
onClose: () => void;
@@ -10,16 +14,34 @@ type PersonalizedRoadmapModalProps = {
};
export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
const { onClose, info: infoProp, onSubmit: onSubmitProp, onClearProgress } = props;
const {
onClose,
info: infoProp,
onSubmit: onSubmitProp,
onClearProgress,
} = props;
const [info, setInfo] = useState(infoProp);
const infoFieldId = useId();
const { data: limits, isLoading: isLimitLoading } = useQuery(
aiLimitOptions(),
queryClient,
);
const hasReachedLimit =
limits?.used && limits?.limit ? limits.used >= limits.limit : false;
console.log(limits);
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
onSubmitProp(info);
};
if (hasReachedLimit) {
return <UpgradeAccountModal onClose={onClose} />;
}
return (
<Modal onClose={onClose} bodyClassName="rounded-2xl">
<form onSubmit={handleSubmit} className="p-4">
@@ -42,7 +64,7 @@ export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
<div className="mt-2 grid grid-cols-2 gap-2">
<button
type="button"
className="flex text-sm items-center justify-center gap-2 rounded-xl border border-red-200 p-2 px-2 text-red-600 hover:bg-red-50 focus:outline-none"
className="flex items-center justify-center gap-2 rounded-xl border border-red-200 p-2 px-2 text-sm text-red-600 hover:bg-red-50 focus:outline-none"
onClick={onClearProgress}
>
<Trash2 className="h-4 w-4" />
@@ -51,7 +73,7 @@ export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
<button
type="submit"
disabled={!info.trim()}
className="flex disabled:opacity-50 disabled:cursor-not-allowed items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none"
className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
>
<PersonStandingIcon className="h-4 w-4" />
Personalize