tslint: no-var-keyword, prefer-const rules cleanup (#974)

Co-authored-by: Adrian Mróź <78143552+adrianmroz-allegro@users.noreply.github.com>

src/client/applications/turnilo-application/turnilo-application.mocha.tsx

@@ -24,7 +24,7 @@ import { TurniloApplication } from "./turnilo-application";
 
 describe.skip("TurniloApplication", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <TurniloApplication
         version={null}
         appSettings={null}

src/client/components/bucket-marks/bucket-marks.mocha.tsx

@@ -25,7 +25,7 @@ import { BucketMarks } from "./bucket-marks";
 
 describe("BucketMarks", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <BucketMarks
         stage={StageFixtures.defaultA()}
         ticks={[]}

src/client/components/bucket-marks/bucket-marks.tsx

@@ -39,19 +39,19 @@ export class BucketMarks extends React.Component<BucketMarksProps, BucketMarksSt
     const { stage, ticks, scale } = this.props;
     const stageWidth = stage.width;
 
-    let lines: JSX.Element[] = [];
+    const lines: JSX.Element[] = [];
 
     function addLine(x: number, key: string) {
       if (stageWidth < x) return;
       lines.push(<line key={key} x1={x} y1={0} x2={x} y2={TICK_HEIGHT} />);
     }
 
-    for (let tick of ticks) {
-      let x = roundToHalfPx(scale(tick));
+    for (const tick of ticks) {
+      const x = roundToHalfPx(scale(tick));
       addLine(x, "_" + tick);
     }
     if (ticks.length) {
-      let x = roundToHalfPx(scale(ticks[ticks.length - 1]) + scale.bandwidth());
+      const x = roundToHalfPx(scale(ticks[ticks.length - 1]) + scale.bandwidth());
       addLine(x, "last");
     }
 

src/client/components/button-group/button-group.mocha.tsx

@@ -26,7 +26,7 @@ import { ButtonGroup } from "./button-group";
 
 describe("ButtonGroup", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <ButtonGroup
         title="my-buttons"
         groupMembers={[]}

src/client/components/button/button.mocha.tsx

@@ -26,7 +26,7 @@ import { Button } from "./button";
 
 describe("Button", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <Button
         title="Important button"
         type="primary"

src/client/components/button/button.tsx

@@ -40,7 +40,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
   render() {
     const { title, type, className, svg, active, disabled, onClick } = this.props;
 
-    var icon: JSX.Element = null;
+    let icon: JSX.Element = null;
     if (svg) {
       icon = <SvgIcon svg={svg} />;
     }

src/client/components/checkbox/checkbox.mocha.tsx

@@ -25,7 +25,7 @@ import { Checkbox } from "./checkbox";
 
 describe("Checkbox", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <Checkbox
         selected={true}
       />
@@ -36,13 +36,13 @@ describe("Checkbox", () => {
   });
 
   it("not checked + check", () => {
-    var onClick = sinon.spy();
+    const onClick = sinon.spy();
 
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <Checkbox selected={false} onClick={onClick} />
     );
 
-    var svgs = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent as React.Component, "svg");
+    const svgs = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent as React.Component, "svg");
     expect(svgs.length).to.equal(0);
 
     expect(onClick.callCount).to.equal(0);

src/client/components/checkbox/checkbox.tsx

@@ -54,7 +54,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   render() {
     const { onClick, type, color, selected, label, className } = this.props;
 
-    var style: React.CSSProperties = null;
+    let style: React.CSSProperties = null;
     if (color) {
       style = { background: color };
     }

src/client/components/date-range-input/date-range-input.mocha.tsx

@@ -24,7 +24,7 @@ import { DateRangeInput } from "./date-range-input";
 
 describe("DateRangeInput", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <DateRangeInput
         label="Test"
         hide={true}

src/client/components/date-range-picker/date-range-picker.mocha.tsx

@@ -26,7 +26,7 @@ import { DateRangePicker } from "./date-range-picker";
 
 describe("DateRangePicker", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <DateRangePicker
         locale={LOCALES["en-US"]}
         startTime={new Date(Date.UTC(2003, 11, 2))}

src/client/components/date-range-picker/date-range-picker.tsx

@@ -117,7 +117,7 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
 
   getIsSelectable(date: Date): boolean {
     const { hoverTimeRange, selectionSet } = this.state;
-    let inHoverTimeRange = hoverTimeRange && hoverTimeRange.contains(date);
+    const inHoverTimeRange = hoverTimeRange && hoverTimeRange.contains(date);
     return inHoverTimeRange && !selectionSet;
   }
 

src/client/components/dimension-list-tile/dimension-list-tile.mocha.tsx

@@ -25,7 +25,7 @@ import { DimensionListTile } from "./dimension-list-tile";
 
 describe("DimensionListTile", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <DimensionListTile
         clicker={null}
         essence={EssenceFixtures.wikiTotals()}

src/client/components/drag-indicator/fancy-drag-indicator.mocha.tsx

@@ -24,12 +24,12 @@ import { renderIntoDocument } from "../../utils/test-utils";
 import { FancyDragIndicator } from "./fancy-drag-indicator";
 
 describe("FancyDragIndicator", () => {
-  var dragPosition = DragPosition.fromJS({
+  const dragPosition = DragPosition.fromJS({
     insert: 0
   });
 
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <FancyDragIndicator
         dragPosition={dragPosition}
       />

src/client/components/drag-indicator/fancy-drag-indicator.tsx

@@ -42,7 +42,7 @@ export class FancyDragIndicator extends React.Component<FancyDragIndicatorProps,
       ghostArrowLeft = dragPosition.insert * sectionWidth - CORE_ITEM_GAP / 2;
     } else {
       ghostArrowLeft = dragPosition.replace * sectionWidth + CORE_ITEM_WIDTH / 2;
-      let left = dragPosition.replace * sectionWidth;
+      const left = dragPosition.replace * sectionWidth;
       dragGhostElement = <div className="drag-ghost-element" style={{ left }} />;
     }
 

src/client/components/drop-indicator/drop-indicator.mocha.tsx

@@ -24,7 +24,7 @@ import { DropIndicator } from "./drop-indicator";
 
 describe("DropIndicator", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <DropIndicator />
     );
 

src/client/components/dropdown/dropdown.mocha.tsx

@@ -24,7 +24,7 @@ import { Dropdown } from "./dropdown";
 
 describe("Dropdown", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <Dropdown
         items={null}
       />

src/client/components/filter-menu/number-filter-menu/number-filter-menu.mocha.tsx

@@ -26,11 +26,11 @@ import { findDOMNode, renderIntoDocument } from "../../../utils/test-utils";
 import { NumberFilterMenu } from "./number-filter-menu";
 
 describe("NumberFilterMenu", () => {
-  var div = document.createElement("div");
+  const div = document.createElement("div");
   div.setAttribute("id", "Div1");
 
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <NumberFilterMenu
         saveClause={null}
         dimension={DimensionFixtures.wikiCommentLength()}

src/client/components/filter-options-dropdown/filter-options-dropdown.mocha.tsx

@@ -25,7 +25,7 @@ import { FilterOptionsDropdown } from "./filter-options-dropdown";
 
 describe("FilterOptionsDropdown", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <FilterOptionsDropdown
         selectedOption={null}
         onSelectOption={() => {

src/client/components/global-event-listener/global-event-listener.mochcha.tsx

@@ -23,7 +23,7 @@ import { GlobalEventListener } from "./global-event-listener";
 
 describe("GlobalEventListener", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <GlobalEventListener
 
       />

src/client/components/global-event-listener/global-event-listener.tsx

@@ -59,17 +59,17 @@ export class GlobalEventListener extends React.Component<GlobalEventListenerProp
   }
 
   componentWillUnmount() {
-    for (let prop in this.propsToEvents) {
+    for (const prop in this.propsToEvents) {
       this.removeListener(this.propsToEvents[prop]);
     }
   }
 
   refreshListeners(nextProps: any, currentProps: any = {}) {
-    var toAdd: string[] = [];
-    var toRemove: string[] = [];
+    const toAdd: string[] = [];
+    const toRemove: string[] = [];
 
-    for (let prop in this.propsToEvents) {
-      let event = this.propsToEvents[prop];
+    for (const prop in this.propsToEvents) {
+      const event = this.propsToEvents[prop];
 
       if (currentProps[prop] && nextProps[prop]) continue;
 
@@ -85,7 +85,7 @@ export class GlobalEventListener extends React.Component<GlobalEventListenerProp
   }
 
   addListener(event: string) {
-    var useCapture = event === "scroll";
+    const useCapture = event === "scroll";
     window.addEventListener(event, (this as any)[`on${firstUp(event)}`], useCapture);
   }
 

src/client/components/golden-center/golden-center.mocha.tsx

@@ -26,7 +26,7 @@ import { GoldenCenter } from "./golden-center";
 
 describe("GoldenCenter", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <GoldenCenter>
         <div className="Hello">Is it me you're looking for?</div>
       </GoldenCenter>

src/client/components/golden-center/golden-center.tsx

@@ -48,18 +48,18 @@ export class GoldenCenter extends React.Component<GoldenCenterProps, GoldenCente
   }
 
   globalResizeListener = () => {
-    var myNode = ReactDOM.findDOMNode(this) as Element;
+    const myNode = ReactDOM.findDOMNode(this) as Element;
     if (!myNode) return;
 
-    var childNode = myNode.firstChild as Element;
+    const childNode = myNode.firstChild as Element;
     if (!childNode) return;
 
-    var myRect = myNode.getBoundingClientRect();
-    var childRect = childNode.getBoundingClientRect();
+    const myRect = myNode.getBoundingClientRect();
+    const childRect = childNode.getBoundingClientRect();
 
     const { topRatio, minPadding } = this.props;
 
-    var top = Math.max((myRect.height - childRect.height) * topRatio, minPadding);
+    const top = Math.max((myRect.height - childRect.height) * topRatio, minPadding);
     this.setState({ top });
   };
 

src/client/components/loader/loader.mocha.tsx

@@ -24,7 +24,7 @@ import { Loader } from "./loader";
 
 describe("Loader", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <Loader />
     );
 

src/client/components/modal/modal.mocha.tsx

@@ -27,7 +27,7 @@ import { Modal } from "./modal";
 
 describe("Modal", () => {
   it("adds the correct class", () => {
-    var renderedComponent = renderIntoDocument(
+    const renderedComponent = renderIntoDocument(
       <Modal
         title="Modal"
         onClose={null}

src/client/components/modal/modal.tsx

@@ -49,7 +49,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
   }
 
   UNSAFE_componentWillMount() {
-    var { id } = this.props;
+    const { id } = this.props;
 
     this.setState({
       id: id || uniqueId("modal-")
@@ -70,12 +70,12 @@ export class Modal extends React.Component<ModalProps, ModalState> {
     const n = children.length;
 
     for (let i = 0; i < n; i++) {
-      let child = children[i] as HTMLElement;
+      const child = children[i] as HTMLElement;
 
       if (child.getAttribute && child.getAttribute("id") === id) return child;
 
       if (child.childNodes) {
-        let foundChild = this.getChildByID(child.childNodes, id);
+        const foundChild = this.getChildByID(child.childNodes, id);
         if (foundChild) return foundChild;
       }
     }
@@ -85,9 +85,9 @@ export class Modal extends React.Component<ModalProps, ModalState> {
 
   maybeFocus() {
     if (this.props.startUpFocusOn) {
-      var myElement = document.getElementById(this.state.id) as Element;
+      const myElement = document.getElementById(this.state.id) as Element;
 
-      let target = this.getChildByID(
+      const target = this.getChildByID(
         myElement.childNodes,
         this.props.startUpFocusOn
       );
@@ -112,24 +112,24 @@ export class Modal extends React.Component<ModalProps, ModalState> {
   };
 
   onMouseDown = (e: MouseEvent) => {
-    var { onClose, mandatory } = this.props;
+    const { onClose, mandatory } = this.props;
     if (mandatory) return;
 
-    var { id } = this.state;
+    const { id } = this.state;
     // can not use ReactDOM.findDOMNode(this) because portal?
-    var myElement = document.getElementById(id) as Element;
+    const myElement = document.getElementById(id) as Element;
     if (!myElement) return;
-    var target = e.target as Element;
+    const target = e.target as Element;
 
     if (isInside(target, myElement)) return;
     onClose();
   };
 
   render() {
-    var { className, title, children, onClose } = this.props;
-    var { id } = this.state;
+    const { className, title, children, onClose } = this.props;
+    const { id } = this.state;
 
-    var titleElement: JSX.Element = null;
+    let titleElement: JSX.Element = null;
     if (typeof title === "string") {
       titleElement = <div className="modal-title">
         <div className="text">{title}</div>

src/client/components/notifications/notification-card.tsx

@@ -60,7 +60,7 @@ export class NotificationCard extends React.Component<NotificationCardProps, Not
   appear = () => {
     const { title, message, duration, muted } = this.props.model;
 
-    var d = clamp(duration, -1, 10);
+    const d = clamp(duration, -1, 10);
 
     if (d === -1) {
       this.setState({ appearing: false });
@@ -123,17 +123,18 @@ export class NotificationCard extends React.Component<NotificationCardProps, Not
 
   render() {
     const { appearing, disappearing } = this.state;
-    var { model, top } = this.props;
+    const { model } = this.props;
+    let { top } = this.props;
 
     if (!model) return null;
 
     const { title, message, priority, action, muted } = model;
 
     if (appearing || disappearing) top = -100;
 
-    var rowsClass = `rows-${[title, message, action].filter(Boolean).length}`;
+    const rowsClass = `rows-${[title, message, action].filter(Boolean).length}`;
 
-    var onClick = () => {
+    const onClick = () => {
       action && action.callback();
       this.disappear();
     };