Complete details

Author: artfuldev

src/routes/Commits/index.ts

@@ -18,13 +18,14 @@ export const Commits: RouteDefinitions = {
     },
     getLayout: getHeaderLayout
   },
-  '/:id': id => ({
+  // Example of providing additional sources based on route parameters
+  '/:sha': sha => ({
     getComponent: async () => {
       const { Details } = await import(/* webpackChunkName: "CommitDetails" */'./routes/Details');
       return Details;
     },
     sources: {
-      id$: xs.of(id)
+      sha$: xs.of(sha)
     },
     getLayout: getHeaderLayout
   })

src/routes/Commits/routes/Details/index.ts

@@ -1,26 +1,57 @@
-import { RouteComponent } from 'routes';
+import { Sources as RouteComponentSources, Sinks } from 'components/App';
 import { Stream } from 'xstream';
-import { div, h2 } from '@cycle/dom';
+import { div, h2, h3, hr, p, h4, strong, em } from '@cycle/dom';
 import { BackButton } from 'components/BackButton';
 import { style } from 'typestyle';
 import { rem } from 'csx';
+import { Commit } from 'drivers/github';
+
+interface Sources extends RouteComponentSources {
+  sha$: Stream<string>;
+}
 
 const className = style({
   display: 'inline',
   marginLeft: rem(1)
 });
 
-export const Details: RouteComponent = ({ dom, history, github }) => {
+const xs = Stream;
+
+const initialCommit: Commit = {
+  sha: '',
+  commit: {
+    author: {
+      name: 'Loading...',
+      email: 'Loading...',
+      date: undefined
+    },
+    message: 'Loading...'
+  }
+};
+
+export const Details: (sources: Sources) => Partial<Sinks> = ({ dom, github, sha$ }) => {
   const backButton = BackButton({ dom });
+  const details$ =
+    sha$
+      .map(sha => github.commits(sha).startWith(initialCommit))
+      .flatten();
   const vdom$ =
-    backButton.dom.map(button =>
-      div([
-        button,
-        h2(`.${className}`, ['Details'])
-      ])
-    );
+    xs.combine(backButton.dom, details$)
+      .map(([backButton, { sha, commit: { message, author: { name, email, date } } }]) =>
+        div([
+          backButton,
+          h2(`.${className}`, ['Details']),
+          hr(),
+          h3([message.split('\n\n')[0]]),
+          h4([strong([name])]),
+          h4([email]),
+          h4([em([date])]),
+          p([message.split('\n\n')[1] || ''])
+        ])
+      );
   return {
     dom: vdom$,
-    history: backButton.history
+    history: backButton.history,
+    github: sha$
   };
 };

src/routes/Commits/routes/List/components/CommitListItem.ts

@@ -16,7 +16,7 @@ interface Sinks {
 const CommitListItemComponent = ({ dom, commit$ }: Sources): Sinks => {
   const navigateTo$ =
     commit$
-      .map(({ sha }) => dom.select('li').events('click', { preventDefault: true }).map(ev => `/commits/s${sha}`))
+      .map(({ sha }) => dom.select('li').events('click', { preventDefault: true }).map(ev => `/commits/${sha}`))
       .flatten();
   const vdom$ =
     commit$