Add page navigator

README.md

@@ -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
 
 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).

src/App.jsx

@@ -1,15 +1,23 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import ReactDOM from 'react-dom';
 
 import Header from './Header.jsx';
 import Feed from './Feed.jsx';
+import Navigator from './Navigator.jsx';
+import Archive from './Archive.jsx';
 
 const App = () => {
+	const [recent, setRecent] = useState(true)
   return (
     <div className='container'>
       <Header/>
+	  <Navigator onPageChange={ (r) => setRecent(r) }
+	  recent={recent}/>
       <div className="container-view">
-		<Feed></Feed>
+	  {recent
+		  ? <Feed/>
+		  : <Archive/>
+	  }
 	  </div>
     </div>
   );

src/css/app.css

@@ -24,6 +24,24 @@
   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 {
 	margin-top: 0;
 	margin-bottom: 5px;
@@ -33,7 +51,7 @@
 	display: block;
 	position: relative;
 	border: 2px solid lightgrey;
-	margin: 20px 0;
+	margin-bottom: 20px;
 	padding: 10px;
 	border-radius: 5px;
 }
@@ -67,7 +85,6 @@
 }
 
 .calls svg {
-	color: darkgrey;
 	display: inline-block;
 	margin-left: 10px;
 }
@@ -88,6 +105,9 @@
 	background: darkgrey;
 }
 
+.calls svg.in-phone, .calls svg.out-phone {
+	color: green;
+}
 .calls div.date {
 	color: darkgrey;
 	text-align: center;