Sendbird Desk ticket retrieval

Sendbird Desk JavaScript
1

[Problem/Question]
As a user in my react native app:

  • I am unable to see a list of my tickets which are active
  • I am unable to see a list of my tickets which are closed

// If problem, please fill out the below. If question, please delete.
[SDK Version]
“sendbird”: “^3.1.33”,
“sendbird-desk”: “^1.1.2”,

[Reproduction Steps]

I am able to create a ticket using sendbird desk and send a message as a user. The message shows up in the desk dashboard for an agent. Now, as a user, I want to see a list of active tickets where I am included and also a list of closed tickets where I am included.

Sendbird desk documentation

From the docs I tried this code:

I am not sure about:

  • How to get the group property or if it is mandatory
  • How to filter and only display tickets where the current user is a member
  • Even if I pass an empty params object without any properties, I get the error:

[ReferenceError: Property ‘status’ doesn’t exist]

const params = {
    group: 'my_group',
    // Add any parameters you wish to use.
    // offset: integer.
    // customFieldFilter: object.
    // ticket status: string.
};
Ticket.getList(params, (tickets, error) => {
        if (error) {
        // Handle error.
    }

    const ticketsFromMyGroup = tickets;
    console.log('tickets', tickets)
    // offset += tickets.length; for the next tickets.
    // Implement your code to display the ticket list.
})

LOG: tickets null

After not being able to run the above code, I tried the below code, using getOpenedList and getClosedList methods. However, I am still getting the error:

Reference Error: Property ‘status’ doesn’t exist.

export async function loadTickets(status, offset, cb) {
    switch (status) {
        case SendbirdDesk.Ticket.Status.OPEN:
            console.log('Fetching active tickets');
            SendbirdDesk.Ticket.getOpenedList(offset, (res, error) => {
                if (error) throw error;
                const tickets = res;
                console.log('activeTickets', res)
                cb(res, error);
            })
            break;
        case SendbirdDesk.Ticket.Status.CLOSED:
            console.log('Fetching closed tickets');
            SendbirdDesk.Ticket.getClosedList(offset, (res, error) => {
                if (error) throw error;
                const tickets = res;
                console.log('closedTickets', res)
                cb(res, error);
            })
            break;
        default:
            cb(null, []);
    } 
}

[Frequency]
Everytime

[Current impact]
The user cannot view the tickets they are included in

2

For these functions:

SendBirdDesk.Ticket.getClosedList
SendBirdDesk.Ticket.getOpenedList

I tested a minimal setup in react and was able to connect and fetch the tickets.

I tested another minimal setup in react-native and got the error:

Property ‘status’ doesn’t exist.

It seems like there is an issue calling these functions in react-native

react-native code:


import React, {useEffect, useState} from 'react';
import {FlatList, SafeAreaView, Text, View} from 'react-native';

import SendBirdChat from '@sendbird/chat';
import SendBirdDesk from 'sendbird-desk';
import {GroupChannelModule} from '@sendbird/chat/groupChannel';

const APP_ID = 'A3982331-CF40-4AD0-B8DF-39B3257C4CAB';
const USER_ID = '343a0b30-1461-4f2f-8752-5b2590f9aa4c';
const ACCESS_TOKEN = '62e92b7215980d7264716b4b5f678813aeb0320e';

function App() {
  const [tickets, setTickets] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const initializeSendBird = async () => {
      const sb = SendBirdChat.init({
        appId: APP_ID,
        modules: [new GroupChannelModule()],
      });

      try {
        await sb.connect(USER_ID, ACCESS_TOKEN);
        SendBirdDesk.init(sb);
        SendBirdDesk.authenticate(USER_ID, ACCESS_TOKEN, () => {
          console.log('SendbirdDesk authentication successful.');
          fetchClosedTickets();
        });
      } catch (err) {
        setError('Failed to initialize SendBird: ' + err.message);
      }
    };

    initializeSendBird();
  }, []);

  const fetchClosedTickets = () => {
    SendBirdDesk.Ticket.getClosedList(0, (res, err) => {
      if (err) {
        setError('Failed to load tickets: ' + err.message);
      } else {
        setTickets(res);
        console.log('closedTickets', res);
      }
    });
  };

  return (
    <SafeAreaView>
      <View>
        <Text>SendBird Desk Closed Tickets</Text>
        {error && <Text>{error}</Text>}
        <FlatList
          data={tickets}
          keyExtractor={item => item.id.toString()}
          renderItem={({item}) => (
            <View>
              <Text>{item.title}</Text>
            </View>
          )}
        />
      </View>
    </SafeAreaView>
  );
}

export default App;

react code:

import './App.css';
import React, { useEffect, useState } from 'react';
import SendBird from '@sendbird/chat';
import { GroupChannelModule } from '@sendbird/chat/groupChannel';
import SendbirdDesk from 'sendbird-desk';

const APP_ID = 'A3982331-CF40-4AD0-B8DF-39B3257C4CAB';
const USER_ID = '343a0b30-1461-4f2f-8752-5b2590f9aa4c';
const ACCESS_TOKEN = '62e92b7215980d7264716b4b5f678813aeb0320e';

function App() {
  const [tickets, setTickets] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    setError(false)
    const initSendBird = async (cb) => {
      try {
        const sendbird = SendBird.init({
          appId: APP_ID,
          modules: [new GroupChannelModule()],
        });
  
        await sendbird.connect(USER_ID, ACCESS_TOKEN);
        SendbirdDesk.init(sendbird);
        SendbirdDesk.authenticate(
          USER_ID,
          ACCESS_TOKEN,
          () => {
            console.log('SendbirdDesk authentication successful.');
            fetchClosedTickets()
          }
        )
      } catch (err) {
        console.log('Failed to initialize SendBird');
        console.error(err);
      }
    };

    initSendBird();
  }, []);

  const fetchClosedTickets = () => {
    SendbirdDesk.Ticket.getClosedList(0, (res, err) => {
      if (err) {
        setError('Failed to fetch closed tickets');
        console.error(err);
      } else {
        setTickets(res);
        console.log('closedTickets', res)
      }
    });
  };
  return (
    <div className="App">
      <h1>SendBird Desk Closed Tickets</h1>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <ul>
        {tickets.map((ticket) => (
          <li key={ticket.id}>{ticket.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;