From dc975553b5b9b84ca672dab87149aaac71d1ea49 Mon Sep 17 00:00:00 2001
From: Ebrahim Byagowi <ebrahim@gnu.org>
Date: Wed, 6 Feb 2019 18:25:58 +0330
Subject: [PATCH] Address @MaxGraey reviews and tslint complains

---
 src/components/StatusBar.tsx     |  6 ++--
 src/components/Widgets.tsx       | 51 ++++++++++++++++----------------
 src/components/shared/Button.tsx | 32 ++++++++++----------
 3 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index 126c035ef..4279d3c86 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -23,7 +23,7 @@ import * as React from "react";
 import appStore from "../stores/AppStore";
 
 export function StatusBar() {
-  let [state, setState] = React.useState({
+  const [state, setState] = React.useState({
     hasStatus: false,
     status: ""
   });
@@ -44,10 +44,10 @@ export function StatusBar() {
   if (state.hasStatus) {
     className += " active";
   }
-  
+
   return <div className={className}>
     <div className="status-bar-item">
       {state.status}
     </div>
   </div>;
-}
\ No newline at end of file
+}
diff --git a/src/components/Widgets.tsx b/src/components/Widgets.tsx
index 84c9608b9..108af0eeb 100644
--- a/src/components/Widgets.tsx
+++ b/src/components/Widgets.tsx
@@ -22,31 +22,32 @@
 import * as React from "react";
 import { ChangeEventHandler } from "react";
 
-export function Spacer(props: { height: number }) {
-  return <div style={{ height: props.height }} />;
+export function Spacer({ height }: { height: number }) {
+  return <div style={{ height }} />;
 }
 
-export function Divider(props: { height: number }) {
+export function Divider({ height }: { height: number }) {
   return <div
     className="divider"
     style={{
-      marginTop: props.height / 2,
-      marginBottom: props.height / 2
-    }} />;
+      marginTop: height / 2,
+      marginBottom: height / 2
+    }}
+  />;
 }
 
-export function TextInputBox(props: {
+export function TextInputBox({ label, value, error, onChange }: {
   label: string;
   value: string;
   error?: string;
   onChange?: ChangeEventHandler<any>;
 }) {
-  const input = <input className="text-input-box" type="text" value={props.value} onChange={props.onChange} />;
-  if (props.label) {
+  const input = <input className="text-input-box" type="text" value={value} onChange={onChange} />;
+  if (label) {
     return <div style={{ display: "flex", flexDirection: "row" }}>
-      <div className="text-input-box-label">{props.label}</div>
+      <div className="text-input-box-label">{label}</div>
       <div style={{ flex: 1 }}>{input}</div>
-      {props.error && <div className="text-input-box-error">{props.error}</div>}
+      {error && <div className="text-input-box-error">{error}</div>}
     </div>;
   } else {
     return input;
@@ -82,7 +83,7 @@ export class UploadInput extends React.Component<{
   }
 }
 
-export function ListItem(props: {
+export function ListItem({ label, onClick, icon, selected, value, error }: {
   label: string;
   onClick?: Function;
   icon?: string;
@@ -91,42 +92,40 @@ export function ListItem(props: {
   error?: string;
 }) {
   let className = "list-item";
-  if (props.selected) {
+  if (selected) {
     className += " selected";
   }
-  let content = <div className="label">{props.label}</div>;
-  if (props.error) {
+  let content = <div className="label">{label}</div>;
+  if (error) {
     content = <div className="list-item-flex">
-      <div className="label">{props.label}</div>
-      <div className="error">{props.error}</div>
+      <div className="label">{label}</div>
+      <div className="error">{error}</div>
     </div>;
   }
-  return <div className={className} onClick={props.onClick as any}>
-    <div className={"monaco-icon-label file-icon " + props.icon} />
+  return <div className={className} onClick={onClick as any}>
+    <div className={"monaco-icon-label file-icon " + icon} />
     {content}
   </div>;
 }
 
-export function ListBox(props: {
+export function ListBox({ height, value, onSelect, children }: {
   height: number;
   value?: any;
   onSelect?: (value: any) => void;
   children: any;
 }) {
-  const newChildren = React.Children.map(props.children, (child: any, index) => {
+  const newChildren = React.Children.map(children, (child: any, index) => {
     return React.cloneElement(child as any, {
       onClick: () => {
-        return props.onSelect && props.onSelect(child.props.value);
+        return onSelect && onSelect(child.props.value);
       },
-      selected: props.value === child.props.value
+      selected: value === child.props.value
     });
   });
 
   return <div
     className="list-box"
-    style={{
-      height: props.height
-    }}
+    style={{ height }}
   >
     {newChildren}
   </div>;
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
index 57b4c1f4f..a1eb640eb 100644
--- a/src/components/shared/Button.tsx
+++ b/src/components/shared/Button.tsx
@@ -21,7 +21,9 @@
 
 import * as React from "react";
 
-export function Button(props: {
+export function Button({
+  icon, label, title, isDisabled, onClick, customClassName, href, target, rel
+}: {
   icon: JSX.Element;
   label?: string;
   title?: string;
@@ -33,34 +35,34 @@ export function Button(props: {
   rel?: string
 }) {
   let className = "button ";
-  if (props.customClassName) {
-    className += props.customClassName;
+  if (customClassName) {
+    className += customClassName;
   }
-  if (props.isDisabled) {
+  if (isDisabled) {
     className += " disabled";
   }
-  if (props.href && !props.isDisabled) {
+  if (href && !isDisabled) {
     return (
       <a
-        href={props.href}
-        target={props.target || ""}
-        rel={props.rel || ""}
+        href={href}
+        target={target || ""}
+        rel={rel || ""}
         className={className}
-        title={props.title}
+        title={title}
       >
-        {props.icon} {props.label}
+        {icon} {label}
       </a>
     );
   }
   return <div
     className={className}
     onClick={() => {
-      if (props.onClick && !props.isDisabled) {
-        props.onClick();
+      if (onClick && !isDisabled) {
+        onClick();
       }
     }}
-    title={props.title}
+    title={title}
   >
-    {props.icon} {props.label}
+{icon} {label}
   </div>;
-}
\ No newline at end of file
+}