Merge pull request #48 from Code-the-Dream-School/final-PR

ozzydogandev · web-flow · commit 8bf477083cee · 2025-01-21T15:46:47.000-05:00
final PR, with issues 5,6,7
diff --git a/src/components/Details.jsx b/src/components/Details.jsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { Box, VStack, Text, Button } from "@chakra-ui/react";
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogContent,
+  DialogBody,
+  DialogCloseTrigger,
+} from "./ui/dialog";
+
+const Details = ({ project }) => {
+  return (
+    <DialogRoot placement="center" initialFocusEl={() => null}>
+      <DialogTrigger>
+        <Button id="details-trigger" style={{ display: "none" }}>
+          Open Details
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        width={["90%", "80%", "500px"]}
+        height="400px"
+        className="dialog-container"
+        backdropFilter="blur(10px)"
+        borderRadius="8px"
+      >
+        <DialogBody
+          width="auto"
+          height="100%"
+          display="flex"
+          flexDirection="column"
+          marginTop="16px"
+        >
+          {/* Close Button */}
+          <DialogCloseTrigger>
+            <Button color="black" size="2xs" bg="wheat">
+              X
+            </Button>
+          </DialogCloseTrigger>
+
+          {/* Project Details */}
+          <Box
+            flex="1"
+            borderRadius="md"
+            overflowY="auto" // Enable vertical scrolling
+            paddingRight="4"
+            paddingLeft="4"
+            paddingTop='24px'
+            marginBottom="8px"
+            paddingBottom='24px'
+            color="black"
+
+          >
+            <VStack spacing="4" align="start" color='white' gap='28px' wordBreak="break-word">
+              <Text fontWeight="bold" mx='auto' fontSize='40px' lineHeight='40px' textAlign='center'>
+                {project.name}
+              </Text>
+              <Text>
+                <strong>Description:</strong> {project.description}
+              </Text>
+              <Text>
+                <strong>Frameworks/Languages:</strong> {project.tags.join(", ")}
+              </Text>
+              {project.github_link && (
+                <Text>
+                  <strong>GitHub:</strong>{" "}
+                  <a href={project.github_link} target="_blank" rel="noopener noreferrer">
+                    {project.github_link}
+                  </a>
+                </Text>
+              )}
+              {project.youtube_video_link && (
+                <Text>
+                  <strong>Live Demo:</strong>{" "}
+                  <a href={project.youtube_video_link} target="_blank" rel="noopener noreferrer">
+                    {project.youtube_video_link}
+                  </a>
+                </Text>
+              )}
+            </VStack>
+          </Box>
+        </DialogBody>
+      </DialogContent>
+    </DialogRoot>
+  );
+};
+
+export default Details;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -96,7 +96,9 @@ const Navbar = () => {
   return (
     <div className="navbar">
       <div className="navbar-container">
+        <a href='/home'>
         <img src="./images/logo.png" className="logo" alt="Logo" />
+        </a>
         <div className="hamburger-menu">
           <MenuRoot>
             <MenuTrigger asChild>
diff --git a/src/styles/ExploreProjects.css b/src/styles/ExploreProjects.css
@@ -22,6 +22,11 @@
   border-color: rgba(255, 255, 255, 0.24);
   border-width: 0.1em;
   position: relative;
+  box-shadow: 4px 4px 10px rgba(99, 233, 238, 0.5); /* Horizontal, Vertical, Blur, Spread */
+  transition: transform 0.5s ease;
+}
+.project-tile:hover {
+    transform: scale(1.04); /* Zoom in */
 }
 .project-details {
   padding: 59px 16px 80px 16px;
diff --git a/src/views/ExploreProjects.jsx b/src/views/ExploreProjects.jsx
@@ -10,17 +10,23 @@ import {
 } from "../components/ui/menu";
 import { StatRoot, StatValueText } from "../components/ui/stat"
 import Comments from "../components/Comments";
+import Details from "../components/Details"
 import { Toaster, toaster } from "../components/ui/toaster";
 import { jwtDecode } from "jwt-decode";
 
 const ExploreProjects = () => {
   const [projects, setProjects] = useState([]);
   const [activeProjectId, setActiveProjectId] = useState(null);
   const [activeProjectOwnerId, setActiveProjectOwnerId] = useState(null);
+  const [activeProjectDetails, setActiveProjectDetails] = useState(null);
+
   const token = JSON.parse(localStorage.getItem("auth"));
   const rawToken = localStorage.getItem("auth");
   const { user_id: userId, username } = rawToken ? jwtDecode(rawToken) : {};
 
+  const truncateTitle = (title, maxLength) => {
+    return title.length > maxLength ? `${title.slice(0, maxLength)}...` : title;
+  };
   // Fetch all projects on component mount
   useEffect(() => {
     const fetchProjects = async () => {
@@ -90,6 +96,18 @@ const ExploreProjects = () => {
     }, 0);
   };
 
+  const openDetailsModal = (project) => {
+    setActiveProjectDetails(project);
+
+    // Trigger the Details Dialog
+    setTimeout(() => {
+      const triggerButton = document.getElementById("details-trigger");
+      if (triggerButton) {
+        triggerButton.click();
+      }
+    }, 0);
+  };
+
   const handleDelete = async (projectId) => {
     try {
       const response = await fetch(
@@ -227,6 +245,9 @@ const ExploreProjects = () => {
                           ></img>
                         </MenuTrigger>
                         <MenuContent className="menu-content">
+                          <MenuItem onClick={() => openDetailsModal(project)}>
+                          Details
+                          </MenuItem>
                           {Number(userId) === Number(project.created_by) && (
                             <>
                               <MenuItem
@@ -239,7 +260,20 @@ const ExploreProjects = () => {
                               <MenuSeparator />
                             </>
                           )}
-                          <MenuItem value="new-txt2" as="a">
+                          <MenuItem 
+                          value="new-txt2"
+                          as="a"
+                          onClick={() => {
+                            toaster.create({
+                              title: "Project reported to admin!",
+                              description: "Thank you for bringing this to our attention.",
+                              type: "info",
+                              duration: 4000,
+                              action: {
+                                label: "x",
+                              },
+                            });
+                          }}>
                             Report ⚠️
                           </MenuItem>
                         </MenuContent>
@@ -295,7 +329,7 @@ const ExploreProjects = () => {
                     day: "numeric",
                   })}
                 </p>
-                <p className="project-name">{project.name}</p>
+                <p className="project-name">{truncateTitle(project.name, 16)}</p>
                 <p className="ep-username">{project.users.username}</p>
                 <div className="framework-badges">
                   {project.tags
@@ -350,6 +384,15 @@ const ExploreProjects = () => {
                     className="git-link-button"
                     variant="solid"
                     type="submit"
+                    onClick={() => {
+                      const url =
+                        project.github_link.startsWith("http://") ||
+                        project.github_link.startsWith("https://")
+                          ? project.github_link
+                          : `https://${project.github_link}`;
+                      console.log("Opening Github Repository URL:", url);
+                      window.open(url, "_blank");
+                    }}
                   >
                     View on Github
                     <img
@@ -373,6 +416,7 @@ const ExploreProjects = () => {
           projectOwnerId={activeProjectOwnerId}
         />
       )}
+      {activeProjectDetails && <Details project={activeProjectDetails} />}
       <Toaster />
       </div>
       <footer>
diff --git a/src/views/ShareAProject.jsx b/src/views/ShareAProject.jsx
@@ -7,7 +7,7 @@ import {
   Textarea,
   Button,
   Link,
-  Stack,
+  VStack,
 } from "@chakra-ui/react";
 import { LuExternalLink } from "react-icons/lu";
 import { Field } from "../components/ui/field";
@@ -23,15 +23,12 @@ const ShareAProject = () => {
     youtube_video_link: "",
     tags: [],
   });
-  const [errors, setErrors] = useState({
-    github_link: "",
-    youtube_video_link: "",
-  });
 
   const validateUrl = (url) => {
     const urlPattern = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)(\/[\w-.]*)*(\?.+)?$/;
     return urlPattern.test(url);
   };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (newProject.tags.length === 0) {
@@ -43,51 +40,38 @@ const ShareAProject = () => {
           label: "x",
         },
       });
-      //console.log("Please select at least one framework/language.");
       return;
     }
-    const newErrors = {};
 
     // Validate GitHub URL (Required)
     if (!newProject.github_link || !validateUrl(newProject.github_link)) {
-      newErrors.github_link = "Please provide a valid GitHub repository URL.";
+      toaster.create({
+        title: "Please provide a valid GitHub repository URL.",
+        type: "warning",
+        duration: 4000,
+        action: {
+          label: "x",
+        },
+      });
+      return;
     }
 
     // Validate Live Demo URL (Optional, only if provided)
     if (
       newProject.youtube_video_link &&
       !validateUrl(newProject.youtube_video_link)
     ) {
-      newErrors.youtube_video_link = "Please provide a valid Live Demo URL.";
-    }
-    console.log(Object.keys(newErrors).length);
-    if (Object.keys(newErrors).length > 0) {
-      setErrors(newErrors); // Display errors
-
-      if (errors.github_link) {
-        console.log(errors.github_link);
-        toaster.create({
-          title: errors.github_link,
-          type: "warning",
-          duration: 4000,
-          action: {
-            label: "x",
-          },
-        });
-      }
-      if (errors.youtube_video_link) {
-        console.log(errors.youtube_video_link);
-        toaster.create({
-          title: errors.youtube_video_link,
-          type: "warning",
-          duration: 4000,
-          action: {
-            label: "x",
-          },
-        });
-      }
+      toaster.create({
+        title: "Please provide a valid Live Demo URL.",
+        type: "warning",
+        duration: 4000,
+        action: {
+          label: "x",
+        },
+      });
       return;
     }
+
     try {
       const response = await fetch("http://localhost:8001/api/v1/addProject", {
         method: "POST",
@@ -99,7 +83,7 @@ const ShareAProject = () => {
       });
       if (response.ok) {
         toaster.create({
-          title: "Project submitted succesfully!",
+          title: "Project submitted successfully!",
           type: "success",
           duration: 8000,
           action: {
@@ -115,7 +99,6 @@ const ShareAProject = () => {
         });
       } else {
         console.error("Failed to add project:", response.statusText);
-        //console.error("Failed to submit project");
       }
     } catch (error) {
       toaster.create({
@@ -137,7 +120,7 @@ const ShareAProject = () => {
         : [...prev.tags, value],
     }));
   };
-  //const isSubmitEnabled = newProject.tags.length > 0;
+
   return (
     <form onSubmit={handleSubmit}>
       <div className="share-project-container">
@@ -317,8 +300,8 @@ const ShareAProject = () => {
               }
             />
           </Field>
-          <Field marginBottom={"20%"} marginTop={10}>
-            <Stack direction="row" h="20">
+          <Field marginBottom={"20%"} marginTop={10} display='flex' alignItems='center'>
+            <VStack direction="row" h="20" justifyContent="center" alignItems="center">
               <Button
                 className="sp-button"
                 variant="solid"
@@ -328,12 +311,12 @@ const ShareAProject = () => {
                 SUBMIT PROJECT
               </Button>
               <Link
-                style={{ fontSize: "20px", color: "#63E9EE", padding: "40px" }}
+                style={{ fontSize: "20px", color: "#63E9EE", alignItems: "center", display: 'flex' }}
                 href="/explore-project"
               >
                 Go to explore projects <LuExternalLink />
               </Link>
-            </Stack>
+            </VStack>
           </Field>
           <Toaster />
         </div>
