Merge pull request #2 from stoqey/notifications

Notifications

.vscode/settings.json

@@ -6,10 +6,10 @@
   },
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.formatOnSave": false,
-  "editor.codeActionsOnSave": [
-    "source.addMissingImports",
-    "source.fixAll.eslint"
-  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "never",
+    "source.fixAll.eslint": "never"
+  },
   "typescript.tsdk": "node_modules/typescript/lib", // Use the workspace version of TypeScript
   "typescript.enablePromptUseWorkspaceTsdk": true, // For security reasons it's require that users opt into using the workspace version of typescript
   "typescript.preferences.autoImportFileExcludePatterns": [

codegen.ts

@@ -0,0 +1,24 @@
+import 'dotenv/config';
+
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+import { getBackendHost } from './src/lib/utils/api.utils';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: `${getBackendHost()}/graphql`,
+  // documents: ["components/**/*.graphql"],
+  generates: {
+    'src/components/types.generated.ts': { plugins: ['typescript'] },
+    'src/components/': {
+      preset: 'near-operation-file',
+      presetConfig: {
+        extension: '.generated.ts',
+        baseTypesPath: 'types.generated.ts',
+      },
+      plugins: ['typescript-operations', 'typed-document-node'],
+    },
+  },
+};
+
+export default config;

package.json

@@ -23,6 +23,7 @@
     "test-storybook:ci": "start-server-and-test serve-storybook http://127.0.0.1:6006 test-storybook",
     "prepare": "husky",
     "postbuild": "next-sitemap",
+    "codegen": "graphql-codegen --config codegen.ts",
     "docker": "act --job gke-build-publish-deploy --secret-file .env.prod --container-architecture linux/amd64 -v"
   },
   "dependencies": {

src/app/html/html.wrapper.tsx

@@ -37,7 +37,7 @@ export const HtmlPageWrapper = ({ children, ...otherProps }: any) => {
   console.log('HtmlPageWrapper', { pathname, hasJs });
 
   return (
-    <CoreUIRoot cssVars>
+    <CoreUIRoot cssVars theme={otherProps.theme}>
       {/* @ts-ignore */}
       <AccentRegion
       // {...generateAccentRegionProps("#28ff00")}

src/app/html/layout.tsx

@@ -3,6 +3,7 @@ import { cookies, headers } from 'next/headers';
 import React from 'react';
 
 import { walletscurrencies } from '@/lib/const';
+import { fetchBadges } from '@/lib/hooksServer/notifications';
 import { getMe } from '@/lib/hooksServer/user';
 import { getVendor } from '@/lib/hooksServer/vendor';
 import { getMyWallets, getRates } from '@/lib/hooksServer/wallet';
@@ -24,6 +25,7 @@ export default async function RootLayout({
   let user;
   let openSideBar;
   let theme;
+  let badges;
 
   const [, currentUrl] = await awaitTo(Promise.resolve(new URL(fullUrl)));
 
@@ -35,6 +37,7 @@ export default async function RootLayout({
 
   user = await getMe();
   if (user) {
+    badges = await fetchBadges({ models: ['Notification', 'Chat'] });
     vendor = await getVendor();
     wallets = await getMyWallets(walletscurrencies);
   } else if (
@@ -53,6 +56,7 @@ export default async function RootLayout({
       rates={rates}
       openSideBar={openSideBar}
       theme={theme}
+      badges={badges}
     >
       {children}
     </HtmlPageWrapper>

src/app/html/notifications/[slug]/route.ts

@@ -0,0 +1,32 @@
+'use server';
+
+// import { logger } from '@/lib/Logger';
+import { isEmpty } from 'lodash';
+import { NextResponse } from 'next/server';
+
+import {
+  getNotificationNextPath,
+  readNotifications,
+} from '@/lib/hooksServer/notifications';
+
+export const GET = async (
+  req: Request,
+  { params }: { params: { slug: string } },
+) => {
+  try {
+    const id = params.slug;
+    const notifications = await readNotifications({ id });
+    if (!notifications || isEmpty(notifications)) {
+      throw new Error('Notifications not found');
+    }
+    const notification = notifications[0];
+    if (!notification) {
+      throw new Error('Notification not found');
+    }
+    const nextPath = getNotificationNextPath(notification);
+    return NextResponse.redirect(new URL(nextPath, req.url));
+  } catch (error) {
+    console.log('An error occurred while fetching notifications', error);
+    return NextResponse.redirect(new URL('/html/notifications', req.url));
+  }
+};

src/app/html/notifications/page.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { NotificationsContainerHtml } from '@/containers/Notification/Notification.html';
+import { fetchNotifications } from '@/lib/hooksServer/notifications';
+
+const NotificationPage = async () => {
+  // const cookieStore = cookies();
+  // let vendor;
+  // const user = await getMe();
+  // if (user) {
+  //   vendor = await getVendor();
+  // }
+
+  const notifications = await fetchNotifications({ before: new Date() });
+
+  // console.log('notifications', notifications);
+  // const message = cookieStore.get("message")?.value;
+  // const success = cookieStore.get("success")?.value === "true";
+
+  return (
+    <NotificationsContainerHtml
+      notifications={notifications?.items || []}
+      // message={message}
+      // success={success}
+    />
+  );
+};
+
+export default NotificationPage;

src/components/navHTML/Nav.tsx

@@ -12,7 +12,7 @@ import {
 import { BorderRadius } from '@uuixjs/uuixweb-lib';
 import React from 'react';
 
-import type { PairRate, WalletOutput } from '../types.generated';
+import type { Badge, PairRate, WalletOutput } from '../types.generated';
 import LeftNav from './LeftNav';
 import RightNav from './RightNav';
 
@@ -21,6 +21,7 @@ export interface NavProps {
   user?: UserType;
   rates?: PairRate[];
   wallets?: WalletOutput[];
+  badges?: Badge[];
 }
 
 export const Nav = (props: NavProps) => {

src/components/navHTML/RightNav.tsx

@@ -1,6 +1,7 @@
 import {
   AlignItems,
   Avatar,
+  BadgeType,
   Button,
   ButtonIcon,
   ButtonIconType,
@@ -10,6 +11,7 @@ import {
   FlexDirection,
   JustifyContent,
   Layout,
+  NumberBadge,
   SVGAsset,
 } from '@uuixjs/uuixweb';
 import { isEmpty } from 'lodash';
@@ -21,6 +23,7 @@ import { useWalletTotalUsdHtml } from '@/containers/Wallet/MyWallets.html';
 import { cdnPath } from '@/lib/utils/api.utils';
 import { niceDec } from '@/lib/utils/number';
 
+import type { Badge } from '../types.generated';
 import type { NavProps } from './Nav';
 
 const ThemeToggle = ({ theme }: { theme: string }) => {
@@ -46,6 +49,7 @@ const AuthRightNav = ({
   rates,
   wallets,
   theme,
+  badges,
 }: NavProps) => {
   const { walletsTotal, walletsAmount } = useWalletTotalUsdHtml({
     wallets,
@@ -54,6 +58,12 @@ const AuthRightNav = ({
 
   console.log('walletsAmount', walletsAmount);
 
+  const notificationBadge: Badge = badges?.find(
+    (b) => (b.model || '').toLowerCase() === BadgeType.Notification,
+  );
+
+  const notificationBadgeCount = notificationBadge?.count || 0;
+
   const avatarUri = cdnPath(currentUser && currentUser.avatar); // TODO default image
 
   const username = currentUser.username || '';
@@ -127,6 +137,26 @@ const AuthRightNav = ({
         </Link>
       </Layout>
 
+      <Layout padding={{ left: 1 }}>
+        <Link href="/html/notifications">
+          <Layout display={Display.Flex}>
+            <ButtonIcon
+              type="submit"
+              size={ButtonSize.Default}
+              aria-label="aria label"
+              icon={SVGAsset.NotificationBell}
+              variant={ButtonIconType.Primary}
+            />
+
+            {notificationBadgeCount > 0 && (
+                <div style={{ marginLeft: '-15px', marginTop: '-10px' }}>
+                  <NumberBadge value={notificationBadge.count} />
+                </div>
+              )}
+          </Layout>
+        </Link>
+      </Layout>
+
       <Layout padding={{ left: 1, right: 2 }}>
         <Link href="/html/settings/profile">
           <ButtonIcon

src/components/sidebar/SideBar.tsx

@@ -1,24 +1,24 @@
-import * as React from 'react';
-
+import type { VerticalNavigationItemProps } from '@uuixjs/uuixweb';
 import {
   Attached,
   Display,
   DropDownMenuWrapper,
   FlexDirection,
   Layout,
   SVGAsset,
+  useDialogState,
   VerticalNavigation,
   VerticalNavigationGroup,
   VerticalNavigationItem,
   VerticalNavigationStateProvider,
-  useDialogState,
 } from '@uuixjs/uuixweb';
-import { adminMenus, adsStoreMenus, clientMenus } from './menus';
-import { useMeApi, useVendor } from '@/lib/hooks/useUserCache';
+import isEmpty from 'lodash/isEmpty';
 import { usePathname, useRouter } from 'next/navigation';
+import * as React from 'react';
 
-import type { VerticalNavigationItemProps } from '@uuixjs/uuixweb';
-import isEmpty from 'lodash/isEmpty';
+import { useMeApi, useVendor } from '@/lib/hooks/useUserCache';
+
+import { adminMenus, adsStoreMenus, clientMenus } from './menus';
 
 interface MenuItemProps extends VerticalNavigationItemProps {
   slug?: string;
@@ -72,7 +72,7 @@ export const VerticalSideBar = ({
     // const isOpen = pathnames.includes(item.slug);
     const menuItems = item.menu as MenuItemProps[];
 
-    const slugend = item.slug.split('/').pop() || "";
+    const slugend = item.slug.split('/').pop() || '';
     const isOpened = pathnames.includes(slugend);
 
     return (
@@ -81,7 +81,7 @@ export const VerticalSideBar = ({
           iconAsset={item.iconAsset}
           {...anchorProps}
           selected={isOpened}
-        >{""}</VerticalNavigationItem>
+        />
         {show && (
           <Attached direction="right">
             <DropDownMenuWrapper>
@@ -124,7 +124,7 @@ export const VerticalSideBar = ({
                         ? SVGAsset.ColSlideLeft
                         : SVGAsset.ColSlideRight
                     }
-                  >{""}</VerticalNavigationItem>
+                  />
 
                   {menus.map((item) => {
                     // return  <MenuItem index={menu.slug} item={menu} onCloseGroup={onCloseGroup} onOpenGroup={onOpenGroup} openGroupIDs={openGroupIDs} />