Changeset 2fcbde4 for reactapp


Ignore:
Timestamp:
08/23/22 13:31:02 (2 years ago)
Author:
unknown <mlviktor23@…>
Branches:
main
Children:
62b653f
Parents:
6221ab6
Message:

implemented replying to posts in react

File:
1 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/Components/OpinionTree.js

    r6221ab6 r2fcbde4  
    3535  const [replyContent, setReplyContent] = useState("");
    3636
     37  const [postForModal, setPostForModal] = useState(null);
     38
    3739  const handleLike = () => {
    3840    if (auth) {
    … …  
    5153  };
    5254
    53   const handleReply = () => {
     55  const handleReply = (opinion) => {
    5456    if (auth) {
    5557      setReplyModalDisplay("block");
     58      setPostForModal(opinion);
    5659    } else {
    5760      navigate("/login");
    … …  
    120123                  right={90 + "px"}
    121124                  color="black"
    122                   onClick={handleReply} //todo
     125                  onClick={() => handleReply(child)}
    123126                />
    124127              </>
    … …  
    144147          return (
    145148            <div key={opinion.postId}>
    146               <Modal display={replyModalDisplay}>
    147                 <ModalContent>
    148                   <ModalHeader>
    149                     <ModalClose onClick={handleModalCloseClick}>
    150                       &times;
    151                     </ModalClose>
    152                     <h3 style={{ marginTop: "5px" }}>
    153                       Реплика на {opinion.author.username}
    154                     </h3>
    155                   </ModalHeader>
    156                   <form onSubmit={(e) => handleReplySubmit(e, opinion.postId)}>
    157                     <ModalBody>
    158                       <label htmlFor="content">
    159                         <b>Содржина</b>:
    160                         <ModalTextarea
    161                           id="content"
    162                           rows="8"
    163                           cols="100"
    164                           value={replyContent}
    165                           onChange={handleContentChange}
    166                         />
    167                       </label>
    168                     </ModalBody>
    169                     <ModalFooter type="submit">РЕПЛИЦИРАЈ</ModalFooter>
    170                   </form>
    171                 </ModalContent>
    172               </Modal>
    173149              <OpinionCard>
    174150                <OpinionCardContent>
    … …  
    203179                        right={90 + "px"}
    204180                        color="black"
    205                         onClick={handleReply}
     181                        onClick={() => handleReply(opinion)}
    206182                      />
    207183                    </>
    … …  
    216192        }
    217193      })}
     194      {postForModal && (
     195        <Modal display={replyModalDisplay}>
     196          <ModalContent>
     197            <ModalHeader>
     198              <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
     199              <h3 style={{ marginTop: "5px" }}>
     200                Реплика на {postForModal.author.username}
     201              </h3>
     202            </ModalHeader>
     203            <form onSubmit={(e) => handleReplySubmit(e, postForModal.postId)}>
     204              <ModalBody>
     205                <label htmlFor="content">
     206                  <b>Содржина</b>:
     207                  <ModalTextarea
     208                    id="content"
     209                    rows="8"
     210                    cols="100"
     211                    value={replyContent}
     212                    onChange={handleContentChange}
     213                  />
     214                </label>
     215              </ModalBody>
     216              <ModalFooter type="submit">РЕПЛИЦИРАЈ</ModalFooter>
     217            </form>
     218          </ModalContent>
     219        </Modal>
     220      )}
    218221    </div>
    219222  );
Note: See TracChangeset for help on using the changeset viewer.