Add return and archiving to calls page

src/App.jsx

@@ -6,20 +6,43 @@ import Feed from './Feed.jsx';
 import Navigator from './Navigator.jsx';
 import Call from './Call.jsx';
 
+function fetchActivities(setStack) {
+	return fetch('https://aircall-job.herokuapp.com/activities')
+		.then(response => {
+		return response.json()
+	})
+}
+
+function fetchEntry(id) {
+	return fetch('https://aircall-job.herokuapp.com/activities/' + id)
+		.then(response => {
+		return response.json()
+	})
+}
+
 const App = () => {
 	const [recent, setRecent] = useState(true)
 	const [entry, setEntry] = useState()
+	const [ stack, setStack ] = useState(null)
+
+	useEffect(() => {
+		fetchActivities().then(data => {setStack(data)})
+	}, [])
 
-	let focus = <Feed recent={recent} onSelect={ (c) => setEntry(c) }/>
+	let focus = <Feed stack={stack} recent={recent} onSelect={ (c) => setEntry(c) }/>
 	if (entry) {
-		focus = <Call info={entry}/>
+		focus = <Call info={entry} onBack={() => setEntry(null)}
+		onUpdate={(e) => {
+			fetchEntry(e.id).then(data => setEntry(data))
+			fetchActivities().then(data => setStack(data))
+		}}/>
 	}
 
   return (
     <div className='container'>
 
       <Header/>
-	  <Navigator onPageChange={ (r) => setRecent(r) }
+	  <Navigator onPageChange={ (r) => {setEntry(null); setRecent(r)} }
 	  recent={recent}/>
 
       <div className="container-view">

src/Call.jsx

@@ -26,16 +26,34 @@ function ContactIcon() {
 	)
 }
 
-function BackIcon() {
+function BackIcon(props) {
 	return (
-<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-chevron-left"
-		fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path
-		fillRule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647
-		5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708
-		0z"/> </svg>
+<svg onClick={() => props.onClick()} width="1em" height="1em" viewBox="0 0 16
+		16" className="bi bi-chevron-left" fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"> <path fillRule="evenodd" d="M11.354
+		1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0
+		1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
 	)
 }
 
+// Function should be moved to parent component idealy
+function moveCall(call, update) {
+	fetch('https://aircall-job.herokuapp.com/activities/'
+		+ String(call.id),
+		{
+			method: 'POST',
+			headers: {'Content-Type': 'application/json',
+				'Accept': 'application/json'
+			},
+			body: JSON.stringify({'is_archived': !call.is_archived})
+		}
+	).then(response => {
+		if (response.ok) {
+			update(call)
+		}
+	})
+}
+
 function Call(props) {
 	return (
 		<div className="call">
@@ -63,7 +81,11 @@ function Call(props) {
 		</div>
 
 		<div className="call-nav">
-		<BackIcon/> <button>Archive</button>
+		<BackIcon onClick={() => props.onBack()}/>
+		<button onClick={() => moveCall(props.info, props.onUpdate)}>
+		{props.info.is_archived
+		? "Unarchive" : "Archive"}
+		</button>
 		</div>
 
 		</div>

src/Feed.jsx

@@ -63,19 +63,9 @@ function Seperator(props) {
 // The component used for retrieving, sorting, and rendering calls.
 function Feed(props) {
 	
-	const [ stack, setStack ] = useState(null)
-
-
-	useEffect(() => {
-		fetch('https://aircall-job.herokuapp.com/activities')
-			.then(response => {
-			return response.json()
-		}).then(data => {
-			setStack(data)
-		})
-	}, [])
-
+	const stack = props.stack
 	let entries
+
 	if (stack) {
 		entries = stack.map((entry, index) => {