From 799f43e28d3209679c2fb464da7f8010133bd382 Mon Sep 17 00:00:00 2001 From: Advait Rajaram Patole Date: Tue, 16 Apr 2024 15:41:01 +0530 Subject: [PATCH] Updated projected detail layout and added wishlist button --- frontend/src/components/Mentor.js | 13 ---- frontend/src/components/ProjectCard.js | 67 ++++++++++++++--- frontend/src/components/WishlistButton.js | 45 +++++++++++ frontend/src/pages/ProjectDetails.jsx | 91 ++++++++++++++++++++--- frontend/src/pages/Projects.jsx | 2 +- 5 files changed, 180 insertions(+), 38 deletions(-) delete mode 100644 frontend/src/components/Mentor.js create mode 100644 frontend/src/components/WishlistButton.js diff --git a/frontend/src/components/Mentor.js b/frontend/src/components/Mentor.js deleted file mode 100644 index a3522d5..0000000 --- a/frontend/src/components/Mentor.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; - -function Mentor(props) { - return ( - <> -
  • -

    {props.mentor}

    -
    • - - ); -} - -export default Mentor; diff --git a/frontend/src/components/ProjectCard.js b/frontend/src/components/ProjectCard.js index a5dcf65..38e5d6d 100644 --- a/frontend/src/components/ProjectCard.js +++ b/frontend/src/components/ProjectCard.js @@ -1,31 +1,74 @@ import React from "react"; import axios from "axios"; import { useState } from "react"; +import WishlistButton from "./WishlistButton"; -function ProjectCard(props) { +export default function ProjectCard(props) { + const details = { + id: props.ProjectId, + title: props.title, + banner_image: props.link, + general_category: props.general_category, + }; + const [Added, setAdded] = useState(false); + const search = () => { + axios + .get(`api/user/wishlist/:${props.ProjectId}`) + .then((res) => { + setAdded(res); + }) + .catch((err) => console.log(err)); + }; + search(); + const buttonMessage = Added ? "Remove From Wishlist" : "Add To Wishlist"; + const [str, setStr] = useState([buttonMessage]); + let title = props.title; + + const WishlistAdd = (e) => { + if (!Added) { + axios + .post("api/user/wishlist/", details) + .then((res) => { + console.log(res); + setAdded(true); + setStr([ + `mv ${title.replace(/\s+/g, "_")}.txt ./Wishlist`, + "Remove From Wishlist", + ]); + }) + .catch((err) => console.log(err)); + } else { + axios + .delete(`api/user/wishlist/:${props.ProjectId}`) + .then((res) => { + console.log(res); + setAdded(false); + setStr(["cd ./Wishlist", `rm ${title}.txt`, "Add To Wishlist"]); + }) + .catch((err) => console.log(err)); + } + }; return (
    - -
    ); } - -export default ProjectCard; diff --git a/frontend/src/components/WishlistButton.js b/frontend/src/components/WishlistButton.js new file mode 100644 index 0000000..a1ed27d --- /dev/null +++ b/frontend/src/components/WishlistButton.js @@ -0,0 +1,45 @@ +import React from "react"; +import { useEffect, useRef } from "react"; +import Typed from "typed.js"; + +export default function AddAnimation(props) { + const typedRef = useRef(null); + + useEffect(() => { + // Initialize Typed.js instance when the component mounts + const typedInstance = new Typed(typedRef.current, { + strings: props.str, + typeSpeed: 25, + loop: false, + showCursor: false, + }); + + // Clean up the Typed.js instance when the component unmounts + return () => { + typedInstance.destroy(); + }; + }, props.str); // Reinitialize Typed.js instance if the text prop changes + + return ( + + ); +} diff --git a/frontend/src/pages/ProjectDetails.jsx b/frontend/src/pages/ProjectDetails.jsx index ce92ea2..b61a23c 100644 --- a/frontend/src/pages/ProjectDetails.jsx +++ b/frontend/src/pages/ProjectDetails.jsx @@ -1,13 +1,14 @@ import React from 'react'; import ProjectTimeline from '../components/ProjectTimeline'; -import { useState, useEffect } from 'react'; +import { useState } from 'react'; import axios from "axios"; -import Mentor from '../components/Mentor'; import ProjectTitle from '../components/ProjectTitle'; +import WishlistButton from '../components/WishlistButton' export default function ProjectDetails() { + const [Added, setAdded] = useState(false); const [details, setDetails] = useState(); useEffect(() => { @@ -36,15 +37,59 @@ export default function ProjectDetails() { // "checkpoints": "Checkpoint 1: Learning of python libraries numpy, pandas and matplotlib.\r\nCheckpoint 2: Implementation of neural networks and regression models from scratch and using it against a dataset\r\nCheckpoint 3:Building strong foundation of other additional libraries tensorflow, librosa and scikit- learn\r\nCheckpoint 4: Ideation and basic structure designing of final project\r\nCheckpoint 5: Code implementation and accuracy refinement", // "prereuisites": "Basics of python and loads of enthusiasm",//done // "co_mentor_info": "Aryaman Angurana(22b1043)\r\nAryan Adinath Popalghhat(210020080)",//done - // "banner_image": "https://itc.gymkhana.iitb.ac.in/wncc/assets/images/soc/2023/item221.jpg",//done + // "banner_image": "https://itc.gymkhana.iitb.ac.in/wncc/assets/images/soc/2023/item222.jpg",//done // "code": "34d591dd",//no use // "season": 1//no use // } + const req_details = { + "id": details.id, + "title": details.title, + "banner_image": details.banner_image, + "general_category": details.general_category + } const descriptionWithLinks = details.description.replace( /(https?:\/\/[^\s]+)/g, '$1' - ); + ); + + //if project is in users wishlist then return true, else false + const search = () =>{ + axios.get(`api/user/wishlist/:${details.id}`) + .then(res => { + setAdded(res) + }) + .catch(err => console.log(err)) + } + search(); + const buttonMessage = Added ? "Remove From Wishlist" : "Add To Wishlist"; + const [str, setStr] = useState([buttonMessage]); + let title = details.title; + + + const WishlistAdd = (e) => { + console.log(details); + if(!Added){ + axios.post('api/user/wishlist/', req_details) + .then(res => { + console.log(res) + setAdded(true) + setStr([`mv ${title.replace(/\s+/g, '_')}.txt ./Wishlist`, "Remove From Wishlist"]); + }) + .catch(err => console.log(err)) + } + else{ + axios.delete(`api/user/wishlist/:${details.id}`) + .then(res => { + console.log(res) + setAdded(false) + setStr(["cd ./Wishlist", `rm ${title}.txt`, "Add To Wishlist"]); + }) + .catch(err => console.log(err)) + } + } + + return ( @@ -59,17 +104,17 @@ export default function ProjectDetails() {
    -
    +
    {/* */} - +
    -
    +

    Mentors:

      - +

      {details.mentor}

    @@ -101,15 +146,13 @@ export default function ProjectDetails() {
    +
    -
    + {/*

    Description:

    - {/*

    We propose a deep learning method for single image super-resolution. They will start by learning the basics of python and then proceed onto deep learning. Following which they learn about deep neural network architecture for image super resolution and implement a model that takes a low-resolution image as the input and outputs the high-resolution one. Further readings: https://medium.com/analytics-vidhya/super-resolution-and-its-recent-advances-in-deep-learning-part-1-c6d927914d32 -Prerequisites: None. Interest in image processing is appreciated. Basic knowledge about python and deep learning is a bonus but not necessary.

    */}

    ") }}>

    - {/*

    Prerequisites: BASIC PYTHON , (HTML OR STREAMLIT) , BASIC KNOWLEDGE OF NEURAL NETWORK, RNN

    */}

    Prerequisites:

    {details.prereuisites}

    Timeline:

    @@ -117,6 +160,30 @@ Prerequisites: None. Interest in image processing is appreciated. Basic knowledg

    Checkpoints:

    ") }}>

    +
    */} + +
    +
    +
    +
    Description
    +

    ") }}>

    +
    + +
    +
    Prerequisites
    +
    {details.prereuisites}
    +
    + +
    +
    Timeline
    +

    ") }}>

    +
    + +
    +
    Checkpoints
    +

    ") }}>

    +
    +
    {/*
    diff --git a/frontend/src/pages/Projects.jsx b/frontend/src/pages/Projects.jsx index b75d360..53fb9d6 100644 --- a/frontend/src/pages/Projects.jsx +++ b/frontend/src/pages/Projects.jsx @@ -121,7 +121,7 @@ export default function Projects() { ))} */} {filteredProjects.map((project, index) =>(
    - +
    ))}