hotfix: removed maxlength option in comment

1-Platform · Oct 8, 2021 · b95eb13 · b95eb13
1 parent 6e25807
commit b95eb13
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "idea-hub",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "homepage": "/ideas",
   "author": {

diff --git a/src/components/CommentField/CommentField.tsx b/src/components/CommentField/CommentField.tsx
@@ -36,7 +36,7 @@ export const CommentField: FC<Props> & CompoundComponents = ({
 
   return (
     <Flex flexWrap={{ default: 'nowrap' }} alignItems={{ default: 'alignItemsFlexStart' }}>
-      <FlexItem>
+      <FlexItem style={{ flexShrink: 0 }}>
         <Avatar
           src={
             avatar ||

diff --git a/src/containers/CommentsContainer/CommentsContainer.tsx b/src/containers/CommentsContainer/CommentsContainer.tsx
@@ -63,7 +63,6 @@ export const CommentsContainer = ({ ideaDetails }: Props): JSX.Element => {
 
   const dbChangeFeed = useRef<PouchDB.Core.Changes<IdeaDoc | CommentDoc>>();
 
-  const commentArea = useRef<HTMLInputElement | null>(null);
   const commentWatch = watch('comment');
 
   const { fetchState, handleFetchState } = useInfiniteScroll(() => {
@@ -126,18 +125,22 @@ export const CommentsContainer = ({ ideaDetails }: Props): JSX.Element => {
   }: PouchDB.Core.ChangesResponseChange<IdeaDoc | CommentDoc>) => {
     if (doc && doc?.type === 'comment' && commentsRef.current) {
       const newCommentList = await onCommentChange(doc, commentsRef.current.docs, commentModel);
-      mutateComments((comments) => ({
-        cb: comments?.cb,
-        hasNextPage: Boolean(comments?.hasNextPage),
-        docs: newCommentList,
-      }));
+      mutateComments(
+        (comments) => ({
+          cb: comments?.cb,
+          hasNextPage: Boolean(comments?.hasNextPage),
+          docs: newCommentList,
+        }),
+        false
+      );
     }
   };
 
   const onFormSubmit = async ({ comment: commentFieldValue }: FormData) => {
     try {
       await commentModel.createComment(ideaId, commentFieldValue);
       setValue('comment', '');
+      commentModel.updateTotalCommentCountOfAnIdea(ideaId);
     } catch (error) {
       console.error(error);
       window.OpNotification.danger({
@@ -250,13 +253,17 @@ export const CommentsContainer = ({ ideaDetails }: Props): JSX.Element => {
           </SplitItem>
           <SplitItem isFilled>
             <Form onSubmit={handleSubmit(onFormSubmit)}>
-              <FormGroup fieldId="comment">
-                <Controller
-                  name="comment"
-                  control={control}
-                  rules={{ required: true, maxLength: '150' }}
-                  defaultValue=""
-                  render={({ field: { ref, ...field }, fieldState: { error } }) => (
+              <Controller
+                name="comment"
+                control={control}
+                rules={{ required: true }}
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormGroup
+                    fieldId="comment"
+                    helperTextInvalid={error?.message}
+                    validated={error?.message ? 'error' : 'default'}
+                  >
                     <TextArea
                       style={{ resize: 'none' }}
                       id="comment"
@@ -265,15 +272,11 @@ export const CommentsContainer = ({ ideaDetails }: Props): JSX.Element => {
                       allowFullScreen
                       isRequired
                       validated={error?.message ? 'error' : 'default'}
-                      ref={(e) => {
-                        ref(e);
-                        commentArea.current = e;
-                      }}
                       {...field}
                     />
-                  )}
-                />
-              </FormGroup>
+                  </FormGroup>
+                )}
+              />
               <ActionGroup className="pf-u-mt-0">
                 <Button
                   variant="primary"

diff --git a/src/pages/HomePage/components/Categories/Categories.tsx b/src/pages/HomePage/components/Categories/Categories.tsx
@@ -72,7 +72,7 @@ export const Categories = ({ tags, isLoading }: Props): JSX.Element => {
           </div>
         ) : (
           <MenuList>
-            {tags.map(({ key, value }) => (
+            {tags.slice(0, 5).map(({ key, value }) => (
               <MenuItem
                 key={key}
                 onClick={() => handleMenuClick('category', category === key ? null : key)}

diff --git a/src/pages/HomePage/components/IdeaCreateUpdateContainer/IdeaCreateUpdateContainer.tsx b/src/pages/HomePage/components/IdeaCreateUpdateContainer/IdeaCreateUpdateContainer.tsx
@@ -88,11 +88,20 @@ export const IdeaCreateUpdateContainer = ({
             name="title"
             control={control}
             defaultValue=""
-            rules={{ required: true }}
-            render={({ field }) => (
-              <FormGroup fieldId="title" isRequired label="Give a title for your idea:">
+            rules={{ required: true, maxLength: 250 }}
+            render={({ field, fieldState: { error } }) => (
+              <FormGroup
+                fieldId="title"
+                isRequired
+                label="Give a title for your idea:"
+                helperTextInvalid={
+                  error?.type === 'maxLength' && 'Should be less than 250 characters'
+                }
+                validated={error ? 'error' : 'default'}
+              >
                 <TextInput
                   id="title"
+                  validated={error ? 'error' : 'default'}
                   aria-label="title"
                   isRequired
                   placeholder="What is your idea about?"
@@ -107,11 +116,20 @@ export const IdeaCreateUpdateContainer = ({
             name="description"
             control={control}
             defaultValue=""
-            rules={{ required: true }}
-            render={({ field }) => (
-              <FormGroup fieldId="desc" isRequired label=" Brief description">
+            rules={{ required: true, maxLength: 500 }}
+            render={({ field, fieldState: { error } }) => (
+              <FormGroup
+                fieldId="desc"
+                isRequired
+                label=" Brief description"
+                helperTextInvalid={
+                  error?.type === 'maxLength' && 'Should be less than 500 characters'
+                }
+                validated={error ? 'error' : 'default'}
+              >
                 <TextArea
                   isRequired
+                  validated={error ? 'error' : 'default'}
                   id="description"
                   aria-label="description"
                   placeholder="Describe you idea in simple terms…"

diff --git a/src/pouchDB/api/comments.ts b/src/pouchDB/api/comments.ts
@@ -132,7 +132,7 @@ export class CommentModel {
   async createComment(ideaId: string, content: string): Promise<PouchDB.Core.Response> {
     const { rhatUUID, fullName } = window.OpAuthHelper.getUserInfo();
     const timestamp = new Date().getTime();
-    await this._db.put<CreateCommentDoc>({
+    return this._db.put<CreateCommentDoc>({
       _id: `comment:${ideaId}:${timestamp}-${rhatUUID}`,
       createdAt: timestamp,
       updatedAt: timestamp,
@@ -143,10 +143,9 @@ export class CommentModel {
       authorId: rhatUUID,
       ideaId,
     });
-    return this.updateTotalCommentCountOfaAnIdea(ideaId);
   }
 
-  async updateTotalCommentCountOfaAnIdea(ideaId: string): Promise<PouchDB.Core.Response> {
+  async updateTotalCommentCountOfAnIdea(ideaId: string): Promise<PouchDB.Core.Response> {
     const { rows } = await this._db.query(DesignDoc.CountOfCommentsForAnIdea, {
       reduce: true,
       group: true,