diff --git a/README.md b/README.md index 60bc4e4..4253d88 100755 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ - Give call entries shine and box shadow. Maybe color them by type - Add entry transition animation - Add favicon +- Seperator could be added by putting li renderer in a seperate function from + Feed ## Summary diff --git a/src/App.jsx b/src/App.jsx index 0a0c85a..6f20048 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,20 +4,24 @@ 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'; +import Call from './Call.jsx'; const App = () => { const [recent, setRecent] = useState(true) + const [call, setCall] = useState() + + let focus = <Feed recent={recent} onSelect={ (c) => setCall(c) }/> + if (call) { + focus = <Call/> + } + return ( <div className='container'> <Header/> <Navigator onPageChange={ (r) => setRecent(r) } recent={recent}/> <div className="container-view"> - {recent - ? <Feed/> - : <Archive/> - } + {focus} </div> </div> ); diff --git a/src/Archive.jsx b/src/Archive.jsx new file mode 100644 index 0000000..672f68f --- /dev/null +++ b/src/Archive.jsx @@ -0,0 +1,3 @@ +import React, {useState, useEffect} from 'react'; + + diff --git a/src/Feed.jsx b/src/Feed.jsx index 5a8bd08..028589d 100644 --- a/src/Feed.jsx +++ b/src/Feed.jsx @@ -61,7 +61,7 @@ function Seperator(props) { } // The component used for retrieving, sorting, and rendering calls. -function Feed() { +function Feed(props) { const [ stack, setStack ] = useState(null) @@ -78,7 +78,9 @@ function Feed() { if (stack) { entries = stack.map((entry, index) => { - if (entry.is_archived) { + // Check if current page matches entry type + + if (entry.is_archived == props.recent) { return null } diff --git a/src/Navigator.jsx b/src/Navigator.jsx new file mode 100644 index 0000000..84aef46 --- /dev/null +++ b/src/Navigator.jsx @@ -0,0 +1,18 @@ +import React, {useState, useEffect} from 'react'; + +function Navigator(props) { + let recent = "recent" + (props.recent ? " selected" : '') + let archived = "archived" + (props.recent ? "" : " selected") + return ( + <nav> + <button onClick={() => props.onPageChange(true)} + className={recent}>Recent + </button> + <button onClick={() => props.onPageChange(false)} + className={archived}>Archived + </button> + </nav> + ) +} + +export default Navigator