linter warnings fix ->> single-quote

Author: alexanderlz

frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx

@@ -1,18 +1,18 @@
-import PageLoader from "components/common/PageLoader/PageLoader";
-import { Table } from "components/common/table/Table/Table.styled";
-import TableHeaderCell from "components/common/table/TableHeaderCell/TableHeaderCell";
-import { TopicMessage } from "generated-sources";
-import React, { useState, useMemo } from "react";
-import { format } from "date-fns";
-import { Button } from "components/common/Button/Button";
-import * as S from "components/common/NewTable/Table.styled";
-import { usePaginateTopics, useIsLiveMode } from "lib/hooks/useMessagesFilters";
-import { useMessageFiltersStore } from "lib/hooks/useMessageFiltersStore";
-import useDataSaver from "lib/hooks/useDataSaver";
-import Select, { SelectOption } from "components/common/Select/Select";
-
-import PreviewModal from "./PreviewModal";
-import Message, { PreviewFilter } from "./Message";
+import PageLoader from 'components/common/PageLoader/PageLoader';
+import { Table } from 'components/common/table/Table/Table.styled';
+import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
+import { TopicMessage } from 'generated-sources';
+import React, { useState, useMemo } from 'react';
+import { format } from 'date-fns';
+import { Button } from 'components/common/Button/Button';
+import * as S from 'components/common/NewTable/Table.styled';
+import { usePaginateTopics, useIsLiveMode } from 'lib/hooks/useMessagesFilters';
+import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
+import useDataSaver from 'lib/hooks/useDataSaver';
+import Select, { SelectOption } from 'components/common/Select/Select';
+
+import PreviewModal from './PreviewModal';
+import Message, { PreviewFilter } from './Message';
 
 export interface MessagesTableProps {
   messages: TopicMessage[];
@@ -28,11 +28,11 @@ interface MessageData {
   Timestamp: Date;
 }
 
-type DownloadFormat = "json" | "csv";
+type DownloadFormat = 'json' | 'csv';
 
 function padCurrentDateTimeString(): string {
   const now: Date = new Date();
-  const dateTimeString: string = format(now, "yyyy-MM-dd HH:mm:ss");
+  const dateTimeString: string = format(now, 'yyyy-MM-dd HH:mm:ss');
 
   return `_${dateTimeString}`;
 }
@@ -49,11 +49,11 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
   const nextCursor = useMessageFiltersStore((state) => state.nextCursor);
   const isLive = useIsLiveMode();
 
-  const [selectedFormat, setSelectedFormat] = useState<DownloadFormat>("json");
+  const [selectedFormat, setSelectedFormat] = useState<DownloadFormat>('json');
 
   const formatOptions: SelectOption<DownloadFormat>[] = [
-    { label: "JSON", value: "json" },
-    { label: "CSV", value: "csv" },
+    { label: 'JSON', value: 'json' },
+    { label: 'CSV', value: 'csv' },
   ];
 
   const baseFileName = `topic-messages${padCurrentDateTimeString()}`;
@@ -70,31 +70,31 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
   const convertToCSV = useMemo(() => {
     return (messagesData: MessageData[]) => {
       const headers = [
-        "Value",
-        "Offset",
-        "Key",
-        "Partition",
-        "Headers",
-        "Timestamp",
+        'Value',
+        'Offset',
+        'Key',
+        'Partition',
+        'Headers',
+        'Timestamp',
       ] as const;
       const rows = messagesData.map((msg) =>
         headers
           .map((header) => {
             const value = msg[header];
-            if (header === "Headers") {
+            if (header === 'Headers') {
               return JSON.stringify(value || {});
             }
-            return String(value ?? "");
+            return String(value ?? '');
           })
-          .join(","),
+          .join(','),
       );
-      return [headers.join(","), ...rows].join("\n");
+      return [headers.join(','), ...rows].join('\n');
     };
   }, []);
 
   const jsonSaver = useDataSaver(
     `${baseFileName}.json`,
-    JSON.stringify(savedMessagesJson, null, "\t"),
+    JSON.stringify(savedMessagesJson, null, '\t'),
   );
   const csvSaver = useDataSaver(
     `${baseFileName}.csv`,
@@ -106,21 +106,21 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
   };
 
   const handleDownload = () => {
-    if (selectedFormat === "json") {
+    if (selectedFormat === 'json') {
       jsonSaver.saveFile();
     } else {
       csvSaver.saveFile();
     }
   };
 
   return (
-    <div style={{ position: "relative" }}>
+    <div style={{ position: 'relative' }}>
       <div
         style={{
-          display: "flex",
-          gap: "8px",
-          marginLeft: "1rem",
-          marginBottom: "1rem",
+          display: 'flex',
+          gap: '8px',
+          marginLeft: '1rem',
+          marginBottom: '1rem',
         }}
       >
         <Select<DownloadFormat>
@@ -146,10 +146,10 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
 
       {previewFor !== null && (
         <PreviewModal
-          values={previewFor === "key" ? keyFilters : contentFilters}
+          values={previewFor === 'key' ? keyFilters : contentFilters}
           toggleIsOpen={() => setPreviewFor(null)}
           setFilters={(payload: PreviewFilter[]) =>
-            previewFor === "key"
+            previewFor === 'key'
               ? setKeyFilters(payload)
               : setContentFilters(payload)
           }
@@ -165,18 +165,18 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
             <TableHeaderCell
               title="Key"
               previewText={`Preview ${
-                keyFilters.length ? `(${keyFilters.length} selected)` : ""
+                keyFilters.length ? `(${keyFilters.length} selected)` : ''
               }`}
-              onPreview={() => setPreviewFor("key")}
+              onPreview={() => setPreviewFor('key')}
             />
             <TableHeaderCell
               title="Value"
               previewText={`Preview ${
                 contentFilters.length
                   ? `(${contentFilters.length} selected)`
-                  : ""
+                  : ''
               }`}
-              onPreview={() => setPreviewFor("content")}
+              onPreview={() => setPreviewFor('content')}
             />
             <TableHeaderCell> </TableHeaderCell>
           </tr>
@@ -189,7 +189,7 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
                 message.timestamp,
                 message.key,
                 message.partition,
-              ].join("-")}
+              ].join('-')}
               message={message}
               keyFilters={keyFilters}
               contentFilters={contentFilters}