DiscipleTools / disciple-tools-web-components

https://jade-chebakia-17493f.netlify.app/?path=/story/kitchen-sink--kitchen-sink
GNU General Public License v2.0
3 stars 8 forks source link

Code changes for 'Follow' & Favorite (star) button #93

Closed Ashima-Arora closed 1 week ago

Ashima-Arora commented 1 month ago

@micahmills

Could you please review the code changed in dt-button component and the related code changes in componentService.

We started with modifying the dt-button to handle the click event and added a 'name' attribute to the component. Subsequently, we utilized ComponentService to trigger the API and save the necessary values.

The custom 'click' event is now managed within the ComponentService. For the initial setup, we've used static values required by the API to ensure the functionality works as intended.

Here is how I have integrated dt-button for 'following' button in dt-theme

  <dt-button name="unfollow" id="unfollow" label="unfollow" posttype="contacts" type="button" outline="true" title="" context="primary" confirm="">Following
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg></dt-button>

"We have used static values for now to setup the functionality first. We will dynamic all the values once approach is fixed"

Kindly share your thoughts as going forward, we would be integrating dt-button everywhere and many times we need to hit api and send the api expected values.

Thank you!

@gp-birender @Vijenderrr

netlify[bot] commented 1 month ago

Deploy request for jade-chebakia-17493f pending review.

Visit the deploys page to approve it

Name Link
Latest commit 366f5ca17008caca57bbde017fe412380a1c7460
micahmills commented 1 month ago

You are on the right track here. I think lines 179-189 that gets the values in the correct format should live in the convertValue function, but it looks like you have a couple of console statements there and plan to move that when you use the dynamic values.

The only question I have is why do we need to add the name attribute? Can we just use the id since as far as I know the id and name would be the same in all cases?

Ashima-Arora commented 2 weeks ago

Hi @micahmills,

we have made changes in the code so that we can integrate dt-button for favorite button in to theme. Related changes are done in dt-button, componentService and apiService. Kindly look once and provide us with your feedback. Thank you!

@Vijenderrr