-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated projected detail layout and added wishlist button
- Loading branch information
Showing
5 changed files
with
180 additions
and
38 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div> | ||
| <a href={`/current_projects/${props.ProjectId}`}> | ||
| <article className="overflow-hidden rounded-lg shadow transition hover:shadow-lg"> | ||
| <article className="overflow-hidden rounded-lg shadow transition hover:shadow-lg"> | ||
| <a href={`/current_projects/project${props.ProjectId}`}> | ||
| <img | ||
| alt={props.title} | ||
| src={props.link} | ||
| className="h-56 w-full object-cover" | ||
| /> | ||
|
|
||
| </a> | ||
| <a href={`/current_projects/project${props.ProjectId}`}> | ||
| <div className="bg-white p-4 sm:p-6"> | ||
| <h3 className="mt-0.5 text-lg line-clamp-1 text-gray-900"> | ||
| {props.title} | ||
| </h3> | ||
|
|
||
| {/* <p className="mt-2 line-clamp-3 text-sm/relaxed text-gray-500"> | ||
| {props.description} | ||
| </p> */} | ||
| </div> | ||
| </article> | ||
| </a> | ||
| </a> | ||
| <div className="p-4 sm:p-6"> | ||
| <WishlistButton str={str} WishlistAdd={WishlistAdd} /> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default ProjectCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <button | ||
| onClick={props.WishlistAdd} | ||
| class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded inline-flex items-center" | ||
| > | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6 mr-2" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" | ||
| /> | ||
| </svg> | ||
| <p ref={typedRef}></p> | ||
| </button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters