attendees-tracking-widget

Real time attendees tracking widget

PUBLISH TO NPM

1. yarn version --patch / yarn version --minor / yarn version --major
2. yarn publish

PUBLISH BETA VERSION

1. yarn version --prerelease --preid beta
2. yarn publish --tag beta

Usage

As tracker

import React, { useRef } from 'react'
import { Tracker } from 'attendee-to-attendee-widget'
import 'attendee-to-attendee-widget/dist/index.css'

const sbAuthProps = {
  supabaseUrl: process.env.GATSBY_SUPABASE_URL,
  supabaseKey: process.env.GATSBY_SUPABASE_KEY
}

const widgetProps = {
  user: {
    fullName: FULL_NAME,
    email: EMAIL,
    company: COMPANY,
    title: JOB_TITLE,
    picUrl: PROFILE_PIC_URL,
    socialInfo: {
      githubUser: GITHUB_USER_NAME,
      linkedInProfile: LINKED_IN_PROFILE_NAME,
      twitterName: TWITTER_USER_NAME,
      wechatUser: WECHAT_USER_NAME
    },
    getBadgeFeatures: () => {
      return [
        {
          name: BADGE_TITLE,
          image: BADGE_IMAGE_URL
        },
        ...
      ] //attendee.ticket.badge.features
    },
    hasPermission: (permission) => {
      switch (permission) {
        case permissions.MANAGE_ROOMS:
          return true|false;
        case permissions.CHAT:
          return true|false;
        default:
          return true|false;
      }
    },
    bio: BIO, //Could be in Markdown format or HTML
    showEmail: true|false,
    showFullName: true|false,
    allowChatWithMe: true|false,
    showProfilePic: true|false,
    showSocialInfo: true|false,
    showBio: true|false,
  },
  summitId: SUMMIT_ID,
  ...sbAuthProps
}

const App = () => {
  const trackerRef = useRef()

  const handleSignOut = () => {
    trackerRef.current.signOut()
  }

  return <Tracker {...widgetProps} ref={trackerRef} />
}

As attendees viewer

import React from 'react'

import {
  AttendeeToAttendeeContainer,
  permissions
} from 'attendee-to-attendee-widget'
import 'attendee-to-attendee-widget/dist/index.css'

const sbAuthProps = {
  supabaseUrl: ...,
  supabaseKey: ...
}

const adminGroups = ['administrators', 'super-admins']

export const AttendeesWidget = ({ user, event }) => {
  //Deep linking support
  const sdcRef = useRef()
  const shcRef = useRef()
  const sqacRef = useRef()
  const ocrRef = useRef()

  useEffect(() => {
    const starHelpChatParam = getUrlParam('starthelpchat')
    const starQAChatParam = getUrlParam('startqachat')
    const starDirectChatParam = getUrlParam('startdirectchat')
    const openChatRoomParam = getUrlParam('openchatroom')

    if (starHelpChatParam) {
      shcRef.current.startHelpChat();
    } else if (starQAChatParam) {
      sqacRef.current.startQAChat();
    } else if (starDirectChatParam) {
      sdcRef.current.startDirectChat(starDirectChatParam);
    } else if (openChatRoomParam) {
      ocrRef.current.openChatRoom(openChatRoomParam);
    }
  }, [])

  const { email, first_name, last_name, bio, groups } = user.userProfile
  const {
    picture,
    company,
    job_title,
    sub,
    github_user,
    linked_in_profile,
    twitter_name,
    wechat_user
  } = user.idpProfile

  const chatProps = {
    streamApiKey: ...,
    chatApiBaseUrl: ...,
    onAuthError: (err, res) => console.error(err),
    openDir: 'left',
    activity: null,
    getAccessToken: async () => {
      ...
    }
  }

  if (event) {
    //Widget will create this activity room or add members to it
    chatProps.activity = {
      id: event.id,
      name: event.title,
      imgUrl: event.image
    }
  }

  const widgetProps = {
    user: {
      id: IDP_USER_ID,
      idpUserId: IDP_USER_ID,
      hasPermission: (permission) => {
        switch (permission) {
          case permissions.MANAGE_ROOMS:
            return false
          case permissions.CHAT:
            return true
          default:
            return false
        }
      }
    },
    summit: {
      id: SUMMIT_ID,
      badge_features_types: []
    },
    height: WIDGET_HEIGHT || 400,
    defaultScope: scopes.PAGE,  //Default attendees filter scope (scopes.PAGE | scopes.SHOW)
    ...chatProps,
    ...sbAuthProps
  }

  return <AttendeeToAttendeeContainer {...widgetProps} ref={{ sdcRef, shcRef, sqacRef, ocrRef }} />
}

Deep linking

Deep linking is implemented using multiple forwardRefs (sdcRef, shcRef, sqacRef, ocrRef) As shown in the example above, this feature could be activated by setting url hash parameters

Allowed parameters

• #starthelpchat=true - It will open a help chat
• #startqachat=true - It will open a q&a chat related to the current event
• #startdirectchat=[counterpart idp user id] - It will open a chat with the user whose id is passed as a value
• #openchatroom=[room id] - It will open the chat room which id is [room id]

For further information go to test-bench\src\App.js