feat: Add conditional rendering for comment submission in replies-mod…

…al.jsx and article-modal.jsx
DemocraciaEnRed · Aug 6, 2024 · 1b9d42b · 1b9d42b
1 parent 28ea34c
commit 1b9d42b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 32 deletions.
diff --git a/src/components/common/replies-modal.jsx b/src/components/common/replies-modal.jsx
@@ -16,7 +16,7 @@ export default function RepliesModal({ comment, commentUrl, active, addCommentDe
     const [addComment, setAddComment] = useState(addCommentDefault)
     const [textNewComment, setTextNewComment] = useState('')
     const [comments, setComments] = useState(null)
-
+    const isProjectClosed = project.closed
     const fetchComents = async (page) => {
         const resp = await fetchGeneralComments(`${commentUrl}${page ? '?page=' + page : ''}`)
         setComments(resp);
@@ -74,21 +74,23 @@ export default function RepliesModal({ comment, commentUrl, active, addCommentDe
                             />
                         }
                     </div>
-                    <footer className="modal-card-foot has-background-white">
-                        {user ? <form action="submit" className="w-100" onSubmit={handlesubmit}>
-                            <p className="control has-icons-right ">
-                                <input className="input is-rounded" type="text" placeholder="Escribe un comentario....." value={textNewComment} onChange={(e) => setTextNewComment(e.target.value)} />
-                                <span className="icon is-small is-right is-clickable" onClick={handlesubmit}>
-                                    <FontAwesomeIcon icon={faPaperPlane} />
-                                </span>
-                            </p>
-                        </form>
-                            :
-                            <div >
-                                <p>Inicia sesión <Link href="/auth/login"> aquí</Link> para poder comentar</p>
-                            </div>
-                        }
-                    </footer>
+                    {
+                        !isProjectClosed && <footer className="modal-card-foot has-background-white">
+                            {user ? <form action="submit" className="w-100" onSubmit={handlesubmit}>
+                                <p className="control has-icons-right ">
+                                    <input className="input is-rounded" type="text" placeholder="Escribe un comentario....." value={textNewComment} onChange={(e) => setTextNewComment(e.target.value)} />
+                                    <span className="icon is-small is-right is-clickable" onClick={handlesubmit}>
+                                        <FontAwesomeIcon icon={faPaperPlane} />
+                                    </span>
+                                </p>
+                            </form>
+                                :
+                                <div >
+                                    <p>Inicia sesión <Link href="/auth/login"> aquí</Link> para poder comentar</p>
+                                </div>
+                            }
+                        </footer>
+                    }
                 </div>}
             </div>
         </div>

diff --git a/src/components/pacto/body/pacto/article-modal.jsx b/src/components/pacto/body/pacto/article-modal.jsx
@@ -16,6 +16,7 @@ const ArticleModal = ({ article, active, closeCommentModal, liked, disliked, han
     const [comments, setComments] = useState(null)
     const { language } = useLanguage()
     const { user } = useAuthContext()
+    const isProjectClosed = project.closed
 
     useEffect(() => {
         fetchComments()
@@ -83,22 +84,23 @@ const ArticleModal = ({ article, active, closeCommentModal, liked, disliked, han
                     }
                 </div>
             </section>
-            <footer className="modal-card-foot has-background-white">
-                {user ? <form action="submit" className="w-100" onSubmit={handlesubmit}>
-                    <p className="control has-icons-right ">
-                        <input className="input is-rounded" type="text" placeholder="Escribe un comentario....." value={textNewComment} onChange={(e) => setTextNewComment(e.target.value)} />
-                        <span className="icon is-small is-right is-clickable" onClick={handlesubmit}>
-                            <FontAwesomeIcon icon={faPaperPlane} />
-                        </span>
-                    </p>
-
-                </form>
-                    :
-                    <div >
-                        <p>Inicia sesión <Link href="/auth/login"> aquí</Link> para poder comentar</p>
-                    </div>
-                }
-            </footer>
+            {
+                !isProjectClosed && <footer className="modal-card-foot has-background-white">
+                    {user ? <form action="submit" className="w-100" onSubmit={handlesubmit}>
+                        <p className="control has-icons-right ">
+                            <input className="input is-rounded" type="text" placeholder="Escribe un comentario....." value={textNewComment} onChange={(e) => setTextNewComment(e.target.value)} />
+                            <span className="icon is-small is-right is-clickable" onClick={handlesubmit}>
+                                <FontAwesomeIcon icon={faPaperPlane} />
+                            </span>
+                        </p>
+                    </form>
+                        :
+                        <div >
+                            <p>Inicia sesión <Link href="/auth/login"> aquí</Link> para poder comentar</p>
+                        </div>
+                    }
+                </footer>
+            }
         </div>
     </div>)
 }