feat(#27): notification on collection create

getezy · Dec 3, 2022 · 0cfa7a5 · 0cfa7a5
1 parent 4690bc6
commit 0cfa7a5
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 34 deletions.
diff --git a/src/app/components/notification/notification-container.tsx b/src/app/components/notification/notification-container.tsx
@@ -19,7 +19,6 @@ export const NotificationContainer: React.FC = () => {
     <StyledToastContainer
       position="bottom-right"
       autoClose={3000}
-      newestOnTop
       pauseOnFocusLoss
       pauseOnHover
       closeButton={false}

diff --git a/src/app/pages/collections/forms/collection.form.tsx b/src/app/pages/collections/forms/collection.form.tsx
@@ -122,7 +122,17 @@ export const CollectionForm: React.FC<CollectionFormProps> = ({
 
   return (
     <form id={id} onSubmit={handleSubmit(onSubmit)}>
-      <Container gap={0} css={{ display: 'flex', flexDirection: 'column' }}>
+      <Container
+        gap={0}
+        display="flex"
+        direction="column"
+        wrap="nowrap"
+        css={{
+          overflow: 'hidden',
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
         <Input
           autoFocus
           bordered

diff --git a/src/app/pages/collections/hooks/index.ts b/src/app/pages/collections/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-create-collection';
diff --git a/src/app/pages/collections/hooks/use-create-collection.ts b/src/app/pages/collections/hooks/use-create-collection.ts
@@ -0,0 +1,33 @@
+import { notification } from '@components';
+import { Collection, CollectionType, useCollectionsStore } from '@storage';
+
+export function useCreateCollection() {
+  const createCollection = useCollectionsStore((store) => store.createCollection);
+
+  const create = async (payload: Collection<CollectionType>) => {
+    try {
+      await createCollection({
+        ...payload,
+        type: CollectionType.GRPC,
+      });
+
+      notification(
+        {
+          title: `${payload.name}`,
+          description: 'Collection successfully created',
+        },
+        { type: 'success' }
+      );
+    } catch (error: any) {
+      notification(
+        {
+          title: `Create collection error`,
+          description: error?.message,
+        },
+        { type: 'error' }
+      );
+    }
+  };
+
+  return { create };
+}
diff --git a/src/app/pages/collections/modals/create-collection.modal.tsx b/src/app/pages/collections/modals/create-collection.modal.tsx
@@ -2,17 +2,18 @@ import { Button, Modal, ModalProps, Spacer, Switch, Text } from '@nextui-org/rea
 import React from 'react';
 
 import { Badge } from '@components';
-import { Collection, CollectionType, useCollectionsStore } from '@storage';
+import { Collection, CollectionType } from '@storage';
 
 import { CollectionForm } from '../forms';
+import { useCreateCollection } from '../hooks';
 
 export const CreateCollectionModal: React.FC<ModalProps> = ({ onClose = () => {}, ...props }) => {
-  const createCollection = useCollectionsStore((store) => store.createCollection);
+  const { create } = useCreateCollection();
   const [isCreateMore, setIsCreateMore] = React.useState(false);
   const [defaultValues, setDefaultValues] = React.useState({});
 
   const handleSubmit = async (payload: Collection<CollectionType>) => {
-    await createCollection({
+    await create({
       ...payload,
       type: CollectionType.GRPC,
     });
@@ -32,7 +33,8 @@ export const CreateCollectionModal: React.FC<ModalProps> = ({ onClose = () => {}
   return (
     <Modal
       aria-labelledby="create-collection-modal"
-      css={{ background: '$background' }}
+      css={{ background: '$background', zIndex: '1 important!' }}
+      width="70%"
       onClose={onClose}
       {...props}
     >

diff --git a/src/app/pages/side-bar/side-bar.tsx b/src/app/pages/side-bar/side-bar.tsx
@@ -29,7 +29,6 @@ export const SideBar: React.FC = () => {
         />
       </Tooltip>
       <CreateCollectionModal
-        fullScreen
         closeButton
         open={context?.modal.createCollectionModalVisible}
         onClose={() => context?.modal.setCreateCollectionModalVisible(false)}

diff --git a/src/app/pages/tabs-container/collection-types/grpc/send-header/send-header.basic.tsx b/src/app/pages/tabs-container/collection-types/grpc/send-header/send-header.basic.tsx
@@ -218,7 +218,6 @@ export const SendHeader: React.FC<PropsWithChildren<SendHeaderProps<GrpcMethodTy
       </Container>
       <CreateEnvironmentModal
         closeButton
-        blur
         open={createEnvironmentModalVisible}
         defaultValues={{
           url: tab.data.url || '',

diff --git a/src/app/storage/collections.storage.ts b/src/app/storage/collections.storage.ts
@@ -15,7 +15,6 @@ import {
   GrpcMethod,
   GrpcService,
 } from './interfaces';
-// import { useLogsStore } from './logs.storage';
 import { useTabsStore } from './tabs.storage';
 
 export const useCollectionsStore = create(
@@ -24,32 +23,21 @@ export const useCollectionsStore = create(
       collections: [],
       createCollection: async (collection) => {
         if (collection.type === CollectionType.GRPC) {
-          try {
-            const proto = await window.protobuf.loadFromFile(collection.options);
+          const proto = await window.protobuf.loadFromFile(collection.options);
 
-            set(
-              produce<CollectionsStorage>((state) => {
-                state.collections.push({
-                  ...collection,
+          set(
+            produce<CollectionsStorage>((state) => {
+              state.collections.push({
+                ...collection,
+                id: nanoid(),
+                children: proto.map((service) => ({
+                  ...service,
                   id: nanoid(),
-                  children: proto.map((service) => ({
-                    ...service,
-                    id: nanoid(),
-                    methods: (service.methods || []).map((method) => ({ ...method, id: nanoid() })),
-                  })),
-                });
-              })
-            );
-          } catch (error: any) {
-            notification(
-              {
-                title: `Create collection error`,
-                description: error?.message,
-              },
-              { type: 'error' }
-            );
-            // useLogsStore.getState().createLog({ message: error?.message });
-          }
+                  methods: (service.methods || []).map((method) => ({ ...method, id: nanoid() })),
+                })),
+              });
+            })
+          );
         }
       },
       updateCollection: async (id, collection, showSuccessNotification = true) => {

diff --git a/src/app/themes/global.css.ts b/src/app/themes/global.css.ts
@@ -6,6 +6,11 @@ export const globalStyles = globalCss({
     width: '100vw',
   },
 
+  // For displaying toasts on top of modals
+  '.nextui-backdrop': {
+    zIndex: '9998 !important',
+  },
+
   '::-webkit-scrollbar': {
     height: 2,
     width: 2,

diff --git a/src/main/index.ts b/src/main/index.ts
@@ -32,7 +32,7 @@ const createWindow = (): void => {
     height: 600,
     width: 1000,
     minHeight: 600,
-    minWidth: 600,
+    minWidth: 800,
     center: true,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,