Refactor + commented out code

2022-07-19 23:29:52 +02:00
parent a40d7703a7
commit 5b6b9afd47
4 changed files with 294 additions and 140 deletions
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@ -217,3 +217,22 @@ export const Button = styled('button', {
    style: 'ctaWhite',
  },
 })
+
+export const IconButton = styled(Button, {
+  variants: {
+    style: {
+      ctaWhite: {
+        color: 'red',
+        padding: '10px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid $grayBorder',
+        boxSizing: 'border-box',
+        borderRadius: 6,
+        width: 40,
+        height: 40,
+      },
+    },
+  },
+})
--- a/packages/web/components/elements/Table-Responsive.tsx
+++ b/packages/web/components/elements/Table-Responsive.tsx
@ -1,78 +1,115 @@
-import React from 'react'
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
-import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
-import { styled } from '../tokens/stitches.config'
-import { Button } from './Button'
-import { Trash } from 'phosphor-react'
-import { isDarkTheme } from '../../lib/themeUpdater'
+// import React from 'react'
+// import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+// import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
+// import { IconButton } from './Button'
+// import { PencilSimple, Trash } from 'phosphor-react'
+// import { isDarkTheme } from '../../lib/themeUpdater'
+// import { Box, SpanBox } from './LayoutPrimitives'
+// import { StyledText } from './StyledText'

-interface TableProps {
-  heading: string
-  infoLink?: string
-  onAdd?: () => void
-  headers: string[]
-  rows: Map<string, Record<string, any>>
-  onDelete?: (id: string) => void
-  onEdit?: (obj: any) => void
-}
+// interface TableProps {
+//   heading: string
+//   infoLink?: string
+//   onAdd?: () => void
+//   headers: string[]
+//   rows: Map<string, Record<string, any>>
+//   onDelete?: (id: string) => void
+//   onEdit?: (obj: any) => void
+// }

-const IconButton = styled(Button, {
-  variants: {
-    style: {
-      ctaWhite: {
-        color: 'red',
-        padding: '10px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        border: '1px solid $grayBorder',
-        boxSizing: 'border-box',
-        borderRadius: 6,
-        width: 40,
-        height: 40,
-      },
-    },
-  },
-})
+// export default function TableR(props: TableProps): JSX.Element {
+//   const { headers } = props
+//   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
+//   return (
+//     <>
+//       <Box css={{ml:'25px'}}>
+//         <StyledText style="fixedHeadline">{props.heading}</StyledText>
+//       </Box>
+//       <Box
+//         css={{
+//           backgroundColor: '$grayBg',
+//           margin: ' 0 auto',
+//           border: '0.5px solid $grayBgActive',
+//           width: '95%',
+//           mt: '$3',
+//           '&:hover': {
+//             border: '0.5px solid #FFD234',
+//           },
+//         }}
+//       >
+//         <Table>
+//           <Thead>
+//             <Tr>
+//               {headers.map((header: string, index: number) => (
+//                 <Th key={index}>
+//                   <SpanBox
+//                     css={{
+//                       textTransform: 'uppercase',
+//                       display: 'flex',
+//                       fontWeight: 600,
+//                       padding: '20px 10px',
+//                       color: '$grayTextContrast',
+//                       fontSize: '$2',
+//                     }}
+//                   >
+//                     {header}
+//                   </SpanBox>
+//                 </Th>
+//               ))}
+//             </Tr>
+//           </Thead>
+//           <Tbody>
+//             {Array.from(props.rows.keys()).map((key, index) => (
+//               <Tr key={index}>
+//                 {Object.values(props.rows.get(key) || {}).map((cell, index) => (
+//                   <Td key={index}>
+//                     <SpanBox
+//                       key={index}
+//                       css={{
+//                         display: 'flex',
+//                         justifyContent: 'left',
+//                         padding: '15px 10px',
+//                         color: '$grayTextContrast',
+//                         fontSize: '$1',
+//                       }}
+//                     >
+//                       {cell}
+//                     </SpanBox>
+//                   </Td>
+//                 ))}

-export default function TableR(props: TableProps): JSX.Element {
-  const { headers } = props
-  const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
-  console.log(props.rows)
-  return (
-    <Table>
-      <Thead>
-        <Tr>
-          {headers.map((header: string, index: number) => (
-            <Th key={index}>
-              {header}
-            </Th>
-          ))}
-        </Tr>
-      </Thead>
-      <Tbody>
-        {Array.from(props.rows.keys()).map((key, index) => (
-          <Tr key={index}>
-            {Object.values(props.rows.get(key) || {}).map((cell, index) => (
-              <Td key={index}>{cell}</Td>
-            ))}
-
-            {props.onDelete && (
-              <Td>
-                <IconButton
-                  style="ctaWhite"
-                  css={{ mr: '$1', background: '$labelButtonsBg' }}
-                  onClick={() => {
-                    props.onDelete && props.onDelete(key)
-                  }}
-                >
-                  <Trash size={16} color={iconColor} />
-                </IconButton>
-              </Td>
-            )}
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
-  )
-}
+//                 {props.onDelete && (
+//                   <Td>
+//                     <IconButton
+//                       style="ctaWhite"
+//                       css={{ mr: '$1', background: '$labelButtonsBg' }}
+//                       onClick={() => {
+//                         props.onDelete && props.onDelete(key)
+//                       }}
+//                     >
+//                       <Trash size={16} color={iconColor} />
+//                     </IconButton>
+//                   </Td>
+//                 )}
+//                 {props.onEdit && (
+//                   <Td>
+//                     <IconButton
+//                       style="ctaWhite"
+//                       css={{ mr: '$1', background: '$labelButtonsBg' }}
+//                       onClick={() => {
+//                         props.onEdit &&
+//                           props.onEdit({ ...props.rows.get(key), id: key })
+//                       }}
+//                     >
+//                       <PencilSimple size={24} color={iconColor} />
+//                     </IconButton>
+//                   </Td>
+//                 )}
+//               </Tr>
+//             ))}
+//           </Tbody>
+//         </Table>
+//       </Box>
+//     </>
+//   )
+// }
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@ -1,10 +1,13 @@
-import { Box, HStack, SpanBox, VStack } from './LayoutPrimitives'
+import { Box, SpanBox, VStack } from './LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
 import { StyledText } from './StyledText'
 import { InfoLink } from './InfoLink'
 import { Button } from './Button'
 import { PencilSimple, Plus, Trash } from 'phosphor-react'
 import { isDarkTheme } from '../../lib/themeUpdater'
+import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
+import { IconButton } from './Button'

 interface TableProps {
  heading: string
@ -23,64 +26,64 @@ const HeaderWrapper = styled(Box, {
  },
 })

-const TableCard = styled(Box, {
-  backgroundColor: '$grayBg',
-  display: 'flex',
-  alignItems: 'center',
-  padding: '10px 12px',
-  border: '0.5px solid $grayBgActive',
-  width: '100%',
+// const TableCard = styled(Box, {
+//   backgroundColor: '$grayBg',
+//   display: 'flex',
+//   alignItems: 'center',
+//   padding: '10px 12px',
+//   border: '0.5px solid $grayBgActive',
+//   width: '100%',

-  '&:hover': {
-    border: '0.5px solid #FFD234',
-  },
-  '@md': {
-    paddingLeft: '0',
-  },
-})
+//   '&:hover': {
+//     border: '0.5px solid #FFD234',
+//   },
+//   '@md': {
+//     paddingLeft: '0',
+//   },
+// })

-const TableHeading = styled(Box, {
-  backgroundColor: '$grayBgActive',
-  border: '1px solid rgba(0, 0, 0, 0.06)',
-  display: 'none',
-  alignItems: 'center',
-  padding: '14px 0 14px 40px',
-  borderRadius: '5px 5px 0px 0px',
-  width: '100%',
-  '@md': {
-    display: 'flex',
-  },
-})
+// const TableHeading = styled(Box, {
+//   backgroundColor: '$grayBgActive',
+//   border: '1px solid rgba(0, 0, 0, 0.06)',
+//   display: 'none',
+//   alignItems: 'center',
+//   padding: '14px 0 14px 40px',
+//   borderRadius: '5px 5px 0px 0px',
+//   width: '100%',
+//   '@md': {
+//     display: 'flex',
+//   },
+// })

-const Input = styled('input', {
-  backgroundColor: 'transparent',
-  color: '$grayTextContrast',
-  marginTop: '5px',
-  '&[disabled]': {
-    border: 'none',
-  },
-})
+// const Input = styled('input', {
+//   backgroundColor: 'transparent',
+//   color: '$grayTextContrast',
+//   marginTop: '5px',
+//   '&[disabled]': {
+//     border: 'none',
+//   },
+// })

-const IconButton = styled(Button, {
-  variants: {
-    style: {
-      ctaWhite: {
-        color: 'red',
-        padding: '10px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        border: '1px solid $grayBorder',
-        boxSizing: 'border-box',
-        borderRadius: 6,
-        width: 40,
-        height: 40,
-      },
-    },
-  },
-})
+// const IconButton = styled(Button, {
+//   variants: {
+//     style: {
+//       ctaWhite: {
+//         color: 'red',
+//         padding: '10px',
+//         display: 'flex',
+//         justifyContent: 'center',
+//         alignItems: 'center',
+//         border: '1px solid $grayBorder',
+//         boxSizing: 'border-box',
+//         borderRadius: 6,
+//         width: 40,
+//         height: 40,
+//       },
+//     },
+//   },
+// })

-export function Table(props: TableProps): JSX.Element {
+export function TableR(props: TableProps): JSX.Element {
  const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'

  return (
@ -140,7 +143,7 @@ export function Table(props: TableProps): JSX.Element {
          )}
        </Box>
      </HeaderWrapper>
-      <TableHeading>
+      {/* <TableHeading>
        {props.headers.map((header, index) => (
          <Box
            key={index}
@ -170,8 +173,8 @@ export function Table(props: TableProps): JSX.Element {
            width: '120px',
          }}
        ></Box>
-      </TableHeading>
-      {Array.from(props.rows.keys()).map((key, index) => (
+      </TableHeading> */}
+      {/* {Array.from(props.rows.keys()).map((key, index) => (
        <TableCard
          key={index}
          css={{
@ -241,7 +244,95 @@ export function Table(props: TableProps): JSX.Element {
            )}
          </Box>
        </TableCard>
-      ))}
+      ))} */}
+      {/* <Box css={{ ml: '25px' }}>
+        <StyledText style="fixedHeadline">{props.heading}</StyledText>
+      </Box> */}
+      <Box
+        css={{
+          backgroundColor: '$grayBg',
+          margin: ' 0 auto',
+          border: '0.5px solid $grayBgActive',
+          width: '100%',
+          mt: '$3',
+          '&:hover': {
+            border: '0.5px solid #FFD234',
+          },
+        }}
+      >
+        <Table>
+          <Thead>
+            <Tr>
+              {props.headers.map((header: string, index: number) => (
+                <Th key={index}>
+                  <SpanBox
+                    css={{
+                      textTransform: 'uppercase',
+                      display: 'flex',
+                      fontWeight: 600,
+                      padding: '20px 10px',
+                      color: '$grayTextContrast',
+                      fontSize: '$2',
+                    }}
+                  >
+                    {header}
+                  </SpanBox>
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {Array.from(props.rows.keys()).map((key, index) => (
+              <Tr key={index}>
+                {Object.values(props.rows.get(key) || {}).map((cell, index) => (
+                  <Td key={index}>
+                    <SpanBox
+                      key={index}
+                      css={{
+                        display: 'flex',
+                        justifyContent: 'left',
+                        padding: '20px 10px',
+                        color: '$grayTextContrast',
+                        fontSize: '$1',
+                      }}
+                    >
+                      {cell}
+                    </SpanBox>
+                  </Td>
+                ))}
+
+                {props.onDelete && (
+                  <Td>
+                    <IconButton
+                      style="ctaWhite"
+                      css={{ mr: '$1', background: '$labelButtonsBg' }}
+                      onClick={() => {
+                        props.onDelete && props.onDelete(key)
+                      }}
+                    >
+                      <Trash size={16} color={iconColor} />
+                    </IconButton>
+                  </Td>
+                )}
+                {props.onEdit && (
+                  <Td>
+                    <IconButton
+                      style="ctaWhite"
+                      css={{ mr: '$1', background: '$labelButtonsBg' }}
+                      onClick={() => {
+                        props.onEdit &&
+                          props.onEdit({ ...props.rows.get(key), id: key })
+                      }}
+                    >
+                      <PencilSimple size={24} color={iconColor} />
+                    </IconButton>
+                  </Td>
+                )}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </Box>
    </VStack>
  )
 }
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@ -9,8 +9,7 @@ import { generateApiKeyMutation } from '../../lib/networking/mutations/generateA
 import { revokeApiKeyMutation } from '../../lib/networking/mutations/revokeApiKeyMutation'

 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
-import { Table } from '../../components/elements/Table'
-import TableR from '../../components/elements/Table-Responsive'
+import { TableR } from '../../components/elements/Table'

 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
@ -184,7 +183,7 @@ export default function Api(): JSX.Element {
        />
      )}

-      <Table
+      <TableR
        heading={'API Keys'}
        headers={headers}
        rows={rows}
@ -196,14 +195,22 @@ export default function Api(): JSX.Element {
          setAddModalOpen(true)
        }}
      />
-      
+
      {/* TESTING NEW TABLE */}
-      <TableR
+
+      
+      {/* <TableR
        headers={headers}
-        heading={'API Keys1'}
+        heading={'API Keys'}
        rows={rows}
        onDelete={setOnDeleteId}
-      />
+        onAdd={() => {
+          onAdd()
+          setName('')
+          setExpiresAt(new Date(defaultExpiresAt))
+          setAddModalOpen(true)
+        }} */}
+   
    </PrimaryLayout>
  )
 }