[Docs: Rewrite] The Editing Posts section missing the component Route

[NoamGoren]

What docs page needs to be fixed?

tutorials/essentials/part-4-using-data.md

• Section:
• Editing Posts
• Page:

What is the problem?

the EditPostForm component is missing from the App.js Route

What should be changed to fix the problem?

Adding the following to the App.js example:

      <Route exact path="/editPost/:postId" component={EditPostForm} />

[ronfybish]

Totally agree, although it seems to have a mention in the doc -> Like with SinglePostPage, we'll need to import it into App.js and add a route that will render this component. We should also add a new link to our SinglePostPage that will route to EditPostPage,
it is not so clear!

It should be something like this, I believe

Adding the Editing Post Route

Now that we have a <EditPostForm> component, we can define a route to show it and add a link at the bottom of the single post page.

We'll import EditPostForm in App.js, and add the route:

import { PostsList } from './features/posts/PostsList'
import { AddPostForm } from './features/posts/AddPostForm'
import { SinglePostPage } from './features/posts/SinglePostPage'
// highlight-next-line
import { SinglePostPage } from './features/posts/SinglePostPage'


function App() {
  return (
    <Router>
      <Navbar />
      <div className="App">
        <Switch>
          <Route
            exact
            path="/"
            render={() => (
              <React.Fragment>
                <AddPostForm />
                <PostsList />
              </React.Fragment>
            )}
          />
             <Route exact path="/posts/:postId" component={SinglePostPage} />
          // highlight-next-line
           <Route exact path="/editPost/:postId" component={EditPostForm} />
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  )
}

Then, in <SinglePostPage>, we'll add a new link to our SinglePostPage that will route to EditPostPage, like:

// highlight-next-line
import { Link } from 'react-router-dom'

export const SinglePostPage = ({ match }) => {

        // omit other contents

        <p  className="post-content">{post.content}</p>
        // highlight-start
        <Link to={`/editPost/${post.id}`} className="button">
          Edit Post
        </Link>
        // highlight-end

I think it would be great to add this part because it really confused me!
I would love to take this issue!

[markerikson]

FWIW, pretty sure I said up front that the tutorial doesn't show every single change as a code block, in order to save some space - it's long enough as it is :)

[ronfybish]

@markerikson Hi Mark, I just finished watching the live show you hosted on YouTube on This Dot Media.
I would love to be involved and help you with the things you have listed, especially with the tutorials and the "dirty work" with the doc of RTK.
As someone who recently started with, it's magic! We recently started building a new UI.
After I showed the team the potential I see in the RTK, we did a quick refactoring, and I'm so happy about it.
I feel a huge need, and sure there is more like me for more content, examples, and tutorials in RTK.
It will be my pleasure to be a part of the things you want to give to the community and help you pick them up.

So be sure you are not the only one who seems to care about it, me too!

[vthorey]

I agree with the above, the documentation is confusing for this reason:

Like with SinglePostPage, we'll need to import it into App.js and add a route that will render this component. We should also add a new link to our SinglePostPage that will route to EditPostPage, like:

Should be

Like with SinglePostPage, we'll need to import it into App.js and add a route that will render this component. We should also add a new link to our SinglePostPage that will route to the EditPostForm, like:

Maybe a more accurate solution would be renaming EditPostForm to EditPostPage.

[markerikson]

All issues resolved by #4153