إصلاح أخطاء في كود API لتسجيل الدخول في تطبيق React

في البداية تحتاج إلى استيراد الحزمة المطلوبة من React و Yup و axios وتعيين الدوال المستخدمة بشكل صحيح، ولديك أخطاء أخرى في الكود هي كالتالي:

1. هناك خطأ في استخدام الدوال المتعلقة بـ useState، حيث يجب عليك كتابة useState بدلاً من usestate، أيضًا يجب إزالة المسافة بين set و errors في السطر الأول من الدالة.
2. ولا يجب وضع كود الـ export بداخل الدالة بل خارجها.
3. هناك خطأ في استخدام الدوال المتعلقة بـ useFormik، والصحيح هو أن تكون initialValues و validationSchema و onSubmit خارج الكائن وليس داخله.
4. في دالة register، تقوم بإرسال البيانات إلى رابط الـ API ولكن لم تقم بالتعامل مع الرد المستلم. يجب أن تحقق إذا كانت العملية ناجحة (data.message === 'success') وتتبع الخطوات المناسبة بناءً على ذلك.
5. يجب أن يكون لديك دالة handleSubmit تستدعي دالة formik.handleSubmit.
6.  عليك استخدام onChange بدلاً من onchange في العناصر النمطية لـ HTML.

والكود بعد تصحيح الأخطاء سيكون بالشكل التالي:

import React, { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import axios from "axios";

const schema = Yup.object({
  email: Yup.string().required("Email is required").email("Not valid email"),
  password: Yup.string()
    .required("Password is required")
    .matches(/^[A-Z][a-z0-9]{4,8}$/, "Invalid password format"),
});

export default function Login() {
  const [errors, setErrors] = useState([]);
  const navigate = useNavigate();
  const [statusError, setStatusError] = useState("");

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: schema,
    onSubmit: sendRegisterData,
  });

  async function sendRegisterData(values) {
    try {
      const { data } = await axios.post(
        "https://preicous-bass-tights.cyclic.app/auth/login",
        values
      );
      console.log(data);
      if (data.message === "success") {
        setErrors([]);
        setStatusError("");
        navigate("/login");
        console.log("welcome");
      } else {
        setErrors(data.err[0]);
      }
    } catch (err) {
      setStatusError(err.response.data.message);
    }
  }

  return (
    <div className="container mt-5 pt-5">
      <form className="w-50 m-auto text-center" onSubmit={formik.handleSubmit}>
        <div className="mb-3">
          <label htmlFor="exampleInputEmail1" className="form-label">
            Email address
          </label>
          <input
            type="email"
            className="form-control"
            id="exampleInputEmail1"
            value={formik.values.email}
            onChange={formik.handleChange}
            name="email"
            aria-describedy="emailhelp"
          />
        </div>

        <div className="mb-3">
          <label htmlFor="exampleInputName" className="form-label">
            Name
          </label>
          <input
            type="text"
            className="form-control"
            id="exampleInputName"
            name="name"
          />
        </div>

        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">
            Password
          </label>
          <input
            type="password"
            className="form-control"
            id="exampleInputPassword1"
            name="password"
            value={formik.values.password}
            onChange={formik.handleChange}
          />
        </div>
      </form>
    </div>
  );
}