Search and Display Charities - Free Will - Nonprofit Gifts - Full Stack - 12/8/21

/*
  SHAPE REFERENCE

  interface Charity {
 	id: number;
 	name: string;

   // "Environment", "Education", or "Health"
 	category: string;
 	
	// if prime featureship, show amongst "Suggested" programs.
	isPrimeFeatureship: boolean;
  }

	ex:
	{
		id: 10,
		name: "Derek Zoolander Center",
		category: "Education",
		isPrimeFeatureship: true
	}
*/

/**
	Given a list of charities, return items to display in grid.
	
	Criteria:
	- Should match the header's selected category; "Suggested" shows prime featureships.
	- Should narrow results with the search, case insensitive.
	- Should sort alphabetically.

	params:
	charities: Charity[] - list of all charities
	activeCategory: string - the selected category
	searchString: string - the entered search string
*/
function getGridItems(charities, activeCategory, searchString) {
	console.log('searchStrin ', searchString)
	let filterFunction; 
	switch (activeCategory) {
		case "Suggested":
			filterFunction = (charity) => {
				return charity.isPrimeFeatureship
			}
			break;
		default: 
			filterFunction = (charity) => {
				return activeCategory == charity.category
			}
			break;
	}
	
	const filterCharities = charities.filter(filterFunction)
	const filteredSearchCharities = filterCharities.filter((charity) => {
		return charity.name.toLowerCase().includes(searchString.toLowerCase());
	})
	
	console.log('filteredSearchCharities', filteredSearchCharities)
	const sortedCharities = filteredSearchCharities.sort((charity1, charity2) => {
		if (charity1.name < charity2.name) {
			return -1;
		} else if (charity1.name < charity2.name) {
			return 1; 
		}
		return 0;
		// return charity1.name - charity2.name; 
	});
	// console.log('filterCharities', filterCharities)

	// placeholder for visualization
	return sortedCharities;
}

// charities from server. consider this synchronous.
const allCharities = getSeedCharities();

const CharityView = () => {
	// [value, setValue(new_value)] = React.useState(initial_value)
	const [activeCategory, setActiveCategory] = React.useState("Suggested");
	const [searchString, setSearchString] = React.useState("");

	const gridItems = getGridItems(allCharities, activeCategory, searchString);

	return (
		<div className="main">
			<Header />
			<CharityGridControls
				activeCategory={activeCategory}
				setActiveCategory={setActiveCategory}
				searchString={searchString}
				setSearchString={setSearchString}
			/>
			<CharityGridBody
				charities={gridItems}
				activeCategory={activeCategory}
				// carousel only, ignore
				onLeftClick={null}
				onRightClick={null}
			/>
		</div>
	);
};

/**
	-- IGNORE THIS -- 
	
	Part Two: Parent / Child programs
	
	Let's introduce two additional properties to the Charity shape.
	
	The first will be included and pre-filled in the server response:
	
	----
	parentProgramId: number
	----
	
	This property indicates the parent program of the child program.
	(ex 'Columbia University' is the parent program of 'Columbia School of Music')
	
	Only child programs will have this property defined.
	The parentProgramId will match the id of the parent charity.
	
	Ex:
	PARENT
	{
		(...)
		id: 10,
	}

	CHILD
	{
		(...)
		id: 11,
		parentProgramId: 10,
	}
	
	
	The second new property is:
	
	----
	childProgramCount: number
	----
	
	This indicates the number of child programs a program has.
	
	ex:
	{
		(...)
		id: 10,
		childProgramCount: 1,
	}
	
	This is NOT provided in the server response. Instead, modify your result from part 1 to:
	
	1. implement this childProgram count
	2. hide all child programs from the grid
	
*/

/**
	-- IGNORE THIS --
	
	Implement the carousel view.
	
	Requirements:
	
	- Shows up to 3 programs at a time.
	
	- Clicking a left/right control "skips" to a new set of 3 programs
	
	- The carousel should jump from the front to the back of the array if the user hits "left" from the first set, and vice versa for hitting "right" from the end.
		
		ex: 1, 2, 3 [LEFT] 13, 14, 15
		ex: 25, 26 [RIGHT] 1, 2, 3 
	
	<CharityGridBody /> above has two callback props for their respective arrows:
	
	onLeftClick
	onRightClick
*/