From 0e20de3bc9cbe395ec771c3cfe99cabb91eeea85 Mon Sep 17 00:00:00 2001 From: Yekeen Ajeigbe <4457871+klummy@users.noreply.github.com> Date: Sun, 17 Feb 2019 22:05:53 +0100 Subject: [PATCH] Added remove proto functionality --- src/renderer/components/Content/Content.tsx | 23 ++-- .../components/NavProtoList/NavProtoItem.tsx | 129 +++++++++--------- .../store/projects/projects.actions.ts | 7 +- .../store/projects/projects.reducer.ts | 8 +- src/renderer/store/projects/projects.types.ts | 2 + 5 files changed, 94 insertions(+), 75 deletions(-) diff --git a/src/renderer/components/Content/Content.tsx b/src/renderer/components/Content/Content.tsx index 8a8801a..927e3bc 100644 --- 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 = ({ activeTab, notifications, tabs }) => { const tab = tabs.find(t => t.id === activeTab); - if (!tab) { - return Empty; - } - - const { results } = tab; + const results = tab && tab.results; return ( - - + {tab + ? ( + + + + + ) + : Empty + } ); diff --git a/src/renderer/components/NavProtoList/NavProtoItem.tsx b/src/renderer/components/NavProtoList/NavProtoItem.tsx index c8e99d0..71f9252 100644 --- 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,6 +12,11 @@ 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: ( @@ -18,80 +24,77 @@ export interface INavProtoItemProps { 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 = ({ + 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 ( - - - {pkgName} + return ( + + + {pkgName} - this.toggleShowSettings()} - /> - {// TODO: Implement dropdown - showSettings && Settings} - + handleRemoveProto(proto, removeProto, notify)} + /> + - - {services.map(service => ( - newTabHandler(e, proto, service)} - > - {service.originalName} - - ))} - - - ); - } -} + + {services.map(service => ( + newTabHandler(e, proto, service)} + > + {service.originalName} + + ))} + + + ); +}; + +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 index 5a11e12..b3e5d00 100644 --- 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 index 5519dfa..79daa0d 100644 --- 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 index 3b558e4..2d189cf 100644 --- 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';