@ludo.ninja/components 2.1.34 → 2.1.36

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 (6) hide show
  1. package/build/api/subscriptions/SubscriberNotifications.d.ts +0 -8
  2. package/build/api/subscriptions/SubscriberNotifications.js +4 -135
  3. package/build/api/subscriptions/SubscriptionNotificationSPA.d.ts +11 -0
  4. package/build/api/subscriptions/SubscriptionNotificationSPA.js +142 -0
  5. package/build/components/Page404/Page404SPA.js +4 -3
  6. package/package.json +1 -1
package/build/api/subscriptions/SubscriberNotifications.d.ts CHANGED
@@ -1,9 +1 @@
1
- import { ReactNode } from "react";
2
- interface IImageInterceptor {
3
- src: string;
4
- title: string;
5
- fallbackSvg: ReactNode;
6
- }
7
- export declare const ImageInterceptor: ({ src, title, fallbackSvg, }: IImageInterceptor) => import("react/jsx-runtime").JSX.Element;
8
1
  export declare const SubscriberNotification: () => import("react/jsx-runtime").JSX.Element;
9
- export {};
package/build/api/subscriptions/SubscriberNotifications.js CHANGED
@@ -3,148 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.SubscriberNotification = exports.ImageInterceptor = void 0;
6
+ exports.SubscriberNotification = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
- const client_1 = require("@apollo/client");
9
- const api_1 = require("@ludo.ninja/api");
10
8
  const store_1 = require("../../modules/user/store");
11
- const env_1 = require("../../store/env");
12
- const ui_1 = require("../../store/ui");
13
9
  const NoSSR_1 = __importDefault(require("../../components/base/NoSSR"));
14
- const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
15
10
  const router_1 = require("next/router");
16
11
  const react_1 = require("react");
17
- const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
18
- const styled_components_1 = __importDefault(require("styled-components"));
19
- const OpportunitySvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/OpportunitySvg");
20
- const InviteCodeSvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/InviteCodeSvg");
21
- const XPIconSvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/XPIconSvg");
22
- const noContent_1 = require("./noContent");
23
- const SImage = styled_components_1.default.div `
24
- position: relative;
25
- width: 62px;
26
- height: 62px;
27
- border-radius: 4px;
28
- overflow: hidden;
29
-
30
- img {
31
- border-radius: 4px;
32
- }
33
-
34
- & *:not(img) {
35
- position: absolute;
36
- top: 0;
37
- left: 0;
38
- z-index: 10;
39
- width: 100%;
40
- height: 100%;
41
- }
42
- `;
43
- const ImageInterceptor = ({ src, title, fallbackSvg, }) => {
44
- const [isLoading, setIsLoading] = (0, react_1.useState)(true);
45
- const [isError, setIsError] = (0, react_1.useState)(false);
46
- return ((0, jsx_runtime_1.jsxs)(SImage, { children: [isError && fallbackSvg, !isError && (0, jsx_runtime_1.jsx)("img", { width: "62", height: "62", src: src, alt: title, onLoad: () => {
47
- setIsLoading(false);
48
- }, onError: () => {
49
- setIsError(true);
50
- setIsLoading(false);
51
- } }), isLoading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "skeleton", width: 62, height: 62, borderRadius: 4 }))] }));
52
- };
53
- exports.ImageInterceptor = ImageInterceptor;
54
- const ImageNotification = ({ src, title, fallbackSvg, }) => {
55
- if (!src) {
56
- return fallbackSvg;
57
- }
58
- return (0, jsx_runtime_1.jsx)(exports.ImageInterceptor, { fallbackSvg: fallbackSvg, title: title, src: src });
59
- };
60
- const Subscription = () => {
61
- const { authToken } = api_1.authCookies.getCookies();
62
- const addNotification = (0, ui_1.useUiStore)((state) => state.addNotification);
63
- const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)(state => state.NEXT_PUBLIC_ENV_VALUE);
64
- const router = (0, router_1.useRouter)();
65
- const { user, } = (0, store_1.useUserStore)((state) => ({
66
- user: state.user,
67
- }));
68
- const userId = user?.userId || "";
69
- const [readNotification] = api_1.notificationsSchema.useReadNotificationMutation({
70
- context: {
71
- uri: api_1.hosts.notificationsHost,
72
- },
73
- });
74
- (0, client_1.useSubscription)(api_1.notificationsSchema.OnNotificationDocument, {
75
- variables: { authToken, notificationTypes: [api_1.notificationsSchema.INotificationType.Push] },
76
- onData: (options) => {
77
- const notification = options.data.data?.onNotification;
78
- // console.log("notification", notification);
79
- if (notification) {
80
- switch (notification.eventType) {
81
- case api_1.notificationsSchema.IEventType.CommonOpportunity:
82
- case api_1.notificationsSchema.IEventType.UserOpportunity:
83
- addNotification({
84
- icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Opportunity updated", fallbackSvg: (0, jsx_runtime_1.jsx)(OpportunitySvg_1.OpportunitySvg, {}) }),
85
- title: notification.name || "Opportunity updated",
86
- description: notification.description || "",
87
- onClick: () => {
88
- if (notification.link) {
89
- window.open(notification.link, "_blank");
90
- }
91
- },
92
- });
93
- break;
94
- case api_1.notificationsSchema.IEventType.UserInvitee:
95
- addNotification({
96
- icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Invite code used", fallbackSvg: (0, jsx_runtime_1.jsx)(InviteCodeSvg_1.InviteCodeSvg, {}) }),
97
- title: notification.name || "Invite code used",
98
- description: notification.description || "",
99
- onClick: () => {
100
- const domain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"];
101
- if (domain === window.origin) {
102
- router.push(`/invite-codes`);
103
- }
104
- else {
105
- window.open(`${domain}/invite-codes`, "_self");
106
- }
107
- },
108
- });
109
- break;
110
- case api_1.notificationsSchema.IEventType.UserXpIncrement:
111
- case api_1.notificationsSchema.IEventType.UserXps:
112
- addNotification({
113
- icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "XP updated", fallbackSvg: (0, jsx_runtime_1.jsx)(XPIconSvg_1.XpIconSvg, {}) }),
114
- title: notification.name || "XP updated",
115
- description: notification.description || "",
116
- onClick: () => {
117
- const domain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"];
118
- if (domain === window.origin) {
119
- router.push(`/rewards/${userId}`);
120
- }
121
- else {
122
- window.open(`${domain}/rewards/${userId}`, "_self");
123
- }
124
- },
125
- });
126
- break;
127
- default:
128
- addNotification({
129
- icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Ludo updated", fallbackSvg: (0, jsx_runtime_1.jsx)(noContent_1.NoContentSvg, {}) }),
130
- title: notification.name || "",
131
- description: notification.description || "",
132
- onClick: () => {
133
- if (notification.link) {
134
- window.open(notification.link, "_blank");
135
- }
136
- },
137
- });
138
- }
139
- readNotification({ variables: { notificationId: notification.notificationId } });
140
- }
141
- },
142
- });
143
- return null;
144
- };
12
+ const SubscriptionNotificationSPA_1 = require("./SubscriptionNotificationSPA");
145
13
  const SubscriberNotification = () => {
146
14
  const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
147
15
  const key = isSignedIn ? "all includes" : "only common";
16
+ const router = (0, router_1.useRouter)();
148
17
  const [isWindowVisible, setIsWindowVisible] = (0, react_1.useState)(true);
149
18
  (0, react_1.useEffect)(() => {
150
19
  const changeVisibility = () => {
@@ -155,6 +24,6 @@ const SubscriberNotification = () => {
155
24
  document.removeEventListener("visibilitychange", changeVisibility);
156
25
  };
157
26
  }, []);
158
- return ((0, jsx_runtime_1.jsx)(NoSSR_1.default, { children: isWindowVisible && (0, jsx_runtime_1.jsx)(Subscription, {}, key) }));
27
+ return ((0, jsx_runtime_1.jsx)(NoSSR_1.default, { children: isWindowVisible && (0, jsx_runtime_1.jsx)(SubscriptionNotificationSPA_1.Subscription, { routerPush: router.push }, key) }));
159
28
  };
160
29
  exports.SubscriberNotification = SubscriberNotification;
package/build/api/subscriptions/SubscriptionNotificationSPA.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { ReactNode } from "react";
2
+ interface IImageInterceptor {
3
+ src: string;
4
+ title: string;
5
+ fallbackSvg: ReactNode;
6
+ }
7
+ export declare const ImageInterceptor: ({ src, title, fallbackSvg, }: IImageInterceptor) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const Subscription: ({ routerPush }: {
9
+ routerPush?: (a: string) => void;
10
+ }) => null;
11
+ export {};
package/build/api/subscriptions/SubscriptionNotificationSPA.js ADDED
@@ -0,0 +1,142 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Subscription = exports.ImageInterceptor = void 0;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
9
+ const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
10
+ const styled_components_1 = __importDefault(require("styled-components"));
11
+ const api_1 = require("@ludo.ninja/api");
12
+ const ui_1 = require("../../store/ui");
13
+ const env_1 = require("../../store/env");
14
+ const store_1 = require("../../modules/user/store");
15
+ const client_1 = require("@apollo/client");
16
+ const OpportunitySvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/OpportunitySvg");
17
+ const InviteCodeSvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/InviteCodeSvg");
18
+ const XPIconSvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/XPIconSvg");
19
+ const noContent_1 = require("./noContent");
20
+ const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
21
+ const SImage = styled_components_1.default.div `
22
+ position: relative;
23
+ width: 62px;
24
+ height: 62px;
25
+ border-radius: 4px;
26
+ overflow: hidden;
27
+
28
+ img {
29
+ border-radius: 4px;
30
+ }
31
+
32
+ & *:not(img) {
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ z-index: 10;
37
+ width: 100%;
38
+ height: 100%;
39
+ }
40
+ `;
41
+ const ImageInterceptor = ({ src, title, fallbackSvg, }) => {
42
+ const [isLoading, setIsLoading] = (0, react_1.useState)(true);
43
+ const [isError, setIsError] = (0, react_1.useState)(false);
44
+ return ((0, jsx_runtime_1.jsxs)(SImage, { children: [isError && fallbackSvg, !isError && (0, jsx_runtime_1.jsx)("img", { width: "62", height: "62", src: src, alt: title, onLoad: () => {
45
+ setIsLoading(false);
46
+ }, onError: () => {
47
+ setIsError(true);
48
+ setIsLoading(false);
49
+ } }), isLoading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "skeleton", width: 62, height: 62, borderRadius: 4 }))] }));
50
+ };
51
+ exports.ImageInterceptor = ImageInterceptor;
52
+ const ImageNotification = ({ src, title, fallbackSvg, }) => {
53
+ if (!src) {
54
+ return fallbackSvg;
55
+ }
56
+ return (0, jsx_runtime_1.jsx)(exports.ImageInterceptor, { fallbackSvg: fallbackSvg, title: title, src: src });
57
+ };
58
+ const Subscription = ({ routerPush }) => {
59
+ const { authToken } = api_1.authCookies.getCookies();
60
+ const addNotification = (0, ui_1.useUiStore)((state) => state.addNotification);
61
+ const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)(state => state.NEXT_PUBLIC_ENV_VALUE);
62
+ const { user, } = (0, store_1.useUserStore)((state) => ({
63
+ user: state.user,
64
+ }));
65
+ const userId = user?.userId || "";
66
+ const [readNotification] = api_1.notificationsSchema.useReadNotificationMutation({
67
+ context: {
68
+ uri: api_1.hosts.notificationsHost,
69
+ },
70
+ });
71
+ (0, client_1.useSubscription)(api_1.notificationsSchema.OnNotificationDocument, {
72
+ variables: { authToken, notificationTypes: [api_1.notificationsSchema.INotificationType.Push] },
73
+ onData: (options) => {
74
+ const notification = options.data.data?.onNotification;
75
+ // console.log("notification", notification);
76
+ if (notification) {
77
+ switch (notification.eventType) {
78
+ case api_1.notificationsSchema.IEventType.CommonOpportunity:
79
+ case api_1.notificationsSchema.IEventType.UserOpportunity:
80
+ addNotification({
81
+ icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Opportunity updated", fallbackSvg: (0, jsx_runtime_1.jsx)(OpportunitySvg_1.OpportunitySvg, {}) }),
82
+ title: notification.name || "Opportunity updated",
83
+ description: notification.description || "",
84
+ onClick: () => {
85
+ if (notification.link) {
86
+ window.open(notification.link, "_blank");
87
+ }
88
+ },
89
+ });
90
+ break;
91
+ case api_1.notificationsSchema.IEventType.UserInvitee:
92
+ addNotification({
93
+ icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Invite code used", fallbackSvg: (0, jsx_runtime_1.jsx)(InviteCodeSvg_1.InviteCodeSvg, {}) }),
94
+ title: notification.name || "Invite code used",
95
+ description: notification.description || "",
96
+ onClick: () => {
97
+ const domain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"];
98
+ if (domain === window.origin) {
99
+ routerPush?.(`/invite-codes`);
100
+ }
101
+ else {
102
+ window.open(`${domain}/invite-codes`, "_self");
103
+ }
104
+ },
105
+ });
106
+ break;
107
+ case api_1.notificationsSchema.IEventType.UserXpIncrement:
108
+ case api_1.notificationsSchema.IEventType.UserXps:
109
+ addNotification({
110
+ icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "XP updated", fallbackSvg: (0, jsx_runtime_1.jsx)(XPIconSvg_1.XpIconSvg, {}) }),
111
+ title: notification.name || "XP updated",
112
+ description: notification.description || "",
113
+ onClick: () => {
114
+ const domain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"];
115
+ if (domain === window.origin) {
116
+ routerPush?.(`/rewards/${userId}`);
117
+ }
118
+ else {
119
+ window.open(`${domain}/rewards/${userId}`, "_self");
120
+ }
121
+ },
122
+ });
123
+ break;
124
+ default:
125
+ addNotification({
126
+ icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Ludo updated", fallbackSvg: (0, jsx_runtime_1.jsx)(noContent_1.NoContentSvg, {}) }),
127
+ title: notification.name || "",
128
+ description: notification.description || "",
129
+ onClick: () => {
130
+ if (notification.link) {
131
+ window.open(notification.link, "_blank");
132
+ }
133
+ },
134
+ });
135
+ }
136
+ readNotification({ variables: { notificationId: notification.notificationId } });
137
+ }
138
+ },
139
+ });
140
+ return null;
141
+ };
142
+ exports.Subscription = Subscription;
package/build/components/Page404/Page404SPA.js CHANGED
@@ -9,8 +9,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
9
9
  const _404_svg_1 = __importDefault(require("../../public/404/404"));
10
10
  const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
11
11
  const ScreenWidth_1 = require("../../styles/ScreenWidth");
12
- const MainButton_1 = __importDefault(require("../../system/Buttons/MainButton"));
13
- const index_1 = require("../../system/index");
12
+ const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
13
+ const Box_1 = require("@ludo.ninja/ui/build/system/Box");
14
+ const Flex_1 = require("@ludo.ninja/ui/build/system/Flex");
14
15
  // Styles
15
16
  const StyledNotFoundPage = styled_components_1.default.div `
16
17
  .notFoundContent {
@@ -56,6 +57,6 @@ const StyledNotFoundPage = styled_components_1.default.div `
56
57
  `;
57
58
  // Component
58
59
  const Page404SPA = ({ redirectToHomePage }) => {
59
- return ((0, jsx_runtime_1.jsx)(StyledNotFoundPage, { children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { className: "notFoundContent", justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { mr: 140, className: "notFoundText", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "notFoundCaption", children: ["Whoops! ", (0, jsx_runtime_1.jsx)("br", {}), " No results found"] }), (0, jsx_runtime_1.jsx)(index_1.Box, { mt: "36px", children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { onClick: redirectToHomePage, variant: "primaryL", text: "Go to Main page" }) })] }), (0, jsx_runtime_1.jsx)(index_1.Box, { children: (0, jsx_runtime_1.jsx)("div", { className: "notFoundIcon", children: (0, jsx_runtime_1.jsx)(_404_svg_1.default, {}) }) })] }) }));
60
+ return ((0, jsx_runtime_1.jsx)(StyledNotFoundPage, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "notFoundContent", justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { mr: 140, className: "notFoundText", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "notFoundCaption", children: ["Whoops! ", (0, jsx_runtime_1.jsx)("br", {}), " No results found"] }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mt: "36px", children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { onClick: redirectToHomePage, variant: "primaryL", text: "Go to Main page" }) })] }), (0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsx)("div", { className: "notFoundIcon", children: (0, jsx_runtime_1.jsx)(_404_svg_1.default, {}) }) })] }) }));
60
61
  };
61
62
  exports.Page404SPA = Page404SPA;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ludo.ninja/components",
3
- "version": "2.1.34",
3
+ "version": "2.1.36",
4
4
  "private": false,
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",