added digest single view route. closed #31

diary-front/src/components/DiaryApp.tsx

@@ -12,6 +12,7 @@ import util from 'utils/util';
 
 import DiaryHeaderContainer from 'components/DiaryHeaderContainer';
 import DiaryLoginView from 'components/DiaryLoginView';
+import DigestSingleView from 'components/DigestModule/DigestSingleView';
 import DigestView from 'components/DigestModule/DigestView';
 import EntryView from 'components/EntryModule/EntryView';
 import TodoView from 'components/TodoModule/TodoView';
@@ -66,8 +67,8 @@ class DiaryApp extends React.Component<Props & ReduxProps, State> {
               <Switch>
                 <Route path="/entry" component={EntryView} />
                 <Route path="/todo" component={TodoView} />
+                <Route path="/digest/:id" component={DigestSingleView} />
                 <Route path="/digest" component={DigestView} />
-                <Route path="/digest/:id" component={EntryView} />
                 <Redirect to="/entry" exact={true} push={false} />
               </Switch>
             ) : (

diary-front/src/components/DigestModule/DigestObject.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Alert, Button, Col, List, message, Modal, Row } from 'antd';
+import { Link } from 'react-router-dom';
 
 import { connect } from 'react-redux';
 import { ReduxState, User } from 'reducers';
@@ -23,6 +24,7 @@ import './DigestObject.css';
 class Props {
   public digest: Digest;
   public highlight?: React.ReactNode;
+  public editorHeight?: string;
 }
 class ReduxProps {
   public user: User | null;
@@ -77,7 +79,7 @@ class DigestObject extends React.Component<Props & ReduxProps, State> {
   }
 
   public render() {
-    const { digest, highlight } = this.props;
+    const { digest, highlight, editorHeight } = this.props;
     const shortenedLastModified = new Date(digest.lastModified)
       .toISOString()
       .substring(0, 16);
@@ -91,6 +93,14 @@ class DigestObject extends React.Component<Props & ReduxProps, State> {
       <List.Item
         className="DigestObject"
         actions={[
+          <Link key="openInSingle" target="_blank" to={'/digest/' + digest._id}>
+            <Button
+              className="openInSingleButton"
+              key="openInSingle"
+              icon="export"
+              size="large"
+            />
+          </Link>,
           <Button
             className="editButton"
             key="edit"
@@ -172,7 +182,7 @@ class DigestObject extends React.Component<Props & ReduxProps, State> {
               editorState={htmlToDraft(digest.content)}
               readOnly={true}
               toolbarStyle={{ display: 'none' }}
-              editorStyle={{ maxHeight: '180px' }}
+              editorStyle={{ maxHeight: editorHeight || '180px' }}
             />
           </Col>
         </Row>

diary-front/src/components/DigestModule/DigestSingleView.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { Button, Checkbox, Collapse, List, Row } from 'antd';
+
+import { ReduxState, User } from 'reducers';
+import { dispatch } from 'reducers/store';
+import api, {
+  CommonPageProps,
+  Digest,
+  ErrResponse,
+  GetDigestsResponse,
+} from 'utils/api';
+import util from 'utils/util';
+
+import DigestAllListContainer from 'components/DigestModule/DigestAllListContainer';
+import DigestFormContainer from 'components/DigestModule/DigestFormContainer';
+import DigestObject from 'components/DigestModule/DigestObject';
+import DigestSearchListContainer from 'components/DigestModule/DigestSearchListContainer';
+
+class Props extends CommonPageProps {}
+class State {}
+class ReduxProps {
+  public digests: Digest[];
+  public user: User | null;
+  public resyncCounter: number;
+}
+class DigestSingleView extends React.Component<Props & ReduxProps, State> {
+  public id: string;
+
+  constructor(props: Props & ReduxProps) {
+    super(props);
+    this.state = new State();
+    this.id = props.match.params && props.match.params.id;
+  }
+
+  public getDigest(): void {
+    const { user } = this.props;
+    if (!user || !this.id) {
+      return;
+    }
+    if (!this.id) {
+      return;
+    }
+    api.getDigest({ owner: user.username, _id: this.id }).then(
+      (data: GetDigestsResponse & ErrResponse) => {
+        if (data.data && data.data[0]) {
+          dispatch({
+            type: 'UPDATE_DIGEST',
+            payload: {
+              digest: data.data[0],
+            },
+          });
+        }
+      },
+      (err) => {}
+    );
+  }
+
+  public componentWillMount() {
+    this.getDigest();
+  }
+
+  public renderContent() {
+    const { digests } = this.props;
+    if (!this.id) {
+      return 'No digest';
+    }
+    const digest = digests.find((d) => d._id === this.id);
+    if (!digest) {
+      return 'No digest';
+    }
+
+    return (
+      <div className="DigestsContainer">
+        <DigestObject digest={digest} editorHeight="768px" />
+      </div>
+    );
+  }
+
+  public render() {
+    const { digests } = this.props;
+
+    return (
+      <div className="DigestView">
+        <Row type="flex" style={{ alignItems: 'center' }}>
+          <h2>DigestView</h2>
+          <Button
+            onClick={() => localStorage.removeItem('diary.digest.unsavedDraft')}
+          >
+            Clear unsaved draft
+          </Button>
+        </Row>
+        {digests.length === 0 ? 'Loading or empty...' : this.renderContent()}
+      </div>
+    );
+  }
+
+  public componentDidUpdate(
+    prevProps: ReduxProps,
+    prevState: State,
+    snapshot: any
+  ) {
+    if (this.props.resyncCounter !== prevProps.resyncCounter) {
+      this.getDigest();
+    }
+  }
+}
+export default connect((state: ReduxState) => {
+  return {
+    digests: state.digests,
+    user: state.user,
+    resyncCounter: state.resyncCounter,
+  };
+})(DigestSingleView);