add comments editing

src/components/Comment/Comment.tsx

@@ -1,13 +1,126 @@
-import React from 'react'
-import { Box } from 'rebass'
+import React, { useState } from 'react'
+import { FaTrash, FaRegEdit } from 'react-icons/fa'
+import { Flex } from 'rebass'
+import { useCommonStores } from 'src'
 import { IComment } from 'src/models'
+import { hasAdminRights } from 'src/utils/helpers'
 import { CommentHeader } from './CommentHeader'
+import { Text } from 'src/components/Text'
+import { Modal } from '../Modal/Modal'
+import { TextAreaField } from '../Form/Fields'
+import { Field, Form } from 'react-final-form'
+import { Button } from 'src/components/Button'
 
 export interface IProps extends IComment {}
 
-export const Comment = (props: IProps) => (
-  <Box p="3" bg={'white'} width="100%" mb={4} style={{ borderRadius: '5px' }}>
-    <CommentHeader {...props} />
-    <p>{props.text}</p>
-  </Box>
-)
+export const Comment: React.FC<IProps> = ({
+  _creatorId,
+  text,
+  _id,
+  ...props
+}) => {
+  const { stores } = useCommonStores()
+  const user = stores.userStore.activeUser
+
+  const [showEditModal, setShowEditModal] = useState(false)
+
+  return (
+    <Flex
+      flexDirection="column"
+      p="3"
+      bg={'white'}
+      width="100%"
+      mb={4}
+      style={{ borderRadius: '5px' }}
+    >
+      <CommentHeader {...props} />
+      <Text my={2} style={{ whiteSpace: 'pre-wrap' }}>
+        {text}
+      </Text>
+
+      {user && (user._id === _creatorId || hasAdminRights(user)) && (
+        <Flex ml="auto">
+          {user._id === _creatorId && (
+            <Text
+              style={{
+                cursor: 'pointer',
+              }}
+              mr={2}
+              fontSize="12px"
+              onClick={async () => setShowEditModal(true)}
+            >
+              edit <FaRegEdit />
+            </Text>
+          )}
+          <Text
+            style={{
+              cursor: 'pointer',
+              alignItems: 'center',
+            }}
+            fontSize="12px"
+            onClick={async () => {
+              const confirmation = window.confirm(
+                'Are you sure you want to delete this comment?',
+              )
+              if (confirmation) {
+                await stores.howtoStore.deleteComment(_id)
+              }
+            }}
+          >
+            delete <FaTrash color="red" />
+          </Text>
+        </Flex>
+      )}
+
+      {showEditModal && (
+        <Modal width={600}>
+          <Form
+            onSubmit={values => {
+              console.log(values)
+            }}
+            initialValues={{
+              comment: text,
+            }}
+            render={({ handleSubmit, values }) => (
+              <Flex
+                as="form"
+                flexDirection="column"
+                p={2}
+                onSubmit={handleSubmit}
+              >
+                <Text
+                  as="label"
+                  large
+                  htmlFor="comment"
+                  style={{ marginBottom: '6px' }}
+                >
+                  Edit comment
+                </Text>
+                <Field name="comment" id="comment" component={TextAreaField} />
+                <Flex mt={4} ml="auto">
+                  <Button
+                    small
+                    mr={4}
+                    variant="secondary"
+                    onClick={() => setShowEditModal(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    small
+                    onClick={async () => {
+                      await stores.howtoStore.editComment(_id, values.comment)
+                      setShowEditModal(false)
+                    }}
+                  >
+                    Edit
+                  </Button>
+                </Flex>
+              </Flex>
+            )}
+          />
+        </Modal>
+      )}
+    </Flex>
+  )
+}

src/components/Comment/CommentHeader.tsx

@@ -1,25 +1,16 @@
-import React from 'react'
-import { FaTrash } from 'react-icons/fa'
 import { Box, Flex, Text } from 'rebass'
-import { useCommonStores } from 'src'
 import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon'
 import { IComment } from 'src/models'
-import { hasAdminRights } from 'src/utils/helpers'
 import { Link } from 'src/components/Links'
 
-
-export interface IProps extends Omit<IComment, 'text'> { }
+interface IProps extends Omit<IComment, 'text' | '_id' | '_creatorId'> {}
 
 export const CommentHeader = ({
   creatorName,
   creatorCountry,
   _created,
-  _creatorId,
-  _id,
+  _edited,
 }: IProps) => {
-  const { stores } = useCommonStores()
-  const user = stores.userStore.activeUser
-
   return (
     <Flex justifyContent="space-between" alignItems="baseline">
       <Box>
@@ -36,21 +27,24 @@ export const CommentHeader = ({
           </Link>
         </span>
       </Box>
-      <Flex>
-        <Text fontSize={1}>
-          {new Date(_created).toLocaleDateString('en-GB').replaceAll('/', '-')}
-        </Text>
-        {user && (user._id === _creatorId || hasAdminRights(user)) && (
-          <FaTrash
-            color="red"
-            fontSize="12px"
-            style={{
-              marginLeft: '8px',
-              cursor: 'pointer',
-              alignItems: 'center',
-            }}
-            onClick={async () => await stores.howtoStore.deleteComment(_id)}
-          ></FaTrash>
+      <Flex alignItems="center">
+        {_edited ? (
+          <>
+            <Text color="#777" fontSize={0} mr={2}>
+              (Edited)
+            </Text>
+            <Text fontSize={1}>
+              {new Date(_edited)
+                .toLocaleDateString('en-GB')
+                .replaceAll('/', '-')}
+            </Text>
+          </>
+        ) : (
+          <Text fontSize={1}>
+            {new Date(_created)
+              .toLocaleDateString('en-GB')
+              .replaceAll('/', '-')}
+          </Text>
         )}
       </Flex>
     </Flex>

src/components/Modal/Modal.tsx

@@ -8,6 +8,7 @@ interface IProps {
   // provide onDidDismiss function to enable backdrop click dismiss
   onDidDismiss: (data?: any) => void
   height?: number
+  width?: number
 }
 interface IState {
   isOpen: boolean
@@ -54,12 +55,12 @@ export class Modal extends React.Component<IProps, IState> {
 
   render() {
     const isOpen = this.state
-    const { height, children } = this.props
+    const { height, width, children } = this.props
     return (
       isOpen && (
         <Portal id="portal">
           <ModalBackdrop id="ModalBackdrop" onClick={() => this.dismiss()} />
-          <ModalContent id="ModalContent" style={height ? { height } : {}}>
+          <ModalContent id="ModalContent" height={height} width={width}>
             {children}
           </ModalContent>
         </Portal>

src/models/howto.models.tsx

@@ -9,6 +9,7 @@ import { IUploadedFileMeta } from 'src/stores/storage'
 export interface IComment {
   _id: string
   _created: string
+  _edited?: string
   _creatorId: string
   creatorName: string
   creatorCountry?: string | null

src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx

@@ -10,7 +10,6 @@ import styled from 'styled-components'
 const MAX_COMMENTS = 5
 
 interface IProps {
-  userName?: string
   comments?: IComment[]
 }
 

src/pages/Howto/Content/Howto/Howto.tsx

@@ -142,10 +142,7 @@ export class Howto extends React.Component<
             ))}
           </Box>
           <AuthWrapper roleRequired="beta-tester">
-            <HowToComments
-              userName={loggedInUser?.userName}
-              comments={activeHowto.comments}
-            />
+            <HowToComments comments={activeHowto.comments} />
           </AuthWrapper>
           <MoreBox py={20} mt={20}>
             <Text bold txtcenter fontSize={[4, 4, 5]}>

src/stores/Howto/howto.store.tsx

@@ -189,6 +189,7 @@ export class HowtoStore extends ModuleStore {
         )
         if (commentIndex !== -1) {
           comments[commentIndex].text = newText.slice(0, 400).trim()
+          comments[commentIndex]._edited = new Date().toISOString()
 
           const updatedHowto: IHowto = {
             ...toJS(howto),