Function Community

client/src/component/Community.jsx:20–954

(props)

import "../css/Community.css";

const Community = (props) => {
  const [loading, setLoading] = useState(true); // State to track loading
  const [project, setProject] = useState({
    id: "",
    etitle: "",
    edescription: "",
    egitHubLink: "",
    eyouTubeLink: "",
  });
  const [showVideo, setShowVideo] = useState(false);
  const refDetails = useRef(null);
  const ref = useRef(null);
  const context = useContext(projectContext);
  const { globalProjects, getGlobalProjects } = context;
  const userProfileContext = useContext(profileContext);
  // eslint-disable-next-line
  const { userProfile, getUserProfile } = userProfileContext;
  // eslint-disable-next-line
  const [image, setImage] = useState();

  // Fetch projects on component mount
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true); // Set loading to true before fetching
      await getGlobalProjects();
      setLoading(false); // Set loading to false after data is fetched
    };
    fetchData();
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (localStorage.getItem("token")) {
      getUserProfile();
    }
    // eslint-disable-next-line
  }, []);

  const showDetailProject = (currentProject) => {
    refDetails.current.click();
    setProject({
      id: currentProject._id,
      etitle: currentProject.title,
      edescription: currentProject.description,
      egitHubLink: currentProject.gitHubLink,
      eyouTubeLink: currentProject.youTubeLink,
    });
  };

  const handleVideoClose = () => {
    setShowVideo(false);
  };

  // Function to format date
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    const year = date.getFullYear().toString().slice(-2);
    const month = ("0" + (date.getMonth() + 1)).slice(-2);