create-article-groups.js

// Assumptions made: 1. Every article document has a category field

const articlesCollection = [
	{
		id: '1',
		article:
			'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facili laborum tenetur tempora',
		topic: 'Education',
	},
	{
		id: '2',
		article: 'adipisicing elit. Facili laborum tenetur tempora',
		topic: 'Adventure',
	},
	{
		id: '3',
		article: 'Facili laborum tenetur tempora',
		topic: 'Career and Finance',
	},
	{
		id: '4',
		article: ' oluptatibus placeat blanditiis saepe, id officiis',
		topic: 'Relationships',
	},
	{
		id: '5',
		article:
			'Lorem ipsum dolor soluptatibus placeat blanditiis saepe, id officiisur tempora',
		topic: 'Relationships',
	},
	{
		id: '6',
		article:
			'Lorem ipsum oluptatibus placeat blanditiis saepe, id officiispora',
		topic: 'Adventure',
	},
	{
		id: '7',
		article: 'Lorem ipsum dolor orum tenetur tempora',
		topic: 'Education',
	},
];

// Method 1
const groupByTopic = () => {
	const articlesByTopics = {};
	for (const article of articlesCollection) {
		if (!articlesByTopics[article.topic]) {
			//if this key doesn't exist on the object. Create it and initialize it with the current topic. it will hold all articles of this topic
			articlesByTopics[article.topic] = [article];
		} else {
			// If it exists, it is added to the right topic depending on its topic field
			articlesByTopics[article.topic].push(article);
		}
	}

	return articlesByTopics;
};

// Method 2
const groupByTopic2 = () => {
	return articlesCollection.reduce((acc, curr) => {
		if (!acc[curr.topic]) {
			//if this key doesn't exist on the acc object. Create it and initialize it with the current object
			acc[curr.topic] = [curr];
			return acc;
		}

		// This part will run when the topic exists in our accumulated values, so we just push the new topic
		acc[curr.topic].push(curr);
		return acc; //we always need to return our accumulated value
	}, {});
};
console.log(groupByTopic());
console.log(groupByTopic2());

//Expected Output

/* {
    Relationships: [ {...}, {...} ],
    'Career and finance': [ {...}, {...} ],
    'Education': [ {...}, {...} ],
}

*/



// ______________ React App__________________
// CarouselTopics.js
import React, { useState } from 'react';
const [articleGroups, setArticleGroups] = useState();

const CarouselTopics = () => {
	useEffect(() => {
		const data = groupByTopic2();
		setArticleGroups(data);
	}, []);

	// Get all the keys in an object as an Array
	const topics = Object.keys(data);

	// Displays a list of carousels with the topics in them 😄😄
	// E.g Lifestyles or career
	//  Get all the articles from our articleGroups object relating to this topic and pass them as props to ArticleListCarousel
	const markup = topics.map((topic) => (
		<ArticleListCarousel articles={articleGroups[topic]} />
	));

	return <div className="articles-page">{markup}</div>;
};

//__________ArticleListCarousel.js__________________
import React from 'react';

// Displays a list of articles on a single topic
const ArticleListCarousel = (props) => (
	<div className="carousel-container">
		<h1 className="topic-title">{props.topic}</h1>{' '}
		<div className="row articles">
			{props.articles.map((article) => (
				<ArticleCard article={article} />
			))}
		</div>
	</div>
);

//_________________ArticleCard.js__________________
import React from 'react';

// Displays a single article
const ArticleCard = (props) => (
	<div className="carousel-container">
		<h1 className="topic-title">{props.topic}</h1>{' '}
		<div className="article card shadow ">{props.article}</div>
	</div>
);