Merge pull request #251 from alleslabs/refactor/tables

Refactor: tables

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#251](https://github.com/alleslabs/celatone-frontend/pull/251) Refactor Code and Contract tables into general components
 - [#252](https://github.com/alleslabs/celatone-frontend/pull/252) Refactor Empty State image source logic
 - [#249](https://github.com/alleslabs/celatone-frontend/pull/249) Change code table format in select code draw and add CW2 info
 - [#247](https://github.com/alleslabs/celatone-frontend/pull/247) Refactor hover logic of copier icon

src/lib/components/select-code/CodeSelectDrawerButton.tsx

@@ -21,13 +21,11 @@ import { CustomTab } from "../CustomTab";
 import { FilterByPermission } from "../forms";
 import { CustomIcon } from "../icon";
 import InputWithIcon from "../InputWithIcon";
+import { MySavedCodesTable, MyStoredCodesTable } from "../table";
 import type { PermissionFilterValue } from "lib/hooks";
 import { useMyCodesData } from "lib/model/code";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
-import { MySavedCodeContent } from "./MySavedCodeContent";
-import { MyStoredCodeContent } from "./MyStoredCodeContent";
-
 interface CodeFilterState {
   keyword: string;
   permissionValue: PermissionFilterValue;
@@ -66,11 +64,13 @@ export const CodeSelectDrawerButton = ({
     isSavedCodesLoading,
   } = useMyCodesData(keyword, permissionValue);
 
-  const handleSelect = (code: string) => {
-    onCodeSelect(code);
+  const handleSelect = (codeId: number) => {
+    onCodeSelect(codeId.toString());
     onClose();
   };
 
+  const isSearching = !!keyword || permissionValue !== "all";
+
   return (
     <>
       <Button
@@ -122,17 +122,24 @@ export const CodeSelectDrawerButton = ({
               </TabList>
               <TabPanels>
                 <TabPanel p={0}>
-                  <MyStoredCodeContent
-                    storedCodes={stored}
-                    handleSelect={handleSelect}
+                  <MyStoredCodesTable
+                    codes={stored}
                     isLoading={isStoredCodesLoading}
+                    onRowSelect={handleSelect}
+                    emptyMessage="You don’t have any stored codes in this device."
+                    disconnectedMessage="to see your stored code."
+                    isSearching={isSearching}
+                    isReadOnly
                   />
                 </TabPanel>
                 <TabPanel p={0}>
-                  <MySavedCodeContent
-                    savedCodes={saved}
-                    handleSelect={handleSelect}
+                  <MySavedCodesTable
+                    codes={saved}
                     isLoading={isSavedCodesLoading}
+                    onRowSelect={handleSelect}
+                    emptyMessage="You don’t have any saved codes in this device."
+                    isSearching={isSearching}
+                    isReadOnly
                   />
                 </TabPanel>
               </TabPanels>