Merge pull request #63 from zenml-io/talha/feedback-fixes

Talha/feedback fixes

Author: danialraza03

src/ui/layouts/Home.tsx

@@ -72,21 +72,23 @@ export const Home: React.FC = () => {
   const authToken = useSelector(sessionSelectors.authenticationToken);
 
   useEffect(() => {
-    const getDashboardData = async () => {
-      setFetching(true);
-      const { data } = await axios.get(
-        `${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`,
-        {
-          headers: {
-            Authorization: `bearer ${authToken}`,
+    if (authToken) {
+      const getDashboardData = async () => {
+        setFetching(true);
+        const { data } = await axios.get(
+          `${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`,
+          {
+            headers: {
+              Authorization: `bearer ${authToken}`,
+            },
           },
-        },
-      );
+        );
 
-      setDashboardData(data);
-      setFetching(false);
-    };
-    getDashboardData();
+        setDashboardData(data);
+        setFetching(false);
+      };
+      getDashboardData();
+    }
   }, [authToken]);
 
   const preData = Object.entries(dashboardData);

src/ui/layouts/common/Table/index.tsx

@@ -35,6 +35,7 @@ export interface TableProps {
 }
 
 const ITEMS_PER_PAGE = parseInt(process.env.REACT_APP_ITEMS_PER_PAGE as string);
+const DEFAULT_ITEMS_PER_PAGE = 10;
 
 export const Table: React.FC<TableProps> = ({
   headerCols,
@@ -50,7 +51,7 @@ export const Table: React.FC<TableProps> = ({
 
   const { itemsForPage, pages, totalOfPages } = getPaginationData({
     pageIndex,
-    itemsPerPage: ITEMS_PER_PAGE,
+    itemsPerPage: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
     items: tableRows,
   });
 

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx

@@ -10,26 +10,30 @@ import { useSelector } from '../../../../../../hooks';
 import axios from 'axios';
 
 export const SideFooter: React.FC = () => {
-
   const authToken = useSelector(sessionSelectors.authenticationToken);
-  const [apiVersion, setApiVersion] = useState('')
+  const [apiVersion, setApiVersion] = useState('');
+
+  useEffect(() => {
+    if (authToken) {
+      const getApiVersion = async () => {
+        const { data } = await axios.get(
+          `${process.env.REACT_APP_BASE_API_URL}/version`,
+          {
+            headers: {
+              Authorization: `bearer ${authToken}`,
+            },
+          },
+        );
+        setApiVersion(data);
+      };
 
-  useEffect(()  => {  
-    const getApiVersion = async () => {
-    const { data } = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/version`, {
-      headers: {
-        'Authorization': `bearer ${authToken}` 
-      }
-    })
-    setApiVersion(data)
+      getApiVersion();
     }
+  }, [authToken]);
 
-    getApiVersion()
-  }, [authToken])
-   
   return (
     <>
-      <Box marginHorizontal="md" paddingBottom='md'>
+      <Box marginHorizontal="md" paddingBottom="md">
         <Separator.LightNew />
       </Box>
 
@@ -53,13 +57,19 @@ export const SideFooter: React.FC = () => {
       <MenuItem
         Icon={() => (
           <icons.settings color={iconColors.white} size={iconSizes.md} />
-        )} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')} 
+        )}
+        to={routePaths.settings.personalDetails}
+        text={translate('menu.setting.text')}
       />
 
-      <Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom='xs' >
-        <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>UI Version v{process.env.REACT_APP_VERSION}</Paragraph>
-        <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>ZenML v{apiVersion}</Paragraph>
+      <Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom="xs">
+        <Paragraph color="white" style={{ fontSize: '8px', fontWeight: 400 }}>
+          UI Version v{process.env.REACT_APP_VERSION}
+        </Paragraph>
+        <Paragraph color="white" style={{ fontSize: '8px', fontWeight: 400 }}>
+          ZenML v{apiVersion}
+        </Paragraph>
       </Box>
-      </>
+    </>
   );
 };