تنفيذ نموذج React Formik باستخدام hook useFormConfig.

في هذا المثال، نوضح كيفية تنفيذ نموذج React Formik باستخدام hook useFormConfig من OneEntry.

✅ هدف السيناريو:

• تنفيذ نموذج Formik باستخدام hook useFormConfig من OneEntry.
• التأكد من تنسيق البيانات والتحقق منها بشكل صحيح قبل الإرسال.

✅ ما تحتاجه:

• عنوان PROJECT_URL و APP_TOKEN صالحين للمصادقة مع واجهة برمجة التطبيقات OneEntry.
• بيئة تطوير معدة مع تمكين React.js (مثل Next.js، Create React App).
• تم تكوينها في نموذج الاتصال بواجهة OneEntry مع علامة "contact_us".

📌 مهم:

• هذه الأمثلة لا تتضمن معالجة الأخطاء.
• يمكنك إدارة الأخطاء باستخدام كتلة try-catch أو من خلال استخدام بناء مثل await Promise.catch((error) => error).
• تأكد من أن علامة النموذج (مثل "contact_us") المستخدمة في Forms.getFormByMarker تتطابق مع نموذج موجود في مشروع OneEntry الخاص بك.

السيناريو

1. استيراد oneEntry وتعريف url و token

مثال:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. إنشاء عميل API باستخدام دالة defineOneEntry()

مثال:

const { Forms } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

الحصول على بيانات النموذج من oneentry

مثال:

const formData = await Forms.getFormByMarker('contact_us');

النتيجة:

{
  "id": 3,
  "attributeSetId": 2,
  "type": "data",
  "localizeInfos": {
    "title": "اتصل بنا",
    "titleForSite": "",
    "successMessage": "رسالة حول معالجة البيانات بنجاح",
    "unsuccessMessage": "رسالة حول معالجة البيانات بشكل غير ناجح",
    "urlAddress": "",
    "database": "0",
    "script": "0"
  },
  "version": 5,
  "position": 1,
  "identifier": "contact_us",
  "processingType": "script",
  "templateId": null,
  "attributes": [
    {
      "type": "string",
      "marker": "first_name",
      "isLogin": null,
      "isSignUp": null,
      "position": 1,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "localizeInfos": {
        "title": "الاسم الأول"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "string",
      "marker": "email",
      "isLogin": null,
      "isSignUp": null,
      "position": 2,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        },
        "emailInspectionValidator": true
      },
      "localizeInfos": {
        "title": "البريد الإلكتروني"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "string",
      "marker": "surname",
      "isLogin": null,
      "isSignUp": null,
      "position": 3,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "stringInspectionValidator": {
          "stringMax": 0,
          "stringMin": 0,
          "stringLength": 0
        }
      },
      "localizeInfos": {
        "title": "اللقب"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "list",
      "marker": "topic",
      "isLogin": null,
      "isSignUp": null,
      "position": 4,
      "settings": {},
      "isVisible": true,
      "listTitles": [
        {
          "title": "مقالة",
          "value": "article",
          "extended": {
            "type": null,
            "value": null
          },
          "position": 1
        },
        {
          "title": "مقالة-2",
          "value": "article-2",
          "extended": {
            "type": null,
            "value": null
          },
          "position": 2
        }
      ],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "localizeInfos": {
        "title": "الموضوع"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "text",
      "marker": "text",
      "isLogin": null,
      "isSignUp": null,
      "position": 5,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "النص"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "spam",
      "marker": "spam",
      "isLogin": null,
      "isSignUp": null,
      "position": 6,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "أنت لست روبوتًا؟"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "button",
      "marker": "send",
      "isLogin": null,
      "isSignUp": null,
      "position": 7,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "إرسال"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    }
  ]
}

استخدام hook useFormConfig

يوفر هذا hook بيانات تكوين النموذج.

مثال:

const {
  fields,
  initialValues,
  validationSchema,
} = useFormConfig(formData?.attributes);

تكامل Formik

مثال:

<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={() => {}}>
  {({
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
    isSubmitting,
  }) => {
    return (
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          name="email"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.email}
        />
        <input
          type="text"
          name="first_name"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.first_name}
        />
        <input
          type="text"
          name="surname"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.surname}
        />
        <button type="submit" disabled={isSubmitting}>
          إرسال
        </button>
      </form>
    );
  }}
</Formik>

المثال النهائي

// 1. استيراد defineOneEntry و Formik و useFormConfig
import { defineOneEntry } from 'oneentry';
import { Formik } from 'formik';
import useFormConfig from './useFormConfig';

// 1.1 تعريف PROJECT_URL و APP_TOKEN
const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

// 2. إنشاء عميل API
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. الحصول على بيانات النموذج من OneEntry
const formData = await Forms.getFormByMarker('contact_us');

// 4. استخراج تكوين النموذج باستخدام hook useFormConfig
const {
  fields,
  initialValues,
  validationSchema,
} = useFormConfig(formData?.attributes);

// 5. إنشاء نموذج باستخدام Formik وبيانات useFormConfig
return (
  <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={() => {}}>
    {({
      values,
      errors,
      touched,
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
    }) => {
      return (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.email}
          />
          <input
            type="text"
            name="first_name"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.first_name}
          />
          <input
            type="text"
            name="surname"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.surname}
          />
          <button type="submit" disabled={isSubmitting}>
            إرسال
          </button>
        </form>
      );
    }}
  </Formik>
);