Added UUID fetching service for user heads using https://api.minetool…

…s.eu/

https://api.minetools.eu/ had to be used because Mojang API does not
serve CORS Response headers.

react/dashboard/src/components/SidebarHeader/SidebarHeader.js

@@ -1,11 +1,26 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
+import uuidSvc from '../../services/uuid'
+
 class SidebarHeader extends Component {
 
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            uuid: null
+        }
+    }
+
     componentDidMount() {
         const { store } = this.context
         this.unsubscribe = store.subscribe(() => this.forceUpdate())
+        const login = this.context.store.getState().login.login
+        const name = login.username
+        uuidSvc.getUUID(name).then(uuid => {
+            this.setState({ uuid })
+        })
     }
 
     componentWillUnmount() {
@@ -15,7 +30,9 @@ class SidebarHeader extends Component {
     render() {
         const login = this.context.store.getState().login.login
         const name = login.username
-        const url = login ? `https://visage.surgeplay.com/head/150/${name}.png` : ''
+        const uuid = this.state.uuid
+
+        const url = login ? `https://visage.surgeplay.com/head/150/${uuid ? uuid : 'X-Alex'}.png` : ''
         return (
             <div className="sidebar-header">
                 <img src={url}></img>

react/dashboard/src/services/uuid.js

@@ -0,0 +1,15 @@
+import axios from 'axios'
+
+const getUUID = async (name) => {
+    const url = `https://api.minetools.eu/uuid/${name}`
+    const response = await axios.get(
+        url,
+        {}
+    ).catch(e => { throw e })
+    const id = response.data.id
+
+    return id !== 'null' ? id : null
+}
+
+export default { getUUID }
+

react/dashboard/src/views/Users/UserImg.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import uuidSvc from '../../services/uuid'
+
+class UserImg extends React.Component {
+
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            name: this.props.name,
+            uuid: null
+        }
+    }
+
+    componentDidMount() {
+        const name = this.props.name
+        uuidSvc.getUUID(name).then(uuid => {
+            this.setState({ uuid, name })
+        })
+    }
+
+    render() {
+        if (this.props.name !== this.state.name) {
+            this.componentDidMount()
+        }
+        const uuid = this.state.uuid
+        const url = uuid && uuid !== null ? `https://visage.surgeplay.com/face/50/${uuid}` : 'https://visage.surgeplay.com/face/50/X-Steve'
+        return <img style={{ padding: 0, alignContent: 'center', width: '55px' }} src={url}></img>
+    }
+}
+
+export default UserImg

react/dashboard/src/views/Users/Users.js

@@ -24,6 +24,7 @@ import {
 } from 'reactstrap'
 
 import User from './User'
+import UserImg from './UserImg'
 import { BigAddButton } from '../../components/Buttons/AddButton'
 import { BiggerRemoveButton } from '../../components/Buttons/RemoveButton'
 import { BiggerDuplicateButton } from '../../components/Buttons/DuplicateButton'
@@ -75,7 +76,7 @@ class Users extends Component {
         }).map((user, indx) => (
             <Media key={indx}>
                 <Media>
-                    <img style={{ padding: 0, alignContent: 'center', width: '55px' }} src={`https://visage.surgeplay.com/face/50/${user.name}`}></img>
+                    <UserImg name={user.name} />
                 </Media>
                 <Media body>
                     <ListGroupItem >