Start defining layers to decouple frontend logic from data fetch

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "evergreen-ui": "^6.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

src/domain/index.ts

@@ -0,0 +1,23 @@
+class Feed {
+  constructor(id: string, name: string, url: string) {
+    this.id = id;
+    this.name = name;
+    this.url = url;
+  };
+  id: string;
+  name: string;
+  url: string;
+}
+
+class FeedEntry {
+  constructor(id: string, feedId: string, content: string) {
+    this.id = id;
+    this.feedId = feedId;
+    this.content = content;
+  }
+  id: string;
+  feedId: string;
+  content: string;
+}
+
+export { Feed, FeedEntry }

src/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import './index.css';
-import App from './App';
+import Main from './presentation/main';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Main />
   </React.StrictMode>,
   document.getElementById('root')
 );

src/presentation/main/feed_reader.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Card, EmptyState, HandUpIcon, Pane, Text, Badge } from 'evergreen-ui';
+import { Feed } from '../../domain';
+import { FeedsService, FeedEntriesService } from '../../services';
+
+const service = new FeedsService.Fetch();
+const entryService = new FeedEntriesService.Fetch();
+
+const FeedList = (props: any) => {
+  const feeds = service.all();
+
+  return (
+    <Pane
+      width='20vw'
+      maxWidth='20vw'
+      alignItems='left'
+      display='flex'
+      flexDirection='column'
+      borderRight
+    >
+      {feeds.map((feed) => (
+        <Pane display='flex' flexDirection='row'>
+          <Pane flex={1} alignItems='left' display='flex' width='70vw'>
+            <Text onClick={() => props.selectFeed(feed)} cursor='pointer'>
+              {feed.name}
+            </Text>
+          </Pane>
+
+          <Pane>
+            <Badge color="neutral">0</Badge>
+          </Pane>
+        </Pane>
+      ))}
+    </Pane>
+  )
+};
+
+interface EntryListProps {
+  feedId?: string;
+}
+
+const EntryList = ({ feedId }: EntryListProps) => {
+  const entries = entryService.findBy({ feedId });
+
+  return (
+    <Pane width='80vw' alignItems='center' display='flex' height='auto'>
+      {entries.length === 0 ?
+        <EmptyState
+          background="light"
+          title="Yay! Looks like you've read all your feed!"
+          orientation="vertical"
+          icon={<HandUpIcon color="#C1C4D6" />}
+          iconBgColor="#EDEFF5"
+        /> :
+          entries.map((entry) => (
+            <Card>
+              {entry.content}
+            </Card>
+          ))}
+    </Pane>
+  )
+};
+
+const FeedReader = () => {
+  const [feed, setFeed] = useState<Feed | null>(null);
+
+  return (
+    <Pane
+      display='flex'
+      height='100vh'
+      flexDirection='row'
+      justifyContent='center'
+    >
+      <FeedList selectFeed={setFeed} />
+
+      <EntryList feedId={feed?.id} />
+    </Pane>
+  )
+};
+
+export default FeedReader;

src/presentation/main/index.tsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { Pane } from 'evergreen-ui'
+
+import NavBar from './nav_bar';
+import FeedReader from './feed_reader';
+
+class Main extends Component {
+  render() {
+    return (
+      <Pane
+        display='flex'
+        alignItems='left'
+        flexDirection='column'
+        justifyContent='center'
+        width='100%'
+      >
+        <NavBar />
+
+        <FeedReader />
+      </Pane>
+    );
+  }
+}
+
+export default Main;

src/presentation/main/nav_bar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Avatar, Pane, Text } from 'evergreen-ui';
+
+const NavBar = () => (
+  <Pane
+    display='flex'
+    width='100vw'
+    alignItems='center'
+    justifyContent='center'
+    flexDirection='row'
+    borderBottom
+    clearfix
+  >
+    <Pane flex={1} height={60} alignItems='center' display='flex'>
+      <Text>FTH</Text>
+    </Pane>
+
+    <Pane>
+      <Avatar name='Bruno Arueira' />
+    </Pane>
+  </Pane>
+)
+
+export default NavBar;

src/services/feed_entries_service/fetch.ts

@@ -0,0 +1,25 @@
+import { FeedEntry } from '../../domain';
+
+const entries = [
+  new FeedEntry('0', '0', 'Something'),
+  new FeedEntry('1', '0', 'Foo'),
+  new FeedEntry('2', '0', 'Bar'),
+  new FeedEntry('3', '1', 'Baz'),
+  new FeedEntry('4', '1', 'Another')
+];
+
+export interface FetchFindByProps {
+  feedId?: string;
+}
+
+export interface Fetch {
+  findBy(prop: FetchFindByProps): FeedEntry[];
+}
+
+class FetchImpl implements Fetch {
+  findBy(prop: FetchFindByProps): FeedEntry[] {
+    return entries.filter((feedEntry) => feedEntry.feedId === prop.feedId);
+  }
+}
+
+export default FetchImpl;

src/services/feed_entries_service/index.ts

@@ -0,0 +1,5 @@
+import Fetch from './fetch';
+
+export {
+  Fetch
+}

src/services/feeds_service/fetch.ts

@@ -0,0 +1,16 @@
+import { Feed } from '../../domain';
+
+export interface Fetch {
+  all(): Feed[];
+}
+
+class FetchImpl implements Fetch {
+  all(): Feed[] {
+    return [
+      new Feed('0', 'Bruno Arueira', 'https://brunoarueira.com/feed.xml'),
+      new Feed('1', 'Hacker News', 'https://news.ycombinator.com/news.xml')
+    ];
+  }
+}
+
+export default FetchImpl;

src/services/feeds_service/index.ts

@@ -0,0 +1,5 @@
+import Fetch from './fetch';
+
+export {
+  Fetch
+}

src/services/index.ts

@@ -0,0 +1,4 @@
+import * as FeedsService from './feeds_service';
+import * as FeedEntriesService from './feed_entries_service';
+
+export { FeedsService, FeedEntriesService };