1 changed files with 41 additions and 67 deletions
Unified View
Diff Options
-
+41 -67src/Feed.jsx
+ 41
- 67
src/Feed.jsx
View File
| @@ -1,7 +1,7 @@ | |||||
| import React from 'react'; | import React, {useState, useEffect} from 'react'; | ||||
| function PhoneSymbol(props) { | function PhoneSymbol(props) { | ||||
| if (props.incoming) { | if (props.inbound) { | ||||
| return ( | return ( | ||||
| <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi | <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi | ||||
| bi-telephone-inbound-fill in-phone" fill="currentColor" | bi-telephone-inbound-fill in-phone" fill="currentColor" | ||||
| @@ -62,73 +62,47 @@ function Seperator(props) { | |||||
| // The component used for retrieving, sorting, and rendering calls. | // The component used for retrieving, sorting, and rendering calls. | ||||
| function Feed() { | 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 = [ | const [ stack, setStack ] = useState(null) | ||||
| {number: 4169932232, time: [ | useEffect(() => { | ||||
| new Date(2021, 10, 19, 8, 21), | fetch('https://aircall-job.herokuapp.com/activities').then(response => { | ||||
| new Date(2021, 10, 19, 7), | return response.json() | ||||
| new Date(2021, 10, 19, 4, 44) | }).then(data => { | ||||
| ], | setStack(data) | ||||
| length: [5, 15, 12], incoming: true, name: "John McNiel",}, | }) | ||||
| }, []) | |||||
| {number: 3135553298, time: [ | let entries | ||||
| new Date(2021, 10, 18, 21, 41), | if (stack) { | ||||
| new Date(2021, 10, 18, 20, 0), | entries = stack.map((entry, index) => { | ||||
| ], | if (entry.is_archived) { | ||||
| length: [11, 21], incoming: false, name: "Peter Turcot"}, | return null | ||||
| } | |||||
| {number: 6139928847, time: [ | return ( | ||||
| new Date(2021, 10, 18, 21, 51), | <li key={entry.id}> | ||||
| new Date(2021, 10, 18, 19, 10, 0), | <h4>{entry.direction == 'inbound' ? entry.from : entry.to} | ||||
| new Date(2021, 10, 18, 16, 8) | <PhoneSymbol inbound={entry.direction == 'inbound'}> | ||||
| ], | </PhoneSymbol> | ||||
| length: [5, 15, 12], incoming: true, name: null}, | </h4> | ||||
| <small>{(new Date(entry.created_at).toLocaleTimeString([], | |||||
| {number: 6136643277, time: [ | {hour: '2-digit', minute: '2-digit'}))} - {entry.call_type} | ||||
| new Date(2021, 10, 18, 7, 51), | </small> | ||||
| ], | <DetailSymbol></DetailSymbol> | ||||
| length: [0], | </li> | ||||
| 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> | |||||
| ) | |||||
| }) | |||||
| return ( | return ( | ||||
| // A call length of 0 is a missed or unanswered call | |||||
| <ul className="calls"> | <ul className="calls"> | ||||
| {entries} | {entries} | ||||
| </ul> | </ul> | ||||