How to count story view about zuck.js

[ChathuraGH]

Did you get it to work?

[ramonszo]

correct option is onNextItem and onNavigateItem - not onEndItem

[MarcusPOliveira]

I have some problems and questions related to these callback functions (using in ReactJs). I also put a console.log to see what and when each function is executed, but some apparently are not. In my tests, onDataUpdate, onOpen, onView, onClose, onEnd and onNavigateItem have the console.log displayed. onNextItem is not displayed. Can anyone help me, please?

• First question:
  how to make onNextItem work too?

• Second question:
  in the onNavigateItem function, storyId is returning the id of the user who posted that story. Is it possible to change it to display the id of the story you are viewing?

Below is my code:

import { useEffect, useRef, useState } from 'react'
import { Zuck } from 'zuck.js'

import {
  Options,
  TimelineItem,
  ZuckObject,
} from '../../../../node_modules/zuck.js/dist/types'
import { language, storyTemplate } from '@/util/stories-template'

interface StoriesWrapperProps {
  stories: TimelineItem[]
  setStories: (stories: TimelineItem[]) => void
}

const StoriesWrapper = ({ stories, setStories }: StoriesWrapperProps) => {
  const [storiesList, setStoriesList] = useState<TimelineItem[]>([])
  const [template, setTemplate] = useState<any>({})
  const [isFavorited, setIsFavorited] = useState(false)

  const storiesEl = useRef(null)
  const storiesFunc = useRef(null)

  const options: Options = {
    backNative: true,
    backButton: true,
    previousTap: true,
    skin: 'snapgram',
    avatars: true,
    paginationArrows: true,
    list: false,
    cubeEffect: true,
    localStorage: true,
    language: language,
    openEffect: true,
    // reactive: true,
    callbacks: {
      onOpen: function (storyId, callback) {
        console.log('callbacks - onOpen', storyId)
        callback()
      }.bind(this),

      onView: function (storyId: string, callback: any) {
        console.log('callbacks - onView', storyId)
        // callback()
      }.bind(this),

      onEnd: function (storyId, callback) {
        // on end story
        console.log('callbacks - onEnd', storyId)
        callback()
      },
      onClose: function (storyId, callback) {
        // on close story viewer
        console.log('callbacks - onClose', storyId)
        callback()
      },
      onNextItem: function (storyId: any, nextStoryId: any, callback: any) {
        // on navigate item of story
        console.log(
          'callbacks - onNextItem',
          storyId,
          'nextStoryId',
          nextStoryId
        )
        callback()
      },
      onNavigateItem: function (storyId, nextStoryId, callback) {
        // use to update state on your reactive framework
        console.log(
          'callbacks - onNavigateItem',
          storyId,
          'nextStoryId',
          nextStoryId
        )
        callback()
      },
      onDataUpdate: function (currentState: any, callback: any) {
        setStories(currentState)
        console.log('callbacks - onDataUpdate', currentState)
        callback()
      }.bind(this),
    },
    stories: storiesList,
    template: template,
  }

  const handleFavoriteStory = (storyId: string) => {
    console.log('handleFavoriteStory', storyId)
  }

  useEffect(() => {
    setStoriesList(stories)
  }, [stories])

  useEffect(() => {
    setTemplate(
      storyTemplate(options, isFavorited, setIsFavorited, handleFavoriteStory)
    )
  }, [isFavorited])

  useEffect(() => {
    if (storiesList) {
      if (storiesEl.current) {
        storiesFunc.current = Zuck(storiesEl.current, options)

        const intervalId = setInterval(() => {
          const likeButton = document.getElementById('like-button')
          if (likeButton) {
            const storyId = likeButton.dataset.storyId
            likeButton.addEventListener('click', () =>
              handleFavoriteStory(storyId)
            )
            clearInterval(intervalId)
          }
        }, 1000)

        return () => clearInterval(intervalId)
      }
    }
  }, [storiesEl.current, storiesList])

  return <div id="stories" className="storiesWrapper" ref={storiesEl}></div>
}

export default StoriesWrapper

My stories array:

{
  "currentItem": 1,
  "currentPreview": "link of photo",
  "id": "117",
  "items": [
    {
      "id": "38",
      "length": 10,
      "link": "/visualizado_por/38",
      "linkText": "Visualizado por",
      "preview": "link of preview",
      "seen": false,
      "src": "link of photo",
      "time": "2024-02-19 11:35:21",
      "title": "Story 38",
      "type": "photo"
    },
    {
      "id": "39",
      "length": 7,
      "link": "/visualizado_por/39",
      "linkText": "Visualizado por",
      "preview": "link of preview",
      "seen": false,
      "src": "link of video",
      "time": "2024-02-19 11:35:39",
      "title": "Story 39",
      "type": "video"
    }
  ],
  "lastUpdated": NaN,
  "link": null,
  "name": "marcus teste",
  "photo": "link of profile photo",
  "seen": true,
  "time": "2024-02-19 11:35:21",
  "todos_vizualizados": false
}

Running on these versions:

"next": "12.3.2",
"react": "^18.2.0",
"zuck.js": "^2.1.0"

[amitgarg2002]

@ramonszo what if user have only one story then how we use onNextItem and onNavigateItem to count views.