تصحيح وتحسين الكود في React للتسجيل (Registration)

مشكلتك غير واضحة جيدا، فهي تحتاج توصيفا واضحا. ولكن الشيفرة الخاصة بك تمتلك بعض المشاكل هي: 

• أصلح تضمين useState فأنت تكتبها كـ usetate بدون S كبيرة.

  import React, {useState} from 'react'

   

• أزل واحدا من تضميني React واترك واحدا فقط، 

  import React from 'react'
  
  import React, {useState} from 'react'

  الحظ أنه بحذف الثاني ستحتاج استيراد وحدة useState، ولذلك يفضل حذف الأول مباشرة. 

• أصلح استعمال useNavigate لتصبح: 

  let navigate = useNavigate();

  فأنت تكتبها بـ n صغيرة. 

• نفس الشيء بخصوص useFormik: 

  let formik =useformik({
                 ^

• و نفس الشيء هنا: 

  let [statusErrors,setStatusErrors] =usestate('')
                                          ^

   

• وهنا أيضا:

  let {errors, set errors} = usestate ([])
                                ^

   

هاته هي أخطاء السياق التي تقوم بها بشكل مبدئي، فشيفرتك بحاجة الى تنقيح أولا. في حالة استمرار اي مشكلة يرجى ارفاق نص المشكلة كاملا.

يوجد عدة أخطاء في الكود وهي كالتالي:

1. تم استيراد React مرتين واستخدام useReact مرتين أيضًا، وعليك  باستيراد React مرة واحدة فقط واستخدام useState مرة واحدة.
2. هناك خطأ في كتابة "useState"، اعتمد على useState وليس usestate.
3. هناك خطأ في كتابة "useNavigate"، نستخدم useNavigate وليس usenavigate.
4. الكود يحتوي على ترقيم غير صحيح في الكود الخاص بـ yup.object. يجب أن يكون yup.object() بدلاً من yup object().
5. في جزء cpassword, يوجد غلق قوس مفقود بعد [yup.ref('password')].
6. يوجد أخطاء في كتابة الدوال داخل الكود، استخدم useFormik و useState بدلاً من useformik و usestate على التوالي، ويجب أن يكون onSubmit بدلاً من onsubmit.
7. في دالة register, هناك غلق قوس مفقود بعد if data.message == "succuess".
8. هناك خطأ في كتابة Console.log، والصحيح هو console.log.

وإليك الكود بعد تصحيح ما سبق.

import React, { useState } from 'react';
import axios from 'axios';
import { useFormik } from 'formik';
import { useNavigate } from 'react-router-dom';
import * as yup from 'yup';

const Register = () => {
  const [errors, setErrors] = useState([]);
  const navigate = useNavigate();
  const [statusErrors, setStatusErrors] = useState('');

  const schema = yup.object({
    name: yup.string().required('name is required').min(3, 'min is 3 char').max(10, 'max is 10 char'),
    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}$/, 'not valid password'),
    cpassword: yup.string().required('confirm password is required').oneOf([yup.ref('password')], 'passwords do not match'),
  });

  const formik = useFormik({
    initialValues: {
      email: '',
      name: '',
      password: '',
      cpassword: '',
    },
    validationSchema: schema,
    onSubmit: register,
  });

  async function register(values) {
    try {
      const { data } = await axios.post('https://lazy-blue-sockeye-gear.cyclic.app/api/v1/auth/signup', values);
      console.log(data);
      if (data.message === "success") {
        console.log("registered");
      }
    } catch (error) {
      console.log(error);
    }
  }

  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-describedby="emailhelp"
          />
        </div>

        <div className="mb-3">
          <label htmlFor="exampleInputName" className="form-label">Name</label>
          <input
            type="text"
            className="form-control"
            id="exampleInputName"
            value={formik.values.name}
            onChange={formik.handleChange}
            name="name"
          />
        </div>

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

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

        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    </div>
  );
};

export default Register;

تم ملاحظة بعض الأخطاء والتحسينات في الكود المقدم. فيما يلي الكود المصحح والمحسن:

import React, { useState } from 'react';
import axios from 'axios';
import { useFormik } from 'formik';
import { useNavigate } from 'react-router-dom';
import * as yup from 'yup';

const schema = yup.object({
  name: yup.string().required("Name is required").min(3, "Min is 3 characters").max(10, "Max is 10 characters"),
  email: yup.string().required("Email is required").email('Invalid email'),
  password: yup.string().required("Password is required").matches(/^[A-Z][a-z0-9]{4,8}$/, "Invalid password"),
  cpassword: yup.string().required("Confirm password is required").oneOf([yup.ref('password')], 'Passwords do not match'),
});

export default function Register() {
  const [errors, setErrors] = useState([]);
  const navigate = useNavigate();

  const formik = useFormik({
    initialValues: {
      email: "",
      name: "",
      password: "",
      cpassword: "",
    },
    validationSchema: schema,
    onSubmit: async (values) => {
      try {
        const { data } = await axios.post('https://lazy-blue-sockeye-gear.cyclic.app/api/v1/auth/signup', values);
        console.log(data);
        if (data.message === "success") {
          console.log("Registered");
          navigate('/success'); // توجيه المستخدم إلى صفحة نجاح التسجيل
        }
      } catch (error) {
        if (error.response) {
          setErrors(error.response.data.errors);
        }
      }
    },
  });

  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-describedby="emailHelp" />
          {formik.errors.email && formik.touched.email && (
            <div className="text-danger">{formik.errors.email}</div>
          )}
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputName" className="form-label">Name</label>
          <input type="text" className="form-control" id="exampleInputName"
            value={formik.values.name}
            onChange={formik.handleChange}
            name='name' />
          {formik.errors.name && formik.touched.name && (
            <div className="text-danger">{formik.errors.name}</div>
          )}
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">Password</label>
          <input type="password" className="form-control" id="exampleInputPassword1"
            value={formik.values.password}
            onChange={formik.handleChange}
            name='password' />
          {formik.errors.password && formik.touched.password && (
            <div className="text-danger">{formik.errors.password}</div>
          )}
        </div>
        <div className="mb-3">
          <label htmlFor="exampleInputPassword2" className="form-label">Confirm Password</label>
          <input type="password" className="form-control" id="exampleInputPassword2"
            value={formik.values.cpassword}
            onChange={formik.handleChange}
            name='cpassword' />
          {formik.errors.cpassword && formik.touched.cpassword && (
            <div className="text-danger">{formik.errors.cpassword}</div>
          )}
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    </div>
  );
}

تم ملاحظة بعض الأخطاء والتحسينات في الكود المقدم. فيما يلي الكود المصحح والمحسن:

تم إجراء التحسينات والتصحيحات التالية:

• تم تعديل توابع useFormik و useNavigate لأنه تم استيراد React بشكل مكرر.
• تم إضافة حالة errors باستخدام useState للتعامل مع أي أخطاء تعودها الخادم.
• تم تحديد initialValues و onSubmit و validationSchema في useFormik لتعريف القيم الابتدائية والتحقق من صحة الحقول والمعالجة عند تقديم النموذج.
• تم إضافة رسائل الخطأ المرتبطة بكل حقل وعرضها في حالة حدوث أخطاء.
• تم إضافة محاولة واستثناء للتعامل مع أخطاء الشبكة أثناء عملية التسجيل وتعيين أي أخطاء تعودها الخادم في حالة وجودها.
• تم إضافة توجيه المستخدم إلى صفحة نجاح التسجيل (يجب استبدال "/success" بالمسار الصحيح).
• تم إضافة شرط لعرض رسالة الخطأ إذا كان هناك أخطاء قادمة من الخادم.

يمكن إضافة بعض التحسينات الإضافية لتحسين الكود أكثر، ومنها:

إضافة disabled لزر الإرسال في حالة عدم صحة الحقول:
يمكن إضافة خاصية `disabled` إلى زر الإرسال حتى يتم تعطيله في حالة عدم صحة الحقول. هذا يساعد في تجنب إرسال النموذج بشكل غير صحيح ويخبر المستخدم أن هناك مشكلة يجب حلها. يمكن إضافة `disabled` بشكل مشروط باستخدام `formik.isValid` وفقًا للكود التالي:

<button type="submit" className="btn btn-primary" disabled={!formik.isValid}>
  Submit
</button>

إضافة رسالة تأكيد عندما يتم التسجيل بنجاح:
بعد التسجيل بنجاح، يمكن إضافة رسالة تأكيد لإخبار المستخدم بأن التسجيل تم بنجاح. يمكن إضافة عنصر `div` في النموذج يحتوي على رسالة التأكيد، كما هو موضح في الكود التالي:

{formik.submitCount > 0 && !formik.isValid && (
  <div className="text-danger mb-3">Please fix the errors above</div>
)}
{formik.submitCount > 0 && formik.isValid && (
  <div className="text-success mb-3">Registered successfully</div>
)}

يتم تمرير `formik.submitCount` و `formik.isValid` إلى العنصر `div` بحيث يتم عرض رسالة التأكيد فقط عندما يتم إرسال النموذج بنجاح.