breaking big component into smaller one

Question

I'm working on separating code from index.tsx into two different files viz: firstTab.tsx and secondTab.tsx. I haven't started working on secondTab.tsx yet.

I separated first tab related code into firstTab.tsx as shown in the following code editor: The full functional code with both tabs working are in index.tsx is pasted below:

import React, { Component } from "react";
import { render } from "react-dom";
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
import JqxButton from "jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons";
import * as ReactDOM from "react-dom";
import JqxWindow from "jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow";
import JqxInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxinput";

import JqxChart, {
  IChartProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxchart";
import JqxGrid, {
  IGridProps,
  jqx
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";
import JqxTabs from "jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs";
import JqxDropDownList, {
  IDropDownListProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist";
import firstTab from './firstTab';

interface AppProps {}
interface AppState {
  name: string;
}
interface IProps extends IGridProps {
  dropdownlistSource: IDropDownListProps["source"];
}

class App extends Component<{}, IProps> {
  private myTabs = React.createRef<JqxTabs>();
  private gridElement = React.createRef<HTMLDivElement>();
  private myGrid = React.createRef<JqxGrid>();
  private gridElementTwo = React.createRef<HTMLDivElement>();
  private myGrid2 = React.createRef<JqxGrid>();

  constructor(props: {}) {
    super(props);
   this.state = {

      dropdownlistSource: [
        { value: 0, label: "Affogato" },
        { value: 1, label: "Americano" },
        { value: 2, label: "Bicerin" },
        { value: 3, label: "Breve" }
      ]
     };
  }
  public render() {
    return (
      <JqxTabs
        ref={this.myTabs}
        // @ts-ignore
        width={400}
        height={560}
        initTabContent={this.initWidgets}

      >
      <ul>
          <li style={{ marginLeft: 30 }}>
            <div style={{ height: 20, marginTop: 5 }}>
               <div
                style={{
                  marginLeft: 4,
                  verticalAlign: "middle",
                  textAlign: "center",
                  float: "left"
                }}
              >
                US Indexes
              </div>
            </div>
          </li>
          <li>
            <div style={{ height: 20, marginTop: 5 }}>
              <div
                style={{
                  marginLeft: 4,
                  verticalAlign: "middle",
                  textAlign: "center",
                  float: "left"
                }}
              >
                NASDAQ compared to S&P 500
              </div>
            </div>
          </li>
        </ul>
        <div style={{ overflow: "hidden" }}>
          <div id="jqxGrid" ref={this.gridElement} />
          <div style={{ marginTop: 10, height: "15%" }} />
        </div>
        <div style={{ overflow: "hidden" }}>
          <div id="jqxGrid2" ref={this.gridElementTwo} />
          <div style={{ marginTop: 10, height: "15%" }} />
        </div>
      </JqxTabs>
    );
  }
  private initGrid = () => {
    const source = {
      datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
      datatype: "csv",
      localdata: `1/2/2014,1831.98,4143.07
                  1/3/2014,1831.37,4131.91
                  1/6/2014,1826.77,4113.68
                  1/7/2014,1837.88,4153.18
                  1/8/2014,1837.49,4165.61
                  1/9/2014,1838.13,4156.19
                  2/6/2014,1773.43,4057.12
                  2/7/2014,1797.02,4125.86`
    };

    const dataAdapter = new jqx.dataAdapter(source, {
      async: false,
      loadError: (xhr: any, status: any, error: any) => {
        console.log(xhr, status, error);
        }
    });

    const columns: IGridProps["columns"] = [
      { cellsformat: "d", datafield: "Date", text: "Date", width: 250 },
      { datafield: "S&P 500", text: "S&P 500", width: 150 },
      { datafield: "NASDAQ", text: "NASDAQ" }
    ];
    const grid = (
       <JqxGrid
        ref={this.myGrid}
        width={"100%"}
        height={400}
        source={dataAdapter}
        columns={columns}
        />

    );
    render(grid, this.gridElement.current!);
  }; 

  private initGrid2 = () => {
    const source = {
      datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
      datatype: "csv",
      localdata: `1/2/2014,1831.98,4143.07
                  1/3/2014,1831.37,4131.91
                  1/6/2014,1826.77,4113.68
                  1/7/2014,1837.88,4153.18
                  1/8/2014,1837.49,4165.61
                  1/9/2014,1838.13,4156.19
                  1/10/2014,1842.37,4174.67
                  2/7/2014,1797.02,4125.86`
    };

    const dataAdapter = new jqx.dataAdapter(source, {
      async: false,
      loadError: (xhr: any, status: any, error: any) => {
        console.log(xhr, status, error);

      }
    });

    const columns: IGridProps["columns"] = [
      { cellsformat: "d", datafield: "Date", text: "Date", width: 250 },
      { datafield: "S&P 500", text: "S&P 500", width: 150 },
      { datafield: "NASDAQ", text: "NASDAQ" }
    ];
    const grid = (

      <JqxGrid
        ref={this.myGrid2}
        width={"100%"}
        height={400}
        source={dataAdapter}
        columns={columns}

      />

    );
    render(grid, this.gridElementTwo.current!);
  };


  private initWidgets = (tab: any) => {
    switch (tab) {
      case 0:
        this.initGrid();
        break;
      case 1:
        this.initGrid2();
        break;
    }
  };

}

render(<App />, document.getElementById("root"));

Question:

Since I've already moved private initGrid = () => { inside a separate file firstTab.tsx, in index.tsx where should I put {firstTab.tsx} to make sure both tabs in index.tsx works fine? I mean, even if I comment out private initGrid = () => { function from index.tsx both tabs should work fine.

Thanks

Answer 1

You could also create a separate file that contains only exports with your data. If you then import that into your files with the functions you can use that there, keeps it cleaner.

And if you pass that data as a prop / param to your initGrid() functions, you don't have to repeat that code, can reuse it.

Answer 2

If I would refactor this I would consider the next approach:

• Create Parent component Table (probably some more appropriate name)
• Create a component for US Indexes
• Create a component for NASDAQ compared to S&P 500
• Based on the active tab render the proper component.