diff options
author | 2018-12-09 13:24:17 +0100 | |
---|---|---|
committer | 2018-12-09 13:24:17 +0100 | |
commit | 898d54cd0034bbb2727bc5b5eaf9d5a4f2a852de (patch) | |
tree | 9816c013f9a9453dae07d9dd8d4a862c77c23064 /src/components/layout/AppLayout.js | |
parent | Upgrade to react 16 (diff) | |
download | ferdium-app-898d54cd0034bbb2727bc5b5eaf9d5a4f2a852de.tar.gz ferdium-app-898d54cd0034bbb2727bc5b5eaf9d5a4f2a852de.tar.zst ferdium-app-898d54cd0034bbb2727bc5b5eaf9d5a4f2a852de.zip |
Add React 16 didCatch/ErrorBoundary component
Diffstat (limited to 'src/components/layout/AppLayout.js')
-rw-r--r-- | src/components/layout/AppLayout.js | 134 |
1 files changed, 69 insertions, 65 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 3ababe54a..e526f6b1f 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -6,6 +6,8 @@ import { TitleBar } from 'electron-react-titlebar'; | |||
6 | 6 | ||
7 | import InfoBar from '../ui/InfoBar'; | 7 | import InfoBar from '../ui/InfoBar'; |
8 | import { Component as DelayApp } from '../../features/delayApp'; | 8 | import { Component as DelayApp } from '../../features/delayApp'; |
9 | import ErrorBoundary from '../util/ErrorBoundary'; | ||
10 | |||
9 | import globalMessages from '../../i18n/globalMessages'; | 11 | import globalMessages from '../../i18n/globalMessages'; |
10 | 12 | ||
11 | import { isWindows } from '../../environment'; | 13 | import { isWindows } from '../../environment'; |
@@ -94,74 +96,76 @@ export default @observer class AppLayout extends Component { | |||
94 | const { intl } = this.context; | 96 | const { intl } = this.context; |
95 | 97 | ||
96 | return ( | 98 | return ( |
97 | <div className={(darkMode ? 'theme__dark' : '')}> | 99 | <ErrorBoundary> |
98 | <div className="app"> | 100 | <div className={(darkMode ? 'theme__dark' : '')}> |
99 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />} | 101 | <div className="app"> |
100 | <div className="app__content"> | 102 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />} |
101 | {sidebar} | 103 | <div className="app__content"> |
102 | <div className="app__service"> | 104 | {sidebar} |
103 | {news.length > 0 && news.map(item => ( | 105 | <div className="app__service"> |
104 | <InfoBar | 106 | {news.length > 0 && news.map(item => ( |
105 | key={item.id} | 107 | <InfoBar |
106 | position="top" | 108 | key={item.id} |
107 | type={item.type} | 109 | position="top" |
108 | sticky={item.sticky} | 110 | type={item.type} |
109 | onHide={() => removeNewsItem({ newsId: item.id })} | 111 | sticky={item.sticky} |
110 | > | 112 | onHide={() => removeNewsItem({ newsId: item.id })} |
111 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> | 113 | > |
112 | </InfoBar> | 114 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> |
113 | ))} | 115 | </InfoBar> |
114 | {!isOnline && ( | 116 | ))} |
115 | <InfoBar | 117 | {!isOnline && ( |
116 | type="danger" | 118 | <InfoBar |
117 | > | 119 | type="danger" |
118 | <span className="mdi mdi-flash" /> | 120 | > |
119 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | 121 | <span className="mdi mdi-flash" /> |
120 | </InfoBar> | 122 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} |
121 | )} | 123 | </InfoBar> |
122 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | 124 | )} |
123 | <InfoBar | 125 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( |
124 | type="danger" | 126 | <InfoBar |
125 | ctaLabel="Try again" | 127 | type="danger" |
126 | ctaLoading={areRequiredRequestsLoading} | 128 | ctaLabel="Try again" |
127 | sticky | 129 | ctaLoading={areRequiredRequestsLoading} |
128 | onClick={retryRequiredRequests} | 130 | sticky |
129 | > | 131 | onClick={retryRequiredRequests} |
130 | <span className="mdi mdi-flash" /> | 132 | > |
131 | {intl.formatMessage(messages.requiredRequestsFailed)} | 133 | <span className="mdi mdi-flash" /> |
132 | </InfoBar> | 134 | {intl.formatMessage(messages.requiredRequestsFailed)} |
133 | )} | 135 | </InfoBar> |
134 | {showServicesUpdatedInfoBar && ( | 136 | )} |
135 | <InfoBar | 137 | {showServicesUpdatedInfoBar && ( |
136 | type="primary" | 138 | <InfoBar |
137 | ctaLabel={intl.formatMessage(messages.buttonReloadServices)} | 139 | type="primary" |
138 | onClick={reloadServicesAfterUpdate} | 140 | ctaLabel={intl.formatMessage(messages.buttonReloadServices)} |
139 | sticky | 141 | onClick={reloadServicesAfterUpdate} |
140 | > | 142 | sticky |
141 | <span className="mdi mdi-power-plug" /> | 143 | > |
142 | {intl.formatMessage(messages.servicesUpdated)} | 144 | <span className="mdi mdi-power-plug" /> |
143 | </InfoBar> | 145 | {intl.formatMessage(messages.servicesUpdated)} |
144 | )} | 146 | </InfoBar> |
145 | {appUpdateIsDownloaded && ( | 147 | )} |
146 | <InfoBar | 148 | {appUpdateIsDownloaded && ( |
147 | type="primary" | 149 | <InfoBar |
148 | ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)} | 150 | type="primary" |
149 | onClick={installAppUpdate} | 151 | ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)} |
150 | sticky | 152 | onClick={installAppUpdate} |
151 | > | 153 | sticky |
152 | <span className="mdi mdi-information" /> | 154 | > |
153 | {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank"> | 155 | <span className="mdi mdi-information" /> |
154 | <u>{intl.formatMessage(messages.changelog)}</u> | 156 | {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank"> |
155 | </a> | 157 | <u>{intl.formatMessage(messages.changelog)}</u> |
156 | </InfoBar> | 158 | </a> |
157 | )} | 159 | </InfoBar> |
158 | {isDelayAppScreenVisible && (<DelayApp />)} | 160 | )} |
159 | {services} | 161 | {isDelayAppScreenVisible && (<DelayApp />)} |
162 | {services} | ||
163 | </div> | ||
160 | </div> | 164 | </div> |
161 | </div> | 165 | </div> |
166 | {children} | ||
162 | </div> | 167 | </div> |
163 | {children} | 168 | </ErrorBoundary> |
164 | </div> | ||
165 | ); | 169 | ); |
166 | } | 170 | } |
167 | } | 171 | } |