Skip to content

Commit

Permalink
confilct
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShivanshPlays
ShivanshPlays committed Nov 10, 2024
2 parents d197377 + c51940b commit b0af314
Show file tree
Hide file tree
Showing 33 changed files with 1,342 additions and 585 deletions.
388 changes: 200 additions & 188 deletions client/index.html
View file

Large diffs are not rendered by default.

195 changes: 22 additions & 173 deletions client/package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,4 @@ body {
.alert-bar {
width: max-content;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
}
7 changes: 7 additions & 0 deletions client/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,15 @@ import NotFound from "./component/NotFound";
import ProgressBar from "./component/ProgressBar/ProgressBar";
import Cursor from './component/Cursor';
import ReadMoreBlog from './component/ReadMoreBlog';
import AI from "./component/AI";
import AOS from "aos";
import "aos/dist/aos.css";
import Collab from "./component/Collab";
import CreateBlog from "./component/CreateBlog";
import LoginOTP from "./component/LoginPhone";
import UploadProject from "./component/UploadProject";


const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
return (
<div className="h-full w-full">
Expand All @@ -52,6 +55,7 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
blog="Blogs"
discussion="Discussion"
contributors="Contributors"
ai="AI"
Feedback="Feedback"
showAlert={showAlert}
mode={mode}
Expand Down Expand Up @@ -130,18 +134,21 @@ function App() {
<Route exact path="/contributors" element={<Contributors mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/discussion" element={<Discussion mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/community" element={<Community mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/ai" element={<AI mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/about" element={<About mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/feedback" element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/blog" element={<BlogPage mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/collab" element={<Collab mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/myproject' element={<MyProject mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/editprofile' element={<EditProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/login" element={<Login mode={mode} setProgress={setProgress} showAlert={showAlert} loggedin={islogged} setloggedin={setloggedin} />} />
<Route exact path="/login-otp" element={<LoginOTP mode={mode} setProgress={setProgress} showAlert={showAlert} loggedin={islogged} setloggedin={setloggedin} />} />
<Route exact path='/signup' element={<Signup mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/forgot-password' element={<ForgotPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/reset-password' element={<ResetPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/codeofconduct' element={<CodeOfConduct mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/contactus' element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/feedback' element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/privacypolicy' element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/termofuse' element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/uploadProject' element={<UploadProject mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
Expand Down
144 changes: 69 additions & 75 deletions client/src/component/AddProject.jsx
View file
Original file line number Diff line number Diff line change
@@ -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];
Expand All @@ -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 (
Expand All @@ -82,16 +88,9 @@ function AddProject({ mode }) {
{isModalOpen && (
<div className="fixed flex z-[99999999999] justify-center items-center inset-0 bg-black bg-opacity-50">
{/* Modal Content */}
<div
className={`relative top-22 md:top-12 w-full max-w-md p-6 mx-2 my-8 bg-white rounded-lg shadow-lg overflow-auto ${themeStyles}`}
style={{ maxHeight: '800px', fontSize: '14px' }}
>
<div className={`relative top-22 md:top-12 w-full max-w-md p-6 mx-2 my-8 bg-white rounded-lg shadow-lg overflow-auto ${themeStyles}`} style={{ maxHeight: '800px', fontSize: '14px' }}>
{/* Close Button in Top Right */}
<button
onClick={() => setIsModalOpen(false)}
className="absolute top-0 right-10 text-gray-500 hover:text-gray-700"
style={{ fontSize: '42px' }}
>
<button onClick={() => setIsModalOpen(false)} className="absolute top-0 right-10 text-gray-500 hover:text-gray-700" style={{ fontSize: '42px' }}>
&times;
</button>

Expand All @@ -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
Expand All @@ -126,11 +124,10 @@ function AddProject({ mode }) {
<textarea
id="description"
name="description"
value={project.description}
onChange={onChange}
onKeyDown={handleKeyDown}
value={description}
onChange={(e) => setDescription(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 Project Title Here *"
placeholder="Enter Project Description"
required
></textarea>
</div>
Expand All @@ -141,59 +138,56 @@ function AddProject({ mode }) {
GitHub Link
</label>
<input
type="url"
type="text"
id="githubLink"
name="githubLink"
value={project.gitHubLink}
onChange={onChange}
onKeyDown={handleKeyDown}
value={gitHubLink}
onChange={(e) => 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
/>
</div>

{/* Youtube Link */}
{/* YouTube Link */}
<div>
<label htmlFor="youtubeLink" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
Youtube Link
YouTube Link
</label>
<input
type="url"
type="text"
id="youtubeLink"
name="youtubeLink"
value={project.youTubeLink}
onChange={onChange}
onKeyDown={handleKeyDown}
value={youTubeLink}
onChange={(e) => 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
/>
</div>
</div>

{/* Submit Button */}
<div className="text-center mt-4">
<button
disabled={project.title.trim() === ""}
disabled={isLoading || title.trim() === ""}
type="submit"
className={`w-full py-2 rounded-md text-lg font-semibold ${mode === 'dark' ? 'bg-blue-700 hover:bg-blue-600' : 'bg-blue-600 hover:bg-blue-700'} text-white focus:outline-none focus:ring-2 focus:ring-blue-400`}
>
Upload Project
{isLoading ? "Uploading..." : "Upload Project"}
</button>
</div>
</form>
</div>
</div>
)}
</div>

</div>
)
);
}

AddProject.propTypes = {
showAlert: PropTypes.func,
mode: PropTypes.string,
};

export default AddProject;
export default AddProject;
4 changes: 3 additions & 1 deletion client/src/component/Ai.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,9 @@ const Ai = () => {
};

return (
<div className="p-6 min-h-screen text-black overflow-auto main-content">
<div className="p-6 min-h-screen flex flex-col justify-center text-black overflow-auto main-content">
{/* Heading */}
<h1 className="text-4xl font-semibold mb-4">AI Playground</h1>
{/* API Key Input */}
<div className="mb-4">
<input
Expand Down
Loading

0 comments on commit b0af314

Please sign in to comment.