I'm super excited to share a video tutorial walking you through storing reactions to videos with Hygraph.
When a user visits a page with a video, they can play the video and add a reaction at any point that the video is playing. There are four reactions we'll store, but you can add as many as you like if you're following along.
All of the code is available on GitHub if you'd rather skip to the fun stuff.
We'll be using Remix to:
- Fetch a list of videos
- Fetch reactions per video
- Handle actions for new reactions
Here's a quick peak at the code powering saving the reactions:
export let action: ActionFunction = async ({ request, params }) => {const { videoId } = params;const formData = await request.formData();const { timestamp, duration, emoji } = Object.fromEntries(formData);await hygraphClient.request(CreateReaction, {timestamp: Number(timestamp),duration: Number(duration),emoji: String(emoji),videoId,});return redirect(`/${videoId}`);};
As you can see, there isn't much to it! The only useState we have throughout the application is to store the seconds elapsed and the duration of the video.
const [secondsEnlapsed, setSecondsEnlapsed] = useState<number>(0);const [duration, setDuration] = useState<number>(0);
Then, using the Remix Form component, we can capture the reactions of users. We'll specify different <button /> values (as enums stored in Hygraph):
<Formmethod="post"style={{display: "flex",justifyContent: "center",marginTop: "30px",}}><input type="hidden" name="timestamp" value={secondsEnlapsed} /><input type="hidden" name="duration" value={duration} /><button name="emoji" type="submit" value="CLAP">👏</button><button name="emoji" type="submit" value="HEART">❤️</button><button name="emoji" type="submit" value="SHOCK">😱</button><button name="emoji" type="submit" value="EYE">👁</button>{actionMessage ? (<p><b>{actionMessage}</b></p>) : null}</Form>
I hope you enjoy the video! Let me know in the comments if you have any questions.
Blog Author
Jamie Barton
Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.