diff options
author | 2022-10-25 12:51:28 +0530 | |
---|---|---|
committer | 2022-10-25 07:21:28 +0000 | |
commit | f79727a8632490f11c1423773fdd6adfb6337a7b (patch) | |
tree | a80943f4e4e571359c8104341a3957f6e763dce4 /src/components/auth/AuthLayout.tsx | |
parent | add balajiv113 as a contributor for code (#701) [skip ci] (diff) | |
download | ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.tar.gz ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.tar.zst ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.zip |
Transform 'AuthLayoutContainer' component hierarchy to tsx (#699)
Co-authored-by: Muhamed <>
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/auth/AuthLayout.tsx')
-rw-r--r-- | src/components/auth/AuthLayout.tsx | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/src/components/auth/AuthLayout.tsx b/src/components/auth/AuthLayout.tsx new file mode 100644 index 000000000..527c2bb74 --- /dev/null +++ b/src/components/auth/AuthLayout.tsx | |||
@@ -0,0 +1,128 @@ | |||
1 | import { | ||
2 | cloneElement, | ||
3 | Component, | ||
4 | MouseEventHandler, | ||
5 | ReactElement, | ||
6 | } from 'react'; | ||
7 | import { observer } from 'mobx-react'; | ||
8 | import { TitleBar } from 'electron-react-titlebar/renderer'; | ||
9 | import { injectIntl, WrappedComponentProps } from 'react-intl'; | ||
10 | import { mdiFlash } from '@mdi/js'; | ||
11 | import { GlobalError } from '../../@types/ferdium-components.types'; | ||
12 | import Link from '../ui/Link'; | ||
13 | import InfoBar from '../ui/InfoBar'; | ||
14 | import { Component as PublishDebugInfo } from '../../features/publishDebugInfo'; | ||
15 | import { updateVersionParse } from '../../helpers/update-helpers'; | ||
16 | import globalMessages from '../../i18n/globalMessages'; | ||
17 | import { isWindows } from '../../environment'; | ||
18 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | ||
19 | import { GITHUB_FERDIUM_URL } from '../../config'; | ||
20 | import Icon from '../ui/icon'; | ||
21 | import { serverName } from '../../api/apiBase'; | ||
22 | |||
23 | export interface IProps extends WrappedComponentProps { | ||
24 | children: ReactElement; | ||
25 | error: GlobalError; | ||
26 | isOnline: boolean; | ||
27 | isAPIHealthy: boolean; | ||
28 | retryHealthCheck: MouseEventHandler<HTMLButtonElement>; | ||
29 | isHealthCheckLoading: boolean; | ||
30 | isFullScreen: boolean; | ||
31 | installAppUpdate: MouseEventHandler<HTMLButtonElement>; | ||
32 | appUpdateIsDownloaded: boolean; | ||
33 | updateVersion: string; | ||
34 | } | ||
35 | |||
36 | interface IState { | ||
37 | shouldShowAppUpdateInfoBar: boolean; | ||
38 | } | ||
39 | |||
40 | @observer | ||
41 | class AuthLayout extends Component<IProps, IState> { | ||
42 | constructor(props: IProps) { | ||
43 | super(props); | ||
44 | |||
45 | this.state = { | ||
46 | shouldShowAppUpdateInfoBar: true, | ||
47 | }; | ||
48 | } | ||
49 | |||
50 | render(): ReactElement { | ||
51 | const { | ||
52 | children, | ||
53 | error, | ||
54 | isOnline, | ||
55 | isAPIHealthy, | ||
56 | retryHealthCheck, | ||
57 | isHealthCheckLoading, | ||
58 | isFullScreen, | ||
59 | installAppUpdate, | ||
60 | appUpdateIsDownloaded, | ||
61 | updateVersion, | ||
62 | intl, | ||
63 | } = this.props; | ||
64 | |||
65 | let serverNameParse = serverName(); | ||
66 | serverNameParse = | ||
67 | serverNameParse === 'Custom' ? 'your Custom Server' : serverNameParse; | ||
68 | |||
69 | return ( | ||
70 | <> | ||
71 | {isWindows && !isFullScreen && ( | ||
72 | <TitleBar | ||
73 | menu={window['ferdium'].menu.template} | ||
74 | icon="assets/images/logo.svg" | ||
75 | /> | ||
76 | )} | ||
77 | <div className="auth"> | ||
78 | {!isOnline && ( | ||
79 | <InfoBar type="warning"> | ||
80 | <Icon icon={mdiFlash} /> | ||
81 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | ||
82 | </InfoBar> | ||
83 | )} | ||
84 | {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( | ||
85 | <AppUpdateInfoBar | ||
86 | onInstallUpdate={installAppUpdate} | ||
87 | updateVersionParsed={updateVersionParse(updateVersion)} | ||
88 | onHide={() => { | ||
89 | this.setState({ shouldShowAppUpdateInfoBar: false }); | ||
90 | }} | ||
91 | /> | ||
92 | )} | ||
93 | {isOnline && !isAPIHealthy && ( | ||
94 | <InfoBar | ||
95 | type="danger" | ||
96 | ctaLabel="Try again" | ||
97 | ctaLoading={isHealthCheckLoading} | ||
98 | sticky | ||
99 | onClick={retryHealthCheck} | ||
100 | > | ||
101 | <Icon icon={mdiFlash} /> | ||
102 | {intl.formatMessage(globalMessages.APIUnhealthy, { | ||
103 | serverNameParse, | ||
104 | })} | ||
105 | </InfoBar> | ||
106 | )} | ||
107 | <div className="auth__layout"> | ||
108 | {/* Inject globalError into children */} | ||
109 | {cloneElement(children, { | ||
110 | error, | ||
111 | })} | ||
112 | </div> | ||
113 | {/* </div> */} | ||
114 | <Link | ||
115 | to={`${GITHUB_FERDIUM_URL}/ferdium-app`} | ||
116 | className="auth__adlk" | ||
117 | target="_blank" | ||
118 | > | ||
119 | <img src="./assets/images/adlk.svg" alt="" /> | ||
120 | </Link> | ||
121 | </div> | ||
122 | <PublishDebugInfo /> | ||
123 | </> | ||
124 | ); | ||
125 | } | ||
126 | } | ||
127 | |||
128 | export default injectIntl(AuthLayout); | ||