Untitled

import React from "react";
import "./clubs.css";
import { shuffleArray, getRandomElements } from "../../common/util.js";
import { getAllVenues } from "../../Network/ApiAxios";
import { useState, useEffect, useCallback } from "react";
import { getOrg } from "../../Network/ApiAxios";
import { useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
import { getOrgsByCountry, getEventsByCountry } from "../../Network/ApiAxios";
import { useQuery } from "react-query";

const Clubs = (props) => {
  const { cityName } = useParams();
  const navigate = useNavigate();

  const [orgs, setOrgs] = useState([]);
  const [events, setEvents] = useState([]);

  const { data: orgsData, status: orgsStatus } = useQuery("orgs", () =>
    orgsByCountry(cityName)
  );
  const { data: eventsData, status: eventsStatus } = useQuery("events", () =>
    eventsByCountry(cityName)
  );
  const defaultArray = [1, 2, 3, 4];

  const eventsByCountry = useCallback(
    async (country) => {
      const response = await getEventsByCountry(country);
      const { data, status } = response;
      if (status === 200) {
        return data;
      }
      return null;
    },
    [cityName]
  );
  const orgsByCountry = useCallback(
    async (country) => {
      const response = await getOrgsByCountry(country);
      const { data, status } = response;
      if (status === 200) {
        console.log(data);
        return data;
      }
      return null;
    },
    [cityName]
  );
  useEffect(() => {
    const fetchData = async () => {
      const data = await orgsByCountry(cityName);
      const dataEvent = await eventsByCountry(cityName);

      if (data) {
        setOrgs(data);
      }
      if (dataEvent) {
        setEvents(dataEvent);
      }
    };
    fetchData();
  }, [cityName, orgsByCountry, eventsByCountry]);

  return (
    <div
      className="clubs"
      onClick={() => {
        console.log(eventsStatus);
        console.log(orgsStatus);
        console.log("ssss");
        console.log(getRandomElements(orgsData));
        console.log(orgsData);
        console.log("ssss");
      }}
    >
      <div>
        {orgs.length > 0 && <h2 className="clubs__title props__name">Clubs</h2>}
      </div>
      <div className="clubs__item">
        {orgsData && eventsData ? (
          getRandomElements(orgsData).map(
            ({ orgID, name, logoImageUrl }, index) => {
              return (
                <div
                  className="clubs__card"
                  key={orgID}
                  onClick={() => {
                    navigate(`clubs/${orgID}`);
                  }}
                >
                  <div className={`clubs__item--${index}`}>
                    <div
                      className="clubs__image"
                      style={{ backgroundImage: `url(${logoImageUrl})` }}
                    ></div>
                  </div>
                  <div className="clubs__item--text">
                    <h3>{name}</h3>
                  </div>
                </div>
              );
            }
          )
        ) : events.length <= 0 &&
          orgsStatus === "success" &&
          eventsStatus === "success" ? (
          <div></div>
        ) : (
          <div className="clubs__item">
            {defaultArray.map((index) => {
              return (
                <div className="clubs__card">
                  <div className={`clubs__item--${index}`}>
                    <div className="clubs__image"></div>
                  </div>
                  <div className="clubs__item--text">
                    <h3>Loading..</h3>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
};

export default Clubs;