FE: Topics: Save field previews into local storage

Resolves: #439
kafbat · Jun 20, 2024 · 160a659 · 160a659
1 parent 28677a9
commit 160a659
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 12 deletions.
diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx
@@ -2,43 +2,81 @@ 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 } from 'react';
+import React, { useEffect, useState } from 'react';
 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 useAppParams from 'lib/hooks/useAppParams';
+import { RouteParamsClusterTopic } from 'lib/paths';
+import { useLocalStorage } from 'lib/hooks/useLocalStorage';
 
-import PreviewModal from './PreviewModal';
 import Message, { PreviewFilter } from './Message';
+import PreviewModal from './PreviewModal';
 
 export interface MessagesTableProps {
   messages: TopicMessage[];
   isFetching: boolean;
 }
 
+interface MessagePreviewProps {
+  [key: string]: {
+    keyFilters: PreviewFilter[];
+    contentFilters: PreviewFilter[];
+  };
+}
+
 const MessagesTable: React.FC<MessagesTableProps> = ({
   messages,
   isFetching,
 }) => {
   const paginate = usePaginateTopics();
-  const [previewFor, setPreviewFor] = useState<string | null>(null);
-
+  const [previewFor, setPreviewFor] = useState<'key' | 'content' | null>(null);
   const [keyFilters, setKeyFilters] = useState<PreviewFilter[]>([]);
   const [contentFilters, setContentFilters] = useState<PreviewFilter[]>([]);
   const nextCursor = useMessageFiltersStore((state) => state.nextCursor);
   const isLive = useIsLiveMode();
+  const { topicName } = useAppParams<RouteParamsClusterTopic>();
+  const [messagesPreview, setMessagesPreview] =
+    useLocalStorage<MessagePreviewProps>('message-preview', {
+      [topicName]: {
+        keyFilters: [],
+        contentFilters: [],
+      },
+    });
+
+  useEffect(() => {
+    setKeyFilters(messagesPreview[topicName]?.keyFilters || []);
+    setContentFilters(messagesPreview[topicName]?.contentFilters || []);
+  }, []);
 
   return (
     <div style={{ position: 'relative' }}>
       {previewFor !== null && (
         <PreviewModal
           values={previewFor === 'key' ? keyFilters : contentFilters}
           toggleIsOpen={() => setPreviewFor(null)}
-          setFilters={(payload: PreviewFilter[]) =>
-            previewFor === 'key'
-              ? setKeyFilters(payload)
-              : setContentFilters(payload)
-          }
+          setFilters={(payload: PreviewFilter[]) => {
+            if (previewFor === 'key') {
+              setKeyFilters(payload);
+              setMessagesPreview({
+                ...messagesPreview,
+                [topicName]: {
+                  ...messagesPreview[topicName],
+                  keyFilters: payload,
+                },
+              });
+            } else {
+              setContentFilters(payload);
+              setMessagesPreview({
+                ...messagesPreview,
+                [topicName]: {
+                  ...messagesPreview[topicName],
+                  contentFilters: payload,
+                },
+              });
+            }
+          }}
         />
       )}
       <Table isFullwidth>

diff --git a/frontend/src/lib/hooks/useLocalStorage.ts b/frontend/src/lib/hooks/useLocalStorage.ts
@@ -1,9 +1,12 @@
 import { LOCAL_STORAGE_KEY_PREFIX } from 'lib/constants';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Dispatch, SetStateAction } from 'react';
 
-export const useLocalStorage = (featureKey: string, defaultValue: string) => {
+export const useLocalStorage = <T>(
+  featureKey: string,
+  defaultValue: T
+): [T, Dispatch<SetStateAction<T>>] => {
   const key = `${LOCAL_STORAGE_KEY_PREFIX}-${featureKey}`;
-  const [value, setValue] = useState(() => {
+  const [value, setValue] = useState<T>(() => {
     const saved = localStorage.getItem(key);
 
     if (saved !== null) {