React-Nav-Melon/components/organisms/Sections/CategorySection.js

import {StyleSheet, Text, View, ScrollView} from 'react-native';
import React, {useEffect} from 'react';
import fonts from '../../../theme/fonts';
import colors from '../../../theme/colors';
import {ToggleButton} from 'react-native-paper';
import SectionHeader from '../Headers/SectionHeader';
import HorizontalNewsCardVariant from '../Cards/HorizontalNewsCardVariant';
import {
  CATEGORY_URL,
  ARTICLE_URL,
  PAGINATE_BY,
} from '../../../utils/Constants/constants';
import {useConstructor} from '../../../utils/Constants/functions';

// * API Handling

const CategorySection = () => {
  const [news, setNews] = React.useState({all: []});
  const updateNewsByCategories = (key, value) => {
    setNews(prevObject => ({
      ...prevObject,
      [key]: value,
    }));
  };

  const [categoryValue, setCategoryValue] = React.useState('');
  const [categories, setCategories] = React.useState([]);
  const fetchCategories = () => {
    fetch(`http://www.newscout.in/api/v1/menus/?domain=newscout`)
      .then(res => res.json())
      .then(json => {
        let categoriesHeading = json.body.results.map(
          item => item.heading.name,
        );
        setCategories(categoriesHeading);
        setNews({});
        setNews(
          categoriesHeading.reduce(
            (result, key) => ({...result, [key]: []}),
            {},
          ),
        ),
          setCategoryValue(categoriesHeading[0]);
        return categoriesHeading;
      })
      .then(cats => {
        cats.forEach(cat => {
          fetchNews(cat);
        });
        return cats;
      })
      .catch(err => console.log(err))
      .finally(() => console.log('Fetch Categories Executed'));
  };

  const fetchNews = category => {
    fetch(
      `http://www.newscout.in/api/v1/article/search/?domain=newscout&category=${category}`,
    )
      .then(res => res.json())
      .then(data => {
        const newsDataFetch = data.body.results;
        const finalNewsData = newsDataFetch
          .slice(0, PAGINATE_BY)
          .map(article => ({
            headline: article.title,
            image: {uri: article.cover_image},
            category: article.category,
            root_category: article.root_category,
            timestamp: article.published_on,
            tagline: 'Bruh Momento Oi Lorem Ipsum di rubi rabbi',
            id: article.id,
          }));
        updateNewsByCategories(category, finalNewsData);
        // categories.forEach((category) => {setNews((prev) => ({...prev,[category]:json.body.results}))})
        return finalNewsData;
      })
      .catch(err => console.log(err))
      .finally(() => console.log('Fetch Category News Executed'));
  };

  useConstructor(() => {
    const cat_data = fetchCategories();
    //console.log(`construct ${categories}`)
    // for (let category in cat_data) {
    //     updateNewsByCategories(category,fetchNews(category))

    // }
  });

  // useEffect(() => {
  //     for (let category in cat_data) {
  //         fetchNews(category)

  //     }
  // })

  return (
    <View style={styles.categoriesContainer}>
      <SectionHeader label={'Categories'} />
      <View style={styles.categoriesPillContainer}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          <ToggleButton.Group
            onValueChange={value => {
              setCategoryValue(value);
            }}>
            {categories.map(category => (
              <ToggleButton
                key={category}
                icon={() => (
                  <Text
                    style={[
                      category === categoryValue
                        ? styles.selectedPillText
                        : styles.pillText,
                    ]}>
                    {category}
                  </Text>
                )}
                style={[
                  category === categoryValue
                    ? styles.selectedContainer
                    : styles.container,
                  {marginHorizontal: fonts.getSize(4)},
                ]}
                value={category}
              />
            ))}
          </ToggleButton.Group>
        </ScrollView>
      </View>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.categoriesNewsContainer}>
          {news[categoryValue] !== undefined ? (
            news[categoryValue].map(item => (
              <HorizontalNewsCardVariant
                headline={item.headline}
                image={item.image}
                timestamp={item.timestamp}
                tagline={item.tagline}
              />
            ))
          ) : (
            <Text> News Not Present</Text>
          )}
        </View>
      </ScrollView>
    </View>
  );
};

export default CategorySection;

const styles = StyleSheet.create({
  categoriesTitle: {
    flexDirection: 'row',
    paddingTop: fonts.getSize(20),
    paddingHorizontal: fonts.getSize(20),
  },
  categoriesTitleText: {
    flex: 1,
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(16),
    color: colors.black,
  },
  categoriesPillContainer: {
    paddingBottom: fonts.getSize(8),
    flexDirection: 'row',
    alignItems: 'space-between',
    paddingHorizontal: fonts.getSize(16),
  },
  container: {
    borderRadius: fonts.getSize(18),
    paddingVertical: fonts.getSize(8),
    paddingHorizontal: fonts.getSize(16),
    backgroundColor: colors.white,
    width: 'auto',
  },
  selectedContainer: {
    paddingVertical: fonts.getSize(8),
    paddingHorizontal: fonts.getSize(16),
    backgroundColor: colors.topVariantColor,
    borderRadius: fonts.getSize(18),
    width: 'auto',
  },
  selectedPillText: {
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(12),
    color: colors.white,
  },
  pillText: {
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(12),
    color: colors.quaternaryColor,
  },
  categoriesNewsContainer: {
    paddingHorizontal: fonts.getSize(16),
    paddingTop: fonts.getSize(10),
    gap: 8,
  },
});