Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb53d1a2

Browse files
authored
Merge pull request#82 from lxaw/reply-reviews
review comments work
2 parentsafd9e53 +cb8aebf commitb53d1a2

File tree

4 files changed

+160
-72
lines changed

4 files changed

+160
-72
lines changed

‎delta_web/delta/frontend/src/actions/review.js‎

Lines changed: 44 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const getUserReviewComments = () => (dispatch, getState) => {
88
.get('/api/review_comment/',fileTokenConfig(getState))
99
.then((res)=>{
1010
// Handle the response data
11-
console.log(res.data);
11+
returnres.data
1212
})
1313
.catch((err)=>{
1414
console.log(err);
@@ -17,16 +17,20 @@ export const getUserReviewComments = () => (dispatch, getState) => {
1717

1818
// Create a new comment
1919
exportconstaddReviewComment=(commentData)=>(dispatch,getState)=>{
20-
axios
21-
.post('/api/review_comment/',commentData,fileTokenConfig(getState))
22-
.then((res)=>{
23-
dispatch(createMessage({addReviewCommentSuccess:'Your comment has been posted.'}));
24-
})
25-
.catch((err)=>{
26-
consterrorText=err.response ?err.response.data.detail :'Error adding comment.';
27-
console.log(errorText);
28-
dispatch(createMessage({addReviewCommentFail:errorText}));
29-
});
20+
returnnewPromise((resolve,reject)=>{
21+
axios
22+
.post('/api/review_comment/',commentData,fileTokenConfig(getState))
23+
.then((res)=>{
24+
dispatch(createMessage({addReviewCommentSuccess:'Your comment has been posted.'}));
25+
resolve(res.data);
26+
})
27+
.catch((err)=>{
28+
consterrorText=err.response ?err.response.data.detail :'Error adding comment.';
29+
console.log(errorText);
30+
dispatch(createMessage({addReviewCommentFail:errorText}));
31+
reject(err);
32+
});
33+
});
3034
};
3135

3236
// Retrieve a specific comment
@@ -35,7 +39,7 @@ export const getReviewComment = (commentId) => (dispatch, getState) => {
3539
.get(`/api/review_comment/${commentId}/`,fileTokenConfig(getState))
3640
.then((res)=>{
3741
// Handle the response data
38-
console.log(res.data);
42+
returnres.data
3943
})
4044
.catch((err)=>{
4145
consterrorText=err.response ?err.response.data.detail :'Error retrieving comment.';
@@ -46,30 +50,37 @@ export const getReviewComment = (commentId) => (dispatch, getState) => {
4650

4751
// Update a comment
4852
exportconstupdateReviewComment=(commentId,commentData)=>(dispatch,getState)=>{
49-
axios
50-
.patch(`/api/review_comment/${commentId}/`,commentData,fileTokenConfig(getState))
51-
.then((res)=>{
52-
dispatch(createMessage({updateReviewCommentSuccess:'Comment updated successfully.'}));
53-
})
54-
.catch((err)=>{
55-
consterrorText=err.response ?err.response.data.detail :'Error updating comment.';
56-
console.log(errorText);
57-
dispatch(createMessage({updateReviewCommentFail:errorText}));
58-
});
53+
returnnewPromise((resolve,reject)=>{
54+
axios
55+
.patch(`/api/review_comment/${commentId}/`,commentData,fileTokenConfig(getState))
56+
.then((res)=>{
57+
dispatch(createMessage({updateReviewCommentSuccess:'Comment updated successfully.'}));
58+
resolve(res.data);
59+
})
60+
.catch((err)=>{
61+
consterrorText=err.response ?err.response.data.detail :'Error updating comment.';
62+
console.log(errorText);
63+
dispatch(createMessage({updateReviewCommentFail:errorText}));
64+
reject(err);
65+
});
66+
});
5967
};
6068

61-
// Delete a comment
6269
exportconstdeleteReviewComment=(commentId)=>(dispatch,getState)=>{
63-
axios
64-
.delete(`/api/review_comment/${commentId}/`,fileTokenConfig(getState))
65-
.then((res)=>{
66-
dispatch(createMessage({deleteCommentSuccess:'Comment deleted successfully.'}));
67-
})
68-
.catch((err)=>{
69-
consterrorText=err.response ?err.response.data.detail :'Error deleting comment.';
70-
console.log(errorText);
71-
dispatch(createMessage({deleteCommentFail:errorText}));
72-
});
70+
returnnewPromise((resolve,reject)=>{
71+
axios
72+
.delete(`/api/review_comment/${commentId}/`,fileTokenConfig(getState))
73+
.then((res)=>{
74+
dispatch(createMessage({deleteReviewCommentSuccess:'Comment deleted successfully.'}));
75+
resolve(res.data);
76+
})
77+
.catch((err)=>{
78+
consterrorText=err.response ?err.response.data.detail :'Error deleting comment.';
79+
console.log(errorText);
80+
dispatch(createMessage({deleteReviewCommentFail:errorText}));
81+
reject(err);
82+
});
83+
});
7384
};
7485

7586
exportconstaddReview=(dictData)=>(dispatch,getState)=>{

‎delta_web/delta/frontend/src/components/DataSets/Review.js‎

Lines changed: 91 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
importReact,{useState}from"react";
1+
importReact,{useState,useEffect}from"react";
22
import{connect}from"react-redux";
33
import{Link}from"react-router-dom";
4-
import{deleteReview}from"../../actions/review";
4+
import{deleteReview,updateReviewComment,deleteReviewComment}from"../../actions/review";
55
import{FaStar}from"react-icons/fa";
66
importReviewCommentFormfrom"./ReviewCommentForm";
77

88
constReview=(props)=>{
9-
const{ reviewData, auth, deleteReview, refreshReviews}=props;
9+
const{ reviewData, auth, deleteReview,updateReviewComment, deleteReviewComment,refreshReviews}=props;
1010
const[showComments,setShowComments]=useState(false);
11+
const[reviewComments,setReviewComments]=useState([]);
12+
const[editingCommentId,setEditingCommentId]=useState(null);
13+
const[editCommentText,setEditCommentText]=useState('');
1114

1215
consthandleDelete=()=>{
1316
deleteReview(reviewData.id);
@@ -32,6 +35,38 @@ const Review = (props) => {
3235
setShowComments(!showComments);
3336
};
3437

38+
consthandleCommentAdded=(newComment)=>{
39+
setReviewComments(prevComments=>[...prevComments,newComment]);
40+
};
41+
42+
consthandleEditComment=(comment)=>{
43+
setEditingCommentId(comment.id);
44+
setEditCommentText(comment.text);
45+
};
46+
47+
consthandleUpdateComment=(commentId)=>{
48+
updateReviewComment(commentId,{text:editCommentText})
49+
.then((updatedComment)=>{
50+
setReviewComments(prevComments=>
51+
prevComments.map(comment=>
52+
comment.id===commentId ?{ ...comment,text:updatedComment.text} :comment
53+
)
54+
);
55+
setEditingCommentId(null);
56+
})
57+
.catch(error=>console.error("Error updating comment:",error));
58+
};
59+
60+
consthandleDeleteComment=(commentId)=>{
61+
deleteReviewComment(commentId)
62+
.then(()=>{
63+
setReviewComments(prevComments=>
64+
prevComments.filter(comment=>comment.id!==commentId)
65+
);
66+
})
67+
.catch(error=>console.error("Error deleting comment:",error));
68+
};
69+
3570
return(
3671
<divclassName="border p-3 m-3"data-testid="review-1">
3772
<divclassName="d-flex justify-content-between">
@@ -67,17 +102,60 @@ const Review = (props) => {
67102
</button>
68103
{showComments&&(
69104
<div>
70-
<ReviewCommentFormreview_id={reviewData.id}/>
105+
<ReviewCommentForm
106+
review_id={reviewData.id}
107+
onCommentAdded={handleCommentAdded}
108+
/>
71109
<divclassName="mt-3">
72-
{reviewData.review_comments.map((comment)=>(
110+
{reviewComments.map((comment)=>(
73111
<divkey={comment.id}className="border p-2 mb-2">
74-
<p>{comment.text}</p>
75-
<small>
76-
<Linkto={`/profile/${reviewData.author_username}`}>
77-
{reviewData.author_username}
78-
</Link>{" "}
79-
-{reviewData.formatted_date}
80-
</small>
112+
{editingCommentId===comment.id ?(
113+
<div>
114+
<textarea
115+
className="form-control mb-2"
116+
value={editCommentText}
117+
onChange={(e)=>setEditCommentText(e.target.value)}
118+
/>
119+
<button
120+
className="btn btn-sm btn-primary mr-2"
121+
onClick={()=>handleUpdateComment(comment.id)}
122+
>
123+
Save
124+
</button>
125+
<button
126+
className="btn btn-sm btn-secondary"
127+
onClick={()=>setEditingCommentId(null)}
128+
>
129+
Cancel
130+
</button>
131+
</div>
132+
) :(
133+
<div>
134+
<p>{comment.text}</p>
135+
<small>
136+
<Linkto={`/profile/${comment.author_username}`}>
137+
{comment.author_username}
138+
</Link>{" "}
139+
-{comment.formatted_date}
140+
</small>
141+
{auth.user.id===comment.author&&(
142+
<divclassName="mt-2">
143+
<button
144+
className="btn btn-sm btn-outline-primary mr-2"
145+
onClick={()=>handleEditComment(comment)}
146+
>
147+
Edit
148+
</button>
149+
<button
150+
className="btn btn-sm btn-outline-danger"
151+
onClick={()=>handleDeleteComment(comment.id)}
152+
>
153+
Delete
154+
</button>
155+
</div>
156+
)}
157+
</div>
158+
)}
81159
</div>
82160
))}
83161
</div>
@@ -92,4 +170,4 @@ const mapStateToProps = (state) => ({
92170
auth:state.auth,
93171
});
94172

95-
exportdefaultconnect(mapStateToProps,{ deleteReview})(Review);
173+
exportdefaultconnect(mapStateToProps,{ deleteReview, updateReviewComment, deleteReviewComment})(Review);
Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,33 @@
11
importReact,{useState,useEffect}from'react';
22
import{connect}from'react-redux';
3-
import{addReviewComment,getReviewComment,updateReviewComment,deleteReviewComment,addReview}from'../../actions/review.js';
3+
import{addReviewComment,}from'../../actions/review.js';
44

5-
constReviewCommentForm=(props)=>{
5+
constReviewCommentForm=({ review_id, auth, addReviewComment, onCommentAdded})=>{
66
// id of the parent review that the comment goes on
77
const[comment,setComment]=useState('');
8-
const[editMode,setEditMode]=useState(false);
9-
const[commentId,setCommentId]=useState(null);
108

119
consthandleCommentChange=(e)=>{
1210
setComment(e.target.value);
1311
};
1412

15-
consthandleSubmit=(e)=>{
13+
consthandleSubmit=async(e)=>{
1614
e.preventDefault();
17-
props.addReviewComment
18-
({text:comment,
19-
review:props.review_id,
20-
author:props.auth.user.id
21-
}
22-
);
23-
setComment('');
24-
};
25-
26-
consthandleDelete=()=>{
27-
props.deleteReviewComment(commentId);
15+
e.preventDefault();
16+
addReviewComment({
17+
text:comment,
18+
review:review_id,
19+
author:auth.user.id
20+
})
21+
.then(newComment=>{
22+
if(newComment){
23+
onCommentAdded(newComment);
24+
setComment('');
25+
}
26+
})
27+
.catch(error=>{
28+
console.error("Error adding comment:",error);
29+
// Handle error (e.g., show an error message to the user)
30+
});
2831
};
2932

3033
return(
@@ -36,17 +39,10 @@ const ReviewCommentForm = (props) => {
3639
rows="3"
3740
value={comment}
3841
onChange={handleCommentChange}
39-
placeholder={editMode ?'Edit your comment...' :'Write your comment...'}
42+
placeholder={'Write your comment...'}
4043
></textarea>
4144
</div>
42-
<buttontype="submit"className="btn btn-primary">
43-
{editMode ?'Update Comment' :'Add Comment'}
44-
</button>
45-
{editMode&&(
46-
<buttontype="button"className="btn btn-danger ml-2"onClick={handleDelete}>
47-
Delete Comment
48-
</button>
49-
)}
45+
<buttonclassName="btn btn-success">Submit</button>
5046
</form>
5147
</div>
5248
);
@@ -56,4 +52,4 @@ const mapStateToProps = (state) => ({
5652
auth:state.auth,
5753
});
5854

59-
exportdefaultconnect(mapStateToProps,{addReviewComment,getReviewComment,updateReviewComment, deleteReviewComment})(ReviewCommentForm);
55+
exportdefaultconnect(mapStateToProps,{addReviewComment})(ReviewCommentForm);

‎delta_web/delta/frontend/src/components/layout/Alerts.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ export class Alerts extends Component {
5555
if(message.addReviewCommentFail){
5656
alert.error(message.addReviewCommentFail)
5757
}
58+
if(message.deleteReviewCommentSuccess){
59+
alert.success(message.deleteReviewCommentSuccess)
60+
}
5861
if(message.updateReviewCommentSuccess){
5962
alert.success(message.updateReviewCommentSuccess)
6063
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp