My third accepted PR on Github hacktoberfest

Hello every, my name is Dustin. I'd like to talk about my experience of solving another issue on github that are labelled as hacktoberfest 2021.

Reasons

The reason behind why I chose this project was because I wanted try something that is more difficult than the first and second issues. So I chose a project that required me to do a bit of React and a bit of Firestore.

Third pull request

My third pull request was to me not simple but not really hard to deal with. The project is pretty much alike udemy but instead of paid courses, this project provides users with the option of choosing courses from youtube, save, enroll, and learn.

The project can be found here
My pull request can be found here

Detail

As this issue is quite large so I need to understand what is going on in this project and how project owner handles its flow. Project owner created a user collection containing another collection of enroll courses which was the one I needed to focus on. Because when a user enroll in a course, the details of the playlist will be saved in the database (video descriptions, watched,...). However, when the creator of that playlist adds a new video to that playlist on youtube, I had to figure a way to sync my database with that playlist on youtube. So I thought that when a user goes to watching page, I would make a comparison between the data in my database with youtube API, so that if the amount of videos in my database's less than the amount of videos on youtube API, I would CHOP the extra videos off of youtube API and CONCAT it with my data.

  const syncPlayList = useCallback(async () => {
    const youtubePlayList = await getVideos(playlistID);

    if (youtubePlayList.length > playlistData.videos.length) {
      // new videos are added to the playlist by creator
      const newVideos = youtubePlayList.slice(playlistData.videos.length);
      handleUpdateCourse(playlistID, uid, newVideos);

      // update dom
      getDataCB();
    }
  }, [getDataCB, playlistData, uid, playlistID]);

  useEffect(() => {
    if (playlistData && playlistID) {
      syncPlayList();
    }
  }, [playlistData, playlistID, syncPlayList]);

import { message } from "antd";
import { db } from "../firebase";
import firebase from "firebase";

const videos = [];
const handleUpdateCourse = async (playListId, uid, newVideos) => {
  if (uid === "") {
    message.error("Not Logged In");
    return;
  }

  newVideos.forEach((item) => {
    videos.push({
      videoId: item.snippet.resourceId.videoId,
      watched: false,
      title: item.snippet.title,
      description: item.snippet.description,
    });
  });

  db.collection("users")
    .doc(uid)
    .collection("currentlyEnrolled")
    .doc(playListId)
    .update({
      videos: firebase.firestore.FieldValue.arrayUnion(...videos),
    });
  message.info("Update course successfully");
};

export default handleUpdateCourse;