Add redirect link after form submission

Author: PivtoranisV

app/javascript/components/pages/AddBook.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import Card from 'react-bootstrap/Card';
@@ -11,16 +12,18 @@ const AddBook = () => {
     description: '',
   });
 
+  const navigate = useNavigate();
+
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     setBookData({ ...bookData, [name]: value });
   };
-  const csrfToken = document
-    .querySelector('meta[name="csrf-token"]')
-    .getAttribute('content');
 
   const handleSubmit = async (event) => {
     event.preventDefault();
+    const csrfToken = document
+      .querySelector('meta[name="csrf-token"]')
+      .getAttribute('content');
     const response = await fetch('http://localhost:3000/api/v1/books', {
       method: 'POST',
       headers: {
@@ -34,10 +37,10 @@ const AddBook = () => {
       window.location.href = '/users/sign_in';
       return;
     }
-
-    const data = await response.json();
+    const newBook = await response.json();
 
     setBookData({ title: '', author: '', description: '' });
+    navigate(`/books/${newBook.data.id}`);
   };
 
   return (

app/views/shared/_navigation.html.erb

@@ -9,19 +9,19 @@
     <ul class="nav justify-content-end">
       <% if user_signed_in? %>
         <li class="nav-item d-flex align-items-center">
-          <%# <span class="text-white me-3">Welcome, <%= current_user.name %>!</span>
-      </li>
-      <li class="nav-item">
-        <%= button_to "Log Out", destroy_user_session_path, class: "btn btn-danger btn-sm", method: :delete %>
-      </li>
-    <% else %>
-      <li class="nav-item">
-        <%= link_to "Log In", new_user_session_path, class: "btn btn-outline-light btn-sm me-2" %>
-      </li>
-      <li class="nav-item">
-        <%= link_to "Sign Up", new_user_registration_path, class: "btn btn-success btn-sm" %>
-      </li>
-    <% end %>
-  </ul>
-</div>
+          <span class="text-white me-3">Welcome, <%= current_user.email %></span>
+        </li>
+        <li class="nav-item">
+          <%= button_to "Log Out", destroy_user_session_path, class: "btn btn-danger btn-sm", method: :delete %>
+        </li>
+      <% else %>
+        <li class="nav-item">
+          <%= link_to "Log In", new_user_session_path, class: "btn btn-outline-light btn-sm me-2" %>
+        </li>
+        <li class="nav-item">
+          <%= link_to "Sign Up", new_user_registration_path, class: "btn btn-success btn-sm" %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
 </nav>