--- 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 || ' ' }
+ </div>
+ <div className="session-page-description border-0 bg-irinotes-headers text-muted ml-3" >
+ { this.props.currentSession.description || ' ' }
+ </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>