use prettier to format changed files

lattice/src/shared/DataTable/DataTable.tsx

@@ -1,18 +1,18 @@
-import React, { FC, Fragment, useEffect, useRef, useState } from 'react';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import classNames from 'classnames';
-import OrderBy from 'lodash/orderBy';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
+import React, { FC, Fragment, useEffect, useRef, useState } from "react";
+import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
+import classNames from "classnames";
+import OrderBy from "lodash/orderBy";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
 // import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import Typography from '@material-ui/core/Typography';
-import { ColumnInfo } from 'proto/pilosa_pb';
-import { Pager } from 'shared/Pager';
-import { formatTableCell } from 'shared/utils/formatTableCell';
-import css from './DataTable.module.scss';
+import TableRow from "@material-ui/core/TableRow";
+import Typography from "@material-ui/core/Typography";
+import { ColumnInfo } from "proto/pilosa_pb";
+import { Pager } from "shared/Pager";
+import { formatTableCell } from "shared/utils/formatTableCell";
+import css from "./DataTable.module.scss";
 
 type TableProps = {
   headers: ColumnInfo.AsObject[];
@@ -25,11 +25,11 @@ export const DataTable: FC<TableProps> = ({
   headers,
   data,
   loading = false,
-  autoWidth = false
+  autoWidth = false,
 }) => {
   const [sortedData, setSortedData] = useState<any[]>(data);
   const [sort, setSort] = useState<string>(headers[0]?.name);
-  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
   const [page, setPage] = useState<number>(1);
   const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const resultsRef = useRef<HTMLDivElement>(null);
@@ -54,8 +54,8 @@ export const DataTable: FC<TableProps> = ({
     setTimeout(() => {
       if (resultsRef.current) {
         resultsRef.current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start'
+          behavior: "smooth",
+          block: "start",
         });
       }
     }, 0);
@@ -63,15 +63,13 @@ export const DataTable: FC<TableProps> = ({
 
   const onSortClick = (name: string) => {
     if (sort === name) {
-      setSortDir(sortDir === 'desc' ? 'asc' : 'desc');
+      setSortDir(sortDir === "desc" ? "asc" : "desc");
     } else {
       setSort(name);
-      setSortDir('asc');
+      setSortDir("asc");
     }
   };
 
-
-
   return (
     <Fragment>
       <div ref={resultsRef} />
@@ -86,14 +84,14 @@ export const DataTable: FC<TableProps> = ({
                 >
                   <span
                     className={classNames(css.sortable, {
-                      [css.currentSort]: sort === col.name
+                      [css.currentSort]: sort === col.name,
                     })}
                     onClick={() => onSortClick(col.name)}
                   >
                     {col.name}
                     <ArrowDropDownIcon
                       className={classNames(css.sortArrow, {
-                        [css.asc]: sortDir === 'asc'
+                        [css.asc]: sortDir === "asc",
                       })}
                     />
                   </span>
@@ -112,7 +110,7 @@ export const DataTable: FC<TableProps> = ({
                 .map((row, rowIdx) => (
                   <TableRow
                     key={`table-row-${rowIdx}`}
-                    className={rowIdx % 2 === 0 ? '' : css.altBg}
+                    className={rowIdx % 2 === 0 ? "" : css.altBg}
                   >
                     {headers.map((col, colIdx) => (
                       <TableCell
@@ -120,7 +118,7 @@ export const DataTable: FC<TableProps> = ({
                         className={css.tableCell}
                       >
                         {formatTableCell(row, col)}
-                            </TableCell>
+                      </TableCell>
                     ))}
                     {autoWidth ? <TableCell className={css.fillWidth} /> : null}
                   </TableRow>

lattice/src/shared/utils/formatTableCell.test.tsx

@@ -1,9 +1,8 @@
-import { formatTableCell } from './formatTableCell';
+import { formatTableCell } from "./formatTableCell";
 import React from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 import { act } from "react-dom/test-utils";
 
-
 let container = null;
 beforeEach(() => {
   // setup a DOM element as a render target
@@ -19,8 +18,8 @@ afterEach(() => {
 });
 
 it("it renders strings in quotes", () => {
-  let row = {thing:"quoted string!"};
-  let col = {name: "thing", datatype: "[]string"};
+  let row = { thing: "quoted string!" };
+  let col = { name: "thing", datatype: "[]string" };
 
   act(() => {
     render(formatTableCell(row, col), container);
@@ -29,8 +28,8 @@ it("it renders strings in quotes", () => {
 });
 
 it("renders objects as stringified", () => {
-  let row = {thing:{val:"quoted string!"}};
-  let col = {name: "thing", datatype: "object"};
+  let row = { thing: { val: "quoted string!" } };
+  let col = { name: "thing", datatype: "object" };
 
   act(() => {
     render(formatTableCell(row, col), container);
@@ -41,13 +40,11 @@ it("renders objects as stringified", () => {
 });
 
 it("it puts timestamps in MM/DD/YYYY hh:mm:ss a format", () => {
-  let row = {thing:1635452050094};
-  let col = {name: "thing", datatype: "timestamp"};
+  let row = { thing: 1635452050094 };
+  let col = { name: "thing", datatype: "timestamp" };
 
   act(() => {
     render(formatTableCell(row, col), container);
   });
   expect(container.textContent).toBe("10/28/2021 08:14:10 pm");
 });
-
-

lattice/src/shared/utils/formatTableCell.tsx

@@ -1,27 +1,23 @@
-import moment from 'moment';
-import css from '../DataTable/DataTable.module.scss';
+import moment from "moment";
+import css from "../DataTable/DataTable.module.scss";
 export const formatTableCell = (row: any, col: any) => {
-     if (typeof row[col.name] === 'object') {
-        return (
+  if (typeof row[col.name] === "object") {
+    return (
       <pre className={css.preFormat}>
         {JSON.stringify(row[col.name], null, 2)}
-      </pre> )
-     } else if (row[col.name] !== undefined) {
-        if (col.datatype === '[]string') {
-            return (
-                 <span>
-                    {'"' + (row[col.name]) + '"'}
-                </span> 
-            )
-        }
-        return (
-      <span>
-        {col.datatype === 'timestamp' && row[col.name]
-          ? moment
-              .utc(row[col.name])
-              .format('MM/DD/YYYY hh:mm:ss a')
-          : row[col.name].toLocaleString()}
-      </span> )
+      </pre>
+    );
+  } else if (row[col.name] !== undefined) {
+    if (col.datatype === "[]string") {
+      return <span>{'"' + row[col.name] + '"'}</span>;
     }
-     return null
-}
+    return (
+      <span>
+        {col.datatype === "timestamp" && row[col.name]
+          ? moment.utc(row[col.name]).format("MM/DD/YYYY hh:mm:ss a")
+          : row[col.name].toLocaleString()}
+      </span>
+    );
+  }
+  return null;
+};