reuse formatted countdown component

components/comment-edit.js

@@ -3,7 +3,7 @@ import * as Yup from 'yup'
 import { gql, useMutation } from '@apollo/client'
 import styles from './reply.module.css'
 import TextareaAutosize from 'react-textarea-autosize'
-import Countdown from 'react-countdown'
+import Countdown from '../components/countdown'
 
 export const CommentSchema = Yup.object({
   text: Yup.string().required('required').trim()
@@ -54,14 +54,7 @@ export default function CommentEdit ({ comment, editThreshold, onSuccess, onCanc
           autoFocus
           required
           groupClassName='mb-0'
-          hint={
+          hint={<Countdown date={editThreshold} />}
-            <span className='text-muted font-weight-bold'>
-              <Countdown
-                date={editThreshold}
-                renderer={props => <span> {props.formatted.minutes}:{props.formatted.seconds}</span>}
-              />
-            </span>
-            }
         />
         <div className='d-flex align-items-center justify-content-between'>
           <SubmitButton variant='secondary' className='mt-1'>save</SubmitButton>

components/comment.js

@@ -11,7 +11,7 @@ import EyeClose from '../svgs/eye-close-line.svg'
 import { useRouter } from 'next/router'
 import { useMe } from './me'
 import CommentEdit from './comment-edit'
-import Countdown from 'react-countdown'
+import Countdown from './countdown'
 
 function Parent ({ item }) {
   const ParentFrag = () => (
@@ -133,7 +133,7 @@ export default function Comment ({ item, children, replyOpen, includeParent, cac
                   edit
                   <Countdown
                     date={editThreshold}
-                    renderer={props => <span> {props.formatted.minutes}:{props.formatted.seconds}</span>}
+                    className=' '
                     onComplete={() => {
                       setCanEdit(false)
                     }}

components/countdown.js

@@ -0,0 +1,13 @@
+import Countdown from 'react-countdown'
+
+export default function SimpleCountdown ({ className, onComplete, date }) {
+  return (
+    <span className={className || 'text-muted font-weight-bold'}>
+      <Countdown
+        date={date}
+        renderer={props => <span> {props.formatted.minutes}:{props.formatted.seconds}</span>}
+        onComplete={onComplete}
+      />
+    </span>
+  )
+}

components/discussion-form.js

@@ -4,7 +4,7 @@ import * as Yup from 'yup'
 import { gql, useMutation } from '@apollo/client'
 import ActionTooltip from '../components/action-tooltip'
 import TextareaAutosize from 'react-textarea-autosize'
-import Countdown from 'react-countdown'
+import Countdown from './countdown'
 
 export const DiscussionSchema = Yup.object({
   title: Yup.string().required('required').trim()
@@ -75,14 +75,7 @@ export function DiscussionForm ({ item, editThreshold }) {
         as={TextareaAutosize}
         minRows={4}
         hint={editThreshold
-          ? (
+          ? <Countdown date={editThreshold} />
-            <span className='text-muted font-weight-bold'>
-              <Countdown
-                date={editThreshold}
-                renderer={props => <span> {props.formatted.minutes}:{props.formatted.seconds}</span>}
-              />
-            </span>
-            )
           : null}
       />
       <ActionTooltip>

components/item.js

@@ -4,7 +4,7 @@ import { timeSince } from '../lib/time'
 import UpVote from './upvote'
 import { useMe } from './me'
 import { useState } from 'react'
-import Countdown from 'react-countdown'
+import Countdown from './countdown'
 
 export default function Item ({ item, rank, children }) {
   const me = useMe()
@@ -59,7 +59,7 @@ export default function Item ({ item, rank, children }) {
                     edit
                     <Countdown
                       date={editThreshold}
-                      renderer={props => <span> {props.formatted.minutes}:{props.formatted.seconds}</span>}
+                      className=' '
                       onComplete={() => {
                         setCanEdit(false)
                       }}

components/link-form.js

@@ -4,7 +4,7 @@ import * as Yup from 'yup'
 import { gql, useMutation } from '@apollo/client'
 import { ensureProtocol } from '../lib/url'
 import ActionTooltip from '../components/action-tooltip'
-import Countdown from 'react-countdown'
+import Countdown from './countdown'
 
 export const LinkSchema = Yup.object({
   title: Yup.string().required('required').trim(),
@@ -89,14 +89,7 @@ export function LinkForm ({ item, editThreshold }) {
         name='url'
         required
         hint={editThreshold
-          ? (
+          ? <Countdown date={editThreshold} />
-            <span className='text-muted font-weight-bold'>
-              <Countdown
-                date={editThreshold}
-                renderer={props => <span> {props.formatted.minutes}:{props.formatted.seconds}</span>}
-              />
-            </span>
-            )
           : null}
       />
       <ActionTooltip>