Lesson 5 - Create Hook by State Management in React

// App.css
/** @format */

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

/*
 Added for the UserProfile Card component
*/
.profile-container {
  display: flex;

}

div>img {
  padding-right: 10px;
  margin-top: 10px;
  max-width: 350px;
  height: 180px;
  border-radius: 20px;
}

div>p {
  text-align: left;
  margin-left: 10px;
}

.user-profile {
  border: 1px solid #cc7979;
  border-radius: 15px;
  padding: 20px;
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.calculator-result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.calculator {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.calculator input[type="number"] {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.operators {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.operators label {
  display: flex;
  align-items: center;
  gap: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #08417b;
  color: rgb(252, 107, 16);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #597ca1;
}

.navbar-a {
  margin: 10px;
}
.card-container {
  display: flex;
  justify-content: center;
  /* Centers horizontally */
  align-items: center;
  /* Centers vertically */
  flex-direction: column;
  /* Optional: if you want the cards to stack vertically */
 /*  height: 100vh; */
  /* Optional: full viewport height */
  
}

//BookNoHoo.jsx
/** @format */

function BookNoHook({ title, author, description, subtitle, image }) {

  var isRead = true

  return (
    <div className="profile-container user-profile">
      <div>
        <img src={image} alt={title} />
      </div>
      <div>
        <h2>Title: {title}</h2>
        <h4>Subtitle: {subtitle}</h4>
        <h3>By {author}</h3>
        <p>Description: {description}</p>
        <button
          className="btn btn-primary"
          name="No Hook"
          value={isRead ? 'Read' : 'Unread'}
          onClick={(e) => {
            isRead = !isRead
            console.log('Status', isRead)
              console.log(e.target.name, e.target.value)
          }}>
          {isRead ? 'Read' : 'Unread'} //Not working. Why???
        </button>
      </div>
    </div>
  )
}
export default BookNoHook

// BookWithHook.jsx
/** @format */

import { useState } from "react";

function BookWithHook({ title, author, description, subtitle, image }) {
  const [isRead, setIsRead] = useState(false);// state

  function onIsRead(event) {  //event handler for button click
    setIsRead(!isRead)
    console.log(event.target)
  }
  return (
    <div className="profile-container user-profile">
      <div>
        <img src={image} alt={title} />
      </div>
      <div>
        <h2>Title: {title}</h2>
        <h4>Subtitle: {subtitle}</h4>
        <h3>By {author}</h3>
        <p>Description: {description}</p>
        <button className="btn btn-primary" 
         name="With Hook" 
         value= {isRead ? 'Read' : 'Unread'}
         onClick={onIsRead}>
          {isRead ? "Read" : "Unread"}
        </button>
      </div>
    </div>
  );
}
export default BookWithHook;

// Some code
/** @format */

const booksData = {
  items: [
    {
      volume: {
        title: "Effective Java",
        subtitle: "Programming Language Guide",
        authors: ["Joshua Bloch"],
        description:
          "From the source of Java's design, this guide provides the best practices and expert insights for professional Java developers. Ideal for enhancing coding efficiency and understanding Java's capabilities.",
        image:
          "http://books.google.com/books/content?id=ka2VUBqHiWkC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api",
      },
    },
    {
      volume: {
        title: "Clean Code",
        subtitle: "A Handbook of Agile Software Craftsmanship",
        authors: ["Robert C. Martin"],
        description:
          "A must-read for developers striving to write clean code that enhances readability and maintainability. Includes practical advice and real-world examples from software engineering.",
        image:
          "http://books.google.com/books/content?id=_i6bDeoCQzsC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api",
      },
    },
    {
      volume: {
        title: "Head First Java",
        subtitle: "A Brain-Friendly Guide",
        authors: ["Kathy Sierra", "Bert Bates"],
        description:
          "An engaging, visually-rich approach to learning Java, suitable for beginners who want a complete understanding of object-oriented programming and Java basics.",
        image:
          "http://books.google.com/books/content?id=lXEBwv0LYogC&printsec=frontcover&img=1&zoom=5&source=gbs_api",
      },
    },
    {
      volume: {
        title: "Eloquent JavaScript, 3rd Edition",
        subtitle: "A Modern Introduction to Programming",
        authors: ["Marijn Haverbeke"],
        description:
          "Completely revised and updated, this best-selling introduction to programming in JavaScript focuses on writing real applications.",
        image:
          "http://books.google.com/books/content?id=FSVTDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api",
      },
    },
    {
      volume: {
        title: "Professional Java for Web Applications",
        subtitle: "Comprehensive Guide to Spring Framework",
        authors: ["Nicholas S. Williams"],
        description:
          "The comprehensive Wrox guide for creating Java web applications for the enterprise This guide shows Java software developers and software engineers how to build complex web applications in an enterprise environment.",
        image:
          "http://books.google.com/books/content?id=cHr0AgAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api",
      },
    },
  ],
};
export default booksData;