Untitled

const SkillPicker = ({
  // feed,
  skillsTitle,
  learningSkills,
  tabs,
  type,
  callbackText,
  trendingSkills,
  callback
}) => {
  const [activeSkill, setActiveSkill] = useState(null);
  const [activeSkillId, setActiveSkillId] = useState(null);
  const [activeTab, setActiveTab] = useState(null);
  const [feed, setFeed] = useState([]);
  const [loading, setLoading] = useState(false);

  // update active skill when props changes
  useEffect(() => {
    if (learningSkills && learningSkills.length > 0) {
      setActiveSkill(learningSkills[0].skill);
      setActiveSkillId(learningSkills[0].skill.id);
    } else if (trendingSkills && trendingSkills.length > 0) {
      const skill = {
        id: trendingSkills[0].id,
        name: trendingSkills[0].name,
        category: trendingSkills[0].category
      };
      setActiveSkill(skill);
      setActiveSkillId(trendingSkills[0].id);
    }
  }, [learningSkills, trendingSkills]);

  // update active tab when props changes
  useEffect(() => {
    if (tabs) {
      setActiveTab(tabs[0]);
    }
  }, [tabs]);

  // fetch dashboard data
  const fetchDashboardData = async skill_id => {
    setLoading(true);
    const feed_data = await fetch(`/api/core/dashboard_data/${skill_id}`, {
      method: "GET"
    }).then(res => res.json());

    if (feed_data) {
      setFeed(feed_data.results);
      setLoading(false);
    }
  };

  // change skill
  const changeTrendSkill = skill => {
    const trendSkill = {
      id: skill?.id,
      name: skill?.name,
      category: skill?.category
    };
    setActiveSkill(trendSkill);
    setActiveSkillId(skill?.id);
  };
  const changeSkill = skill => {
    setActiveSkill(skill?.skill);
    setActiveSkillId(skill?.skill.id);
  };

  useEffect(() => {
    if (activeSkillId) {
      fetchDashboardData(activeSkillId);
    } else {
      fetchDashboardData(1);
    }
  }, [activeSkillId]);