Week14_My_Note_App_Authentication

package.json

@@ -13,9 +13,10 @@
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "formik": "^2.2.9",
+    "js-cookie": "^3.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.8.0",
+    "react-icons": "^4.10.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.12.1",
     "yup": "^1.1.1"

src/App.jsx

@@ -1,27 +1,16 @@
-import AddNote from "./components/AddNote";
-import Notes from "./components/Notes";
-import EditNote from "./components/EditNote";
-import { Routes, Route } from "react-router-dom";
+// import { Route, Routes } from "react-router-dom";
+import Home from "./components/Home";
+// import Notes from "./components/Notes";
+// import AddNote from "./components/AddNote";
+// import EditNote from "./components/EditNote";
+// import Login from "./Auth/Login";
+// import Register from "./Auth/Register";
 
 function App() {
 
   return (
     <div className="bg-blue-600 min-h-screen flex">
-      <div className="w-full">
-        <div className="flex flex-col items-center">
-          <h3 className="text-3xl text-white mb-5 mt-5">My Notes</h3>
-          <Routes>
-          {window.location.pathname === "/" && (
-            <Route path="/" element={<AddNote />} />
-          ) } else {
-            <Route path="/edit/:id" element={<EditNote />} />
-          }
-          </Routes>
-
-
-          <Notes />
-        </div>
-      </div>
+      <Home/>
     </div>
   );
 }

src/Auth/Login.jsx

@@ -0,0 +1,48 @@
+
+import { ErrorMessage, Field, Form, Formik } from "formik";
+import * as Yup from "yup";
+import { useLoginMutation } from "../store/api/AuthSlice";
+import { useNavigate } from "react-router-dom";
+const Login = () => {
+  const [login] = useLoginMutation();
+  const navigate = useNavigate();
+  const initialValue = {
+    email: '',
+    password: ''
+  }
+  const ValidationSchema = Yup.object({
+    email: Yup.string().required("enter your email "),
+    password: Yup.string().required("enter your password ")
+  })
+  const handleSubmit = (values) => {
+    login({
+      email: values.email,
+      password: values.password
+    }).then(() => {
+      navigate('/')
+    }).catch((err) => {
+      console.log(err)
+    })
+  }
+  return (
+    <div className="mt-10 p-5 w-full lg:w-5/12 shadow-inner lg:mx-auto ">
+      <p className="text-3xl p-3 my-3 text-slate-600">Sign In </p>
+      <div>
+        <Formik
+          initialValues={initialValue}
+          validationSchema={ValidationSchema}
+          onSubmit={handleSubmit}>
+          <Form className="flex flex-col gap-3 space-y-4">
+            <Field className="p-3 text-base w-full rounded shadow" type="textarea" name="email" placeholder="Enter email" />
+            <ErrorMessage name="email" component="div" className="text-red-500" />
+            <Field className="p-3 text-base w-full rounded shadow" type="text" name="password" placeholder="Enter password" />
+            <ErrorMessage name="password" component="div" className="text-red-500" />
+            <button type="submit" className="p-3 text-base w-full rounded shadow bg-slate-600 text-white">Submit</button>
+          </Form>
+        </Formik>
+      </div>
+    </div>
+  )
+}
+
+export default Login

src/Auth/Register.jsx

@@ -0,0 +1,52 @@
+import { ErrorMessage, Field, Form, Formik } from "formik";
+import * as Yup from "yup";
+import { useRegisterMutation } from "../store/api/AuthSlice";
+import { useNavigate } from "react-router-dom";
+const Register = () => {
+  const [register] =useRegisterMutation();
+  const navigate = useNavigate();
+  const initialValue = {
+    name: '',
+    email: '',
+    password : ''
+  }
+  const ValidationSchema = Yup.object({
+    name: Yup.string().required("enter your name "),
+    email: Yup.string().required("enter your email "),
+    password: Yup.string().required("enter your password ")
+  })
+  const handleSubmit = (values) => {
+    console.log(values);
+    register({
+      name: values.name,
+      email: values.email,
+      password : values.password
+    }).then(() => { navigate('/Login')})
+    .catch( (error) => {
+      console.log(error)
+    })
+  }
+  return (
+    <div className="mt-10 w-full p-5 lg:w-5/12 shadow-inner lg:mx-auto ">
+      <p className="text-3xl p-3 my-3 text-slate-600">Sign Up </p>
+      <div>
+        <Formik
+          initialValues={initialValue}
+          validationSchema={ValidationSchema}
+          onSubmit={handleSubmit}>
+          <Form className="flex flex-col gap-3 space-y-4">
+            <Field className="p-3 text-base w-full rounded shadow" type="text" name="name" placeholder="Enter name" />
+            <ErrorMessage name="name" component="div" className="text-red-500"/>
+            <Field className="p-3 text-base w-full rounded shadow" type="textarea" name="email" placeholder="Enter email" />
+            <ErrorMessage name="email" component="div" className="text-red-500" />
+            <Field className="p-3 text-base w-full rounded shadow" type="text" name="password" placeholder="Enter password" />
+            <ErrorMessage name="password" component="div" className="text-red-500" />
+            <button type="submit" className="p-3 text-base w-full rounded shadow bg-slate-600 text-white">Submit</button>
+          </Form>
+        </Formik>
+      </div>
+    </div>
+  )
+}
+
+export default Register

src/BaseQuery.js

@@ -0,0 +1,2 @@
+const BaseQuery = "https://notes-60by.onrender.com";
+export default BaseQuery;

src/components/AddNote.jsx

@@ -1,74 +1,48 @@
-import React from 'react';
-import { Formik, Form, Field, ErrorMessage } from 'formik';
-import * as Yup from 'yup';
-import { useAddNoteMutation } from '../store/api/NoteSlice';
-
+import { ErrorMessage, Field, Form, Formik } from "formik";
+import * as Yup from "yup";
+import { useAddNotesMutation } from "../store/api/NoteSlice";
+import { useNavigate } from "react-router-dom";
 const AddNote = () => {
-
-  const [addNote ] = useAddNoteMutation();
-
-  const initialValues = {
+  const [addNotes] = useAddNotesMutation();
+  const navigate = useNavigate();
+  const initialValue = {
     title: '',
-    content: '',
-  };
-
-  const validationSchema = Yup.object({
-    title: Yup.string().required('Title is required'),
-    content: Yup.string().required('Content is required'),
-  });
-
-  const handleSubmit = (values, { resetForm }) => {
-    // Send the data to the server (localhost:9000/create_note)
+    content: ''
+  }
+  const ValidationSchema = Yup.object({
+    title: Yup.string().required("enter your title note "),
+    content: Yup.string().required("enter your content note ")
+  })
+  const handleSubmit = (values) => {
     console.log(values);
-    addNote({
+    addNotes({
       title: values.title,
-      content: values.content,
-    });
-
-
-    // Reset the form after submission
-    resetForm();
-  };
-
+      content: values.content
+    }).then(() => {
+      navigate('/');
+    }).catch((err) => {
+      console.log(err);
+    })
+  }
   return (
-    <div className="bg-white p-10 rounded-lg shadow md:w-3/4 mx-auto lg:w-1/2">
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
-        <Form>
-          <div className="mb-5">
-            <Field
-              type="text"
-              id="title"
-              name="title"
-              placeholder="Title"
-              className="border border-gray-300 shadow p-3 w-full rounded mb-"
-            />
+    <div className="mt-10 p-5 w-full lg:w-10/12 shadow-inner lg:mx-auto ">
+      <p className="text-3xl p-3 my-3 text-slate-600">Add notes </p>
+      <div>
+        <Formik
+          initialValues={initialValue}
+          validationSchema={ValidationSchema}
+          onSubmit={handleSubmit}>
+          <Form className="flex flex-col gap-3">
+            <Field className="p-3 text-base w-full rounded shadow" type="text" name="title" placeholder="Enter Note title " />
             <ErrorMessage name="title" component="div" className="text-red-500" />
-          </div>
-
-          <div className="mb-5">
-            <Field
-              as="textarea"
-              name="content"
-              placeholder="Body"
-              className="border border-gray-300 shadow p-3 w-full rounded mb-"
-            />
+            <Field className="p-3 text-base w-full rounded shadow" type="textarea" name="content" placeholder="Enter Note content" />
             <ErrorMessage name="content" component="div" className="text-red-500" />
-          </div>
-
-          <button
-            type="submit"
-            className="block w-full bg-yellow-400 text-black font-bold p-4 rounded-lg hover:bg-yellow-500"
-          >
-            Add Note
-          </button>
-        </Form>
-      </Formik>
+            <button type="submit" className="p-3 text-base w-full rounded shadow bg-slate-600 text-white">Submit</button>
+          </Form>
+        </Formik>
+      </div>
     </div>
-  );
-};
+  )
+}
 
-export default AddNote;
+export default AddNote