You can read this article here.
In this example we will create blog on gatsby and added Like, Dislike functionality to our blog posts. For using Feedback API
we will install SDK blips-and-chitz-feedback-api-sdk
.
First we should create credentials
for Feedback API
. If you has already you can skip.
Credentials
Section > createCredentials
.Test Endpoint
privateKey
. Store this key.We will create simple blog in gatsby.
For this we need install gatsby-cli
.
npm i -g gatsby-cli
After that create blog with following comand:
npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog
Lets integrate Feedback API
to our blog.
Create custom hook useFeedbackApi
in src/hooks/useFeedbackApi
. In this hook we will use SDK.
Install SDK:
npm i blips-and-chitz-feedback-api-sdk
You should add your RapidAPIKey
from Feedback API portal.
import { Client, FeedbackController } from "blips-and-chitz-feedback-api-sdk"
const client = new Client({
timeout: 0,
xRapidAPIKey: "RapidAPIKey",
})
const publicController = new FeedbackController(client)
function useFeedbackApi() {
async function save(feedback, sentiment, page) {
let resp
if (feedback && feedback.id) {
resp = await publicController.updateFeedbackById(feedback.id, {
sentiment,
page,
tags: ["sample-blog"],
})
} else {
resp = await publicController.createFeedback({
sentiment,
page,
tags: ["sample-blog"],
})
}
return resp.result
}
return { save }
}
export default useFeedbackApi
As you can see we import blips-and-chitz-feedback-api-sdk
.
We use createFeedback
for create feedback, if feedback has not created. And updateFeedbackById
when feedback has already created.
Tag sample-blog
is tag for this project. We can simply filter by this tag in admin panel.
Documentation about all method in SDK you can see here.
Now we will create our component this thumb up and thumb down. I will use icons from react-icons
.
npm i react-icons
And create component Like
in src/components/like
import React, { useEffect, useState } from "react"
import { BiLike, BiDislike } from "react-icons/bi"
import useFeedbackApi from "../hooks/useFeedbackApi"
const Like = ({ page }) => {
const feedbackApi = useFeedbackApi()
const [feedback, setFeedback] = useState(null)
const handleLikeClick = React.useCallback(
async like => {
const result = await feedbackApi.save(feedback, like, page)
setFeedback(result)
localStorage.setItem(`${page}_feedback`, JSON.stringify(result))
},
[feedbackApi, feedback, page]
)
useEffect(() => {
setFeedback(JSON.parse(localStorage.getItem(`${page}_feedback`)) ?? null)
}, [page])
return (
<div style={{ display: "flex", flexDirection: "row", fontSize: "20px" }}>
<div
style={{
paddingRight: "10px",
color: feedback && feedback.sentiment ? "blue" : "black",
cursor: "pointer",
}}
>
<BiLike onClick={handleLikeClick.bind(null, true)} />
</div>
<div
style={{
paddingRight: "10px",
color: feedback && feedback.sentiment === false ? "blue" : "black",
cursor: "pointer",
}}
>
<BiDislike onClick={handleLikeClick.bind(null, false)} />
</div>
</div>
)
}
export default Like
We save our feedback in localStorage
. On component render we get from there, and show icons with blue or black color when state is like or dislike.
We made a handler on icons click and call feedbackApi.save
with feedback
from localStorage
, location
and like/dislike
. After that we store in localStorage
result of this function.
Now we should use our Like
component in blog post. Open src/templates/blog-post.js
.
Import component
import Like from "../components/like"
And now use this component inside BlogPostTemplate
:
<Like page={location.pathname} />
Now we can look our feedbacks on Feedback API portal.
Feedback
Section > getFeedback
.X-API-KEY
your privateKey
from Credentials Section.tags
- ["sample-blog"]
. It’s for filter.Test Endpoint
blog
. You can also setup another filter. For example you want see all feedbacks on /my-blog/ page, just input in page
parameters ["/my-blog/"]
.That’s all. Simple 😃
In this way you can use not only in gatsby portal, you can use on every ReactJS Application.