Connecting user with angel

[softwarebyze]

1. • [ ] set up user roles. the roles we need for now are 'user' and 'angel'

• stream has 5 pre-defined call roles:

link

2. • [ ] user initiates a call with unique call id
3. • [ ] notify available angels
4. • [ ] create a channel for angels

// Create a channel for angels if it doesn't exist
const channel = client.channel('messaging', 'angels', {
  name: 'Angels Channel',
  members: ['angel1', 'angel2', 'angel3'], // IDs of angel users
});

await channel.create();

5. • [ ] Send a message to the Angels Channel

// Send a message with call details
await channel.sendMessage({
  text: `${user.name} is requesting help.`,
  attachments: [
    {
      type: 'call',
      callId: callId,
    },
  ],
});

6. • [ ] Angel receives notification

     
     // In the angel's app
     const channel = client.channel('messaging', 'angels');

await channel.watch();

// Listen for new messages channel.on('message.new', async (event) => { const message = event.message; const callAttachment = message.attachments.find((att) => att.type === 'call');

if (callAttachment) { // Display a prompt to accept the call showIncomingCallPrompt(callAttachment.callId, message.user); } });

`showIncomingCallPrompt`
```ts
const showIncomingCallPrompt = (callId, user) => {
  Alert.alert(
    'Incoming Call',
    `${user.name} is requesting help.`,
    [
      {
        text: 'Ignore',
        style: 'cancel',
      },
      {
        text: 'Accept',
        onPress: () => acceptCall(callId),
      },
    ],
    { cancelable: false }
  );
};

7. • [ ] Angel Accepts and Joins call

     
     const acceptCall = async (callId) => {
     const client = useStreamVideoClient();

   const call = client.call('default', callId);

   // Join the call await call.join();

   // Navigate to the call screen navigation.navigate('CallScreen', { callId }); };

[softwarebyze]

Example Code Adjustments

CallButton.tsx:

export const CallButton = (props: { onPress: (callId: string) => void }) => {
  const onPress = async () => {
    const isSubscribed = await presentProPaywall();
    if (isSubscribed || __DEV__) {
      // Create the call and notify angels
      const callId = await createCallAndNotifyAngels();
      props.onPress(callId);
      analytics.track('call_an_angel', {
        call_id: callId,
      });
    }
  };
  // ...rest of the component
};

const createCallAndNotifyAngels = async () => {
  const client = useStreamVideoClient();
  const callId = `help-${Date.now()}`;
  const call = client.call('default', callId);

  await call.create();
  await call.join();

  // Notify angels
  const channel = client.channel('messaging', 'angels');
  await channel.create();
  await channel.sendMessage({
    text: `${user.name} is requesting help.`,
    attachments: [
      {
        type: 'call',
        callId: callId,
      },
    ],
  });

  return callId;
};

AngelsScreen.tsx:

import React, { useEffect } from 'react';
import { Alert } from 'react-native';
import { useStreamChatClient } from 'stream-chat-react-native';

export const AngelsScreen = () => {
  const client = useStreamChatClient();

  useEffect(() => {
    const setupChannel = async () => {
      const channel = client.channel('messaging', 'angels');
      await channel.watch();

      channel.on('message.new', (event) => {
        const message = event.message;
        const callAttachment = message.attachments.find((att) => att.type === 'call');

        if (callAttachment) {
          showIncomingCallPrompt(callAttachment.callId, message.user);
        }
      });
    };

    setupChannel();
  }, []);

  const showIncomingCallPrompt = (callId, user) => {
    Alert.alert(
      'Incoming Call',
      `${user.name} is requesting help.`,
      [
        {
          text: 'Ignore',
          style: 'cancel',
        },
        {
          text: 'Accept',
          onPress: () => acceptCall(callId),
        },
      ],
      { cancelable: false }
    );
  };

  const acceptCall = async (callId) => {
    const client = useStreamVideoClient();
    const call = client.call('default', callId);
    await call.join();

    // Navigate to CallScreen
    navigation.navigate('CallScreen', { callId });
  };

  return null; // Or a UI indicating that the angel is available
};