diff options
author | 2022-06-27 18:21:31 +0200 | |
---|---|---|
committer | 2022-06-27 17:21:31 +0100 | |
commit | 0bf13689d53bd493fb4d0a4213c1801013b5aa8a (patch) | |
tree | 2b5ae44e4f1aa73b49c011954ff1cb47e3959bad /src/containers/layout/AppLayoutContainer.tsx | |
parent | chore: recommend specific vscode extensions to setup development [skip ci] (#... (diff) | |
download | ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.tar.gz ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.tar.zst ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.zip |
chore: transform containers/settings from js to tsx (#384)
Diffstat (limited to 'src/containers/layout/AppLayoutContainer.tsx')
-rw-r--r-- | src/containers/layout/AppLayoutContainer.tsx | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx new file mode 100644 index 000000000..c6a9dfb0d --- /dev/null +++ b/src/containers/layout/AppLayoutContainer.tsx | |||
@@ -0,0 +1,172 @@ | |||
1 | import { Children, Component, ReactElement, ReactNode } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import { ThemeProvider } from 'react-jss'; | ||
4 | |||
5 | import { StoresProps } from 'src/@types/ferdium-components.types'; | ||
6 | import AppLayout from '../../components/layout/AppLayout'; | ||
7 | import Sidebar from '../../components/layout/Sidebar'; | ||
8 | import Services from '../../components/services/content/Services'; | ||
9 | import AppLoader from '../../components/ui/AppLoader'; | ||
10 | |||
11 | import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer'; | ||
12 | import { workspaceStore } from '../../features/workspaces'; | ||
13 | |||
14 | interface AppLayoutContainerProps extends StoresProps { | ||
15 | children: ReactNode; | ||
16 | } | ||
17 | |||
18 | class AppLayoutContainer extends Component<AppLayoutContainerProps> { | ||
19 | render(): ReactElement { | ||
20 | const { | ||
21 | app, | ||
22 | features, | ||
23 | services, | ||
24 | ui, | ||
25 | settings, | ||
26 | globalError, | ||
27 | requests, | ||
28 | user, | ||
29 | router, | ||
30 | } = this.props.stores; | ||
31 | |||
32 | /* HOTFIX for: | ||
33 | [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[bound ]' TypeError: Cannot read properties of null (reading 'push') | ||
34 | at RouterStore.push (store.js:25) | ||
35 | at UserStore._requireAuthenticatedUser | ||
36 | */ | ||
37 | if (!user.isLoggedIn) { | ||
38 | router.push('/auth/welcome'); | ||
39 | } | ||
40 | |||
41 | const { | ||
42 | setActive, | ||
43 | handleIPCMessage, | ||
44 | setWebviewReference, | ||
45 | detachService, | ||
46 | openWindow, | ||
47 | reorder, | ||
48 | reload, | ||
49 | toggleNotifications, | ||
50 | toggleAudio, | ||
51 | toggleDarkMode, | ||
52 | deleteService, | ||
53 | updateService, | ||
54 | hibernate, | ||
55 | awake, | ||
56 | } = this.props.actions.service; | ||
57 | |||
58 | const { retryRequiredRequests } = this.props.actions.requests; | ||
59 | |||
60 | const { installUpdate, toggleMuteApp, toggleCollapseMenu } = | ||
61 | this.props.actions.app; | ||
62 | |||
63 | const { openSettings, closeSettings } = this.props.actions.ui; | ||
64 | |||
65 | const { children } = this.props; | ||
66 | |||
67 | const isLoadingFeatures = | ||
68 | features.featuresRequest.isExecuting && | ||
69 | !features.featuresRequest.wasExecuted; | ||
70 | |||
71 | const isLoadingServices = | ||
72 | services.allServicesRequest.isExecuting && | ||
73 | services.allServicesRequest.isExecutingFirstTime; | ||
74 | |||
75 | const isLoadingSettings = !settings.loaded; | ||
76 | |||
77 | if (isLoadingSettings || isLoadingFeatures || isLoadingServices) { | ||
78 | return ( | ||
79 | <ThemeProvider theme={ui.theme}> | ||
80 | <AppLoader theme={ui.theme} /> | ||
81 | </ThemeProvider> | ||
82 | ); | ||
83 | } | ||
84 | |||
85 | const workspacesDrawer = ( | ||
86 | <WorkspaceDrawer | ||
87 | // eslint-disable-next-line no-confusing-arrow | ||
88 | getServicesForWorkspace={workspace => | ||
89 | workspace | ||
90 | ? workspaceStore.getWorkspaceServices(workspace).map(s => s.name) | ||
91 | : services.all.map(s => s.name) | ||
92 | } | ||
93 | /> | ||
94 | ); | ||
95 | |||
96 | const sidebar = ( | ||
97 | <Sidebar | ||
98 | services={services.allDisplayed} | ||
99 | setActive={setActive} | ||
100 | isAppMuted={settings.all.app.isAppMuted} | ||
101 | isMenuCollapsed={settings.all.app.isMenuCollapsed} | ||
102 | openSettings={openSettings} | ||
103 | closeSettings={closeSettings} | ||
104 | reorder={reorder} | ||
105 | reload={reload} | ||
106 | toggleNotifications={toggleNotifications} | ||
107 | toggleAudio={toggleAudio} | ||
108 | toggleDarkMode={toggleDarkMode} | ||
109 | deleteService={deleteService} | ||
110 | updateService={updateService} | ||
111 | hibernateService={hibernate} | ||
112 | wakeUpService={awake} | ||
113 | toggleMuteApp={toggleMuteApp} | ||
114 | toggleCollapseMenu={toggleCollapseMenu} | ||
115 | toggleWorkspaceDrawer={ | ||
116 | this.props.actions.workspaces.toggleWorkspaceDrawer | ||
117 | } | ||
118 | isWorkspaceDrawerOpen={workspaceStore.isWorkspaceDrawerOpen} | ||
119 | showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar} | ||
120 | showMessageBadgeWhenMutedSetting={ | ||
121 | settings.all.app.showMessageBadgeWhenMuted | ||
122 | } | ||
123 | showServiceNameSetting={settings.all.app.showServiceName} | ||
124 | showMessageBadgesEvenWhenMuted={ui.showMessageBadgesEvenWhenMuted} | ||
125 | isTodosServiceActive={services.isTodosServiceActive || false} | ||
126 | /> | ||
127 | ); | ||
128 | |||
129 | const servicesContainer = ( | ||
130 | <Services | ||
131 | services={services.allDisplayedUnordered} | ||
132 | handleIPCMessage={handleIPCMessage} | ||
133 | setWebviewReference={setWebviewReference} | ||
134 | detachService={detachService} | ||
135 | openWindow={openWindow} | ||
136 | reload={reload} | ||
137 | openSettings={openSettings} | ||
138 | update={updateService} | ||
139 | userHasCompletedSignup={user.hasCompletedSignup} | ||
140 | isSpellcheckerEnabled={settings.app.enableSpellchecking} | ||
141 | /> | ||
142 | ); | ||
143 | |||
144 | return ( | ||
145 | <ThemeProvider theme={ui.theme}> | ||
146 | <AppLayout | ||
147 | settings={settings} | ||
148 | isFullScreen={app.isFullScreen} | ||
149 | isOnline={app.isOnline} | ||
150 | showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar} | ||
151 | appUpdateIsDownloaded={ | ||
152 | app.updateStatus === app.updateStatusTypes.DOWNLOADED | ||
153 | } | ||
154 | authRequestFailed={app.authRequestFailed} | ||
155 | sidebar={sidebar} | ||
156 | workspacesDrawer={workspacesDrawer} | ||
157 | services={servicesContainer} | ||
158 | installAppUpdate={installUpdate} | ||
159 | globalError={globalError.error} | ||
160 | showRequiredRequestsError={requests.showRequiredRequestsError} | ||
161 | areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful} | ||
162 | retryRequiredRequests={retryRequiredRequests} | ||
163 | areRequiredRequestsLoading={requests.areRequiredRequestsLoading} | ||
164 | > | ||
165 | {Children.count(children) > 0 ? children : null} | ||
166 | </AppLayout> | ||
167 | </ThemeProvider> | ||
168 | ); | ||
169 | } | ||
170 | } | ||
171 | |||
172 | export default inject('stores', 'actions')(observer(AppLayoutContainer)); | ||