Mern Social Network الجزء التاسع والأخير

فهاد الجزء التاسع والاخير من Mern Social Network غادي نزيدو الإمكانية ديال متابعة وإلغاء متابعة المستخدمين ولي هي آخر حاجة بقاتنا فانا مشرحتش بزاف ديال الأمور لي ممكن تجبرها فالدورة لي بالفيديو وأيضا الأساسيات لأن من المفترض أنه تكون عندك la base ف react js , node js , express js و mongodb.

نظرة سريعة بالفيديو


1- إضافة ل component FollowComponent


ف dossier components زيد fichier FollowComponent.js لي فيه غادي يتعرضوا كل المستخدمين لي متبعهم مستخدم معين والعكس صحيح أي لي كيتبعوه هو.

الكود ديال الملف هو :

                                    
                                        import React from "react";
import { useHistory } from "react-router-dom";

export default function FollowComponent({ data }) {
  const history = useHistory();

  return (
    <div className="row my-4">
      <div className="col-md-8 mx-auto p-2">
        <div className="row">
          {data && data.length > 0 ? (
            data.map((user) => (
              <div
                style={{ cursor: "pointer" }}
                className="col-md-3"
                key={user._id}
                onClick={() => history.push(`/user/${user._id}`)}
              >
                <img
                  src={`http://localhost:8888/api/user/photo/${user._id}`}
                  width="50"
                  height="50"
                  className="img-fluid rounded pr-2"
                  alt={user.name}
                />
                <h4 className="mt-3">{user && user.name}</h4>
              </div>
            ))
          ) : (
            <div className="alert alert-info" role="alert">
              <h4 className="alert-heading">Aucune donnée</h4>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
                                    
                                

2- إضافة ل component FollowButton


ف dossier components زيد fichier FollowButton.js لي فيه غادي يكونوا les boutons لي كيمكنوا من متابعة أو إلغاء متابعة شخص.

الكود ديال الملف هو :

                                    
                                        import React from "react";
import { subscribe, unsubscribe } from "../redux/actions/userActions";

export default function FollowButton({
  hanldeButtonClick,
  following,
  userId,
  token,
  followId,
}) {
  async function followUser() {
    const userData = await subscribe(userId, followId, token);
    if (userData.error) {
      console.log(userData.error);
    } else {
      hanldeButtonClick(userData.data);
    }
  }

  async function unfollowUser() {
    const userData = await unsubscribe(userId, followId, token);
    if (userData.error) {
      console.log(userData.error);
    } else {
      hanldeButtonClick(userData.data);
    }
  }

  return (
    <div className="row my-4">
      <div className="col-md-4 ml-auto">
        {following ? (
          <button className="btn btn-danger" onClick={() => unfollowUser()}>
            Se désabonner
          </button>
        ) : (
          <button className="btn btn-primary" onClick={() => followUser()}>
            Suivre
          </button>
        )}
      </div>
    </div>
  );
}
                                    
                                

كلمات مفاتيح :