changed2

frontend/src/pages/ProjectDetails.tsx

@@ -28,31 +28,38 @@ const ProjectDetailsPage = () => {
   useEffect(() => {
     const fetchProjectData = async () => {
       setIsLoading(true)
-      const { hits } = await fetchAlgoliaData('projects', projectKey, 1, projectKey)
-      if (hits && hits.length > 0) {
-        setProject(hits[0])
+      try {
+        const { hits } = await fetchAlgoliaData('projects', projectKey, 1, projectKey)
+        if (hits && hits.length > 0) {
+          setProject(hits[0])
+        }
+      } catch (error) {
+        return error
+      } finally {
+        setIsLoading(false)
       }
-      setIsLoading(false)
     }
 
     fetchProjectData()
   }, [projectKey])
 
-  if (isLoading)
+  if (isLoading) {
     return (
       <div className="flex min-h-[60vh] items-center justify-center">
         <LoadingSpinner imageUrl="/img/owasp_icon_white_sm.png" />
       </div>
     )
+  }
 
-  if (!project)
+  if (!project) {
     return (
       <ErrorDisplay
         statusCode={404}
         title="Project not found"
-        message="Sorry, the project you're looking for doesn't exist"
+        message="Sorry, the project you're looking for doesn't exist."
       />
     )
+  }
 
   return (
     <div className="mt-16 min-h-screen bg-white p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
@@ -62,18 +69,14 @@ const ProjectDetailsPage = () => {
           <span className="ml-2 rounded bg-red-200 px-2 py-1 text-sm text-red-800">Inactive</span>
         )}
         <p className="mb-6 text-xl">{project.description}</p>
+
         <div className="mb-8 rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
           <h2 className="mb-4 text-2xl font-semibold">Summary</h2>
           <p>{project.summary}</p>
         </div>
+
         <div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-3">
-          <div className="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800 md:col-span-2">
-            <h2 className="mb-4 text-2xl font-semibold">Project Details</h2>
-        <SecondaryCard title="Summary">
-          <p>{project.summary}</p>
-        </SecondaryCard>
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-          <SecondaryCard title="Project Details" className="gap-2 md:col-span-2">
+          <SecondaryCard title="Project Details" className="md:col-span-2">
             <p>
               <strong>Type:</strong> {project.type[0].toUpperCase() + project.type.slice(1)}
             </p>
@@ -96,6 +99,7 @@ const ProjectDetailsPage = () => {
               </a>
             </p>
           </SecondaryCard>
+
           <SecondaryCard title="Statistics">
             <InfoBlock
               className="pb-1"
@@ -112,6 +116,7 @@ const ProjectDetailsPage = () => {
             />
           </SecondaryCard>
         </div>
+
         <div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2">
           <ToggleableList items={project.languages} label="Languages" />
           <ToggleableList items={project.topics} label="Topics" />
@@ -131,7 +136,7 @@ const ProjectDetailsPage = () => {
                         `https://github.com/OWASP/${issue.repository.key}/issues/${issue.number}`
                       }
                       target="_blank"
-                      rel="none"
+                      rel="noopener noreferrer"
                       className="text-[#1d7bd7] hover:underline dark:text-sky-600"
                     >
                       {issue.title}
@@ -141,13 +146,13 @@ const ProjectDetailsPage = () => {
                     <a
                       href={`https://nest.owasp.dev/community/users/${issue.author.key}`}
                       target="_blank"
-                      rel="none"
+                      rel="noopener noreferrer"
                       className="flex items-center"
                     >
                       <img
                         src={issue.author.avatar_url}
                         alt={issue.author.name}
-                        className="w-[[6 mr-2 h-6 rounded-full"
+                        className="mr-2 h-6 w-6 rounded-full"
                       />
                       <span className="text-sm">{issue.author.name}</span>
                     </a>
@@ -164,10 +169,8 @@ const ProjectDetailsPage = () => {
           ) : (
             <p>No recent issues.</p>
           )}
-        </div>
-        <div className="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
-          <h2 className="mb-4 text-2xl font-semibold">Recent Releases</h2>
         </SecondaryCard>
+
         <SecondaryCard title="Recent Releases">
           {project.releases && project.releases.length > 0 ? (
             <div className="h-64 overflow-y-auto pr-2">