-
Notifications
You must be signed in to change notification settings - Fork 10
/
Client.js
129 lines (107 loc) · 3.54 KB
/
Client.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React, { Component } from 'react'
import { toast } from 'react-toastify'
import { backendFetcher } from '../utils/fetcher'
import Media from './Media'
import Loader from './Loader'
class Client extends Component {
state = {
loading: true,
}
getClient = () =>
this.backend
.get(`clients/${this.state.client.id}/`)
//Checking if a media ID has specified in query params. If any, overrides the server configuration
.then(client => {
const name = window.location.queryParams.name
const mediaID = parseInt(window.location.queryParams.mediaID, 10)
let newClient = client
if (name && name !== client.name) newClient = { ...newClient, name }
if (mediaID && mediaID !== client.mediaID) newClient = { ...newClient, mediaID }
return newClient === client ? client : this.backend.put(`clients/`, newClient)
})
.then(client => {
console.log('Client loaded', client)
return client
})
getClientId = () => {
const { clientID } = localStorage
if (clientID) {
console.log('Client id found in local storage :', clientID)
return Promise.resolve(clientID)
}
console.log('Creating client id...')
return this.backend
.post('clients/', {
name: window.location.queryParams.name,
mediaID: parseInt(window.location.queryParams.mediaID, 10)
})
.then(client => {
localStorage.clientID = client.id
console.log('New client id created by server : ', client.id)
return client.id
})
}
openWebsocket = () => {
this.conn = this.backend.ws(this.state.client.id)
this.conn.onmessage = event => {
console.log('Message received from server : ', event)
if (event.data === 'update') {
toast.dismiss()
toast.warn('Ce Media a été mis à jour')
this.getClient().then(this.setClient)
}
}
this.conn.onopen = () => {
console.log('Connection with server established')
if (this.state.client.mediaID) toast.dismiss()
}
this.conn.onclose = () => {
setTimeout(() => this.openWebsocket(), 5000)
toast.error('Connection au backend interrompue .\nTentative de reconnexion dans 5s')
}
}
setClient = client => {
console.log()
this.setState({ client, loading: false, lastUpdate: Date.now() })
if (!client.mediaID) this.noMediaAssociated()
}
getNewClientId = () => {
localStorage.clear()
return this.getClientId()
}
noMediaAssociated = () => {
toast.info("Aucun Media n'est associé pour ce client", {
autoClose: false,
closeOnClick: false,
})
}
componentDidMount() {
this.backend = backendFetcher(this.props.config)
this.getClientId()
.then(clientId => this.setState({ client: { id: clientId } }))
.then(this.getClient)
.catch(error => {
//If the client doesn't exists anymore, recreate one
if (error.status === 404) this.getNewClientId().then(this.getClient)
else throw error
})
.then(this.setClient)
.catch(error => {
toast.error('Erreur lors du chargement du client', { autoClose: false })
throw error
})
.then(this.openWebsocket)
}
componentWillUnmount() {
this.conn.close()
}
render() {
const { loading, client, lastUpdate } = this.state
const { config } = this.props
if (loading) return <Loader />
if (client && client.mediaID)
return <Media config={config} mediaId={client.mediaID} lastUpdate={lastUpdate} />
return null
}
}
export default Client