fullstack-open/part5/bloglist-frontend/src/App.js

import { useState, useEffect, useRef } from "react";
import Blog from "./components/Blog";
import { BlogForm } from "./components/BlogForm";
import Notification from "./components/Notification";
import blogService from "./services/blogs";
import loginService from "./services/login";
import Togglable from "./components/Togglable";

const App = () => {
  const [blogs, setBlogs] = useState([]);
  const [user, setUser] = useState(null);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState(null);
  const [successMessage, setSuccessMessage] = useState(null);

  const resetInputFields = () => {
    setUsername("");
    setPassword("");
  };

  const setNotification = (message, type) => {
    if (type === "success") {
      setSuccessMessage(message);
      setTimeout(() => {
        setSuccessMessage(null);
      }, 5000);
    } else if (type === "error") {
      setErrorMessage(message);
      setTimeout(() => {
        setErrorMessage(null);
      }, 5000);
    }
  };

  useEffect(() => {
    blogService.getAll().then((blogs) => setBlogs(blogs));
    const loggedInUserLocal = window.localStorage.getItem("loggedInUser");

    if (loggedInUserLocal) {
      const user = JSON.parse(loggedInUserLocal);
      setUser(user);
      blogService.setToken(user.token);
    }
  }, []);

  const handleLogin = async (event) => {
    event.preventDefault();
    try {
      const user = await loginService.login({ username, password });
      blogService.setToken(user.token);
      window.localStorage.setItem("loggedInUser", JSON.stringify(user));
      setUser(user);
      resetInputFields();
      setNotification("Login successful", "success");
    } catch (exception) {
      setNotification("Wrong credentials", "error");
    }
  };

  const handleLogout = async (event) => {
    event.preventDefault();

    try {
      setNotification("Logout successful", "success");
      window.localStorage.clear();
      blogService.setToken(null);
      setUser(null);
      resetInputFields();
    } catch (exception) {
      setNotification("Logout failed", "error");
    }
  };
  const newBlogRef = useRef();
  const handleNewBlog = (newBlog) => {
    newBlogRef.current.toggleVisibility();
    blogService
      .create(newBlog)
      .then((returnedBlog) => {
        setBlogs(blogs.concat(returnedBlog));
        resetInputFields();
        setNotification(
          `A new blog ${returnedBlog.title} by ${returnedBlog.author} at ${returnedBlog.url} added`,
          "success"
        );
      })
      .catch((error) => {
        setNotification("Failed to add new blog: " + error, "error");
      });
  };

  const handleRemoveBlog = (blog) => {
    if (window.confirm(`Remove blog ${blog.title} by ${blog.author}?`)) {
      blogService
        .remove(blog.id)
        .then(() => {
          setBlogs(blogs.filter((b) => b.id !== blog.id));
          setNotification(
            `Blog ${blog.title} by ${blog.author} removed`,
            "success"
          );
        })
        .catch((error) => {
          setNotification("Failed to remove blog: " + error, "error");
        });
    }
  };

  const loginForm = () => (
    <form onSubmit={handleLogin}>
      <div>
        Username
        <input
          type="text"
          value={username}
          name="Username"
          onChange={({ target }) => setUsername(target.value)}
        />
      </div>
      <div>
        Password
        <input
          type="password"
          value={password}
          name="Password"
          onChange={({ target }) => setPassword(target.value)}
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );

  const blogForm = () => {
    return (
      <div>
        <p> {user.name} logged in </p>
        <button onClick={handleLogout}>Logout</button>
        <Togglable buttonLabel="New blog" ref={newBlogRef}>
          <BlogForm createBlog={handleNewBlog} />
        </Togglable>
        <h2> All blogs</h2>
        {blogs.map((blog) => (
          <Blog
            key={blog.id}
            blog={blog}
            setNotification={setNotification}
            removeBlog={handleRemoveBlog}
          />
        ))}
      </div>
    );
  };

  return (
    <div>
      <h1>Bloglist</h1>
      <Notification
        errorMessage={errorMessage}
        successMessage={successMessage}
      />
      {user === null ? (
        <div>
          <p> Please log in </p>
          {loginForm()}
        </div>
      ) : (
        <div>{blogForm()}</div>
      )}
    </div>
  );
};

export default App;