diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-19 15:21:09 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-19 09:51:09 +0000 |
commit | a051331680b21f20201a47601d69505a4cfa9e40 (patch) | |
tree | f98dd4bc668c9814d58c0e49170aeeb19c2fe1de /src/components/services/content/ConnectionLostBanner.tsx | |
parent | 6.2.1-nightly.46 [skip ci] (diff) | |
download | ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.tar.gz ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.tar.zst ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.zip |
Transform service components to ts (#778)
Diffstat (limited to 'src/components/services/content/ConnectionLostBanner.tsx')
-rw-r--r-- | src/components/services/content/ConnectionLostBanner.tsx | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/src/components/services/content/ConnectionLostBanner.tsx b/src/components/services/content/ConnectionLostBanner.tsx new file mode 100644 index 000000000..88731f3b9 --- /dev/null +++ b/src/components/services/content/ConnectionLostBanner.tsx | |||
@@ -0,0 +1,99 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
5 | import { mdiAlert } from '@mdi/js'; | ||
6 | import { LIVE_API_FERDIUM_WEBSITE } from '../../../config'; | ||
7 | import Icon from '../../ui/icon'; | ||
8 | |||
9 | const messages = defineMessages({ | ||
10 | text: { | ||
11 | id: 'connectionLostBanner.message', | ||
12 | defaultMessage: 'Oh no! Ferdium lost the connection to {name}.', | ||
13 | }, | ||
14 | moreInformation: { | ||
15 | id: 'connectionLostBanner.informationLink', | ||
16 | defaultMessage: 'What happened?', | ||
17 | }, | ||
18 | cta: { | ||
19 | id: 'connectionLostBanner.cta', | ||
20 | defaultMessage: 'Reload Service', | ||
21 | }, | ||
22 | }); | ||
23 | |||
24 | const buttonTransition = | ||
25 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | ||
26 | ? 'opacity 0.25s' | ||
27 | : 'none'; | ||
28 | |||
29 | const styles = theme => ({ | ||
30 | root: { | ||
31 | background: theme.colorBackground, | ||
32 | borderRadius: theme.borderRadius, | ||
33 | position: 'absolute', | ||
34 | zIndex: 300, | ||
35 | height: 50, | ||
36 | display: 'flex', | ||
37 | flexDirection: 'row', | ||
38 | alignItems: 'center', | ||
39 | bottom: 10, | ||
40 | right: 10, | ||
41 | justifyContent: 'center', | ||
42 | padding: 10, | ||
43 | fontSize: 12, | ||
44 | }, | ||
45 | link: { | ||
46 | display: 'inline-flex', | ||
47 | opacity: 0.7, | ||
48 | }, | ||
49 | button: { | ||
50 | transition: buttonTransition, | ||
51 | color: theme.colorText, | ||
52 | border: [1, 'solid', theme.colorText], | ||
53 | borderRadius: theme.borderRadiusSmall, | ||
54 | padding: 4, | ||
55 | fontSize: 12, | ||
56 | marginLeft: 15, | ||
57 | |||
58 | '&:hover': { | ||
59 | opacity: 0.8, | ||
60 | }, | ||
61 | }, | ||
62 | icon: { | ||
63 | marginRight: 10, | ||
64 | fill: theme.styleTypes.danger.accent, | ||
65 | }, | ||
66 | }); | ||
67 | |||
68 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | ||
69 | name: string; | ||
70 | reload: () => void; | ||
71 | } | ||
72 | |||
73 | @observer | ||
74 | class ConnectionLostBanner extends Component<IProps> { | ||
75 | render(): ReactElement { | ||
76 | const { classes, name, reload, intl } = this.props; | ||
77 | |||
78 | return ( | ||
79 | <div className={classes.root}> | ||
80 | <Icon icon={mdiAlert} className={classes.icon} /> | ||
81 | <p> | ||
82 | {intl.formatMessage(messages.text, { name })} | ||
83 | <br /> | ||
84 | <a | ||
85 | href={`${LIVE_API_FERDIUM_WEBSITE}/support#what-does-franz-lost-the-connection-to-service-mean`} | ||
86 | className={classes.link} | ||
87 | > | ||
88 | {intl.formatMessage(messages.moreInformation)} | ||
89 | </a> | ||
90 | </p> | ||
91 | <button type="button" className={classes.button} onClick={reload}> | ||
92 | {intl.formatMessage(messages.cta)} | ||
93 | </button> | ||
94 | </div> | ||
95 | ); | ||
96 | } | ||
97 | } | ||
98 | |||
99 | export default injectIntl(withStyles(styles)(ConnectionLostBanner)); | ||