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;