Use never as default expiration, fix key= prop

packages/web/components/patterns/FormModal.tsx

@@ -5,13 +5,10 @@ import {
   ModalRoot,
   ModalTitleBar,
 } from '../elements/ModalPrimitives'
-import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
-import { Button } from '../elements/Button'
+import { Box, VStack } from '../elements/LayoutPrimitives'
 import { StyledText } from '../elements/StyledText'
 import { useState } from 'react'
 import { FormInputProps, GeneralFormInput } from '../elements/FormElements'
-import { theme } from '../tokens/stitches.config'
-import { X } from 'phosphor-react'
 
 export interface FormModalProps {
   inputs?: FormInputProps[]
@@ -35,7 +32,10 @@ export function FormModal(props: FormModalProps): JSX.Element {
         css={{ overflow: 'auto', px: '24px' }}
       >
         <VStack>
-          <ModalTitleBar title={props.title} onOpenChange={props.onOpenChange} />
+          <ModalTitleBar
+            title={props.title}
+            onOpenChange={props.onOpenChange}
+          />
           <Box css={{ width: '100%' }}>
             <form
               onSubmit={(event) => {
@@ -46,15 +46,21 @@ export function FormModal(props: FormModalProps): JSX.Element {
             >
               {inputs.map((input, index) => (
                 <VStack key={index}>
-                  <StyledText style={'menuTitle'} css={{ pt: index > 0 ? '10px' : 'unset' }}>
+                  <StyledText
+                    style={'menuTitle'}
+                    css={{ pt: index > 0 ? '10px' : 'unset' }}
+                  >
                     {input.label}
-                    </StyledText>
+                  </StyledText>
                   <Box css={{ width: '100%' }}>
                     <GeneralFormInput {...input} />
                   </Box>
                 </VStack>
               ))}
-              <ModalButtonBar onOpenChange={props.onOpenChange} acceptButtonLabel={props.acceptButtonLabel} />
+              <ModalButtonBar
+                onOpenChange={props.onOpenChange}
+                acceptButtonLabel={props.acceptButtonLabel}
+              />
             </form>
           </Box>
         </VStack>

packages/web/components/templates/settings/SettingsTable.tsx

@@ -28,7 +28,6 @@ type CreateButtonProps = {
 }
 
 type SettingsTableRowProps = {
-  key: string
   title: string
   isLast: boolean
 
@@ -121,7 +120,6 @@ export const EmptySettingsRow = (props: EmptySettingsRowProps): JSX.Element => {
 export const SettingsTableRow = (props: SettingsTableRowProps): JSX.Element => {
   return (
     <Box
-      key={props.key}
       css={{
         backgroundColor: '$grayBg',
         display: 'flex',

packages/web/pages/settings/api.tsx

@@ -27,11 +27,8 @@ export default function Api(): JSX.Element {
   const [expiresAt, setExpiresAt] = useState<Date>(new Date())
   const [formInputs, setFormInputs] = useState<FormInputProps[]>([])
   const [apiKeyGenerated, setApiKeyGenerated] = useState('')
-  // default expiry date is 1 year from now
-  const defaultExpiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 7)
-    .toISOString()
-    .split('T')[0]
   const neverExpiresDate = new Date(8640000000000000)
+  const defaultExpiresAt = neverExpiresDate.toISOString().split('T')[0]
 
   const router = useRouter()
   useEffect(() => {
@@ -80,6 +77,7 @@ export default function Api(): JSX.Element {
         name: 'expiredAt',
         required: true,
         onChange: (e) => {
+          console.log('onChange: ', e)
           let additionalDays = 0
           switch (e.target.value) {
             case 'in 7 days':