Add comment button

- Remove submit on enter - Hide TextArea resize to avoid overlapping Signed-off-by: tudi2d <phugenroth@googlemail.com>
ONEARMY · Jun 27, 2021 · 78c4cd1 · 78c4cd1
1 parent ba6aa3a
commit 78c4cd1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/src/components/Comment/CommentTextArea.tsx b/src/components/Comment/CommentTextArea.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { Box, Text } from 'rebass/styled-components'
 import theme from 'src/themes/styled.theme'
@@ -7,16 +7,20 @@ import { useCommonStores } from 'src'
 
 export interface IProps {
   onSubmit: (string) => Promise<void>
+  onChange: (string) => void
+  comment: string
 }
 
 const TextAreaStyled = styled.textarea`
-  padding: 10px;
+  padding: 1.5em 1em;
   height: 150px;
   border: none;
   min-width: 100%;
   max-width: 100%;
   font-family: 'Inter', Arial, sans-serif;
   font-size: ${theme.fontSizes[2] + 'px'};
+  border-radius: 5px;
+  resize: none;
 
   &:focus-visible {
     outline: none;
@@ -35,15 +39,14 @@ const BoxStyled = styled(Box)`
 const AvatarBoxStyled = styled(Box)`
   position: absolute;
   left: -4em;
+  top: 1em;
 `
 
 const TextBoxStyled = styled(Box)`
   &::before {
     content: '';
     position: absolute;
-    top: -1em;
-    left: -1em;
-    border-width: 2em 2em;
+    border-width: 1em 1em;
     border-style: solid;
     border-color: transparent white transparent transparent;
     margin: 1em -2em;
@@ -56,28 +59,12 @@ const TextStyled = styled(Text)`
   bottom: 6px;
 `
 
-export const CommentTextArea = ({ onSubmit }) => {
-  const [comment, setComment] = useState('')
-  const [loading, setLoading] = useState(false)
+export const CommentTextArea = ({ onChange, comment, loading }) => {
   const { stores } = useCommonStores()
   const user = stores.userStore.activeUser
 
-  async function keyDown(e) {
-    if (e.key === 'Enter' && !e.shiftKey && comment.trim().length) {
-      e.preventDefault()
-      try {
-        setLoading(true)
-        await onSubmit(comment)
-        setLoading(false)
-        setComment('')
-      } catch (error) {
-        // Notify user to resend comment
-      }
-    }
-  }
-
   return (
-    <BoxStyled width={2 / 3} p="3" bg={'white'}>
+    <BoxStyled bg="white">
       <AvatarBoxStyled>
         <Avatar profileType={user?.profileType} />
       </AvatarBoxStyled>
@@ -88,10 +75,9 @@ export const CommentTextArea = ({ onSubmit }) => {
             value={comment}
             maxLength={400}
             onChange={event => {
-              setComment(event.target.value)
+              onChange(event.target.value)
             }}
             placeholder="Leave your questions or feedback..."
-            onKeyDown={keyDown}
           />
         ) : (
           <Text height="2em" lineHeight="2em">

diff --git a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
-import { Flex } from 'rebass'
+import { Box, Flex } from 'rebass'
 import { useCommonStores } from 'src'
 import { Button } from 'src/components/Button'
 import { Comment } from 'src/components/Comment/Comment'
 import { CommentTextArea } from 'src/components/Comment/CommentTextArea'
 import { IComment } from 'src/models'
+import styled from 'styled-components'
 
 const MAX_COMMENTS = 5
 
@@ -13,13 +14,32 @@ interface IProps {
   comments?: IComment[]
 }
 
+const BoxStyled = styled(Box)`
+  position: relative;
+  border-radius: 5px;
+`
+
+const ButtonStyled = styled(Button)`
+  float: right;
+  margin-top: 1em !important;
+`
+
 // TODO: Expect the comments as a prop from the HowTo
-export const HowToComments = ({ userName, comments }: IProps) => {
+export const HowToComments = ({ comments }: IProps) => {
+  const [comment, setComment] = useState('')
+  const [loading, setLoading] = useState(false)
   const { stores } = useCommonStores()
   const [moreComments, setMoreComments] = useState(1)
 
   async function onSubmit(comment: string) {
-    await stores.howtoStore.addComment(comment)
+    try {
+      setLoading(true)
+      await stores.howtoStore.addComment(comment)
+      setLoading(false)
+      setComment('')
+    } catch (err) {
+      // Error: Comment could not be posted
+    }
   }
 
   const shownComments = moreComments * MAX_COMMENTS
@@ -52,7 +72,21 @@ export const HowToComments = ({ userName, comments }: IProps) => {
           </Button>
         )}
       </Flex>
-      <CommentTextArea onSubmit={onSubmit} />
+
+      <BoxStyled width={2 / 3}>
+        <CommentTextArea
+          comment={comment}
+          onChange={setComment}
+          loading={loading}
+        />
+        <ButtonStyled
+          disabled={!Boolean(comment.trim()) || loading}
+          variant="primary"
+          onClick={() => onSubmit(comment)}
+        >
+          Comment
+        </ButtonStyled>
+      </BoxStyled>
     </Flex>
   )
 }
diff --git a/src/stores/Howto/howto.store.tsx b/src/stores/Howto/howto.store.tsx
@@ -143,14 +143,15 @@ export class HowtoStore extends ModuleStore {
     try {
       const user = this.activeUser
       const howto = this.activeHowto
-      if (user && howto) {
+      const comment = text.slice(0, 400).trim()
+      if (user && howto && comment) {
         const newComment: IComment = {
           _id: randomID(),
           _created: new Date().toISOString(),
           _creatorId: user._id,
           creatorName: user.userName,
           creatorCountry: user.country ? user.country.toLowerCase() : null,
-          text: text.slice(0, 400).trim(),
+          text: comment,
         }
 
         const updatedHowto: IHowto = {