From 5b6b9afd47ecb4cff7bc779e941444b4d08da821 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Tue, 19 Jul 2022 23:29:52 +0200 Subject: [PATCH] Refactor + commented out code --- packages/web/components/elements/Button.tsx | 19 ++ .../components/elements/Table-Responsive.tsx | 187 +++++++++------- packages/web/components/elements/Table.tsx | 207 +++++++++++++----- packages/web/pages/settings/api.tsx | 21 +- 4 files changed, 294 insertions(+), 140 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index 2d0fe45d3..1b4cce9da 100644 --- 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, + }, + }, + }, +}) \ No newline at end of file diff --git a/packages/web/components/elements/Table-Responsive.tsx b/packages/web/components/elements/Table-Responsive.tsx index f029e54e6..72a66d626 100644 --- 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> - onDelete?: (id: string) => void - onEdit?: (obj: any) => void -} +// interface TableProps { +// heading: string +// infoLink?: string +// onAdd?: () => void +// headers: string[] +// rows: Map> +// 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 ( +// <> +// +// {props.heading} +// +// +// +// +// +// {headers.map((header: string, index: number) => ( +// +// ))} +// +// +// +// {Array.from(props.rows.keys()).map((key, index) => ( +// +// {Object.values(props.rows.get(key) || {}).map((cell, index) => ( +// +// ))} -export default function TableR(props: TableProps): JSX.Element { - const { headers } = props - const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58' - console.log(props.rows) - return ( -
+// +// {header} +// +//
+// +// {cell} +// +//
- - - {headers.map((header: string, index: number) => ( - - ))} - - - - {Array.from(props.rows.keys()).map((key, index) => ( - - {Object.values(props.rows.get(key) || {}).map((cell, index) => ( - - ))} - - {props.onDelete && ( - - )} - - ))} - -
- {header} -
{cell} - { - props.onDelete && props.onDelete(key) - }} - > - - -
- ) -} +// {props.onDelete && ( +// +// { +// props.onDelete && props.onDelete(key) +// }} +// > +// +// +// +// )} +// {props.onEdit && ( +// +// { +// props.onEdit && +// props.onEdit({ ...props.rows.get(key), id: key }) +// }} +// > +// +// +// +// )} +// +// ))} +// +// +// +// +// ) +// } diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index d854dedb3..299fbaf24 100644 --- 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 { )} - + {/* {props.headers.map((header, index) => ( - - {Array.from(props.rows.keys()).map((key, index) => ( + */} + {/* {Array.from(props.rows.keys()).map((key, index) => ( - ))} + ))} */} + {/* + {props.heading} + */} + + + + + {props.headers.map((header: string, index: number) => ( + + ))} + + + + {Array.from(props.rows.keys()).map((key, index) => ( + + {Object.values(props.rows.get(key) || {}).map((cell, index) => ( + + ))} + + {props.onDelete && ( + + )} + {props.onEdit && ( + + )} + + ))} + +
+ + {header} + +
+ + {cell} + + + { + props.onDelete && props.onDelete(key) + }} + > + + + + { + props.onEdit && + props.onEdit({ ...props.rows.get(key), id: key }) + }} + > + + +
+ ) } diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx index 83a408390..1a9787e4d 100644 --- 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 { /> )} - - + {/* TESTING NEW TABLE */} - + onAdd={() => { + onAdd() + setName('') + setExpiresAt(new Date(defaultExpiresAt)) + setAddModalOpen(true) + }} */} + ) }