@@ -1,3 +1,16 @@ | |||||
## Notes | |||||
- The app is deployed to test.onyeka.ca | |||||
- I updated react and other packages because 16.7 was being used, and hooks are | |||||
now the simplified method of managing state in react. | |||||
### TODO | |||||
- Add date seperators to calls | |||||
- Sort calls by descending dates | |||||
- Add missed and voicemail icons to represent status | |||||
- Give call entries shine and box shadow. Maybe color them by type | |||||
- Add entry transition animation | |||||
- Add favicon | |||||
## Summary | ## Summary | ||||
The goal of this test is to make you code a small ReactJS app. We have prepared a skeleton app for you, but please change whatever you want (CSS files, HTML structure, JS structure, etc). | The goal of this test is to make you code a small ReactJS app. We have prepared a skeleton app for you, but please change whatever you want (CSS files, HTML structure, JS structure, etc). | ||||
@@ -1,15 +1,23 @@ | |||||
import React from 'react'; | |||||
import React, {useState, useEffect} from 'react'; | |||||
import ReactDOM from 'react-dom'; | import ReactDOM from 'react-dom'; | ||||
import Header from './Header.jsx'; | import Header from './Header.jsx'; | ||||
import Feed from './Feed.jsx'; | import Feed from './Feed.jsx'; | ||||
import Navigator from './Navigator.jsx'; | |||||
import Archive from './Archive.jsx'; | |||||
const App = () => { | const App = () => { | ||||
const [recent, setRecent] = useState(true) | |||||
return ( | return ( | ||||
<div className='container'> | <div className='container'> | ||||
<Header/> | <Header/> | ||||
<Navigator onPageChange={ (r) => setRecent(r) } | |||||
recent={recent}/> | |||||
<div className="container-view"> | <div className="container-view"> | ||||
<Feed></Feed> | |||||
{recent | |||||
? <Feed/> | |||||
: <Archive/> | |||||
} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -24,6 +24,24 @@ | |||||
padding: 20px; | padding: 20px; | ||||
} | } | ||||
#app nav { | |||||
display: flex; | |||||
flex-flow: wrap; | |||||
justify-content: center; | |||||
gap: 40px; | |||||
margin-top: 20px; | |||||
} | |||||
#app nav button { | |||||
width: 8em;; | |||||
background: white; | |||||
border: none; | |||||
} | |||||
#app nav button.selected { | |||||
border-bottom: 2px solid green; | |||||
} | |||||
.calls h4 { | .calls h4 { | ||||
margin-top: 0; | margin-top: 0; | ||||
margin-bottom: 5px; | margin-bottom: 5px; | ||||
@@ -33,7 +51,7 @@ | |||||
display: block; | display: block; | ||||
position: relative; | position: relative; | ||||
border: 2px solid lightgrey; | border: 2px solid lightgrey; | ||||
margin: 20px 0; | |||||
margin-bottom: 20px; | |||||
padding: 10px; | padding: 10px; | ||||
border-radius: 5px; | border-radius: 5px; | ||||
} | } | ||||
@@ -67,7 +85,6 @@ | |||||
} | } | ||||
.calls svg { | .calls svg { | ||||
color: darkgrey; | |||||
display: inline-block; | display: inline-block; | ||||
margin-left: 10px; | margin-left: 10px; | ||||
} | } | ||||
@@ -88,6 +105,9 @@ | |||||
background: darkgrey; | background: darkgrey; | ||||
} | } | ||||
.calls svg.in-phone, .calls svg.out-phone { | |||||
color: green; | |||||
} | |||||
.calls div.date { | .calls div.date { | ||||
color: darkgrey; | color: darkgrey; | ||||
text-align: center; | text-align: center; | ||||