Add like a place functionality(Frontend)

[Amoghtech]

Add a button to every post, which likes a particular place.

[shikhar13012001]

I would like to work on this, Please assign it to me

[Amoghtech]

Sure go for it, Happy Hacking!

[shikhar13012001]

Could you please tell me the targeted files and how much functionality are you expecting on the frontend part?

[Amoghtech]

Could you please tell me the targeted files and how much functionality are you expecting on the frontend part?

Yeah you can go for the PlaceItems.js file which is basically all the places, and then If I hit the like button, we should call a function, But for now don't do anything in that function (We will call an API in this function later). For now you just have to customize PlaceItems.js file to add a Like button.

[shikhar13012001]

Could you please tell me the targeted files and how much functionality are you expecting on the frontend part?

Yeah you can go for the PlaceItems.js file which is basically all the places, and then If I hit the like button, we should call a function, But for now don't do anything in that function (We will call an API in this function later). For now you just have to customize PlaceItems.js file to add a Like button.

Ok sir , I understand it , thankyou

[shikhar13012001]

Could you please tell me the targeted files and how much functionality are you expecting on the frontend part?

Yeah you can go for the PlaceItems.js file which is basically all the places, and then If I hit the like button, we should call a function, But for now don't do anything in that function (We will call an API in this function later). For now you just have to customize PlaceItems.js file to add a Like button.

@Amoghtech Sir, I have added the like button as such, modifying the PlaceItems.js added LIKE_SVG , made an assets folder in frontend/src and importing the SVG by import LIKE_SVG from "../../assets/heart-fill.svg"

   {auth.userId === props.creatorId && (
              <Button inverse onClick={handleLike}>
                <img src={LIKE_SVG} />
              </Button>
            )}

[Amoghtech]

Could you please tell me the targeted files and how much functionality are you expecting on the frontend part?

Yeah you can go for the PlaceItems.js file which is basically all the places, and then If I hit the like button, we should call a function, But for now don't do anything in that function (We will call an API in this function later). For now you just have to customize PlaceItems.js file to add a Like button.

@Amoghtech Sir, I have added the like button as such, modifying the PlaceItems.js added LIKE_SVG , made an assets folder in frontend/src and importing the SVG by import LIKE_SVG from "../../assets/heart-fill.svg"

   {auth.userId === props.creatorId && (
              <Button inverse onClick={handleLike}>
                <img src={LIKE_SVG} />
              </Button>
            )}

Great man! Just remove the border color of this svg and then let me know, I'll merge it And does this image has a hover effect?

[shikhar13012001]

@Amoghtech I actually used Button component and made it's innerHTML as SVG , yes it has the hover effect same as View on map, I will make it better in design , thankyou

[shikhar13012001]

@Amoghtech sir, I have a hover effect in the SVG using two SVGs using the following code , I have made use of two SVG, please review the changes and let me know if you need some changes.

             <span style={{position:'relative'}}>
                <img src={LOVE_SVG} 
                onMouseEnter={handleMouseEnter} 
                onMouseLeave={handleMouseLeave} 
                onClick={handleLike} 
                className="like_btn"/>
             </span>
            )} 

 const handleLike=()=>{
    // make API call to the backend
  }
  const handleMouseEnter=(e)=>{
     e.target.src=LIKE_SVG;
  }
  const handleMouseLeave=(e)=>{
    e.target.src=LOVE_SVG;
  }

--

screenshot

[Amoghtech]

Yeah nice, Just add a left margin as well, It's quite close to the DELETE button and also ensure that it's responsive

[shikhar13012001]

@Amoghtech sir please could you add hacktoberfest-accepted label as well to my PR :) that would be great.