1
+ import Link from "@material-ui/core/Link"
1
2
import { makeStyles } from "@material-ui/core/styles"
2
3
import Typography from "@material-ui/core/Typography"
3
- import React from "react"
4
+ import { useActor } from "@xstate/react"
5
+ import React , { useContext } from "react"
6
+ import { BuildInfoResponse } from "../../api/types"
7
+ import { XServiceContext } from "../../xServices/StateContext"
8
+
9
+ export const Language = {
10
+ buildInfoText : ( buildInfo : BuildInfoResponse ) : string => {
11
+ return `Coder ${ buildInfo . version } `
12
+ } ,
13
+ }
4
14
5
15
export const Footer : React . FC = ( { children } ) => {
6
16
const styles = useFooterStyles ( )
17
+ const xServices = useContext ( XServiceContext )
18
+ const [ buildInfoState ] = useActor ( xServices . buildInfoXService )
7
19
8
20
return (
9
21
< div className = { styles . root } >
@@ -13,11 +25,13 @@ export const Footer: React.FC = ({ children }) => {
13
25
{ `Copyright \u00a9 ${ new Date ( ) . getFullYear ( ) } Coder Technologies, Inc. All rights reserved.` }
14
26
</ Typography >
15
27
</ div >
16
- < div className = { styles . version } >
17
- < Typography color = "textSecondary" variant = "caption" >
18
- v2 0.0.0-prototype
19
- </ Typography >
20
- </ div >
28
+ { buildInfoState . context . buildInfo && (
29
+ < div className = { styles . buildInfo } >
30
+ < Link variant = "caption" href = { buildInfoState . context . buildInfo . external_url } >
31
+ { Language . buildInfoText ( buildInfoState . context . buildInfo ) }
32
+ </ Link >
33
+ </ div >
34
+ ) }
21
35
</ div >
22
36
)
23
37
}
@@ -29,11 +43,9 @@ const useFooterStyles = makeStyles((theme) => ({
29
43
flex : "0" ,
30
44
} ,
31
45
copyRight : {
32
- backgroundColor : theme . palette . background . default ,
33
46
margin : theme . spacing ( 0.25 ) ,
34
47
} ,
35
- version : {
36
- backgroundColor : theme . palette . background . default ,
48
+ buildInfo : {
37
49
margin : theme . spacing ( 0.25 ) ,
38
50
} ,
39
51
} ) )
0 commit comments