forked from publiclab/plots2
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rewrite Comment Editor with React, install Webpack and React (publicl…
…ab#9176) * git rebase * take ?react=true parameter publiclab#9175 * create & display hello world component publiclab#9175 * delete HelloWorld component * run Rails methods on comments state object * create components for comments, comment forms, & comment container * create react props for comment editor publiclab#9175 * add author pic, username, time posted, border, reply link publiclab#9175 * add userCommentedText prop publiclab#9175 * run views methods on react props publiclab#9175 * create comment toolbar publiclab#9175 * return nodeAuthorID and currentUser publiclab#9175 * toggle reply form; attach User Context publiclab#9175 * flesh out comment form publiclab#9175 * create User Context publiclab#9175 * create textarea, publish, & preview buttons publiclab#9175 * bundle text props as elementText object publiclab#9175 * destructure props with ES6 publiclab#9175 * destructure props with ES6 publiclab#9175 * create handlers for form submission and textarea input publiclab#9175 * explanatory comments publiclab#9175 * make AJAX request on form submission publiclab#9175 * rewrite get_react_comments so it doesn't return nil values publiclab#9175 * fix undefined ID bug: change commentId to formId publiclab#9175 * add webpacker startup to github actions runs * add webpack-dev-server start to gitpod.yml * switch to 'public/lib' instead of 'node_modules' * Update .gitpod.yml * Update .gitpod.yml * delete get_comment_react_props method publiclab#9175 * move get_react_comments to comment_helper.rb publiclab#9175 * render JSON for React comment editors publiclab#9175 * create state for comments; insert freshly posted comments into state publiclab#9175 * handle reply submission publiclab#9175 * create CommentsHeader component publiclab#9175 * extract comment author slug into its own component; create edit comment form publiclab#9175 * extract CommentReplies into its own component publiclab#9175 * rename to CommentAuthorSlug publiclab#9175 * change Comment key * handle edit form toggle publiclab#9175 * appease eslint * extract CommentDisplay and CommentHeader into separate components publiclab#9175 * extract CommentDisplay into its own component publiclab#9175 * consolidate CommentAuthorSlug into new CommentHeader component publiclab#9175 * pass linter publiclab#9175 * move formId calculation to CommentsContainer publiclab#9175 * break out CommentsList into its own component publiclab#9175 * generate default textAreaValues for edit forms publiclab#9175 * reset edit form textAreaValue when canceling edit publiclab#9175 * move elementText instantiation to controller publiclab#9175 * add makeDeepCopy function; extract everything to helpers.js publiclab#9175 * flash notification on comment post publiclab#9175 * dangerouslySetInnerHTML to display comment text publiclab#9175 * create edit comment functionality publiclab#9175 * rename parameter to getting_replies for clarity publiclab#9175 * change submit button's data- attributes publiclab#9175 * nest nodeId and nodeAuthor inside node publiclab#9175 * create StaticPropsContext publiclab#9175 * create handleDeleteComment function publiclab#9175 * newline at end of file publiclab#9175 * move all static props to StaticPropsContext publiclab#9175 * move commentFormVisibility state into CommentsContainer; close forms on submission publiclab#9175 * Update .gitpod.yml * Update .gitpod.yml * add rails generate commands for webpack * bundle exec * add functionality for deleting comments publiclab#9175 * remove webpack-dev-server line * remove webpacker-dev-server * add mysql env vars * added rails env * Update tests.yml * added snake_case, changed hash syntax to pass codeclimate publiclab#9175 * syntax tweaks to pass codeclimate publiclab#9175 * create readme file publiclab#9175 * undo reply nesting for comment state publiclab#9175 * remove is_reply parameter publiclab#9175 * set reply & edit isFormVisible, textAreaValue for new comments publiclab#9175 * add comments publiclab#9175 * stop passing down setTextAreaValues & replies as props publiclab#9175 * create CommentReplies in CommentsList publiclab#9175 * wrap CommentsContainer in new App component publiclab#9175 * break out handleFormSubmit into commentCreate and commentUpdate functions; pass parameters instead of using data attributes publiclab#9175 * upgrade node to v12 from v8 publiclab#9175 * setup guest browsing publiclab#9175 * replace replyCommentForm with link to login for anonymous browsing publiclab#9175 * add separate routes for React comments publiclab#9175 * fixes for codeclimate publiclab#9175 * add rails generate commandds for React & webpacker publiclab#9175 * remove rails generate webpacker/React commands publiclab#9175 * add rails g commands for webpacker & React publiclab#9175 * remove rails generate commands publiclab#9175 * add rails g commands for webpacker & React publiclab#9175 * add rails g commands for webpacker & React to deploy-container publiclab#9175 * remove rails generate react & webpacker commands from redeploy-container publiclab#9175 * re-add the command to redeploy-container; switch the order of statements publiclab#9175 * change webpack to webpacker in Makefile 🤦 publiclab#9175 * added the CORRECT webpacker & React commands to Makefile publiclab#9175 Co-authored-by: Jeffrey Warren <[email protected]>
- Loading branch information
Showing
44 changed files
with
7,381 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| defaults |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| import { UserContext } from "./user-context"; | ||
| import { StaticPropsContext } from "./static-props-context"; | ||
| import { getEditTextAreaValues, getInitialCommentFormToggleState } from "./helpers"; | ||
|
|
||
| import CommentsContainer from "./CommentsContainer"; | ||
|
|
||
| const App = ({ | ||
| // ES6 destructure the props | ||
| // so we can simply refer to initialComments instead of this.props.initialComments | ||
| currentUser, | ||
| elementText, | ||
| node, | ||
| node: { | ||
| nodeId | ||
| }, | ||
| initialComments | ||
| }) => { | ||
| // process the initialComments object and create initial state that is passed down to CommentsContainer.js to make React Hooks | ||
|
|
||
| // this is an object containing boolean values like: { "reply-33": false, "edit-1": true } | ||
| // this is used as the initial state showing whether or not an edit or reply comment form is shown or hidden | ||
| // false means the comment form is closed, true means open | ||
| const initialCommentFormToggleState = getInitialCommentFormToggleState(initialComments); | ||
|
|
||
| // this is used as initial state for the content of <textarea>s inside comment forms | ||
| // main and reply comment forms are an empty string | ||
| // edit forms must contain the raw comment text to be edited | ||
| // this is an object that holds the contents of multiple text forms: | ||
| // eg. { main: "foo", reply-123: "bar" } | ||
| const initialTextAreaValues = { | ||
| "main": "", | ||
| ...getEditTextAreaValues(initialComments) | ||
| }; | ||
|
|
||
| // React Context ensures that all components below this one can access certain props, without having to pass down component to component | ||
| // currentUser is passed down, as well as static props that do not change (like header text) | ||
| return ( | ||
| <UserContext.Provider value={currentUser}> | ||
| <StaticPropsContext.Provider value={{ node, elementText }}> | ||
| <CommentsContainer | ||
| initialCommentFormToggleState={initialCommentFormToggleState} | ||
| initialComments={initialComments} | ||
| initialTextAreaValues={initialTextAreaValues} | ||
| nodeId={nodeId} | ||
| /> | ||
| </StaticPropsContext.Provider> | ||
| </UserContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| App.propTypes = { | ||
| currentUser: PropTypes.object, | ||
| elementText: PropTypes.object.isRequired, | ||
| initialComments: PropTypes.array.isRequired, | ||
| node: PropTypes.object.isRequired | ||
| }; | ||
|
|
||
| export default App; |
Oops, something went wrong.