1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { useIntl } from "react-intl";
7

8
import {
9
  CSS,
10
  React,
11
  useActions,
12
  useTypedRedux,
13
} from "@cocalc/frontend/app-framework";
14
import { Icon } from "@cocalc/frontend/components";
15
import { labels } from "@cocalc/frontend/i18n";
16
import track from "@cocalc/frontend/user-tracking";
17
import { COLORS } from "@cocalc/util/theme";
18
import {
19
  FONT_SIZE_ICONS_NORMAL,
20
  PageStyle,
21
  TOP_BAR_ELEMENT_CLASS,
22
} from "./top-nav-consts";
23
import { blur_active_element } from "./util";
24

25
interface Props {
26
  height: number; // px
27
  pageStyle: PageStyle;
28
  on_click?: () => void;
29
}
30

31
const BASE_STYLE: CSS = {
32
  fontSize: FONT_SIZE_ICONS_NORMAL,
33
  display: "inline",
34
  color: COLORS.GRAY_M,
35
} as const;
36

37
export const ConnectionIndicator: React.FC<Props> = React.memo(
38
  (props: Props) => {
39
    const { on_click, height, pageStyle } = props;
40
    const { topPaddingIcons, sidePaddingIcons, fontSizeIcons } = pageStyle;
41

42
    const intl = useIntl();
43
    const actions = useActions("page");
44
    const connection_status = useTypedRedux("page", "connection_status");
45

46
    const connecting_style: CSS = {
47
      flex: "1",
48
      color: "white",
49
      overflow: "hidden",
50
      margin: "auto 0",
51
    } as const;
52

53
    const outer_style: CSS = {
54
      flex: "0 0 auto",
55
      display: "flex",
56
      alignItems: "center",
57
      color: COLORS.GRAY_M,
58
      cursor: "pointer",
59
      height: `${height}px`,
60
      padding: `${topPaddingIcons} ${sidePaddingIcons}`,
61
      ...(connection_status !== "connected"
62
        ? {
63
            backgroundColor:
64
              connection_status === "disconnected"
65
                ? COLORS.ANTD_RED_WARN
66
                : COLORS.ORANGE_WARN,
67
          }
68
        : {}),
69
    } as const;
70

71
    function render_connection_status() {
72
      if (connection_status === "connected") {
73
        return (
74
          <Icon
75
            name="wifi"
76
            style={{ ...BASE_STYLE, fontSize: fontSizeIcons }}
77
          />
78
        );
79
      } else if (connection_status === "connecting") {
80
        return (
81
          <div style={connecting_style}>
82
            {intl.formatMessage(labels.connecting)}...
83
          </div>
84
        );
85
      } else if (connection_status === "disconnected") {
86
        return (
87
          <div style={connecting_style}>
88
            {intl.formatMessage(labels.disconnected)}
89
          </div>
90
        );
91
      }
92
    }
93

94
    function connection_click() {
95
      actions.show_connection(true);
96
      if (typeof on_click === "function") {
97
        on_click();
98
      }
99
      blur_active_element(); // otherwise, it'll be highlighted even when closed again
100
      track("top_nav", { name: "connection" });
101
    }
102

103
    return (
104
      <div
105
        className={TOP_BAR_ELEMENT_CLASS}
106
        style={outer_style}
107
        onClick={connection_click}
108
      >
109
        {render_connection_status()}
110
      </div>
111
    );
112
  },
113
);
114

115

116