From 6407455def47e67587a62dd49f2f7175fa97fd28 Mon Sep 17 00:00:00 2001 From: keyan Date: Mon, 24 Jul 2023 13:35:05 -0500 Subject: [PATCH] upgrade react-bootstrap --- components/accordian-item.js | 42 ++--- components/action-tooltip.js | 7 +- components/adv-post-form.js | 4 +- components/avatar.js | 5 +- components/bookmark.js | 2 +- components/bounty-form.js | 6 +- components/cancel-button.js | 4 +- components/comment-edit.js | 2 +- components/comment.js | 14 +- components/comment.module.css | 5 + components/comments.js | 7 +- components/cowboy-hat.js | 12 +- components/delete.js | 6 +- components/discussion-form.js | 6 +- components/dont-link-this.js | 2 +- components/fee-button.js | 6 +- components/footer.js | 36 +++-- components/form.js | 81 +++++----- components/form.module.css | 14 +- components/fund-error.js | 4 +- components/header.js | 38 ++--- components/header.module.css | 12 +- components/info.js | 2 +- components/invoice-status.js | 6 +- components/item-act.js | 9 +- components/item-full.js | 4 +- components/item-info.js | 21 +-- components/item-job.js | 16 +- components/item.js | 10 +- components/item.module.css | 14 ++ components/job-form.js | 31 ++-- components/lightning-auth.js | 8 +- components/link-form.js | 8 +- components/login-button.js | 4 +- components/login.js | 2 +- components/modal.js | 2 +- components/more-footer.js | 4 +- components/notifications.js | 36 ++--- components/past-bounties.js | 2 +- components/pay-bounty.js | 4 +- components/pay-bounty.module.css | 2 +- components/poll-form.js | 6 +- components/poll.js | 6 +- components/poll.module.css | 2 +- components/post.js | 10 +- components/recent-header.js | 4 +- components/related.js | 2 +- components/reply.js | 2 +- components/reply.module.css | 2 +- components/search.js | 13 +- components/share.js | 6 +- components/snl.js | 6 +- components/sub-select-form.js | 2 +- components/subscribe.js | 2 +- components/table-of-contents.js | 7 +- components/text.js | 4 +- components/top-header.js | 6 +- components/upvote.js | 21 +-- components/usage-header.js | 4 +- components/user-header.js | 18 ++- components/user-header.module.css | 2 +- components/user-list.js | 8 +- components/when-charts.js | 12 +- package-lock.json | 256 +++++++++++++++++------------- package.json | 4 +- pages/404.js | 2 +- pages/500.js | 2 +- pages/[name]/[type].js | 6 +- pages/[name]/index.js | 2 +- pages/_app.js | 10 +- pages/email.js | 2 +- pages/invites/index.js | 6 +- pages/items/[id]/ots.js | 2 +- pages/items/[id]/related.js | 2 +- pages/live.js | 2 +- pages/login.js | 2 +- pages/offline.js | 2 +- pages/referrals/[when].js | 8 +- pages/rewards.js | 19 +-- pages/satistics.js | 2 +- pages/settings.js | 28 ++-- pages/signup.js | 4 +- pages/stackers/[when].js | 15 +- pages/wallet.js | 8 +- pages/withdrawals/[id].js | 4 +- pages/~/search.js | 2 +- public/dark.js | 2 +- styles/globals.scss | 86 +++++++--- styles/satistics.module.css | 5 + 89 files changed, 633 insertions(+), 495 deletions(-) diff --git a/components/accordian-item.js b/components/accordian-item.js index 878f1935..384c2c75 100644 --- a/components/accordian-item.js +++ b/components/accordian-item.js @@ -1,30 +1,30 @@ -import { Accordion } from 'react-bootstrap' +import Accordion from 'react-bootstrap/Accordion' +import AccordionContext from 'react-bootstrap/AccordionContext' +import { useAccordionButton } from 'react-bootstrap/AccordionButton' import ArrowRight from '../svgs/arrow-right-s-fill.svg' import ArrowDown from '../svgs/arrow-down-s-fill.svg' -import { useEffect, useState } from 'react' +import { useContext } from 'react' -export default function AccordianItem ({ header, body, headerColor = 'var(--theme-grey)', show }) { - const [open, setOpen] = useState(show) +function ContextAwareToggle ({ children, headerColor = 'var(--theme-grey)', eventKey }) { + const { activeEventKey } = useContext(AccordionContext) + const decoratedOnClick = useAccordionButton(eventKey) - useEffect(() => { - setOpen(show) - }, []) + const isCurrentEventKey = activeEventKey === eventKey return ( - -
} - eventKey='0' - style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }} - onClick={() => setOpen(!open)} - > - {open - ? - : } -
{header}
- +
+ {isCurrentEventKey + ? + : } + {children} +
+ ) +} + +export default function AccordianItem ({ header, body, headerColor = 'var(--theme-grey)', show }) { + return ( + +
{header}
{body}
 diff --git a/components/action-tooltip.js b/components/action-tooltip.js index 5d64eabb..d2fc246f 100644 --- a/components/action-tooltip.js +++ b/components/action-tooltip.js @@ -1,5 +1,6 @@ import { useFormikContext } from 'formik' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' +import OverlayTrigger from 'react-bootstrap/OverlayTrigger' +import Tooltip from 'react-bootstrap/Tooltip' export default function ActionTooltip ({ children, notForm, disable, overlayText, placement }) { // if we're in a form, we want to hide tooltip on submit @@ -21,7 +22,9 @@ export default function ActionTooltip ({ children, notForm, disable, overlayText trigger={['hover', 'focus']} show={formik?.isSubmitting ? false : undefined} > - {children} + + {children} + ) } diff --git a/components/adv-post-form.js b/components/adv-post-form.js index 4a8b1094..6a6dfcd9 100644 --- a/components/adv-post-form.js +++ b/components/adv-post-form.js @@ -1,6 +1,6 @@ import AccordianItem from './accordian-item' import { Input, InputUserSuggest } from './form' -import { InputGroup } from 'react-bootstrap' +import InputGroup from 'react-bootstrap/InputGroup' import { BOOST_MIN } from '../lib/constants' import Info from './info' @@ -21,7 +21,7 @@ export default function AdvPostForm ({ edit }) { label={
{edit ? 'add boost' : 'boost'} -
    +
    1. Boost ranks posts higher temporarily based on the amount
    2. The minimum boost is {BOOST_MIN} sats
    3. Each {BOOST_MIN} sats of boost is equivalent to one trusted upvote diff --git a/components/avatar.js b/components/avatar.js index 7dec407b..2e71b330 100644 --- a/components/avatar.js +++ b/components/avatar.js @@ -1,6 +1,7 @@ import { useRef, useState } from 'react' import AvatarEditor from 'react-avatar-editor' -import { Button, Form as BootstrapForm } from 'react-bootstrap' +import Button from 'react-bootstrap/Button' +import BootstrapForm from 'react-bootstrap/Form' import Upload from './upload' import EditImage from '../svgs/image-edit-fill.svg' import Moon from '../svgs/moon-fill.svg' @@ -28,7 +29,7 @@ export default function Avatar ({ onSuccess }) { setScale(parseFloat(e.target.value))} min={1} max={2} step='0.05' - defaultValue={scale} custom + defaultValue={scale} /> + ) } diff --git a/components/comment-edit.js b/components/comment-edit.js index f9ab8156..2fbf4df2 100644 --- a/components/comment-edit.js +++ b/components/comment-edit.js @@ -2,7 +2,7 @@ import { Form, MarkdownInput, SubmitButton } from '../components/form' import { gql, useMutation } from '@apollo/client' import styles from './reply.module.css' import { EditFeeButton } from './fee-button' -import { Button } from 'react-bootstrap' +import Button from 'react-bootstrap/Button' import Delete from './delete' import { commentSchema } from '../lib/validate' diff --git a/components/comment.js b/components/comment.js index 10c00491..9f9ee975 100644 --- a/components/comment.js +++ b/components/comment.js @@ -18,7 +18,7 @@ import Flag from '../svgs/flag-fill.svg' import { abbrNum } from '../lib/format' import Share from './share' import ItemInfo from './item-info' -import { Badge } from 'react-bootstrap' +import Badge from 'react-bootstrap/Badge' import { RootProvider, useRoot } from './root' import { useMe } from './me' @@ -43,7 +43,7 @@ function Parent ({ item, rootText }) { {root.subName && - {' '}{root.subName} + {' '}{root.subName} } ) @@ -143,7 +143,7 @@ export default function Comment ({ pendingSats={pendingSats} commentsText='replies' className={`${itemStyles.other} ${styles.other}`} - embellishUser={op && OP} + embellishUser={op && OP} extraInfo={ <> {includeParent && } @@ -170,7 +170,7 @@ export default function Comment ({ }} />)} {topLevel && ( - + )} @@ -203,7 +203,7 @@ export default function Comment ({ {root.bounty && !bountyPaid && } } {children} -
      +
      {item.comments && !noComments ? item.comments.map((item) => ( @@ -220,7 +220,7 @@ export default function Comment ({ function DepthLimit ({ item }) { if (item.ncomments > 0) { return ( - + view replies ) @@ -252,7 +252,7 @@ export function CommentSkeleton ({ skeletonChildren }) {
      -
      +
      {skeletonChildren ? : null} diff --git a/components/comment.module.css b/components/comment.module.css index 23fe064a..dccafa38 100644 --- a/components/comment.module.css +++ b/components/comment.module.css @@ -26,6 +26,11 @@ cursor: pointer; } +.op { + margin-top: -1px; + vertical-align: text-top; +} + .collapsed .hunk { margin-bottom: .5rem; } diff --git a/components/comments.js b/components/comments.js index eb05d250..681f141c 100644 --- a/components/comments.js +++ b/components/comments.js @@ -2,7 +2,8 @@ import { gql, useApolloClient, useLazyQuery } from '@apollo/client' import { useState } from 'react' import Comment, { CommentSkeleton } from './comment' import styles from './header.module.css' -import { Nav, Navbar } from 'react-bootstrap' +import Nav from 'react-bootstrap/Nav' +import Navbar from 'react-bootstrap/Navbar' import { COMMENTS_QUERY } from '../fragments/items' import { COMMENTS } from '../fragments/comments' import { abbrNum } from '../lib/format' @@ -19,7 +20,7 @@ export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, comm } return ( - +