client/src/components/ReadOnlySession.js
changeset 170 7da1d5137b0b
parent 162 1fd73fdaf4c6
--- a/client/src/components/ReadOnlySession.js	Thu Oct 11 11:05:04 2018 +0200
+++ b/client/src/components/ReadOnlySession.js	Tue Nov 06 16:19:26 2018 +0100
@@ -1,12 +1,21 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import Note from './Note';
+import { formatTimestamp } from '../utils';
 import Navbar from './Navbar';
-import SessionForm from './SessionForm';
 import { getSession, getSessionNotes } from '../selectors/coreSelectors';
-import './ReadOnlySession.css';
 
+const ReadOnlyNote = ({ note }) => {
+  return (
+    <div id={"note-" + note._id} className="note text-sm mr-5 pt-1">
+      <div className="mr-5">
+        <small className="start text-irinotes-time pt-2">{ formatTimestamp(note.startedAt) }</small>
+        <small className="finish text-irinotes-time pb-2">{ formatTimestamp(note.finishedAt) }</small>
+      </div>
+      <div className="note-content w-100 pl-2 pt-2" dangerouslySetInnerHTML={{ __html: note.html }} />
+    </div>
+  );
 
+}
 
 class ReadOnlySession extends Component {
 
@@ -21,15 +30,22 @@
           <div>
             <Navbar history={this.props.history} />
             <div className="ml-4">
-              <SessionForm session={this.props.currentSession} />
-              <a className="text-primary font-weight-bold float-left" onClick={this.onClickSession} href="/sessions">Atteindre la session</a>
+              <div className="session-page-panel panel-default sticky-top">
+                <div className="session-page-card card-body bg-secondary pr-5">
+                  <div className='session-page-title border-0 bg-irinotes-headers text-muted ml-3'>
+                    { this.props.currentSession.title || '&nbsp;' }
+                  </div>
+                  <div className="session-page-description border-0 bg-irinotes-headers text-muted ml-3" >
+                    { this.props.currentSession.description || '&nbsp;' }
+                  </div>
+                </div>
+              </div>
               <div>
-                {this.props.notes.map((note) =>
-                  <Note
-                    note={ note }
-                    key={ note._id}
-                    annotationCategories={this.props.annotationCategories} />
-                )}
+                {
+                  this.props.notes.map((note) =>
+                    <ReadOnlyNote note={ note } key={ note._id} />
+                  )
+                }
               </div>
             </div>
           </div>