تحديث سمات المستخدم، مثل رقم الهاتف

يحدّث سمات المستخدم، مثل رقم هاتفه.

ما يفعله هذا المثال:

• يسجّل دخول المستخدم باسم الدخول وكلمة المرور
• يحصل على بيانات المستخدم الحالي لملء نموذج الواجهة الأمامية مسبقًا
• يتيح للمستخدم تعديل حقل (مثل الهاتف) ويحفظه
• يحفظ البيانات في منصة OneEntry

المتطلبات المسبقة:

• قيمتا PROJECT_URL وAPP_TOKEN صالحتان لـ OneEntry API.
• نموذج تسجيل بالعلامة "reg"
• حقول النموذج (السمات) بالعلامات "email_reg" و"password_reg" و"name_reg" و"phone_reg"
• مستخدم موجود ومُفعَّل للمصادقة باسمه

ملاحظات:

• تعالج الأمثلة الأخطاء بالحد الأدنى: فهي تتحقق من وجود كائن خطأ وتتوقف.
• افتراضيًا (isShell: true) يُعيد SDK كائن خطأ بدلًا من رمي استثناء، لذا تحقق من النتيجة، مثل 'statusCode' in result. مع isShell: false يرمي استثناءً، وتعالج الأخطاء باستخدام try/catch. راجع الأخطاء.
• يجب أن يطابق formIdentifier الممرر إلى updateUser() المعرّف المهيأ في مشروع OneEntry الخاص بك.

وثائق المنصة:

• Users

مرجع SDK:

• Users

جربها مباشرة

شغّل هذا المثال في بيئة JS SDK التجريبية. اربط Project URL وApp Token عند الزيارة الأولى، ثم افتح:

• تحديث سمات المستخدم، مثل رقم الهاتف

السيناريو

الخطوات أدناه مقتطفات من مكوّن React في المثال النهائي. تُعرَّف هناك الحالة وبيانات الاعتماد والدوال المساعدة مثل emailReg وpasswordReg وvalues وfields وprepareValue وdisplayValue.

1. استورد defineOneEntry وعرّف PROJECT_URL وAPP_TOKEN

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'https://your-project.oneentry.cloud';
const APP_TOKEN = 'your-app-token';

2. أنشئ عميل API باستخدام defineOneEntry()

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

3. أنشئ authData وصادِق المستخدم باستخدام AuthProvider.auth()

const authData = [
  { marker: 'email_reg', value: emailReg },
  { marker: 'password_reg', value: passwordReg },
];
const authResponse = await AuthProvider.auth('email', { authData });
if ('statusCode' in authResponse) throw new Error(authResponse.message);

4. احصل على المستخدم الحالي لملء النموذج مسبقًا باستخدام Users.getUser()

const data = await Users.getUser();
if ('statusCode' in data) throw new Error(data.message);

setUser(data);
const initial: Record<string, string> = {};
(Array.isArray(data.formData) ? data.formData : []).forEach((d: any) => {
  initial[d.marker] = displayValue(d.value);
});
setValues(initial);

النتيجة:

{
  "id": 39,
  "total": "1",
  "identifier": "john@example.com",
  "authProviderIdentifier": "email",
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "John"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+12025550147"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "john@example.com"
    }
  ],
  "formIdentifier": "reg",
  "groups": [
    1
  ],
  "state": {},
  "rating": {},
  "moduleFormConfigs": []
}

5. حدّث المستخدم باستخدام Users.updateUser()

const formData = fields.map((d: any) => ({
  marker: d.marker,
  type: d.type,
  value: prepareValue(d.type, values[d.marker] ?? displayValue(d.value)),
}));
// notificationData is left out: it replaces the stored object, including
// the FCM tokens in phonePush.
const body = {
  formIdentifier: 'reg',
  formData,
};
const result = await Users.updateUser(body);
if (result !== true) {
  setErrorMsg(typeof result === 'object' ? result.message : 'Update failed');
  setStatus('error');
  return;
}

مرّر authData فقط لتغيير كلمة المرور. تعيد واجهة API تجزئة أي قيمة كلمة مرور ترسلها.

6. احصل على المستخدم المحدّث باستخدام Users.getUser()

const userData = await Users.getUser();
if ('statusCode' in userData) {
  setErrorMsg(userData.message);
  setStatus('error');
  return;
}
setUser(userData);

النتيجة:

{
  "id": 39,
  "total": "1",
  "identifier": "john@example.com",
  "authProviderIdentifier": "email",
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "John"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+12025550147"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "john@example.com"
    }
  ],
  "formIdentifier": "reg",
  "groups": [
    1
  ],
  "state": {},
  "rating": {},
  "moduleFormConfigs": []
}

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

import { useState, useEffect } from 'react';

// 1. Import defineOneEntry and define PROJECT_URL and APP_TOKEN
import { defineOneEntry } from 'oneentry';
import type { IUserEntity } from 'oneentry';

const PROJECT_URL = 'https://your-project.oneentry.cloud';
const APP_TOKEN = 'your-app-token';

// 2. Create an API client
const { AuthProvider, Users } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// Prepare value for API submission by field type
function prepareValue(type: string, value: string) {
  if (type === 'text') return [{ plainValue: value }];
  if (type === 'list' || type === 'radioButton') return [value];
  return value;
}

// Read a displayable string from a user formData entry's value
function displayValue(value: any): string {
  if (typeof value === 'string') return value;
  if (Array.isArray(value)) return value[0]?.plainValue ?? value[0]?.value ?? '';
  return value?.plainValue ?? '';
}

// Choose a sensible input type for a field by its marker
function inputTypeFor(marker: string) {
  if (marker.includes('password')) return 'password';
  if (marker.includes('email')) return 'email';
  if (marker.includes('phone')) return 'tel';
  return 'text';
}

const UpdateUser = () => {
  const [user, setUser] = useState<IUserEntity | null>(null);
  const [values, setValues] = useState<Record<string, string>>({});
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMsg, setErrorMsg] = useState('');

  // Pre-filled credentials (substituted at runtime from your settings)
  const emailReg = 'your-email';
  const passwordReg = 'your-password';

  // 3. Build authData and sign in
  useEffect(() => {
    const authData = [
      { marker: 'email_reg', value: emailReg },
      { marker: 'password_reg', value: passwordReg },
    ];
    AuthProvider.auth('email', { authData })
      // 4. Get the current user to pre-fill the form
      .then((auth) => {
        if ('statusCode' in auth) throw new Error(auth.message);
        return Users.getUser();
      })
      .then((data: any) => {
        if ('statusCode' in data) {
          setErrorMsg(data.message);
          setStatus('error');
          return;
        }
        setUser(data);
        const initial: Record<string, string> = {};
        (Array.isArray(data?.formData) ? data.formData : []).forEach((d: any) => {
          initial[d.marker] = displayValue(d.value);
        });
        setValues(initial);

        console.log('User ', data);
      })
      .catch((err: Error) => {
        setErrorMsg(err.message);
        setStatus('error');
      });
  }, []);

  if (status === 'error' && !user) return <p role="alert">{errorMsg}</p>;
  if (!user) return <div>Loading...</div>;

  const fields = Array.isArray(user.formData) ? user.formData : [];

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    setStatus('loading');
    setErrorMsg('');

    // 5. Update the user
    const formData = fields.map((d: any) => ({
      marker: d.marker,
      type: d.type,
      value: prepareValue(d.type, values[d.marker] ?? displayValue(d.value)),
    }));
    // notificationData is left out: it replaces the stored object,
    // including the FCM tokens in phonePush.
    const body = {
      formIdentifier: 'reg',
      formData,
    };
    const result = await Users.updateUser(body);
    if (result !== true) {
      setErrorMsg(typeof result === 'object' ? result.message : 'Update failed');
      setStatus('error');
      return;
    }

    // 6. Get the updated user
    const userData = await Users.getUser();
    if ('statusCode' in userData) {
      setErrorMsg(userData.message);
      setStatus('error');
      return;
    }
    setUser(userData);

    console.log({ result, userData });
    setStatus('success');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Update profile</h2>

      {fields.map((field: any) => {
        const value = values[field.marker] ?? '';
        const onChange = (val: string) =>
          setValues((prev) => ({ ...prev, [field.marker]: val }));

        return (
          <div key={field.marker}>
            <label htmlFor={field.marker}>{field.marker}</label>
            <input
              id={field.marker}
              type={inputTypeFor(field.marker)}
              value={value}
              onChange={(e: { target: { value: string } }) => onChange(e.target.value)}
            />
          </div>
        );
      })}

      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Saving...' : 'Save'}
      </button>

      {status === 'error' && <p role="alert">{errorMsg}</p>}
      {status === 'success' && <p role="status">User updated!</p>}
    </form>
  );
};

export default UpdateUser;