Merge pull request #41 from AnWhiteM/redux-registr-login

fix-commit
AnWhiteM · Jun 11, 2024 · b8b544b · b8b544b
2 parents fd590ac + 9610c74
commit b8b544b
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 104 deletions.
diff --git a/src/components/CreateBoardModal/CreateBoardModal.jsx b/src/components/CreateBoardModal/CreateBoardModal.jsx
@@ -3,14 +3,13 @@ import Modal from "react-modal";
 import { Formik, Field, Form, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
-// import { addBoard } from "../../redux/boards/operations";
+import { addBoard } from "../../redux/boards/operations";
 
 import css from "../EditBoardModal/EditBoardModal.module.css";
 import svg from "../../img/icons.svg";
 import bgData from "../../assets/bg.json";
 import clsx from "clsx";
 
-
 const icons = [
   "icon-i-1-project",
   "icon-i-2",
@@ -39,15 +38,15 @@ export default function CreateBoardModal({
   const [selectedIcon, setSelectedIcon] = useState(icons[0]);
   const [selectedBg, setSelectedBg] = useState(bgData[0].id);
 
-  //  const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
-  // const handleSubmit = (values, actions) => {
-  //   const newBoard = {
-  //     // Значення які будемо передавати на редакс
-  //   };
-  //   actions.resetForm();
-  //   dispatch(addBoard(newBoard));
-  // };
+  const handleSubmit = (values, actions) => {
+    const newBoard = {
+      // Значення які будемо передавати на редакс
+    };
+    actions.resetForm();
+    dispatch(addBoard(newBoard));
+  };
 
   const handleIconSelect = (icon, setFieldValue) => {
     setSelectedIcon(icon);

diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
@@ -1,47 +1,117 @@
+// import { Formik, Form, Field } from "formik";
+// import { logIn } from "../../redux/auth/operations";
+// import { useDispatch, useSelector } from "react-redux";
+// import { useNavigate } from "react-router-dom";
+// import css from "./LoginForm.module.css";
+// import { useEffect, useState } from "react";
+// import toast from "react-hot-toast";
+// import { selectError } from "../../redux/auth/selectror";
+
+// export default function LoginForm() {
+//   const dispatch = useDispatch();
+//   const navigate = useNavigate();
+
+//   const error = useSelector(selectError);
+//   const [submittedWithError, setSubmittedWithError] = useState(false);
+
+//   // const handleSubmit = async (values, actions) => {
+//   //   try {
+//   //     await dispatch(logIn(values));
+//   //     navigate("/home")
+//   //   } catch (error) {
+//   //     console.error("Login failed:", error);
+//   //   }
+//   //   actions.resetForm();
+//   // };
+
+//   const handleSubmit = (values, actions) => {
+//     dispatch(logIn(values));
+//     navigate("/home");
+//     actions.resetForm();
+//   };
+
+//   useEffect(() => {
+//     if (error && submittedWithError) {
+//       toast.error(`Ops, somthing wrong, Try Again!`);
+//     }
+//   }, [error, submittedWithError]);
+
+//   const handleFormSubmit = (values, actions) => {
+//     setSubmittedWithError(true);
+//     handleSubmit(values, actions);
+//   };
+
+//   const [showPassword, setShowPassword] = useState(false);
+
+//   const togglePasswordVisibility = (event) => {
+//     event.preventDefault();
+//     setShowPassword(!showPassword);
+//   };
+
+//   return (
+//     <div>
+//       <Formik
+//         initialValues={{
+//           email: "",
+//           password: "",
+//         }}
+//         onSubmit={handleFormSubmit}
+//       >
+//             <Form className={css.form}>
+//               <label htmlFor="email"/>
+//                 <Field type="email" name="email" placeholder ="Enter your email" className={css.input}/>
+//                 <label htmlFor="password"/>
+//                   <div>
+//                     <Field
+//                       type={showPassword ? "text" : "password"}
+//                       name="password"
+//                       className={css.input}
+//                       placeholder="Confirm a password"
+//                     />
+//                     <button type="button "className={css.eye} onClick={togglePasswordVisibility}>
+//                       {/* <svg width="18" height="18" stroke="currentColor">
+//                         <use
+//                           href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}
+//                         ></use>
+//                       </svg> */}
+//                     </button>
+//                 </div>
+
+//                 <button type="submit" className={css.button}>Log in Now</button>
+//           </Form>
+//         </Formik>
+//     </div>
+//   );
+// }
 
 import { Formik, Form, Field } from "formik";
 import { logIn } from "../../redux/auth/operations";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import css from "./LoginForm.module.css";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
-import { selectError } from "../../redux/auth/selectror";
-
-
+// import { selectError } from "../../redux/auth/selectror";
+import { unwrapResult } from "@reduxjs/toolkit";
 
 export default function LoginForm() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const error = useSelector(selectError);
+  // const error = useSelector(selectError);
   const [submittedWithError, setSubmittedWithError] = useState(false);
 
-  // const handleSubmit = async (values, actions) => {
-  //   try {
-  //     await dispatch(logIn(values));
-  //     navigate("/home")
-  //   } catch (error) {
-  //     console.error("Login failed:", error);
-  //   }
-  //   actions.resetForm();
-  // };
-
-  const handleSubmit = (values, actions) => {
-    dispatch(logIn(values));
-    navigate("/home");
-    actions.resetForm();
-  };
-
-  useEffect(() => {
-    if (error && submittedWithError) {
-      toast.error(`Ops, somthing wrong, Try Again!`);
-    }
-  }, [error, submittedWithError]);
-
-  const handleFormSubmit = (values, actions) => {
+  const handleSubmit = async (values, actions) => {
     setSubmittedWithError(true);
-    handleSubmit(values, actions);
+    try {
+      const resultAction = await dispatch(logIn(values));
+      unwrapResult(resultAction);
+      navigate("/home");
+    } catch (error) {
+      toast.error(`Ops, something went wrong, Try Again!`);
+      console.error("Login failed:", error);
+    }
+    actions.resetForm();
   };
 
   const [showPassword, setShowPassword] = useState(false);
@@ -50,7 +120,6 @@ export default function LoginForm() {
     event.preventDefault();
     setShowPassword(!showPassword);
   };
-
 
   return (
     <div>
@@ -59,31 +128,42 @@ export default function LoginForm() {
           email: "",
           password: "",
         }}
-        onSubmit={handleFormSubmit}
+        onSubmit={handleSubmit}
       >
-            <Form className={css.form}>
-              <label htmlFor="email"/>
-                <Field type="email" name="email" placeholder ="Enter your email" className={css.input}/>
-                <label htmlFor="password"/>
-                  <div>
-                    <Field
-                      type={showPassword ? "text" : "password"}
-                      name="password"
-                      className={css.input}
-                      placeholder="Confirm a password"
-                    />
-                    <button type="button "className={css.eye} onClick={togglePasswordVisibility}>
-                      {/* <svg width="18" height="18" stroke="currentColor">
-                        <use
-                          href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}
-                        ></use>
-                      </svg> */}
-                    </button>
-                </div>
-
-                <button type="submit" className={css.button}>Log in Now</button>
-          </Form>
-        </Formik>
+        <Form className={css.form}>
+          <label htmlFor="email" />
+          <Field
+            type="email"
+            name="email"
+            placeholder="Enter your email"
+            className={css.input}
+          />
+          <label htmlFor="password" />
+          <div>
+            <Field
+              type={showPassword ? "text" : "password"}
+              name="password"
+              className={css.input}
+              placeholder="Enter your password"
+            />
+            <button
+              type="button"
+              className={css.eye}
+              onClick={togglePasswordVisibility}
+            >
+              {/* <svg width="18" height="18" stroke="currentColor">
+                <use
+                  href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}
+                ></use>
+              </svg> */}
+            </button>
+          </div>
+
+          <button type="submit" className={css.button}>
+            Log in Now
+          </button>
+        </Form>
+      </Formik>
     </div>
   );
 }
diff --git a/src/components/Logout/Logout.jsx b/src/components/Logout/Logout.jsx
@@ -1,4 +1,4 @@
-import svg from "../../img/icons.svg";
+aimport svg from "../../img/icons.svg";
 import css from "./Logout.module.css";
 import toast from "react-hot-toast";
 import { useDispatch } from "react-redux";

diff --git a/src/components/RegistrationForm/RegistrationForm.jsx b/src/components/RegistrationForm/RegistrationForm.jsx
@@ -1,19 +1,19 @@
-import { Formik, Form, Field} from 'formik';
-import { register } from '../../redux/auth/operations';
-import { useDispatch } from 'react-redux';
-import css from "./RegistrationForm.module.css"
+import { Formik, Form, Field } from "formik";
+import { register } from "../../redux/auth/operations";
+import { useDispatch } from "react-redux";
+import css from "./RegistrationForm.module.css";
 import svg from "../../img/icons.svg";
-import { useState } from 'react';
-
-
-
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 export const RegistrationForm = () => {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   const handleSubmit = (values, actions) => {
     console.log(values);
     dispatch(register(values));
+    navigate("/auth/login");
     actions.resetForm();
   };
 
@@ -24,44 +24,57 @@ export const RegistrationForm = () => {
     setShowPassword(!showPassword);
   };
 
-
   return (
     <div>
-
       <Formik
-
-      initialValues={{ 
-        name: '', 
-        email: '', 
-        password: '', 
-      }}
-      onSubmit={handleSubmit}
+        initialValues={{
+          name: "",
+          email: "",
+          password: "",
+        }}
+        onSubmit={handleSubmit}
       >
-            <Form className={css.form}>
-              <label htmlFor="name"/>
-              <Field type="name" name="name" placeholder ="Enter your name" className={css.input}/>
-              <label htmlFor="email"/>
-                <Field type="email" name="email" placeholder ="Enter your email" className={css.input}/>
-                <label htmlFor="password"/>
-                  <div>
-                    <Field
-                      type={showPassword ? "text" : "password"}
-                      name="password"
-                      className={css.input}
-                      placeholder="Create a password"
-                    />
-                    <button type="button "className={css.eye} onClick={togglePasswordVisibility}>
-                      {/* <svg width="18" height="18" stroke="currentColor">
+        <Form className={css.form}>
+          <label htmlFor="name" />
+          <Field
+            type="name"
+            name="name"
+            placeholder="Enter your name"
+            className={css.input}
+          />
+          <label htmlFor="email" />
+          <Field
+            type="email"
+            name="email"
+            placeholder="Enter your email"
+            className={css.input}
+          />
+          <label htmlFor="password" />
+          <div>
+            <Field
+              type={showPassword ? "text" : "password"}
+              name="password"
+              className={css.input}
+              placeholder="Create a password"
+            />
+            <button
+              type="button "
+              className={css.eye}
+              onClick={togglePasswordVisibility}
+            >
+              {/* <svg width="18" height="18" stroke="currentColor">
                         <use
                           href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}
                         ></use>
                       </svg> */}
-                    </button>
-                </div>
+            </button>
+          </div>
 
-                <button type="submit" className={css.button}>Register Now</button>
-          </Form>
-        </Formik>
+          <button type="submit" className={css.button}>
+            Register Now
+          </button>
+        </Form>
+      </Formik>
     </div>
   );
-};
+};