Add like a place functionality(Frontend) #2

Activity

1. amogh-nagar

   added

   good first issueGood for newcomersGood for newcomers

   on Oct 4, 2021
2. amogh-nagar

   changed the title [-]Add like a place functionality[/-] [+]Add like a place functionality(Frontend)[/+] on Oct 4, 2021
3. amogh-nagar

   added

   enhancementNew feature or requestNew feature or request

   on Oct 4, 2021
4. shikhar13012001 commented on Oct 5, 2021

   

   shikhar13012001

   on Oct 5, 2021

   Contributor

   More actions

   I would like to work on this, Please assign it to me
5. amogh-nagar

   assigned

   shikhar13012001

   on Oct 5, 2021
6. amogh-nagar commented on Oct 5, 2021

   

   amogh-nagar

   on Oct 5, 2021

   MemberAuthor

   More actions

   Sure go for it, Happy Hacking!
7. shikhar13012001 commented on Oct 5, 2021

   

   shikhar13012001

   on Oct 5, 2021

   Contributor

   More actions

   Could you please tell me the targeted files and how much functionality are you expecting on the frontend part?
8. amogh-nagar commented on Oct 7, 2021

   

   amogh-nagar

   on Oct 7, 2021

   MemberAuthor

   More actions

   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.
9. shikhar13012001 commented on Oct 7, 2021

   

   shikhar13012001

   on Oct 7, 2021

   Contributor

   More actions

   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
10. shikhar13012001 commented on Oct 8, 2021

    

    shikhar13012001

    on Oct 8, 2021

    Contributor

    More actions

    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>
                )}
    

    
11. amogh-nagar commented on Oct 9, 2021

    

    amogh-nagar

    on Oct 9, 2021

    MemberAuthor

    More actions

    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?
12. shikhar13012001 commented on Oct 9, 2021

    

    shikhar13012001

    on Oct 9, 2021

    Contributor

    More actions

    @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
13. shikhar13012001 commented on Oct 10, 2021

    

    shikhar13012001

    on Oct 10, 2021

    Contributor

    More actions

    @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

    
    
14. amogh-nagar commented on Oct 10, 2021

    

    amogh-nagar

    on Oct 10, 2021

    Last edited by amogh-nagar

    MemberAuthor

    More actions

    Yeah nice, Just add a left margin as well, It's quite close to the DELETE button and also ensure that it's responsive
15. shikhar13012001 commented on Oct 14, 2021

    

    shikhar13012001

    on Oct 14, 2021

    Contributor

    More actions

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