2020-05-29 09:44:45 -04:00
|
|
|
import React from 'react'
|
|
|
|
import { useSelector } from 'react-redux'
|
|
|
|
import { useParams } from 'react-router'
|
|
|
|
import { ApplicationState } from '../../redux'
|
2020-06-07 15:29:09 -04:00
|
|
|
import { ShowIf } from '../common/show-if/show-if'
|
2020-05-29 09:44:45 -04:00
|
|
|
import { EditorWindow } from './editor-window/editor-window'
|
|
|
|
import { MarkdownPreview } from './markdown-preview/markdown-preview'
|
2020-05-31 16:51:36 -04:00
|
|
|
import { EditorMode } from './task-bar/editor-view-mode'
|
2020-05-29 09:44:45 -04:00
|
|
|
import { TaskBar } from './task-bar/task-bar'
|
|
|
|
|
|
|
|
interface RouteParameters {
|
|
|
|
id: string
|
|
|
|
}
|
|
|
|
|
|
|
|
const Editor: React.FC = () => {
|
|
|
|
const editorMode: EditorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
|
|
|
|
const { id } = useParams<RouteParameters>()
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={'d-flex flex-column vh-100'}>
|
|
|
|
<TaskBar/>
|
|
|
|
<h1>{id}</h1>
|
|
|
|
<div className={'flex-fill flex-row d-flex'}>
|
2020-06-06 18:53:04 -04:00
|
|
|
<ShowIf condition={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}>
|
|
|
|
<EditorWindow/>
|
|
|
|
</ShowIf>
|
|
|
|
<ShowIf condition={editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH}>
|
|
|
|
<MarkdownPreview/>
|
|
|
|
</ShowIf>
|
2020-05-29 09:44:45 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export { Editor }
|