اذهب إلى المحتوى

السؤال

نشر

انا اعمل علي تطوير موقع الذي بعد انهائه ساخذ الشهاده.

انا خلصت الموقع كله بس في خاصيه مش عارف اضيفها هيا ان لما ال user يضغط علي ال like button يضيف like ولما يضغط تاني يمسح ال like

انا عملته في ال backend عملت 2 endpoints واحده /like والتانيه /unlike وهما شغالين تمام بس المشكله في ال front end.
ممكن مساعده علشان بقالي اكتر من يوم بحاول ومش عارف

Recommended Posts

  • 0
نشر

هذا مثال على كيفية القيام بذلك في react :

import React, { useState } from 'react';

function LikeButton() {
  // استخدام useState لتتبع حالة الإعجاب
  const [liked, setLiked] = useState(false);

  // دالة للتعامل مع النقر على الزر
  const handleLike = async () => {
    // إذا كان المستخدم قد قام بالإعجاب مسبقًا
    if (liked) {
      // قم بإلغاء الإعجاب عن طريق الاتصال بمسار /unlike في الخلفية
      await fetch('/unlike', { method: 'POST' });
    } else {
      // قم بالإعجاب عن طريق الاتصال بمسار /like في الخلفية
      await fetch('/like', { method: 'POST' });
    }
    // تحديث حالة الإعجاب
    setLiked(!liked);
  };

  return (
    // إنشاء زر وتعيين handleLike كدالة للتعامل مع النقر عليه
    <button onClick={handleLike}>
      {/* تغيير نص الزر استنادًا إلى حالة الإعجاب */}
      {liked ? 'Unlike' : 'Like'}
    </button>
  );
}

 

  • 0
نشر

أولاً عليك بنشاء ملف تحكم (Controller) أو ملف خدمة (Service) في مجلد pages/api بمشروع Next.js واسمه يمكن أن يكون likes.ts.

ثم كتابة دالتين للطلبات POST واحدة لإضافة الـ "like" والأخرى لإزالته، وإليك المثال التالي لملف likes.ts:

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { like } = req.body;

    if (like) {
      // إضافة "like" بناءً على قيمة `like`
      // انفذ الكود الخاص بإضافة "like" هنا
      res.status(200).json({ message: 'تمت إضافة الـ "like" بنجاح' });
    } else {
      // إزالة "like" بناءً على قيمة `like`
      // انفذ الكود الخاص بإزالة "like" هنا
      res.status(200).json({ message: 'تمت إزالة الـ "like" بنجاح' });
    }
  } else {
    res.status(405).json({ message: 'الطلب غير مدعوم' });
  }
}

وفي صفحتك التي تحتوي على زر الـ "like"، قم بإضافة حالة لتتبع حالة الـ "like" وإجراء طلب POST بناءً على الحالة.

مثال:

import { useState } from 'react';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);

  const handleLike = () => {
    fetch('/api/likes', {
      method: 'POST',
      body: JSON.stringify({ like: !liked }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data.message);
        setLiked(!liked);
      })
      .catch((error) => {
        console.error('حدث خطأ:', error);
      });
  };

  return (
    <button onClick={handleLike}>
      {liked ? 'إزالة الـ "like"' : 'إضافة الـ "like"'}
    </button>
  );
}

ثم تحديث ملفات الطرق (routes) في مشروع Next.js (مثل pages/index.tsx) لتضمين الزر الخاص بالـ "like" في الصفحة:

import LikeButton from '../components/LikeButton';

export default function HomePage() {
  return (
    <div>
      <h1>صفحة الموقع</h1>
      <LikeButton />
    </div>
  );
}
  • 0
نشر

بالطبع، يمكنني مساعدتك في إضافة خاصية الإعجاب (Like) إلى صفحتك الأمامية. هنا خطوات توضح كيفية القيام بذلك:

  • 1. قم بإنشاء زر Like في الواجهة الأمامية: أضف زرًا أو أي عنصر آخر (مثل رمز أيقونة) للتمثيل البصري لزر Like على صفحتك. يمكنك استخدام HTML و CSS لإنشاء الزر وتصميمه وتحديد العنصر الذي ستتفاعل معه.
  • قم بكتابة دالة في JavaScript للتفاعل مع زر Like: قم بإنشاء دالة في JavaScript تتفاعل مع زر Like عند النقر عليه. يمكنك استخدام AJAX أو Fetch API لإرسال طلب للخادم لتنفيذ الإجراء المطلوب (مثلاً إضافة Like أو إزالته).
  • ربط الزر مع الدالة: ربط الزر Like بالدالة التي قمت بكتابتها في الخطوة السابقة. يُمكنك القيام بذلك عن طريق إضافة حدث "onclick" إلى العنصر الذي يمثل الزر، وتعيينه ليستدعي الدالة التي تتفاعل مع الزر.
  • تحديث واجهة المستخدم عند النجاح: بعد استجابة الخادم بنجاح، قم بتحديث واجهة المستخدم لعرض التغييرات. على سبيل المثال، يمكنك تغيير رمز الزر أو الأيقونة بناءً على حالة الإعجاب (Like) الحالية.

هذه هي الخطوات العامة لإضافة خاصية الإعجاب (Like) إلى واجهة المستخدم الخاصة بك. قد يختلف التنفيذ بناءً على تفاصيل الواجهة الأمامية التي تستخدمها (مثل React أو Angular أو Vue.js) وكيفية تنظيم الكود الحالي.

  • 0
نشر

لإضافة نظام الـ like/unlike في Next.js باستخدام TypeScript، يمكنك استخدام الحالة (state) في React ودالة الـ useEffect() لجلب وحفظ حالة الـ like عند النقر على الزر.

في الصفحة التي تريد إضافة الخاصية فيها، يمكنك استخدام الحالة (state) باستخدام useState() وتحديثها عند النقر على الزر باستخدام دالة setState()، كما يلي:

import { useState, useEffect } from "react";

const Page = () => {
  // تحديد حالة الـ like بشكل افتراضي
  const [liked, setLiked] = useState(false);

  // دالة تنفذ عند النقر على الزر
  const handleLikeClick = async () => {
    // إذا كان الـ like مفعل، استخدام الـ endpoint /unlike
    if (liked) {
      const response = await fetch("/api/unlike", { method: "POST" });
      if (response.ok) {
        setLiked(false);
      }
    } else { // إذا كان الـ like غير مفعل، استخدام الـ endpoint /like
      const response = await fetch("/api/like", { method: "POST" });
      if (response.ok) {
        setLiked(true);
      }
    }
  };

  // استخدام دالة useEffect() لجلب حالة الـ like من الـ endpoint عند تحميل الصفحة
  useEffect(() => {
    const fetchLikeStatus = async () => {
      const response = await fetch("/api/like-status");
      if (response.ok) {
        const data = await response.json();
        setLiked(data.liked);
      }
    };

    fetchLikeStatus();
  }, []);

  return (
    <div>
      <button onClick={handleLikeClick}>{liked ? "Unlike" : "Like"}</button>
    </div>
  );
};

export default Page;

في هذا المثال، يتم استخدام الحالة (state) liked لتخزين حالة الـ like ويتم تحديثها عند النقر على الزر باستخدام دالة handleLikeClick() التي تقوم بإرسال طلب POST إلى الـ endpoint المناسب (like أو unlike) وتحديث حالة الـ like بناءً على الرد الذي تم استلامه.

يتم استخدام دالة useEffect() لجلب حالة الـ like من الـ endpoint "/api/like-status" عند تحميل الصفحة، ويتم تحديث حالة الـ like باستخدام دالة setLiked().

يمكنك تغيير المسار واسم الـ endpoint حسب احتياجاتك، وتأكد من إنشاء الملفات اللازمة في مجلد pages/api (مثل api/like.ts و api/unlike.ts) لتنفيذ الـ endpoints.

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...