# ServiceCenters / Appointments ActionCable HowTo
[TOC]
## subscribing
should probably look like this:
```jsx=
useEffect(() => {
socket = consumer.subscriptions.create(
{
channel: 'ServiceCentersChannel',
service_center_id: serviceCenterId,
},
{
connected() {
console.info('[List-Socket] Connected')
setIsConnecting(false)
},
disconnected: notifyDisconnect,
received: handleMessageFromCable,
},
)
```
## sending action triggers to ActionCable from React
in AppointmentsList component (or whatever the name is)
we'd have to have methods such as these:
```jsx=
const updateAppointmentPatient = (id, attrs) => {
socket.perform('update_appointment_patient_record', {
appointment_patient_id: 345,
payload: {
//attrs go here, e.g
ready_at: (new Date().toISOString()),
})
}
const persistEditedBy = (id, action) => {
socket.perform('update_appointments_patient_viewed_by', {
appointment_patient_id: id,
popup_action: action, // 'open' or 'close'
})
}
```
## Postman testing
You CAN test ActionCable with our postman account (note that it is postman's experimental feature though)

https://hltechteam.postman.co/workspace/Hjemmelegene~d170d95a-3277-4b1c-8d9b-04f59b33e269/websocket-request/61f45fdcb04426784bc079b7
note that cable to work needs our session cookie authorized as ServiceProvider
so you need to set headers in Postman to sth like:
```
Cookie: _session_id=JNyWbpPGn%2BSOrJQf5h4XfqHe9NlnmTpcI8rulkqitkj%2BdRPFu%2BJm0OEATdbpApsdlN%2FWWXY9Nmp4V1z9ePrlHgll%2FrdiySJaiz%2B2wnk9QQt7zLiJntbV%2BaKxLLa45pxxqxmvUN%2F5YDJUy8XtHJlbgUAQioZglFIRnD%2BEpinftqCtzgoWkFewjg7kIK9lXqzAwtiAd%2Ff25OG8kvOwxoP2UEUQRt0tvQNKYTg1DYJy01D%2BuMToIW4AmvdGLCzIPh8XHdV10aUwj%2Bd2pJgUd4%2FaD6Su8cBvp1P78Y62qwRxRC%2BSHgun2DugouvG9J0bc7oACIQb8SD%2Bre4q--N1wA6xdPa28VplY2--9EZozRIJ1YXrVYbTEoeyJA%3D%3D; path=/; expires=Sat, 29 Jan 2022 21:55:55 GMT; HttpOnly
```
## What info can you expect from websockets popping to the React
### Whenever new appointment is created:
### Websocket says:
```json=
{
"identifier": "{\"channel\":\"ServiceCentersChannel\",\"service_center_id\":1}",
"message": {
"event": "appointment_created",
"appointment": {
"id": 3,
"service_center_id": 1,
"product_id": 1,
"user_id": 1,
"date": "2022-01-31",
"timeslot": 940,
"duration": 10,
"appeared_at": null,
"ready_at": null,
"deleted_at": null,
"created_at": "2022-01-29T16:32:08.686+01:00",
"updated_at": "2022-01-29T16:32:08.686+01:00",
"currently_edited_by_id": null,
"hour": "15:40",
"patient_count": 1,
"begins_at": "2022-01-31T15:40:00.000+00:00",
"patients": [
{
"id": 11,
"name": "John Smith",
"address": "Toftes Gate 48b",
"address_directions": null,
"zip": "0556",
"city": "Oslo",
"phone_number": "+4790000000",
"email": "user0@example.com",
"created_at": "2022-01-29T15:54:16.099+01:00",
"updated_at": "2022-01-29T15:54:16.179+01:00",
"avatar_url": null,
"referral_id": null,
"phone_number_old": null,
"independent": null
}
]
}
}
}
```
### Whenever new appointment is updated:
#### Websocket says:
```json=
{
"identifier": "{\"channel\":\"ServiceCentersChannel\",\"service_center_id\":1}",
"message": {
"event": "appointment_updated",
"appointment": {
"id": 3,
"service_center_id": 1,
"product_id": 1,
"user_id": 1,
"date": "2022-01-31",
"timeslot": 940,
"duration": 10,
"appeared_at": null,
"ready_at": null,
"deleted_at": null,
"created_at": "2022-01-29T16:32:08.686+01:00",
"updated_at": "2022-01-29T16:32:08.686+01:00",
"currently_edited_by_id": null,
"hour": "15:40",
"patient_count": 1,
"begins_at": "2022-01-31T15:40:00.000+00:00",
"patients": [
{
"id": 11,
"name": "John Smith",
"address": "Toftes Gate 48b",
"address_directions": null,
"zip": "0556",
"city": "Oslo",
"phone_number": "+4790000000",
"email": "user0@example.com",
"created_at": "2022-01-29T15:54:16.099+01:00",
"updated_at": "2022-01-29T15:54:16.179+01:00",
"avatar_url": null,
"referral_id": null,
"phone_number_old": null,
"independent": null
}
]
}
}
}
```
### Whenever appointment is cancelled:
#### Websocket says:
```json=
{
"identifier": "{\"channel\":\"ServiceCentersChannel\",\"service_center_id\":1}",
"message": {
"event": "appointment_cancelled",
"appointment_id": 3
}
}
```