Merge pull request #70 from deepraj21/main

fix: star projects component by other users

Author: deepraj21

client/src/components/Projects/ProjectCard.tsx

@@ -17,6 +17,7 @@ import { Cross1Icon } from "@radix-ui/react-icons";
 import { Skeleton } from "../ui/skeleton";
 import { useNavigate, useParams } from "react-router-dom";
 import ReactMarkdown from 'react-markdown';
+import { toast } from "sonner";
 
 interface Project {
     projectId: string;
@@ -38,6 +39,7 @@ const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
 export function ProjectCard({ project, onProjectChange }: ProjectProps) {
     const [isStarred, setIsStarred] = useState(false);
     const [starCount, setStarCount] = useState(project.starCount);
+    const [isStarRequestInProgress, setIsStarRequestInProgress] = useState(false); // State to handle star request
     const username = localStorage.getItem('devhub_username'); // Logged-in user
     const { username: paramsUsername } = useParams<{ username: string }>(); // Extract username from URL
 
@@ -59,10 +61,12 @@ export function ProjectCard({ project, onProjectChange }: ProjectProps) {
     }, [project.projectId]);
 
     const handleStarClick = async () => {
-        if (isStarred) return; // Prevent multiple stars
+        if (isStarred || isStarRequestInProgress) return; // Prevent multiple stars and requests
+
+        setIsStarRequestInProgress(true); // Start request
 
         try {
-            const response = await fetch(`${backendUrl}/profile/${paramsUsername}/projects/${project.projectId}/star`, {
+            const response = await fetch(`${backendUrl}/profile/${username}/projects/${project.projectId}/star`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
             });
@@ -71,11 +75,18 @@ export function ProjectCard({ project, onProjectChange }: ProjectProps) {
                 setStarCount((prevCount) => prevCount + 1);
                 setIsStarred(true);
                 localStorage.setItem(`starred_${project.projectId}`, "true");
+
+                // Show success toast
+                toast.success("Project starred!");
             } else {
                 console.error("Failed to star the project");
+                toast.error("Failed to star the project");
             }
         } catch (error) {
             console.error("Error starring the project:", error);
+            toast.error("Failed to star the project");
+        } finally {
+            setIsStarRequestInProgress(false); // End request
         }
     };
 
@@ -97,21 +108,23 @@ export function ProjectCard({ project, onProjectChange }: ProjectProps) {
                     >
                         {project.title}
                     </CardTitle>
-                    <ReactMarkdown>{project.description}</ReactMarkdown>
+                    <ReactMarkdown>
+                        {project.description.split(' ').slice(0, 5).join(' ') + (project.description.split(' ').length > 5 ? '...' : '')}
+                    </ReactMarkdown>
                 </div>
                 <div className="flex items-center rounded-md bg-secondary text-secondary-foreground">
                     <Button
                         variant="secondary"
-                        className=" shadow-none"
+                        className="shadow-none"
                         onClick={handleStarClick}
-                        disabled={isStarred}
+                        disabled={isStarred || isStarRequestInProgress} // Disable during star request
                     >
                         {isStarred ? (
                             <FilledStarIcon className="mr-2 h-4 w-4 text-yellow-400" />
                         ) : (
                             <StarIcon className="mr-2 h-4 w-4" />
                         )}
-                        Star
+                        {isStarRequestInProgress ? "Starring..." : "Star"} {/* Show loading text */}
                     </Button>
                 </div>
             </CardHeader>

client/src/pages/ProjectDisplay.tsx

@@ -34,6 +34,7 @@ const ProjectDisplay = () => {
   const [isStarred, setIsStarred] = useState(false);
   const [starCount, setStarCount] = useState(0); // Initialize as 0
   const [isStarRequestInProgress, setIsStarRequestInProgress] = useState(false); // To disable button during request
+  const loggedInUsername = localStorage.getItem("devhub_username");
 
   useEffect(() => {
     const fetchProject = async () => {
@@ -69,7 +70,7 @@ const ProjectDisplay = () => {
     setIsStarRequestInProgress(true); // Disable the button while the request is in progress
 
     try {
-      const response = await fetch(`${backendUrl}/profile/${username}/projects/${project.projectId}/star`, {
+      const response = await fetch(`${backendUrl}/profile/${loggedInUsername}/projects/${project.projectId}/star`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
       });