From 17756ffd7314ec573286882fb6c8d7b98d191d06 Mon Sep 17 00:00:00 2001 From: Sawan Date: Sat, 9 Nov 2024 21:58:40 +0530 Subject: [PATCH 1/2] Remove cached FAQ.jsx --- client/src/component/FAQ.jsx | 51 ------------------------------------ 1 file changed, 51 deletions(-) delete mode 100644 client/src/component/FAQ.jsx diff --git a/client/src/component/FAQ.jsx b/client/src/component/FAQ.jsx deleted file mode 100644 index ae2e048..0000000 --- a/client/src/component/FAQ.jsx +++ /dev/null @@ -1,51 +0,0 @@ -// component/FAQ.jsx -import React, { useState } from 'react'; -import './FAQ.css'; // Import the CSS file for styling - -const FAQ = () => { - const [activeIndex, setActiveIndex] = useState(null); - - const toggleAnswer = (index) => { - setActiveIndex(activeIndex === index ? null : index); - }; - - return ( -
-

Frequently Asked Questions

- {faqData.map((item, index) => ( -
-

toggleAnswer(index)} className="faq-question"> - {item.question} -

- {activeIndex === index &&

{item.answer}

} -
- ))} -
- ); -}; - -const faqData = [ - { - question: "What is BitBox?", - answer: "BitBox is a user-friendly platform that simplifies version control and collaboration for developers.", - }, - { - question: "How does BitBox enhance collaboration?", - answer: "BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.", - }, - { - question: "How do I get started with BitBox?", - answer: "You can sign up for an account on BitBox and start managing your projects right away.", - }, - { - question: "Is BitBox compatible with modern development workflows?", - answer: "Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.", - }, - { - question: "How can I contact support if I need help?", - answer: "You can reach out to support through the 'Contact Us' page or by emailing support@example.com.", - }, -]; - - -export default FAQ; From 0a5416d749ba9618b329465d594dfcb09bb99cec Mon Sep 17 00:00:00 2001 From: Sawan Date: Sun, 10 Nov 2024 00:57:27 +0530 Subject: [PATCH 2/2] fixes uploading github and youtubte link --- client/src/component/AddProject.jsx | 144 +++++++++++++--------------- 1 file changed, 69 insertions(+), 75 deletions(-) diff --git a/client/src/component/AddProject.jsx b/client/src/component/AddProject.jsx index 42ac7a7..b721851 100644 --- a/client/src/component/AddProject.jsx +++ b/client/src/component/AddProject.jsx @@ -1,63 +1,70 @@ import PropTypes from 'prop-types'; -import { useContext, useState, useRef, useEffect } from 'react'; +import { useContext, useState, useRef } from 'react'; import projectContext from '../context/projectContext'; import { toast } from 'react-toastify'; -// Assets -// import projectDummyImage from '../assets/images/Others/projects.png' function AddProject({ mode }) { const [isModalOpen, setIsModalOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); const context = useContext(projectContext); - // Destructure the addProject from context const { addProject } = context; - // image, date, title, description, gitHubLink, youTubeLink, tags - const [project, setProject] = useState({ image: "", date: "", title: "", description: "", gitHubLink: "", youTubeLink: "", tags: "" }); - const refClose = useRef(null); - - const handleSubmit = () => { - if (project.title.trim() === "") { - toast.error("Title is required"); - return; - } - // Modify YouTube link - const modifiedYouTubeLink = modifyYouTubeLink(project.youTubeLink); - // Add project API call - addProject(project.title, project.description, project.gitHubLink, modifiedYouTubeLink, project.tags); // Pass modifiedYouTubeLink instead of project.youTubeLink - refClose.current.click(); - setProject({ title: "", description: "", gitHubLink: "", youTubeLink: "" }); - toast.success("Project Added Successfully"); - }; + // Separate state for each input + const [title, setTitle] = useState(""); + const [description, setDescription] = useState(""); + const [gitHubLink, setGitHubLink] = useState(""); + const [youTubeLink, setYouTubeLink] = useState(""); + const [tags, setTags] = useState(""); - const handleKeyDown = (e) => { - if (e.key === 'Enter') { - e.preventDefault(); // Prevent form submission on Enter key press - handleSubmit(); // Manually handle the click event - } - } + const refClose = useRef(null); - useEffect(() => { - const handleKeyPress = (event) => { - if (event.key === "Enter" && project.title.trim() !== "") { - handleSubmit(); + // Handle form submission + const handleSubmit = async (e) => { + e.preventDefault(); // Prevent default form submission + setIsLoading(true); + try { + if (title.trim() === "") { + toast.error("Title is required"); + return; } - }; - document.addEventListener("keypress", handleKeyPress); + // Validate GitHub Link + if (gitHubLink && !/^https:\/\/github\.com\//.test(gitHubLink)) { + toast.error("Please enter a valid GitHub URL."); + return; + } - return () => { - document.removeEventListener("keypress", handleKeyPress); - }; - // eslint-disable-next-line - }, [project.title]); // Only re-run the effect if project.title changes + // Validate YouTube Link + if (youTubeLink && !/^https:\/\/(www\.)?youtube\.com\/watch\?v=/.test(youTubeLink)) { + toast.error("Please enter a valid YouTube URL."); + return; + } - const onChange = (e) => { - // Able to write in the input field - setProject({ ...project, [e.target.name]: e.target.value }); + // Modify YouTube link to embed format + const modifiedYouTubeLink = modifyYouTubeLink(youTubeLink); + + // Call addProject function from context + await addProject(title, description, gitHubLink, modifiedYouTubeLink, tags); + toast.success("Project Added Successfully"); + // console.log(title + " " + description + " " + gitHubLink + " " + youTubeLink) + // Clear form + setTitle(""); + setDescription(""); + setGitHubLink(""); + setYouTubeLink(""); + setTags(""); + + // Close modal + refClose.current.click(); + } catch (error) { + toast.error("Failed to upload the project. Please try again."); + } finally { + setIsLoading(false); // End loading state + } }; - // Function to modify YouTube link + // Function to modify YouTube link (from watch to embed URL) const modifyYouTubeLink = (link) => { if (link.includes("youtube.com/watch?v=")) { const videoId = link.split("youtube.com/watch?v=")[1]; @@ -67,7 +74,6 @@ function AddProject({ mode }) { } }; - // Upload Project Modal const themeStyles = mode === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-gray-900'; return ( @@ -82,16 +88,9 @@ function AddProject({ mode }) { {isModalOpen && (
{/* Modal Content */} -
+
{/* Close Button in Top Right */} - @@ -109,9 +108,8 @@ function AddProject({ mode }) { type="text" id="title" name="title" - value={project.title} - onChange={onChange} - onKeyDown={handleKeyDown} + value={title} + onChange={(e) => setTitle(e.target.value)} className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`} placeholder="Enter your project title" required @@ -126,11 +124,10 @@ function AddProject({ mode }) {
@@ -141,44 +138,42 @@ function AddProject({ mode }) { GitHub Link setGitHubLink(e.target.value)} className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`} placeholder="Enter your project GitHub link" required />
- {/* Youtube Link */} + {/* YouTube Link */}
setYouTubeLink(e.target.value)} className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`} placeholder="Enter your project YouTube link" required /> -
+
{/* Submit Button */}
@@ -186,9 +181,8 @@ function AddProject({ mode }) { )} - - ) + ); } AddProject.propTypes = { @@ -196,4 +190,4 @@ AddProject.propTypes = { mode: PropTypes.string, }; -export default AddProject; \ No newline at end of file +export default AddProject;