fix: improved borders and added links to snippet/cookbook view page

dastrong-codiga · dastrong-codiga · commit ba25ebb6b98f · 2022-09-02T10:22:06.000-07:00
diff --git a/src/renderer/components/CookbookTable/CookbookTable.tsx b/src/renderer/components/CookbookTable/CookbookTable.tsx
@@ -11,6 +11,7 @@ import {
   Link,
 } from '@chakra-ui/react';
 import { UsersIcon, Logos } from '@codiga/components';
+import { useNavigate } from 'react-router-dom';
 
 import { getCookbookUrl, getGroupUrl } from '../../utils/urlUtils';
 import { AssistantCookbook } from '../../types/assistantTypes';
@@ -37,8 +38,17 @@ type CookbookTableProps = {
 };
 
 export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
+  const navigate = useNavigate();
+
   return (
-    <Box w="full" h="full" overflow="hidden">
+    <Box
+      w="full"
+      h="full"
+      overflow="hidden"
+      border="1px"
+      borderColor="neutral.50"
+      _dark={{ borderColor: 'base.onyx' }}
+    >
       <TableContainer h="full" overflowY="scroll" overflowX="scroll">
         <Table variant="simple">
           <Tbody>
@@ -47,14 +57,15 @@ export default function CookbookTable({ cookbooks, page }: CookbookTableProps) {
                 <Tr
                   key={cookbook.id}
                   p="space_16"
-                  border="1px"
+                  borderBottom="1px"
                   borderColor="neutral.50"
                   bg="neutral.0"
                   _dark={{ bg: 'neutral.100', borderColor: 'base.onyx' }}
                   _hover={{
                     bg: 'neutral.25',
                     _dark: { bg: 'base.onyx' },
                   }}
+                  onClick={() => navigate(`/view-cookbook/${cookbook.id}`)}
                 >
                   <Td>
                     <Flex alignItems="center" gap="space_8">
diff --git a/src/renderer/components/CookbookTable/CookbookTableLoading.tsx b/src/renderer/components/CookbookTable/CookbookTableLoading.tsx
@@ -16,14 +16,21 @@ const Td = (props: TableCellProps) => (
 export default function CookbookTableLoading() {
   return (
     <Box w="full" h="full" overflow="hidden">
-      <TableContainer h="full" overflowY="scroll" overflowX="scroll">
+      <TableContainer
+        h="full"
+        overflowY="scroll"
+        overflowX="scroll"
+        border="1px"
+        borderColor="neutral.50"
+        _dark={{ borderColor: 'base.onyx' }}
+      >
         <Table variant="simple">
           <Tbody>
             {[1, 2, 3, 4, 5, 6, 7].map((num, i) => (
               <Tr
                 key={`loading-${num + i}`}
                 p="space_16"
-                border="1px"
+                borderBottom="1px"
                 borderColor="neutral.50"
                 bg="neutral.0"
                 _dark={{ bg: 'neutral.100', borderColor: 'base.onyx' }}
diff --git a/src/renderer/components/SnippetTable/SnippetTable.tsx b/src/renderer/components/SnippetTable/SnippetTable.tsx
@@ -11,6 +11,7 @@ import {
   Link,
 } from '@chakra-ui/react';
 import { Logo, UsersIcon, Tags } from '@codiga/components';
+import { useNavigate } from 'react-router-dom';
 
 import { getGroupUrl, getSnippetUrl } from '../../utils/urlUtils';
 import { AssistantRecipeWithStats } from '../../types/assistantTypes';
@@ -30,17 +31,27 @@ type SnippetTableProps = {
 };
 
 export default function SnippetTable({ page, recipes }: SnippetTableProps) {
+  const navigate = useNavigate();
+
   return (
-    <Box w="full" h="full" overflow="hidden">
+    <Box
+      w="full"
+      h="full"
+      overflow="hidden"
+      border="1px"
+      borderColor="neutral.50"
+      _dark={{ borderColor: 'base.onyx' }}
+    >
       <TableContainer h="full" overflowY="scroll" overflowX="scroll">
         <Table variant="simple">
           <Tbody>
             {recipes.map((recipe) => {
               return (
                 <Tr
+                  onClick={() => navigate(`/view-snippet/${recipe.id}`)}
                   key={recipe.id}
                   p="space_16"
-                  border="1px"
+                  borderBottom="1px"
                   borderColor="neutral.50"
                   bg="neutral.0"
                   _dark={{ bg: 'neutral.100', borderColor: 'base.onyx' }}
diff --git a/src/renderer/components/SnippetTable/SnippetTableLoading.tsx b/src/renderer/components/SnippetTable/SnippetTableLoading.tsx
@@ -16,14 +16,21 @@ const Td = (props: TableCellProps) => (
 export default function SnippetTableLoading() {
   return (
     <Box w="full" h="full" overflow="hidden">
-      <TableContainer h="full" overflowY="scroll" overflowX="scroll">
+      <TableContainer
+        h="full"
+        overflowY="scroll"
+        overflowX="scroll"
+        border="1px"
+        borderColor="neutral.50"
+        _dark={{ borderColor: 'base.onyx' }}
+      >
         <Table variant="simple">
           <Tbody>
             {[1, 2, 3, 4, 5, 6, 7].map((num, i) => (
               <Tr
                 key={`loading-${num + i}`}
                 p="space_16"
-                border="1px"
+                borderBottom="1px"
                 borderColor="neutral.50"
                 bg="neutral.0"
                 _dark={{ bg: 'neutral.100', borderColor: 'base.onyx' }}
