-
Notifications
You must be signed in to change notification settings - Fork 29
/
AppLayout.tsx
51 lines (47 loc) · 1.71 KB
/
AppLayout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React, { useEffect } from "react";
import SplitPane from "react-split-pane";
import io from "socket.io-client";
import styled from "styled-components";
import { isRunningInElectron } from "../../utils/electron";
import JobSocket from "../../utils/socket";
import Main from "../Main/Main";
import { useConfig } from "../shared/Config";
import { useTheme } from "../shared/Themes";
import Sidebar from "../Sidebar";
import Topbar from "../Topbar";
import DesktopMenu from "./DesktopMenu";
const AppLayout = React.memo(() => {
const { config } = useConfig();
const topbarHeight = isRunningInElectron() ? "30px" : "50px";
console.log(isRunningInElectron());
useEffect(() => {
try {
const socket = io(`http://localhost:${config.port}`);
console.log(config);
JobSocket.bindSocket(socket);
} catch (error) {
console.error(`Error at starting socket`);
}
}, []);
const { theme } = useTheme();
return (
<>
<div className={theme}>
{isRunningInElectron() ? <DesktopMenu /> : <Topbar data-testid="topbar" />}
{/* <Topbar data-testid="topbar" /> */}
<div
style={{
minHeight: `calc(100vh - ${topbarHeight})`,
paddingTop: `${topbarHeight}`,
}}
>
<SplitPane data-testid="splitPane" split="vertical" defaultSize={350} maxSize={500}>
<Sidebar data-testid="sidebar" />
<Main data-testid="main" />
</SplitPane>
</div>
</div>
</>
);
});
export default AppLayout;