Added remove proto functionality

klummy · Feb 17, 2019 · 0e20de3 · 0e20de3
1 parent dd2e394
commit 0e20de3
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 75 deletions.
diff --git a/src/renderer/components/Content/Content.tsx b/src/renderer/components/Content/Content.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 
 import { IStoreState } from '../../types';
@@ -18,18 +18,21 @@ export interface IContentProps {
 const Content: React.SFC<IContentProps> = ({ activeTab, notifications, tabs }) => {
   const tab = tabs.find(t => t.id === activeTab);
 
-  if (!tab) {
-    return <EmptyStateContainer>Empty</EmptyStateContainer>;
-  }
-
-  const { results } = tab;
+  const results = tab && tab.results;
 
   return (
     <OuterWrapper>
-      <QueryPane />
-      <Results
-        queryResult={results ? JSON.stringify(tab.results, null, 2) : ''}
-      />
+      {tab
+        ? (
+          <Fragment>
+            <QueryPane />
+            <Results
+              queryResult={results ? JSON.stringify(tab.results, null, 2) : ''}
+            />
+          </Fragment>
+        )
+        : <EmptyStateContainer>Empty</EmptyStateContainer>
+      }
       <NotificationList notifications={notifications} />
     </OuterWrapper>
   );

diff --git a/src/renderer/components/NavProtoList/NavProtoItem.tsx b/src/renderer/components/NavProtoList/NavProtoItem.tsx
@@ -1,5 +1,6 @@
 import { MethodDefinition } from '@grpc/proto-loader';
 import * as React from 'react';
+import { connect } from 'react-redux';
 
 import logger from '../../libs/logger';
 import { IProto } from '../../types/protos';
@@ -11,87 +12,89 @@ import {
   NavProtoItemServicesItem,
   NavProtoItemServicesList,
 } from './NavProtoList.components';
+import { INotification, notificationTypes } from '../../types/layout';
+import { addNotification } from '../../store/layout/layout.actions';
+import { removeProtoFromProject } from '../../store/projects/projects.actions';
+
+import cuid = require('cuid');
 
 export interface INavProtoItemProps {
   newTabHandler: (
     e: React.MouseEvent,
     proto: IProto,
     service: MethodDefinition<{}, {}>
   ) => void;
+  notify: (item: INotification) => void
   proto: IProto;
+  removeProto: (proto: IProto) => void
 }
 
-export interface INavProtoItemState {
-  showSettings: boolean;
-}
+const handleRemoveProto = (
+  proto: IProto, removeProto: (proto: IProto) => void, notify: (item: INotification) => void,
+) => {
+  removeProto(proto);
+  notify({
+    id: cuid(),
+    message: `"${proto.name}" deleted`,
+    title: 'Deleted',
+    type: notificationTypes.success,
+  });
+};
 
-class NavProtoItem extends React.Component<
-  INavProtoItemProps,
-  INavProtoItemState
-> {
-  state = {
-    showSettings: false,
-  };
+const NavProtoItem: React.SFC<INavProtoItemProps> = ({
+  proto, newTabHandler, notify, removeProto,
+}) => {
+  const { pkgDef } = proto;
 
-  toggleShowSettings() {
-    this.setState(state => ({
-      showSettings: !state.showSettings,
-    }));
+  if (!pkgDef) {
+    logger.error('Package definitions not present in proto definition');
+    return null;
   }
 
-  render() {
-    const { proto, newTabHandler } = this.props;
-    const { showSettings } = this.state;
-
-    const { pkgDef } = proto;
-
-    if (!pkgDef) {
-      logger.error('Package definitions not present in proto definition');
-      return null;
-    }
+  // Service name
+  const pkgIndex = Object.keys(pkgDef)[0];
+  const pkgName = (pkgIndex.match(/\.[^.]*$/) || [''])[0].replace('.', '');
 
-    // Service name
-    const pkgIndex = Object.keys(pkgDef)[0];
-    const pkgName = (pkgIndex.match(/\.[^.]*$/) || [''])[0].replace('.', '');
+  const servicesObj = pkgDef[pkgIndex];
+  const services = Object.keys(servicesObj)
+    .map(key => servicesObj[key])
+    .sort((a, b) => {
+      const aName = a.originalName || '';
+      const bName = b.originalName || '';
 
-    const servicesObj = pkgDef[pkgIndex];
-    const services = Object.keys(servicesObj)
-      .map(key => servicesObj[key])
-      .sort((a, b) => {
-        const aName = a.originalName || '';
-        const bName = b.originalName || '';
-
-        return aName.localeCompare(bName, 'en', {
-          sensitivity: 'base',
-        });
+      return aName.localeCompare(bName, 'en', {
+        sensitivity: 'base',
       });
+    });
 
-    return (
-      <NavProtoItemContainer>
-        <NavProtoItemHeaderContainer>
-          <NavProtoItemHeader>{pkgName}</NavProtoItemHeader>
+  return (
+    <NavProtoItemContainer>
+      <NavProtoItemHeaderContainer>
+        <NavProtoItemHeader>{pkgName}</NavProtoItemHeader>
 
-          <NavProtoItemHeaderIcon
-            className="ti-settings"
-            onClick={() => this.toggleShowSettings()}
-          />
-          {// TODO: Implement dropdown
-          showSettings && <span>Settings</span>}
-        </NavProtoItemHeaderContainer>
+        <NavProtoItemHeaderIcon
+          className="ti-trash"
+          onClick={() => handleRemoveProto(proto, removeProto, notify)}
+        />
+      </NavProtoItemHeaderContainer>
 
-        <NavProtoItemServicesList>
-          {services.map(service => (
-            <NavProtoItemServicesItem
-              key={service.originalName}
-              onClick={e => newTabHandler(e, proto, service)}
-            >
-              {service.originalName}
-            </NavProtoItemServicesItem>
-          ))}
-        </NavProtoItemServicesList>
-      </NavProtoItemContainer>
-    );
-  }
-}
+      <NavProtoItemServicesList>
+        {services.map(service => (
+          <NavProtoItemServicesItem
+            key={service.originalName}
+            onClick={e => newTabHandler(e, proto, service)}
+          >
+            {service.originalName}
+          </NavProtoItemServicesItem>
+        ))}
+      </NavProtoItemServicesList>
+    </NavProtoItemContainer>
+  );
+};
+
+const mapDispatchToProps = {
+  notify: (item: INotification) => addNotification(item),
+  removeProto: (proto: IProto) => removeProtoFromProject(proto),
+};
 
-export default NavProtoItem;
+export default connect(null, mapDispatchToProps)(NavProtoItem);
diff --git a/src/renderer/store/projects/projects.actions.ts b/src/renderer/store/projects/projects.actions.ts
@@ -1,4 +1,4 @@
-import { ADD_PROTO_TO_PROJECT, NEW_PROJECT } from './projects.types';
+import { ADD_PROTO_TO_PROJECT, NEW_PROJECT, REMOVE_PROTO_FROM_PROJECT } from './projects.types';
 
 import { IProject } from '../../types/projects';
 import { IProto } from '../../types/protos';
@@ -12,3 +12,8 @@ export const addProtoToProject = (proto: IProto) => ({
   payload: proto,
   type: ADD_PROTO_TO_PROJECT,
 });
+
+export const removeProtoFromProject = (proto: IProto) => ({
+  payload: proto,
+  type: REMOVE_PROTO_FROM_PROJECT,
+});
diff --git a/src/renderer/store/projects/projects.reducer.ts b/src/renderer/store/projects/projects.reducer.ts
@@ -1,5 +1,5 @@
 import initialState from './projects.state';
-import { ADD_PROTO_TO_PROJECT, NEW_PROJECT } from './projects.types';
+import { ADD_PROTO_TO_PROJECT, NEW_PROJECT, REMOVE_PROTO_FROM_PROJECT } from './projects.types';
 
 import { IReduxAction } from '../../types';
 import { IProject } from '../../types/projects';
@@ -30,6 +30,12 @@ const projectsReducer = (
       };
     }
 
+    case REMOVE_PROTO_FROM_PROJECT:
+      return {
+        ...state,
+        protos: state.protos.filter(item => item.path !== (payload as IProto).path)
+      }
+
     case NEW_PROJECT:
       return state;
 

diff --git a/src/renderer/store/projects/projects.types.ts b/src/renderer/store/projects/projects.types.ts
@@ -1,3 +1,5 @@
 export const NEW_PROJECT = 'NEW_PROJECT';
 
 export const ADD_PROTO_TO_PROJECT = 'ADD_PROTO_TO_PROJECT';
+
+export const REMOVE_PROTO_FROM_PROJECT = 'REMOVE_PROTO_FROM_PROJECT';