Mern Social Network الجزء الرابع

فهاد الجزء الرابع من MERN social network غادي ندوزو ل frontend منبعد مازدنا ل backend فالأجزاء السابقة أول حاجة غادي نزيدو react app جديدة ومنبعد غادي نزيدو store ديالنا باش نخدموا ب redux.

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


1- إضافة redux store


أول حاجة غادي تزيد dossier جديد ف dossier ديال ل projet سميه client فيه غادي تزيد react app جديدة من بعد

غادي تزيد هاد les packages :

react-redux , redux , axios , redux-logger , redux-thunk

من بعد ف src غادي تزيد dossier جديد سميه redux فيه زيد fichier store.js لي غادي يكون هو store ديالنا.

الكود لي غادي تزيد هو :

                                    
                                        import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk";
import rootReducer from "../redux/reducers/rootReducer";

const middlewares = [thunk, logger];

const store = createStore(rootReducer, applyMiddleware(...middlewares));

export default store;
                                    
                                

2- إضافة ل post types


دائما ف dossier redux زيد dossier جديد سميه types فيه زيد fichier سميه postTypes.js فيه object لي كيجمع كاع types الخاصين بل post و لي غادي نحتاجو من بعد ف reducer.

الكود لي غادي تزيد هو :

                                    
                                        const postTypes = {
  GET_ALL: "GET_ALL",
  ADD_POST: "ADD_POST",
  REMOVE_POST: "REMOVE_POST",
  USER_POSTS: "USER_POSTS",
  LIKE_UNLIKE_POST: "LIKE_UNLIKE_POST",
  ADD_DELETE_COMMENT: "ADD_DELETE_COMMENT",
};

export default postTypes;
                                    
                                

3- إضافة ل user types


دائما ف dossier types زيد fichier سميه userTypes.js فيه object لي كيجمع كاع types الخاصين بل user و لي غادي نحتاجو من بعد ف reducer.

الكود لي غادي تزيد هو :

                                      
                                        const userTypes = {
  GET_USERS: "GET_USERS",
  AUTH: "AUTH",
  REGISTER: "REGISTER",
  CHECK_AUTH: "CHECK_AUTH",
  SIGNOUT: "SIGNOUT",
  UPDATE: "UPDATE",
  DELETE: "DELETE",
  FOLLOW: "FOLLOW",
  UNFOLLOW: "UNFOLLOW",
};

export default userTypes;
                                      
                                    

4- إضافة ل user actions


دائما ف dossier redux زيد dossier جديد سميه actions فيه زيد fichier سميه userActions.js فيه غادي يكونوا عندي كاع les fonctions لي عندهم علاقة بل user ولي كيمكنوه من التسجيل وتسجيل الدخول وتعديل البروفيل إلخ...

الكود لي غادي تزيد هو :

                                        
                                            import userTypes from "../types/userTypes";
import axios from "axios";
import { saveUserToLocalStorage, isLogged } from "../../helpers/auth";

export const getAllUsers = (token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .get("http://localhost:8888/api/users", config)
      .then((res) => {
        if (res.data.error) {
          dispatch({
            type: "USER_ERROR",
            payload: res.data.error,
          });
        } else {
          dispatch({
            type: userTypes.GET_USERS,
            payload: res.data,
          });
        }
      })
      .catch((err) => console.log(err));
  };
};

export const createUser = (user) => {
  return (dispatch) => {
    axios
      .post("http://localhost:8888/api/users/create", user)
      .then((res) => {
        if (res.data.error) {
          dispatch({
            type: "USER_ERROR",
            payload: res.data.error,
          });
        } else {
          dispatch({
            type: userTypes.REGISTER,
            payload: res.data,
          });
          console.log(res.data);
        }
      })
      .catch((err) => console.log(err));
  };
};

export const updateUser = (user, token, userId) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .put(`http://localhost:8888/api/users/${userId}`, user, config)
      .then((res) => {
        if (res.data.error) {
          dispatch({
            type: "USER_ERROR",
            payload: res.data.error,
          });
        } else {
          dispatch({
            type: userTypes.UPDATE,
            payload: res.data,
          });
          console.log(res.data);
        }
      })
      .catch((err) => console.log(err));
  };
};

export const login = (user) => {
  return (dispatch) => {
    axios
      .post("http://localhost:8888/api/auth/signin", user)
      .then((res) => {
        if (res.data.error) {
          dispatch({
            type: "USER_ERROR",
            payload: res.data.error,
          });
        } else {
          saveUserToLocalStorage(res.data);
          dispatch({
            type: userTypes.AUTH,
            payload: res.data,
          });
          console.log(res.data);
        }
      })
      .catch((err) => console.log(err));
  };
};

export const authCheck = () => {
  return (dispatch) => {
    dispatch({
      type: userTypes.CHECK_AUTH,
      payload: isLogged() ? isLogged() : null,
    });
  };
};

export const getUser = (userId, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return axios
    .get(`http://localhost:8888/api/user/${userId}`, config)
    .then((res) => {
      if (res.data.error) {
        return { error: res.data.error };
      } else {
        return { data: res.data };
      }
    })
    .catch((err) => console.log(err));
};

export const deleteUser = (userId, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .delete(`http://localhost:8888/api/users/${userId}`, config)
      .then((res) => {
        if (res.data.error) {
          dispatch({
            type: "USER_ERROR",
            payload: res.data.error,
          });
        } else {
          dispatch({
            type: userTypes.DELETE,
            payload: userId,
          });
          console.log(res.data);
        }
      })
      .catch((err) => console.log(err));
  };
};

export const subscribe = (userId, followId, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return axios
    .put(
      `http://localhost:8888/api/user/add/follow`,
      { userId, followId },
      config
    )
    .then((res) => {
      if (res.data.error) {
        return { error: res.data.error };
      } else {
        return { data: res.data };
      }
    })
    .catch((err) => console.log(err));
};

export const unsubscribe = (userId, followId, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return axios
    .put(
      `http://localhost:8888/api/user/remove/follow`,
      { userId, followId },
      config
    )
    .then((res) => {
      if (res.data.error) {
        return { error: res.data.error };
      } else {
        return { data: res.data };
      }
    })
    .catch((err) => console.log(err));
};
                                        
                                    

5- إضافة ل post actions


دائما ف dossier actions زيد fichier سميه postActions.js فيه غادي يكونوا عندي كاع les fonctions لي عندهم علاقة بل post ولي كيمكنوا من إضافة تعديل حذف الإعجاب ب post إلخ...

الكود لي غادي تزيد هو :

                                        
                                            import postTypes from "../types/postTypes";
import axios from "axios";

export const getUserPosts = (token, userId) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .get(`http://localhost:8888/api/posts/by/${userId}`, config)
      .then((res) => {
        dispatch({
          type: postTypes.USER_POSTS,
          payload: res.data,
        });
      })
      .catch((err) => console.log(err));
  };
};

export const getAllPosts = (token, userId) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .get(`http://localhost:8888/api/posts/${userId}`, config)
      .then((res) => {
        dispatch({
          type: postTypes.GET_ALL,
          payload: res.data,
        });
      })
      .catch((err) => console.log(err));
  };
};

export const addPost = (token, userId, post) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .post(`http://localhost:8888/api/post/create/${userId}`, post, config)
      .then((res) => {
        dispatch({
          type: postTypes.ADD_POST,
          payload: res.data,
        });
      })
      .catch((err) => console.log(err));
  };
};

export const likePost = (token, userId, postId) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .put(`http://localhost:8888/api/post/like`, { userId, postId }, config)
      .then((res) => {
        dispatch({
          type: postTypes.LIKE_UNLIKE_POST,
          payload: res.data,
          userId,
        });
      })
      .catch((err) => console.log(err));
  };
};

export const unlikePost = (token, userId, postId) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .put(`http://localhost:8888/api/post/unlike`, { userId, postId }, config)
      .then((res) => {
        dispatch({
          type: postTypes.LIKE_UNLIKE_POST,
          payload: res.data,
          userId,
        });
      })
      .catch((err) => console.log(err));
  };
};

export const addComment = (token, userId, postId, text) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .put(
        `http://localhost:8888/api/post/comment`,
        { userId, postId, text },
        config
      )
      .then((res) => {
        dispatch({
          type: postTypes.ADD_DELETE_COMMENT,
          payload: res.data,
          userId,
        });
      })
      .catch((err) => console.log(err));
  };
};

export const deleteComment = (token, userId, postId, comment) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .put(
        `http://localhost:8888/api/post/uncomment`,
        { userId, postId, comment },
        config
      )
      .then((res) => {
        dispatch({
          type: postTypes.ADD_DELETE_COMMENT,
          payload: res.data,
          userId,
        });
      })
      .catch((err) => console.log(err));
  };
};

export const deletePost = (token, postId) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  return (dispatch) => {
    axios
      .delete(`http://localhost:8888/api/post/${postId}`, config)
      .then((res) => {
        dispatch({
          type: postTypes.REMOVE_POST,
          payload: res.data,
        });
      })
      .catch((err) => console.log(err));
  };
};
                                        
                                    

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