manifold/web/components/confirmation-button.tsx
Ian Philips 3b3717d307
Groups (#510)
* Folds=>groups

* Show groups on user profile

* Allow group creation from /create

* Refactoring to groups

* Convert folds to groups

* Add new add to group notification

* Fix user profile tab bug

* Add groups nav and tab for my groups

* Remove bad profile pages

* remove comments

* Add group list dropdown to sidebar

* remove unused

* group cards ui

* Messages=>Comments, v2, groupDetails

* Discussion time

* Cleaning up some code

* Remove follow count

* Fix pool scoring for cpmm

* Fix imports

* Simplify rules, add GroupUser collection

* Fix group cards

* Refactor

* Refactor

* Small fixes

* Remove string

* Add api error detail handling

* Clear name field

* Componentize

* Spacing

* Undo userpage memo

* Member groups are already in my tab

* Remove active contracts reference for now

* Remove unused

* Refactoring

* Allow adding old questions to a group

* Rename

* Wording

* Throw standard v2 APIError

* Hide input for non-members, add about under title

* Multiple names to & # more

* Move comments firestore rules to appropriate subpaths

* Group membership, pool=>volume

* Cleanup, useEvent

* Raise state to parent

* Eliminate unused

* Cleaning up

* Clean code

* Revert tags input deletion

* Cleaning code

* Stylling

* Limit members to display

* Array cleanup

* Add categories back in

* Private=>closed

* Unused vars
2022-06-22 11:35:50 -05:00

113 lines
2.7 KiB
TypeScript

import clsx from 'clsx'
import { ReactNode, useState } from 'react'
import { Col } from './layout/col'
import { Modal } from './layout/modal'
import { Row } from './layout/row'
export function ConfirmationButton(props: {
openModalBtn: {
label: string
icon?: JSX.Element
className?: string
}
cancelBtn?: {
label?: string
className?: string
}
submitBtn?: {
label?: string
className?: string
}
children: ReactNode
onSubmit?: () => void
onOpenChanged?: (isOpen: boolean) => void
onSubmitWithSuccess?: () => Promise<boolean>
}) {
const {
openModalBtn,
cancelBtn,
submitBtn,
onSubmit,
children,
onOpenChanged,
onSubmitWithSuccess,
} = props
const [open, setOpen] = useState(false)
function updateOpen(newOpen: boolean) {
onOpenChanged?.(newOpen)
setOpen(newOpen)
}
return (
<>
<Modal open={open} setOpen={updateOpen}>
<Col className="gap-4 rounded-md bg-white px-8 py-6">
{children}
<Row className="gap-4">
<div
className={clsx('btn normal-case', cancelBtn?.className)}
onClick={() => updateOpen(false)}
>
{cancelBtn?.label ?? 'Cancel'}
</div>
<div
className={clsx('btn normal-case', submitBtn?.className)}
onClick={
onSubmitWithSuccess
? () =>
onSubmitWithSuccess().then((success) =>
updateOpen(!success)
)
: onSubmit
}
>
{submitBtn?.label ?? 'Submit'}
</div>
</Row>
</Col>
</Modal>
<div
className={clsx('btn normal-case', openModalBtn.className)}
onClick={() => updateOpen(true)}
>
{openModalBtn.icon}
{openModalBtn.label}
</div>
</>
)
}
export function ResolveConfirmationButton(props: {
onResolve: () => void
isSubmitting: boolean
openModalButtonClass?: string
submitButtonClass?: string
}) {
const { onResolve, isSubmitting, openModalButtonClass, submitButtonClass } =
props
return (
<ConfirmationButton
openModalBtn={{
className: clsx(
'border-none self-start',
openModalButtonClass,
isSubmitting && 'btn-disabled loading'
),
label: 'Resolve',
}}
cancelBtn={{
label: 'Back',
}}
submitBtn={{
label: 'Resolve',
className: clsx('border-none', submitButtonClass),
}}
onSubmit={onResolve}
>
<p>Are you sure you want to resolve this market?</p>
</ConfirmationButton>
)
}