From 94dbecc4fad09393e17adf9209b5aff4e971e76a Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Fri, 22 Oct 2021 17:31:36 -0400
Subject: [PATCH] Add page navigator

---
 README.md       | 13 +++++++++++++
 src/App.jsx     | 12 ++++++++++--
 src/css/app.css | 24 ++++++++++++++++++++++--
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index f242893..60bc4e4 100755
--- a/README.md
+++ b/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).
diff --git a/src/App.jsx b/src/App.jsx
index f5927e4..0a0c85a 100755
--- a/src/App.jsx
+++ b/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>
   );
diff --git a/src/css/app.css b/src/css/app.css
index 3414456..180928f 100755
--- a/src/css/app.css
+++ b/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;