From 88746aa9be5e1423452085379927454df96849cc Mon Sep 17 00:00:00 2001
From: "Daniel T. Rodrigues" <danitrod@outlook.com>
Date: Mon, 14 Jun 2021 23:43:55 -0300
Subject: [PATCH 1/3] add comments editing

---
 src/components/Comment/Comment.tsx            | 127 ++++++++++++++++--
 src/components/Comment/CommentHeader.tsx      |  45 +++----
 src/models/howto.models.tsx                   |   1 +
 .../Howto/HowToComments/HowToComments.tsx     |   3 +-
 src/pages/Howto/Content/Howto/Howto.tsx       |   5 +-
 src/stores/Howto/howto.store.tsx              |   1 +
 6 files changed, 143 insertions(+), 39 deletions(-)

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 8e9248fe2c..0ba21cba6b 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -1,13 +1,124 @@
-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} />
+      <p>{text}</p>
+
+      {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>
+          <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>
+  )
+}
diff --git a/src/components/Comment/CommentHeader.tsx b/src/components/Comment/CommentHeader.tsx
index 96b2050e72..10bf5dfd8c 100644
--- a/src/components/Comment/CommentHeader.tsx
+++ b/src/components/Comment/CommentHeader.tsx
@@ -1,23 +1,15 @@
-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'
 
-export interface IProps extends Omit<IComment, 'text'> {}
+export 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>
@@ -26,21 +18,24 @@ export const CommentHeader = ({
           {creatorName}
         </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>
diff --git a/src/models/howto.models.tsx b/src/models/howto.models.tsx
index b2e0a337f2..6409a87d88 100644
--- a/src/models/howto.models.tsx
+++ b/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
diff --git a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
index d8dcf65771..664a7ba72e 100644
--- a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
+++ b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
@@ -9,12 +9,11 @@ import { IComment } from 'src/models'
 const MAX_COMMENTS = 5
 
 interface IProps {
-  userName?: string
   comments?: IComment[]
 }
 
 // TODO: Expect the comments as a prop from the HowTo
-export const HowToComments = ({ userName, comments }: IProps) => {
+export const HowToComments = ({ comments }: IProps) => {
   const { stores } = useCommonStores()
   const [moreComments, setMoreComments] = useState(1)
 
diff --git a/src/pages/Howto/Content/Howto/Howto.tsx b/src/pages/Howto/Content/Howto/Howto.tsx
index fdcb1639b6..48f28fb73c 100644
--- a/src/pages/Howto/Content/Howto/Howto.tsx
+++ b/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]}>
diff --git a/src/stores/Howto/howto.store.tsx b/src/stores/Howto/howto.store.tsx
index baca3fb25d..fc5253fd61 100644
--- a/src/stores/Howto/howto.store.tsx
+++ b/src/stores/Howto/howto.store.tsx
@@ -187,6 +187,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),

From 3f7c99a37544e4fc49d7f0081ae9bb10e3558c47 Mon Sep 17 00:00:00 2001
From: "Daniel T. Rodrigues" <danitrod@outlook.com>
Date: Wed, 16 Jun 2021 20:12:23 -0300
Subject: [PATCH 2/3] increase edit comment modal size

---
 src/components/Comment/Comment.tsx | 2 +-
 src/components/Modal/Modal.tsx     | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 0ba21cba6b..3647a22034 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -71,7 +71,7 @@ export const Comment: React.FC<IProps> = ({
       )}
 
       {showEditModal && (
-        <Modal>
+        <Modal width={600}>
           <Form
             onSubmit={values => {
               console.log(values)
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index ad28c856bd..8eb2a62376 100644
--- a/src/components/Modal/Modal.tsx
+++ b/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>

From 8701a23172b851bc399f8dc3f00de34f63a51b82 Mon Sep 17 00:00:00 2001
From: danitrod <danitrod@outlook.com>
Date: Mon, 28 Jun 2021 20:42:17 -0300
Subject: [PATCH 3/3] fix comments new-line wrapping

---
 src/components/Comment/Comment.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 3647a22034..13a8e229f7 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -34,7 +34,9 @@ export const Comment: React.FC<IProps> = ({
       style={{ borderRadius: '5px' }}
     >
       <CommentHeader {...props} />
-      <p>{text}</p>
+      <Text my={2} style={{ whiteSpace: 'pre-wrap' }}>
+        {text}
+      </Text>
 
       {user && (user._id === _creatorId || hasAdminRights(user)) && (
         <Flex ml="auto">