Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement useReducer for textAreaValues #10867

Merged
merged 1 commit into from
Mar 30, 2022
Merged

Implement useReducer for textAreaValues #10867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/javascript/components/Comment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ Comment.propTypes = {
editCommentForm: PropTypes.element.isRequired,
isEditFormVisible: PropTypes.bool.isRequired,
isReplyFormVisible: PropTypes.bool,
setTextAreaValues: PropTypes.func.isRequired,
toggleEditButton: PropTypes.element.isRequired
};

Expand Down
37 changes: 27 additions & 10 deletions app/javascript/components/CommentsContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,28 @@ const CommentsContainer = ({
// ie. the value that shows inside a comment form's <textarea>
// main and reply contain empty strings
// edit forms contain the raw comment text to be edited
const [textAreaValues, setTextAreaValues] = useState(initialTextAreaValues);
// const [textAreaValues, setTextAreaValues] = useState(initialTextAreaValues);

// function for handling user input into comment form <textarea>s
const handleTextAreaChange = (event) => {
const value = event.target.value;
const formId = event.target.dataset.formId // eg. "main", "reply-123", "edit-432"
// keep the old state values (as ...state) and insert the new one
setTextAreaValues(state => ({ ...state, [formId]: value }));
// setTextAreaValues(state => ({ ...state, [formId]: value }));
dispatch({
type: "UPDATE TEXTAREA VALUE",
commentFormId: formId,
newValue: value
});
}

// Functions for Creating, Updating, Deleting Comments

const handleCreateComment = (commentId, formType) => {
// form ID is either reply-123 or main
const formId = formType === "reply" ? "reply-" + commentId : "main";
const commentBody = textAreaValues[formId];
console.log(state.textAreaValues);
const commentBody = state.textAreaValues[formId];

$.post(
"/comment/react/create/" + nodeId,
Expand All @@ -55,17 +61,28 @@ const CommentsContainer = ({
const newCommentId = data.comment[0].commentId;
const newCommentRawText = data.comment[0].rawCommentText;
// blank out the value of textarea & also create a value for the new comment's edit form
setTextAreaValues(oldState => ({ ...oldState, [formId]: "", ["edit-" + newCommentId]: newCommentRawText }));
// setTextAreaValues(oldState => ({ ...oldState, [formId]: "", ["edit-" + newCommentId]: newCommentRawText }));
dispatch({
type: "UPDATE TEXTAREA VALUE",
commentFormId: formId,
newValue: ""
});
dispatch({
type: "CREATE NEW TEXTAREA VALUE",
commentFormId: "edit-" + newCommentId,
newValue: newCommentRawText
});
// the new comment form comes with an edit form, its toggle state needs to be created as well
// TODO: create multicase for "CREATE NEW COMMENT FORM" in reducers.js
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO found

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems inapplicable because this is within a comment! Possible to skip?

dispatch({
type: "HIDE COMMENT FORM",
type: "CREATE NEW COMMENT FORM VISIBILITY",
commentFormId: "edit-" + newCommentId
})
// if the comment doesn't have a replyTo, then it's a parent comment
// parent comments have reply forms, this needs to be set in state as well.
if (!data.comment[0].replyTo) {
dispatch({
type: "HIDE COMMENT FORM",
type: "CREATE NEW COMMENT FORM VISIBILITY",
commentFormId: "reply-" + newCommentId
})
}
Expand All @@ -87,7 +104,7 @@ const CommentsContainer = ({

const handleUpdateComment = (commentId) => {
const formId = "edit-" + commentId;
const commentBody = textAreaValues[formId];
const commentBody = state.textAreaValues[formId];

$.post(
"/comment/react/update/" + commentId,
Expand Down Expand Up @@ -144,16 +161,16 @@ const CommentsContainer = ({
handleDeleteComment={handleDeleteComment}
handleTextAreaChange={handleTextAreaChange}
handleUpdateComment={handleUpdateComment}
setTextAreaValues={setTextAreaValues}
textAreaValues={textAreaValues}
// setTextAreaValues={setTextAreaValues}
textAreaValues={state.textAreaValues}
/>
{/* main comment form */}
<CommentForm
commentFormType="main"
formId="main"
handleFormSubmit={handleCreateComment}
handleTextAreaChange={handleTextAreaChange}
textAreaValue={textAreaValues["main"]}
textAreaValue={state.textAreaValues["main"]}
/>
</div>
</div>
Expand Down
3 changes: 0 additions & 3 deletions app/javascript/components/CommentsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const CommentsList = ({
handleDeleteComment,
handleTextAreaChange,
handleUpdateComment,
setTextAreaValues,
textAreaValues
}) => {
// this takes an array of comment JSON, then returns a list of React <Comment /> components
Expand Down Expand Up @@ -103,7 +102,6 @@ const CommentsList = ({
editCommentForm={editCommentForm}
isEditFormVisible={commentFormsVisibility[editFormId]}
isReplyFormVisible={comment.replyTo ? null : commentFormsVisibility[replyFormId]}
setTextAreaValues={setTextAreaValues}
toggleEditButton={toggleEditButton}
>
{replySection}
Expand Down Expand Up @@ -154,7 +152,6 @@ CommentsList.propTypes = {
handleDeleteComment: PropTypes.func.isRequired,
handleTextAreaChange: PropTypes.func.isRequired,
handleUpdateComment: PropTypes.func.isRequired,
setTextAreaValues: PropTypes.func.isRequired,
textAreaValues: PropTypes.objectOf(PropTypes.string).isRequired
};

Expand Down
16 changes: 16 additions & 0 deletions app/javascript/components/reducers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { makeDeepCopy } from "./helpers";

const reducer = (state, action) => {
switch(action.type) {
// COMMENT actions
case "CREATE COMMENT":
return {
...state,
Expand Down Expand Up @@ -40,6 +41,8 @@ const reducer = (state, action) => {
}
}
break;

// COMMENT FORM VISIBILITY actions (eg. handles when a reply form is visible or not)
case "TOGGLE COMMENT FORM VISIBILITY": // shows/hides reply & edit comment forms when user clicks the toggle button
return {
...state,
Expand All @@ -48,6 +51,7 @@ const reducer = (state, action) => {
[action.commentFormId]: !state.commentFormsVisibility[action.commentFormId]
}
};
case "CREATE NEW COMMENT FORM VISIBILITY":
case "HIDE COMMENT FORM":
return {
...state,
Expand All @@ -56,6 +60,18 @@ const reducer = (state, action) => {
[action.commentFormId]: false
}
}

// TEXTAREA VALUE actions (eg. updates the values that are displayed in comment form <textarea>s)
case "CREATE NEW TEXTAREA VALUE":
case "UPDATE TEXTAREA VALUE":
return {
...state,
textAreaValues: {
...state.textAreaValues,
[action.commentFormId]: action.newValue
}
};

default:
throw new Error(); // default should never be called
}
Expand Down