Retrieve calls from the API

src/Feed.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 
 function PhoneSymbol(props) {
-	if (props.incoming) {
+	if (props.inbound) {
 		return (
 		<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi
 			bi-telephone-inbound-fill in-phone" fill="currentColor"
@@ -62,73 +62,47 @@ function Seperator(props) {
 
 // The component used for retrieving, sorting, and rendering calls.
 function Feed() {
-	// The function could first make an AJAX request for the list of calls over
-	// the last 14 days. Here, it would then sort the list by collapsing calls
-	// from the same caller within the day into a single entry in a stack. A
-	// sorted mock stack is used here for brevity.
 	
-	const stack = [
-			{number: 4169932232, time: [
-				new Date(2021, 10, 19, 8, 21),
-				new Date(2021, 10, 19, 7),
-				new Date(2021, 10, 19, 4, 44)
-				],
-				length: [5, 15, 12], incoming: true, name: "John McNiel",},
-
-			{number: 3135553298, time: [
-				new Date(2021, 10, 18, 21, 41),
-				new Date(2021, 10, 18, 20, 0),
-				],
-				length: [11, 21], incoming: false, name: "Peter Turcot"},
-
-			{number: 6139928847, time: [
-				new Date(2021, 10, 18, 21, 51),
-				new Date(2021, 10, 18, 19, 10, 0),
-				new Date(2021, 10, 18, 16, 8)
-				],
-				length: [5, 15, 12], incoming: true, name: null},
-
-			{number: 6136643277, time: [
-				new Date(2021, 10, 18, 7, 51), 
-				],
-				length: [0],
-				incoming: true, name: "John McNiel"},
-
-			{number: 6138899255, time: [
-				new Date(2021, 10, 16, 10, 33), 
-				new Date(2021, 10, 16, 16, 8)
-				],
-				length: [0, 7],
-				incoming: false, name: null},
-			{number: 4167753324, time: [
-				new Date(2021, 10, 18, 16, 51), 
-				new Date(2021, 10, 18, 16, 8)], length: [0, 0],
-				incoming: false, name: "Amy White"}
-		]
-
-	let dates = stack.map((entry) => {
-		return entry.time[0]
-	})
-
-	let entries = stack.map((entry, index) => {
-		return ( 
-			<React.Fragment>
-			<Seperator stack={stack} index={index}/>
-			<li key={index}>
-			<h4>{entry.name ? entry.name : entry.number}
-			<span>{entry.time.length}</span>
-			<PhoneSymbol incoming={entry.incoming}/>
-			</h4>
-			<small>{entry.time[0].toLocaleTimeString([],
-				{hour: '2-digit', minute: '2-digit'})}
-			</small>
-			<DetailSymbol></DetailSymbol>
-			</li>
-			</React.Fragment>
-		)
-	}) 
+	const [ stack, setStack ] = useState(null)
+
+
+	useEffect(() => {
+		fetch('https://aircall-job.herokuapp.com/activities').then(response => {
+			return response.json()
+		}).then(data => {
+			setStack(data)
+		})
+	}, [])
+
+	let entries
+	if (stack) {
+		entries = stack.map((entry, index) => {
+
+			if (entry.is_archived) {
+				return null
+			}
+
+			return (
+				<li key={entry.id}>
+
+				<h4>{entry.direction == 'inbound' ? entry.from : entry.to}
+				<PhoneSymbol inbound={entry.direction == 'inbound'}>
+				</PhoneSymbol>
+				</h4>
+
+				<small>{(new Date(entry.created_at).toLocaleTimeString([],
+					{hour: '2-digit', minute: '2-digit'}))} - {entry.call_type}
+				</small>
+
+				<DetailSymbol></DetailSymbol>
+
+				</li>
+			)
+		})
+
+	}
+
 	return (
-		// A call length of 0 is a missed or unanswered call
 	<ul className="calls">
 		{entries}
 	</ul>