@akanjs/ui 0.9.41 → 0.9.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/System/Reconnect.d.ts +1 -6
  2. package/System/index.d.ts +1 -1
  3. package/cjs/Load/Page.js +6 -1
  4. package/cjs/System/CSR.js +4 -4
  5. package/cjs/System/Common.js +3 -3
  6. package/cjs/System/Reconnect.js +49 -47
  7. package/esm/Load/Page.js +6 -1
  8. package/esm/System/CSR.js +4 -4
  9. package/esm/System/Common.js +3 -3
  10. package/esm/System/Reconnect.js +52 -50
  11. package/package.json +1 -1
  12. package/System/HealthCheck.d.ts +0 -5
  13. package/cjs/System/HealthCheck.js +0 -63
  14. package/esm/System/HealthCheck.js +0 -44
package/System/Reconnect.d.ts CHANGED
@@ -1,6 +1 @@
1
- export interface ReconnectProps {
2
- path: string;
3
- dev?: boolean;
4
- fetchPing?: () => Promise<any>;
5
- }
6
- export declare const Reconnect: ({ path, dev, fetchPing }: ReconnectProps) => import("react/jsx-runtime").JSX.Element;
1
+ export declare const Reconnect: () => import("react/jsx-runtime").JSX.Element | null;
package/System/index.d.ts CHANGED
@@ -6,6 +6,6 @@ export declare const System: {
6
6
  ThemeToggle: () => import("react/jsx-runtime").JSX.Element | null;
7
7
  Root: ({ children, st }: import("./Root").RootProps) => import("react/jsx-runtime").JSX.Element;
8
8
  SelectLanguage: ({ className, languages }: import("./SelectLanguage").SelectLanguageProps) => import("react/jsx-runtime").JSX.Element;
9
- Reconnect: ({ path, dev, fetchPing }: import("./Reconnect").ReconnectProps) => import("react/jsx-runtime").JSX.Element;
9
+ Reconnect: () => import("react/jsx-runtime").JSX.Element | null;
10
10
  DevModeToggle: () => import("react/jsx-runtime").JSX.Element;
11
11
  };
package/cjs/Load/Page.js CHANGED
@@ -20,6 +20,7 @@ __export(Page_exports, {
20
20
  default: () => Page_default
21
21
  });
22
22
  module.exports = __toCommonJS(Page_exports);
23
+ var import_jsx_runtime = require("react/jsx-runtime");
23
24
  var import_base = require("@akanjs/base");
24
25
  var import_PageCSR = require("./PageCSR");
25
26
  const Page = import_base.baseClientEnv.renderMode === "csr" ? import_PageCSR.PageCSR : ({ loader, render }) => {
@@ -27,7 +28,11 @@ const Page = import_base.baseClientEnv.renderMode === "csr" ? import_PageCSR.Pag
27
28
  loader().then((data) => {
28
29
  resolve(render(data));
29
30
  }).catch((error) => {
30
- reject(error);
31
+ const message = error instanceof Error ? error.message : typeof error === "string" ? error : "Unknown error";
32
+ if (message === "NEXT_REDIRECT")
33
+ reject(error);
34
+ else
35
+ resolve(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-red-500", children: message }));
31
36
  });
32
37
  });
33
38
  return promise;
package/cjs/System/CSR.js CHANGED
@@ -154,7 +154,7 @@ const CSRWrapper = ({
154
154
  import_ui.animated.div,
155
155
  {
156
156
  id: "topSafeArea",
157
- className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0", {}),
157
+ className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0 max-w-screen", {}),
158
158
  ref: topSafeAreaRef,
159
159
  style: topSafeArea?.containerStyle
160
160
  }
@@ -163,7 +163,7 @@ const CSRWrapper = ({
163
163
  import_ui.animated.div,
164
164
  {
165
165
  id: "topInsetContainer",
166
- className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 isolate", {}),
166
+ className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 isolate max-w-screen", {}),
167
167
  style: topInset?.containerStyle
168
168
  }
169
169
  ),
@@ -179,7 +179,7 @@ const CSRWrapper = ({
179
179
  import_ui.animated.div,
180
180
  {
181
181
  id: "bottomInsetContainer",
182
- className: (0, import_client.clsx)("fixed inset-x-0 isolate", {}),
182
+ className: (0, import_client.clsx)("fixed inset-x-0 isolate max-w-screen", {}),
183
183
  style: bottomInset?.containerStyle
184
184
  }
185
185
  ),
@@ -187,7 +187,7 @@ const CSRWrapper = ({
187
187
  import_ui.animated.div,
188
188
  {
189
189
  id: "bottomSafeArea",
190
- className: "bg-base-100 fixed inset-x-0",
190
+ className: "bg-base-100 fixed inset-x-0 max-w-screen",
191
191
  ref: bottomSafeAreaRef,
192
192
  style: bottomSafeArea?.containerStyle
193
193
  }
package/cjs/System/Common.js CHANGED
@@ -24,7 +24,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
24
24
  var import_ko = require("dayjs/locale/ko");
25
25
  var import_client = require("@akanjs/client");
26
26
  var import_Load = require("../Load");
27
- var import_HealthCheck = require("./HealthCheck");
27
+ var import_Reconnect = require("./Reconnect");
28
28
  const Common = () => {
29
29
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
30
30
  };
@@ -38,7 +38,6 @@ const CommonWrapper = ({
38
38
  }) => {
39
39
  const account = (0, import_client.getAccount)();
40
40
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
41
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HealthCheck.HealthCheck, { fetchPing }),
42
41
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
43
42
  import_Load.Load.Page,
44
43
  {
@@ -62,7 +61,8 @@ const CommonWrapper = ({
62
61
  },
63
62
  render
64
63
  }
65
- )
64
+ ),
65
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Reconnect.Reconnect, {})
66
66
  ] });
67
67
  };
68
68
  Common.Wrapper = CommonWrapper;
package/cjs/System/Reconnect.js CHANGED
@@ -32,55 +32,65 @@ __export(Reconnect_exports, {
32
32
  });
33
33
  module.exports = __toCommonJS(Reconnect_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
- var import_client = require("@akanjs/client");
36
35
  var import_next = require("@akanjs/next");
37
36
  var import_signal = require("@akanjs/signal");
38
- var import_store = require("@akanjs/store");
39
37
  var import_clsx = __toESM(require("clsx"));
40
38
  var import_react = require("react");
41
39
  var import_tb = require("react-icons/tb");
42
- var import_Image = require("../Image");
43
- const Reconnect = ({ path, dev = false, fetchPing = () => import_signal.fetch.ping() }) => {
44
- const DOTS_LENGTH = 4;
40
+ const DOTS_LENGTH = 4;
41
+ const Reconnect = () => {
42
+ const { l } = (0, import_next.usePage)();
45
43
  const [dots, setDots] = (0, import_react.useState)(0);
46
- const connectStatus = import_store.st.use.connectStatus();
44
+ const [connectStatus, setConnectStatus] = (0, import_react.useState)("initial");
45
+ const handleConnect = (0, import_react.useCallback)(() => {
46
+ setConnectStatus((prev) => prev === "normal" || prev === "initial" ? prev : "connected");
47
+ }, []);
48
+ const handleDisconnect = (0, import_react.useCallback)(() => {
49
+ setConnectStatus((prev) => prev === "normal" || prev === "initial" ? "disconnected" : prev);
50
+ setTimeout(() => {
51
+ setConnectStatus((prev) => prev === "disconnected" ? "connecting" : prev);
52
+ }, 3e3);
53
+ }, []);
54
+ (0, import_react.useEffect)(() => {
55
+ const io = import_signal.client.getIo();
56
+ io.socket.on("connect", handleConnect);
57
+ io.socket.on("disconnect", handleDisconnect);
58
+ setTimeout(() => {
59
+ if (connectStatus !== "initial")
60
+ return;
61
+ if (import_signal.client.getIo().socket.connected)
62
+ setConnectStatus("normal");
63
+ else
64
+ handleDisconnect();
65
+ }, 1e3);
66
+ return () => {
67
+ io.socket.off("connect", handleConnect);
68
+ io.socket.off("disconnect", handleDisconnect);
69
+ };
70
+ }, []);
71
+ (0, import_react.useEffect)(() => {
72
+ if (connectStatus === "connected")
73
+ window.location.reload();
74
+ }, [connectStatus]);
47
75
  (0, import_next.useInterval)(() => {
48
- setDots((prev) => (prev + 1) % DOTS_LENGTH);
76
+ if (connectStatus === "connecting")
77
+ setDots((prev) => (prev + 1) % DOTS_LENGTH);
49
78
  }, 500);
50
- const reconnect = async () => {
51
- try {
52
- import_store.st.do.setConnectStatus("connecting");
53
- await fetchPing();
54
- import_store.st.do.setConnectStatus("connected");
55
- setTimeout(() => {
56
- if (!path || path === "/")
57
- import_client.router.replace("/");
58
- else
59
- import_client.router.replace(`/${path}`);
60
- }, 500);
61
- } catch (e) {
62
- }
63
- };
64
- (0, import_next.useInterval)(async () => {
65
- if (!window.location.href.includes("/unknown"))
66
- return;
67
- if (connectStatus === "connected")
68
- return;
69
- await reconnect();
70
- }, 5e3);
71
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: dev ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-screen flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
72
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold", children: connectStatus === "disconnected" ? "Something's wrong!" : connectStatus === "connecting" ? "Connecting..." : "Connected!" }),
79
+ if (connectStatus === "initial" || connectStatus === "normal")
80
+ return null;
81
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-fadeIn bg-base-100/50 fixed top-0 left-0 flex h-screen w-screen flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
82
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold whitespace-nowrap", children: connectStatus === "disconnected" ? l("base.somethingWrong") : connectStatus === "connecting" ? l("base.connecting") : l("base.connected") }),
73
83
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [
74
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[150px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) }) : connectStatus === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pulse py-5 text-[150px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pop text-[150px] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnected, {}) }) }) }),
84
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[150px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) : connectStatus === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pulse py-5 text-[150px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pop text-[150px] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnected, {}) }) }),
75
85
  connectStatus === "connected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
76
86
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pop" }),
77
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg", children: "Redirecting to the previous page in some seconds." }) })
87
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg", children: l("base.refreshing") }) })
78
88
  ] }) : connectStatus === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center", children: [
79
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Try reconnecting to the server" }),
89
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: l("base.tryReconnecting") }),
80
90
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: Array.from({ length: DOTS_LENGTH }).map(
81
91
  (_, index) => dots >= index ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "visible", children: "." }, index) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "invisible", children: "." }, index)
82
92
  ) })
83
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Server disconnected." })
93
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: l("base.serverDisconnected") })
84
94
  ] }),
85
95
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
86
96
  "div",
@@ -89,19 +99,11 @@ const Reconnect = ({ path, dev = false, fetchPing = () => import_signal.fetch.pi
89
99
  "mt-2 text-center text-sm leading-tight text-gray-500",
90
100
  connectStatus === "disconnected" || connectStatus === "connecting" ? "visible" : "invisible"
91
101
  ),
92
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
93
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-bold", children: "*" }),
94
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [
95
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: " Maybe your server is having a problem." }),
96
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-bold", children: "please check your server status." })
97
- ] })
98
- ] })
102
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [
103
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: l("base.serverHasProblem") }),
104
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-bold", children: l("base.checkServerStatus") })
105
+ ] }) })
99
106
  }
100
107
  )
101
- ] }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3", children: [
102
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold", children: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!" }),
103
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Image.Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }),
104
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }),
105
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..." })
106
- ] }) }) });
108
+ ] }) });
107
109
  };
package/esm/Load/Page.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsx } from "react/jsx-runtime";
1
2
  import { baseClientEnv } from "@akanjs/base";
2
3
  import { PageCSR } from "./PageCSR";
3
4
  const Page = baseClientEnv.renderMode === "csr" ? PageCSR : ({ loader, render }) => {
@@ -5,7 +6,11 @@ const Page = baseClientEnv.renderMode === "csr" ? PageCSR : ({ loader, render })
5
6
  loader().then((data) => {
6
7
  resolve(render(data));
7
8
  }).catch((error) => {
8
- reject(error);
9
+ const message = error instanceof Error ? error.message : typeof error === "string" ? error : "Unknown error";
10
+ if (message === "NEXT_REDIRECT")
11
+ reject(error);
12
+ else
13
+ resolve(/* @__PURE__ */ jsx("div", { className: "text-red-500", children: message }));
9
14
  });
10
15
  });
11
16
  return promise;
package/esm/System/CSR.js CHANGED
@@ -131,7 +131,7 @@ const CSRWrapper = ({
131
131
  animated.div,
132
132
  {
133
133
  id: "topSafeArea",
134
- className: clsx("bg-base-100 fixed inset-x-0 top-0", {}),
134
+ className: clsx("bg-base-100 fixed inset-x-0 top-0 max-w-screen", {}),
135
135
  ref: topSafeAreaRef,
136
136
  style: topSafeArea?.containerStyle
137
137
  }
@@ -140,7 +140,7 @@ const CSRWrapper = ({
140
140
  animated.div,
141
141
  {
142
142
  id: "topInsetContainer",
143
- className: clsx("bg-base-100 fixed inset-x-0 isolate", {}),
143
+ className: clsx("bg-base-100 fixed inset-x-0 isolate max-w-screen", {}),
144
144
  style: topInset?.containerStyle
145
145
  }
146
146
  ),
@@ -156,7 +156,7 @@ const CSRWrapper = ({
156
156
  animated.div,
157
157
  {
158
158
  id: "bottomInsetContainer",
159
- className: clsx("fixed inset-x-0 isolate", {}),
159
+ className: clsx("fixed inset-x-0 isolate max-w-screen", {}),
160
160
  style: bottomInset?.containerStyle
161
161
  }
162
162
  ),
@@ -164,7 +164,7 @@ const CSRWrapper = ({
164
164
  animated.div,
165
165
  {
166
166
  id: "bottomSafeArea",
167
- className: "bg-base-100 fixed inset-x-0",
167
+ className: "bg-base-100 fixed inset-x-0 max-w-screen",
168
168
  ref: bottomSafeAreaRef,
169
169
  style: bottomSafeArea?.containerStyle
170
170
  }
package/esm/System/Common.js CHANGED
@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import "dayjs/locale/ko";
3
3
  import { getAccount } from "@akanjs/client";
4
4
  import { Load } from "../Load";
5
- import { HealthCheck } from "./HealthCheck";
5
+ import { Reconnect } from "./Reconnect";
6
6
  const Common = () => {
7
7
  return /* @__PURE__ */ jsx(Fragment, {});
8
8
  };
@@ -16,7 +16,6 @@ const CommonWrapper = ({
16
16
  }) => {
17
17
  const account = getAccount();
18
18
  return /* @__PURE__ */ jsxs(Fragment, { children: [
19
- /* @__PURE__ */ jsx(HealthCheck, { fetchPing }),
20
19
  /* @__PURE__ */ jsx(
21
20
  Load.Page,
22
21
  {
@@ -40,7 +39,8 @@ const CommonWrapper = ({
40
39
  },
41
40
  render
42
41
  }
43
- )
42
+ ),
43
+ /* @__PURE__ */ jsx(Reconnect, {})
44
44
  ] });
45
45
  };
46
46
  Common.Wrapper = CommonWrapper;
package/esm/System/Reconnect.js CHANGED
@@ -1,54 +1,64 @@
1
1
  "use client";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
- import { router } from "@akanjs/client";
4
- import { useInterval } from "@akanjs/next";
5
- import { fetch } from "@akanjs/signal";
6
- import { st } from "@akanjs/store";
3
+ import { useInterval, usePage } from "@akanjs/next";
4
+ import { client } from "@akanjs/signal";
7
5
  import clsx from "clsx";
8
- import { useState } from "react";
6
+ import { useCallback, useEffect, useState } from "react";
9
7
  import { TbPlugConnected, TbPlugConnectedX } from "react-icons/tb";
10
- import { Image } from "../Image";
11
- const Reconnect = ({ path, dev = false, fetchPing = () => fetch.ping() }) => {
12
- const DOTS_LENGTH = 4;
8
+ const DOTS_LENGTH = 4;
9
+ const Reconnect = () => {
10
+ const { l } = usePage();
13
11
  const [dots, setDots] = useState(0);
14
- const connectStatus = st.use.connectStatus();
12
+ const [connectStatus, setConnectStatus] = useState("initial");
13
+ const handleConnect = useCallback(() => {
14
+ setConnectStatus((prev) => prev === "normal" || prev === "initial" ? prev : "connected");
15
+ }, []);
16
+ const handleDisconnect = useCallback(() => {
17
+ setConnectStatus((prev) => prev === "normal" || prev === "initial" ? "disconnected" : prev);
18
+ setTimeout(() => {
19
+ setConnectStatus((prev) => prev === "disconnected" ? "connecting" : prev);
20
+ }, 3e3);
21
+ }, []);
22
+ useEffect(() => {
23
+ const io = client.getIo();
24
+ io.socket.on("connect", handleConnect);
25
+ io.socket.on("disconnect", handleDisconnect);
26
+ setTimeout(() => {
27
+ if (connectStatus !== "initial")
28
+ return;
29
+ if (client.getIo().socket.connected)
30
+ setConnectStatus("normal");
31
+ else
32
+ handleDisconnect();
33
+ }, 1e3);
34
+ return () => {
35
+ io.socket.off("connect", handleConnect);
36
+ io.socket.off("disconnect", handleDisconnect);
37
+ };
38
+ }, []);
39
+ useEffect(() => {
40
+ if (connectStatus === "connected")
41
+ window.location.reload();
42
+ }, [connectStatus]);
15
43
  useInterval(() => {
16
- setDots((prev) => (prev + 1) % DOTS_LENGTH);
44
+ if (connectStatus === "connecting")
45
+ setDots((prev) => (prev + 1) % DOTS_LENGTH);
17
46
  }, 500);
18
- const reconnect = async () => {
19
- try {
20
- st.do.setConnectStatus("connecting");
21
- await fetchPing();
22
- st.do.setConnectStatus("connected");
23
- setTimeout(() => {
24
- if (!path || path === "/")
25
- router.replace("/");
26
- else
27
- router.replace(`/${path}`);
28
- }, 500);
29
- } catch (e) {
30
- }
31
- };
32
- useInterval(async () => {
33
- if (!window.location.href.includes("/unknown"))
34
- return;
35
- if (connectStatus === "connected")
36
- return;
37
- await reconnect();
38
- }, 5e3);
39
- return /* @__PURE__ */ jsx(Fragment, { children: dev ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "flex h-screen flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
40
- /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: connectStatus === "disconnected" ? "Something's wrong!" : connectStatus === "connecting" ? "Connecting..." : "Connected!" }),
47
+ if (connectStatus === "initial" || connectStatus === "normal")
48
+ return null;
49
+ return /* @__PURE__ */ jsx("div", { className: "animate-fadeIn bg-base-100/50 fixed top-0 left-0 flex h-screen w-screen flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
50
+ /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold whitespace-nowrap", children: connectStatus === "disconnected" ? l("base.somethingWrong") : connectStatus === "connecting" ? l("base.connecting") : l("base.connected") }),
41
51
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
42
- /* @__PURE__ */ jsx("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "text-[150px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) }) : connectStatus === "connecting" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "animate-pulse py-5 text-[150px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "animate-pop text-[150px] text-white", children: /* @__PURE__ */ jsx(TbPlugConnected, {}) }) }) }),
52
+ /* @__PURE__ */ jsx("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ jsx("div", { className: "text-[150px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) : connectStatus === "connecting" ? /* @__PURE__ */ jsx("div", { className: "animate-pulse py-5 text-[150px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) : /* @__PURE__ */ jsx("div", { className: "animate-pop text-[150px] text-white", children: /* @__PURE__ */ jsx(TbPlugConnected, {}) }) }),
43
53
  connectStatus === "connected" ? /* @__PURE__ */ jsxs(Fragment, { children: [
44
54
  /* @__PURE__ */ jsx("div", { className: "animate-pop" }),
45
- /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { className: "text-lg", children: "Redirecting to the previous page in some seconds." }) })
55
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { className: "text-lg", children: l("base.refreshing") }) })
46
56
  ] }) : connectStatus === "connecting" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", children: [
47
- /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Try reconnecting to the server" }),
57
+ /* @__PURE__ */ jsx("div", { className: "text-lg", children: l("base.tryReconnecting") }),
48
58
  /* @__PURE__ */ jsx("div", { className: "flex items-center", children: Array.from({ length: DOTS_LENGTH }).map(
49
59
  (_, index) => dots >= index ? /* @__PURE__ */ jsx("div", { className: "visible", children: "." }, index) : /* @__PURE__ */ jsx("div", { className: "invisible", children: "." }, index)
50
60
  ) })
51
- ] }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Server disconnected." })
61
+ ] }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: l("base.serverDisconnected") })
52
62
  ] }),
53
63
  /* @__PURE__ */ jsx(
54
64
  "div",
@@ -57,21 +67,13 @@ const Reconnect = ({ path, dev = false, fetchPing = () => fetch.ping() }) => {
57
67
  "mt-2 text-center text-sm leading-tight text-gray-500",
58
68
  connectStatus === "disconnected" || connectStatus === "connecting" ? "visible" : "invisible"
59
69
  ),
60
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
61
- /* @__PURE__ */ jsx("div", { className: "font-bold", children: "*" }),
62
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
63
- /* @__PURE__ */ jsx("div", { children: " Maybe your server is having a problem." }),
64
- /* @__PURE__ */ jsx("div", { className: "font-bold", children: "please check your server status." })
65
- ] })
66
- ] })
70
+ children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
71
+ /* @__PURE__ */ jsx("div", { children: l("base.serverHasProblem") }),
72
+ /* @__PURE__ */ jsx("div", { className: "font-bold", children: l("base.checkServerStatus") })
73
+ ] }) })
67
74
  }
68
75
  )
69
- ] }) }) }) : /* @__PURE__ */ jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3", children: [
70
- /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!" }),
71
- /* @__PURE__ */ jsx(Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }),
72
- /* @__PURE__ */ jsx("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }),
73
- /* @__PURE__ */ jsx("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..." })
74
- ] }) }) });
76
+ ] }) });
75
77
  };
76
78
  export {
77
79
  Reconnect
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akanjs/ui",
3
- "version": "0.9.41",
3
+ "version": "0.9.42",
4
4
  "sourceType": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/System/HealthCheck.d.ts DELETED
@@ -1,5 +0,0 @@
1
- interface HealthCheckProps {
2
- fetchPing?: () => Promise<any>;
3
- }
4
- export declare const HealthCheck: ({ fetchPing }: HealthCheckProps) => import("react/jsx-runtime").JSX.Element;
5
- export {};
package/cjs/System/HealthCheck.js DELETED
@@ -1,63 +0,0 @@
1
- "use client";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var HealthCheck_exports = {};
20
- __export(HealthCheck_exports, {
21
- HealthCheck: () => HealthCheck
22
- });
23
- module.exports = __toCommonJS(HealthCheck_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
- var import_client = require("@akanjs/client");
26
- var import_next = require("@akanjs/next");
27
- var import_signal = require("@akanjs/signal");
28
- var import_store = require("@akanjs/store");
29
- var import_react = require("react");
30
- const HealthCheck = ({ fetchPing = () => import_signal.fetch.ping() }) => {
31
- (0, import_react.useEffect)(() => {
32
- void (async () => {
33
- if (window.location.href.includes("/unknown"))
34
- return;
35
- const fullPath = import_client.router.getFullPath(false);
36
- try {
37
- await fetchPing();
38
- import_store.st.do.setConnectStatus("connected");
39
- if (window.location.href.includes("/unknown")) {
40
- import_client.router.back();
41
- }
42
- } catch (e) {
43
- import_store.st.do.setConnectStatus("disconnected");
44
- import_client.router.replace(`/unknown?p=${encodeURIComponent(fullPath)}`);
45
- }
46
- })();
47
- }, []);
48
- const pingCheck = async function() {
49
- try {
50
- await fetchPing();
51
- } catch (e) {
52
- import_store.st.do.setConnectStatus("disconnected");
53
- const fullPath = import_client.router.getFullPath(false);
54
- import_client.router.replace(`/unknown?p=${encodeURIComponent(fullPath)}`);
55
- }
56
- };
57
- (0, import_next.useInterval)(async () => {
58
- if (window.location.href.includes("/unknown"))
59
- return;
60
- await pingCheck();
61
- }, 1e4);
62
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
63
- };
package/esm/System/HealthCheck.js DELETED
@@ -1,44 +0,0 @@
1
- "use client";
2
- import { Fragment, jsx } from "react/jsx-runtime";
3
- import { router } from "@akanjs/client";
4
- import { useInterval } from "@akanjs/next";
5
- import { fetch } from "@akanjs/signal";
6
- import { st } from "@akanjs/store";
7
- import { useEffect } from "react";
8
- const HealthCheck = ({ fetchPing = () => fetch.ping() }) => {
9
- useEffect(() => {
10
- void (async () => {
11
- if (window.location.href.includes("/unknown"))
12
- return;
13
- const fullPath = router.getFullPath(false);
14
- try {
15
- await fetchPing();
16
- st.do.setConnectStatus("connected");
17
- if (window.location.href.includes("/unknown")) {
18
- router.back();
19
- }
20
- } catch (e) {
21
- st.do.setConnectStatus("disconnected");
22
- router.replace(`/unknown?p=${encodeURIComponent(fullPath)}`);
23
- }
24
- })();
25
- }, []);
26
- const pingCheck = async function() {
27
- try {
28
- await fetchPing();
29
- } catch (e) {
30
- st.do.setConnectStatus("disconnected");
31
- const fullPath = router.getFullPath(false);
32
- router.replace(`/unknown?p=${encodeURIComponent(fullPath)}`);
33
- }
34
- };
35
- useInterval(async () => {
36
- if (window.location.href.includes("/unknown"))
37
- return;
38
- await pingCheck();
39
- }, 1e4);
40
- return /* @__PURE__ */ jsx(Fragment, {});
41
- };
42
- export {
43
- HealthCheck
44
- };