fix: resolve linting errors

Kajabi · May 16, 2024 · 59c8132 · 59c8132
1 parent 8ac5a1d
commit 59c8132
Show file tree

Hide file tree

Showing 12 changed files with 239 additions and 316 deletions.
diff --git a/packages/sage-react/lib/Drawer/Drawer.jsx b/packages/sage-react/lib/Drawer/Drawer.jsx
@@ -40,7 +40,7 @@ export const Drawer = ({
         onExpandChange(expanded ? DRAWER_END_EXPAND : DRAWER_END_COLLAPSE);
       }, 750);
     }
-  }, [expanded]);
+  }, [expanded, onExpandChange]);
 
   const classNames = classnames(
     'sage-drawer',

diff --git a/packages/sage-react/lib/Input/Input.jsx b/packages/sage-react/lib/Input/Input.jsx
@@ -103,7 +103,7 @@ export const Input = React.forwardRef(({
     if (affixUpdatesNeeded) {
       updateStyles(newInputStyles);
     }
-  }, [prefix, suffix]);
+  }, [prefix, suffix, inputStyles]);
 
   return (
     <div className={classNames}>

diff --git a/packages/sage-react/lib/Input/Input.story.jsx b/packages/sage-react/lib/Input/Input.story.jsx
@@ -150,10 +150,6 @@ const FocusTemplate = (args) => {
     updateValue(e.target.value);
   };
 
-  const onFocus = () => {
-    console.log('Has Focus!!!!');
-  };
-
   const inputRef = React.useRef(null);
 
   React.useEffect(() => {
@@ -163,7 +159,7 @@ const FocusTemplate = (args) => {
   }, []);
 
   return (
-    <Input {...args} onChange={onChange} value={value} onFocus={onFocus} ref={inputRef} />
+    <Input {...args} onChange={onChange} value={value} ref={inputRef} />
   );
 };
 

diff --git a/packages/sage-react/lib/PanelControls/PanelControls.story.jsx b/packages/sage-react/lib/PanelControls/PanelControls.story.jsx
@@ -5,7 +5,7 @@ import { Button } from '../Button';
 import { EmptyState } from '../EmptyState';
 import { Grid } from '../Grid';
 import { Panel } from '../Panel';
-import { Table } from '../Table';
+import { Table } from '../Table/Table';
 import { getNews } from '../services/newsapi';
 import { PanelControls } from './PanelControls';
 
@@ -46,7 +46,7 @@ export const Default = (args) => {
       bulkActionsItems: [
         {
           id: 'action-1',
-          label: 'Action 1'
+          label: 'Action 1',
         },
         {
           id: 'action-2',
@@ -73,72 +73,79 @@ export const Default = (args) => {
         {
           id: 'sort-date',
           label: 'Publish date',
-        }
+        },
       ],
       totalItems: 0,
       totalPages: 1,
-    }
+    },
   });
 
   //
   // API-related functions
   //
 
-  // Transforms API data into format for this table
-  const transformNewsData = (data) => {
-    const {
-      articles,
-      page: currentPage,
-      total_pages: totalPages,
-      page_size: pageSize,
-      total_hits: totalItems,
-    } = data;
-
-    const formattedArticles = articles.map(({ _id, title, author, link, published_date, }) => ({
-      id: _id || uuid(),
-      title: (
-        <Button
-          small={true}
-          subtle={true}
-          color={Button.COLORS.PRIMARY}
-          style={{ maxWidth: '200px' }}
-          href={link}
-        >
-          {title}
-        </Button>
-      ),
-      author,
-      published: published_date,
-    }));
-
-    setSelfData({
-      // Bring over all existing selfData props
-      ...selfData,
-      // Rewrite articles to contain those returned by service
-      items: formattedArticles,
-      // Rewrite the panelControlConfigs
-      panelControlConfigs: {
-        // First bring over all existing props
-        ...selfData.panelControlConfigs,
-        // Rewrite those changed by this API result
-        currentPage,
-        itemsOnThisPage: formattedArticles.length,
-        pageSize,
-        showDefaultToolbar: formattedArticles.length > 0,
-        totalPages,
-        totalItems,
-      },
-    });
-  };
+  const transformNewsData = React.useCallback(
+    (data) => {
+      const {
+        articles,
+        page: currentPage,
+        total_pages: totalPages,
+        page_size: pageSize,
+        total_hits: totalItems,
+      } = data;
+
+      const formattedArticles = articles.map(
+        ({ _id, title, author, link, published_date }) => ({
+          id: _id || uuid(),
+          title: (
+            <Button
+              small={true}
+              subtle={true}
+              color={Button.COLORS.PRIMARY}
+              style={{ maxWidth: '200px' }}
+              href={link}
+            >
+              {title}
+            </Button>
+          ),
+          author,
+          published: published_date,
+        })
+      );
+
+      setSelfData((prevSelfData) => ({
+        // Bring over all existing selfData props
+        ...prevSelfData,
+        // Rewrite articles to contain those returned by service
+        items: formattedArticles,
+        // Rewrite the panelControlConfigs
+        panelControlConfigs: {
+          // First bring over all existing props
+          ...prevSelfData.panelControlConfigs,
+          // Rewrite those changed by this API result
+          currentPage,
+          itemsOnThisPage: formattedArticles.length,
+          pageSize,
+          showDefaultToolbar: formattedArticles.length > 0,
+          totalPages,
+          totalItems,
+        },
+      }));
+    },
+    [setSelfData]
+  );
 
   // Gets new data from the API
-  const fetchData = async (page) => {
-    const data = await getNews(page);
+  const fetchData = React.useCallback(
+    async (page) => {
+      const data = await getNews(page);
 
-    if (data && data.status === 'ok') {
-      transformNewsData(data);
-    }
-  };
+      if (data && data.status === 'ok') {
+        transformNewsData(data);
+      }
+    },
+    [transformNewsData]
+  );
 
   //
   // Effects
@@ -147,18 +154,18 @@ export const Default = (args) => {
   // Get first page of data on load
   useEffect(() => {
     fetchData(1);
-  }, []);
+  }, [fetchData]);
 
   const bulkActionshandler = (payload) => {
-    console.log('bulk action command recieved', payload); // eslint-disable-line
+    console.log("bulk action command recieved", payload); // eslint-disable-line
   };
 
   const sortActionsHandler = (payload) => {
-    console.log('receieved sorts', payload); // eslint-disable-line
+    console.log("receieved sorts", payload); // eslint-disable-line
   };
 
   const pageSizeChangeHandler = (payload) => {
-    console.log('receieved page size change', payload); // eslint-disable-line
+    console.log("receieved page size change", payload); // eslint-disable-line
   };
 
   //
@@ -171,23 +178,25 @@ export const Default = (args) => {
         <PanelControls
           {...args}
           controlSettings={{ ...selfData.panelControlConfigs }}
-          onRequestChange={(data) => PanelControls.handlerUtils.handleChange({
-            data,
-            stateData: selfData,
-            setStateDataFn: setSelfData,
-            sortHandlerFn: sortActionsHandler,
-            pageChangeHandlerFn: fetchData,
-            pageSizeChangeHandlerFn: pageSizeChangeHandler,
-            bulkActionsHandlerFn: bulkActionshandler,
-          })}
-        />
-        {selfData.items.length > 0 ? (
-          <Table
-            onSelectRowHook={(data) => PanelControls.handlerUtils.handleSelection({
+          onRequestChange={(data) =>
+            PanelControls.handlerUtils.handleChange({
               data,
               stateData: selfData,
               setStateDataFn: setSelfData,
+              sortHandlerFn: sortActionsHandler,
+              pageChangeHandlerFn: fetchData,
+              pageSizeChangeHandlerFn: pageSizeChangeHandler,
+              bulkActionsHandlerFn: bulkActionshandler,
             })}
+        />
+        {selfData.items.length > 0 ? (
+          <Table
+            onSelectRowHook={(data) =>
+              PanelControls.handlerUtils.handleSelection({
+                data,
+                stateData: selfData,
+                setStateDataFn: setSelfData,
+              })}
             resetAbove={true}
             resetBelow={true}
             rows={selfData.items}
@@ -203,7 +212,7 @@ export const Default = (args) => {
               published: {
                 label: 'Date',
                 dataType: Table.DATA_TYPES.STRING,
-              }
+              },
             }}
             selectedRows={selfData.selectedRows}
           />