From 421b7c79dc3e32c3a93fe6b332a66500efe03e6e Mon Sep 17 00:00:00 2001
From: Malar Kannan <malar@avaz.in>
Date: Tue, 20 Jun 2017 23:02:42 +0530
Subject: [PATCH] removed mode enum

---
 src/App.tsx           |  4 +-
 src/LexComponents.tsx | 85 +++++++++++++++++++++++--------------------
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 27c1c88..539e447 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,9 @@ class App extends React.Component<{}, null> {
       <div>
         <nav className="pt-navbar pt-dark">
           <div className="pt-navbar-group pt-align-left">
-            <button className="pt-button pt-minimal pt-icon-large pt-icon-edit" />
+            <button
+              className="pt-button pt-minimal pt-icon-large pt-icon-edit"
+            />
             <div className="pt-navbar-heading">Freespeech Lexicon Editor</div>
           </div>
         </nav>
diff --git a/src/LexComponents.tsx b/src/LexComponents.tsx
index 575ca34..43ddc55 100644
--- a/src/LexComponents.tsx
+++ b/src/LexComponents.tsx
@@ -8,10 +8,6 @@ const { Flex, Box } = require('reflexbox');
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
-enum EditorMode {
-  Empty = 1, Edit, Add
-}
-
 interface LexEditorProps {
   fileName: RequestInfo;
 }
@@ -33,7 +29,7 @@ const searchLensMap = {
 class LexEditor extends React.Component<LexEditorProps, any> {
   constructor(props: LexEditorProps) {
     super(props);
-    this.state = { lexData: {}, matchedEntries: [] };
+    this.state = { lexData: {}, matchedEntries: [], searchText: '' };
   }
 
   public componentDidMount() {
@@ -57,7 +53,7 @@ class LexEditor extends React.Component<LexEditorProps, any> {
           matchedEntries={this.state.matchedEntries}
           mode={this.state.mode}
           searchText={this.state.searchText}
-          searchType={this.state.searchType}
+          searchLens={this.state.searchLens}
         />
       </div>
     );
@@ -65,7 +61,7 @@ class LexEditor extends React.Component<LexEditorProps, any> {
 
   private handleOnSearch(searchEvent: any): void {
     let searchText = searchEvent.searchValue;
-    let searchType = searchLensMap[searchEvent.searchType];
+    let searchLens = searchLensMap[searchEvent.searchType];
     let matchedEntries = _.chain(this.state.lexData)
       .get<any>('document.lexicon[0].item')
       .flatMap((o: any) => _.chain(o)
@@ -76,11 +72,9 @@ class LexEditor extends React.Component<LexEditorProps, any> {
           .value())
         .value()
       )
-      .filter((q: any) => _.get<any>(q, searchType, '') === searchText)
+      .filter((q: any) => _.get<any>(q, searchLens, '') === searchText)
       .value();
-    let emptyOrAdd = searchText === '' ? EditorMode.Empty : EditorMode.Add;
-    let mode = matchedEntries.length > 0 ? EditorMode.Edit : emptyOrAdd;
-    this.setState({ ...this.state, matchedEntries, mode, searchText, searchType });
+    this.setState({ ...this.state, matchedEntries, searchText, searchLens });
   }
 }
 
@@ -95,8 +89,8 @@ class LexSearch extends React.Component<any, any> {
           onChange={e => this.handleTypeChange(e)}
         >
           <select>
-            {_.keys(searchLensMap).map(k => {
-              return <option value={k}> {_.capitalize(k)}</option>;
+            {_.keys(searchLensMap).map((k, i, c) => {
+              return <option key={i} value={k}> {_.capitalize(k)}</option>;
             })}
           </select>
         </div>
@@ -116,39 +110,43 @@ class LexSearch extends React.Component<any, any> {
 
   private handleLookup(e: any) {
     this.searchValue = e.target.value;
-    this.props.handleOnSearch({ searchType: this.searchType, searchValue: this.searchValue });
+    this.props.handleOnSearch({
+      searchType: this.searchType
+      , searchValue: this.searchValue
+    });
   }
 
   private handleTypeChange(e: any) {
     this.searchType = e.target.value;
-    this.props.handleOnSearch({ searchType: this.searchType, searchValue: this.searchValue });
+    this.props.handleOnSearch({
+      searchType: this.searchType
+      , searchValue: this.searchValue
+    });
   }
 }
 
 function selectMode(props: any) {
-  let editEntries = props.matchedEntries.map((mObj: any) => {
-    let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
-    return (<LexEdit key={uniqueKey} lexItem={mObj} />);
-  });
-  switch (props.mode) {
-    case EditorMode.Edit:
-      return editEntries;
-    case EditorMode.Add:
-      let addProps = {};
-      _.set(addProps, props.searchType, props.searchText);
-      return <LexEdit lexItem={addProps} />;
-    default:
-      return (
-        <div className="pt-non-ideal-state">
-          <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
-            <span className="pt-icon pt-icon-folder-open" />
-          </div>
-          <h4 className="pt-non-ideal-state-title">Empty</h4>
-          <div className="pt-non-ideal-state-description">
-            Type something in the searchbar.
-          </div>
+  if (props.searchText === '') {
+    return (
+      <div className="pt-non-ideal-state">
+        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
+          <span className="pt-icon pt-icon-folder-open" />
         </div>
-      );
+        <h4 className="pt-non-ideal-state-title">Empty</h4>
+        <div className="pt-non-ideal-state-description">
+          Type something in the searchbar.
+        </div>
+      </div>
+    );
+  } else {
+    let editEntries = props.matchedEntries.map((mObj: any) => {
+      let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
+      return (<LexEdit key={uniqueKey} lexItem={mObj} />);
+    });
+    let addProps = {};
+    _.set(addProps, props.searchLens, props.searchText);
+    editEntries.push(<LexEdit key={props.searchText} lexItem={addProps} />);
+    return editEntries;
   }
 }
 
@@ -167,7 +165,12 @@ class LexEdit extends React.Component<any, any> {
       return this.getLabelField(e, searchLensMap[e], li);
     });
     return (
-      <Box wx={240} mx={10} my={20} className="pt-card pt-elevation-2 pt-interactive">
+      <Box
+        wx={240}
+        mx={10}
+        my={20}
+        className="pt-card pt-elevation-2 pt-interactive"
+      >
         <label className="pt-label">
           GUID {_.get<any>(li, 'guid', '')}
         </label>
@@ -207,7 +210,11 @@ class LexField extends React.Component<any, any> {
     return (
       <div className="pt-form-group pt-inline">
         <Box w={2 / 5}>
-          <label style={{ textAlign: 'right' }} className="pt-label" htmlFor="example-form-group-input-a">
+          <label
+            style={{ textAlign: 'right' }}
+            className="pt-label"
+            htmlFor="example-form-group-input-a"
+          >
             {this.props.labelText}
           </label>
         </Box>