Note appwrite

App.jsx

import { useEffect, useRef, useState } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import "./index.css";
import { projectId, account } from "./appwrite/appwriteConfig";
import Signup from "./components/Signup";
import Login from "./components/Login";
import Main from "./components/Main/Main";
import { ID } from "appwrite";

function App() {
  const [user, setUser] = useState({
    email: "",
    password: "",
  });

  async function handleSignUp(data) {
    try {
      const response = await account.create(
        ID.unique(),
        data.email,
        data.password
      );
      console.log(response);
      setUser((prev) => ({ ...prev, ...data }));
    } catch (error) {
      console.log(error); // Failure
    }
  }

  function handleLogin(data) {
    setUser(data);
  }

  function handleLogout() {
    setUser("");
  }

  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={
            user.email ? (
              <Navigate to="/notes" replace="true" />
            ) : (
              <Navigate to="/signup" replace="true" />
            )
          }
        />
        <Route
          path="/login"
          element={<Login handleLogin={handleLogin} />}
        />
        <Route
          path="/notes"
          element={
            user.email ? (
              <Main handleLogout={handleLogout} user={user} />
            ) : (
              <Navigate to="/signup" replace="true" />
            )
          }
        />
        <Route
          path="/signup"
          element={<Signup handleSignUp={handleSignUp} />}
        />
        <Route
          path="*"
          element={<h1 className="text-center text-3xl">404 Page Not Found</h1>}
        />
      </Routes>
    </Router>
  );
}

export default App;

Signup.jsx

import { useRef, useState } from "react";
import {Link} from "react-router-dom"
function Signup({ handleSignUp }) {
  
  const [userData, setUserData] = useState();
  function handleChange(e) {
    let name = e.target.name;
    let value = e.target.value;
    setUserData((prev) => ({ ...prev, [name]: value }));
  }

  function handleClick(e) {
    if (emailRef.current.validity.valid && passwordRef.current.validity.valid) {
      e.preventDefault();
      handleSignUp(userData);
    }
  }
  const passwordRef = useRef("");
  const emailRef = useRef("");

  return (
    <div className="h-[100vh] flex flex-col items-center justify-center">
      <div className="container w-[70%]  min-w-[400px] max-w-[800px] h-full flex justify-center gap-10 items-center flex-col ">
        <div className="absolute top-4">
          <h1 className="text-4xl underline decoration-2">Note Me</h1>
          <h2 className="text-md ml-[8rem]">~ A quick note app</h2>
        </div>
        <form className="flex box-content p-16 rounded-sm border border-black  flex-col gap-6 w-[50%]">
          <input
            name="email"
            value={userData?.email || ""}
            type="email"
            placeholder="Email"
            autoComplete="off"
            ref={emailRef}
            required
            className="border border-black p-1 rounded-md text-md sm:text-lg"
            onChange={handleChange}
          />
          <input
            name="password"
            value={userData?.password || ""}
            type="password"
            minLength="8"
            ref={passwordRef}
            placeholder="Password"
            autoComplete="off"
            className="border border-black p-1 rounded-md text-md sm:text-lg"
            onChange={handleChange}
            required
          />
          <button
            onClick={handleClick}
            className="bg-blue-500   text-xl rounded-md p-1  hover:shadow-lg active:bg-blue-600 text-white"
          >
            Sign up
          </button>
          <span>
            {" "}
            Already a member ?{" "}
            <Link className="underline" to="/login">
              Login
            </Link>
          </span>
        </form>
      </div>
    </div>
  );
}

export default Signup;