+ );
+};
+
+export default App;
diff --git a/browser/src/scripts/components/BookIcon.tsx b/browser/src/scripts/components/BookIcon.tsx
new file mode 100644
index 00000000..9f9acb91
--- /dev/null
+++ b/browser/src/scripts/components/BookIcon.tsx
@@ -0,0 +1,46 @@
+/* Copyright (C) 2019, 2020 Monomax Software Pty Ltd
+ *
+ * This file is part of Dnote.
+ *
+ * Dnote is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Dnote is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Dnote. If not, see .
+ */
+
+import React from 'react';
+
+const Icon = ({ fill, width, height, className }) => {
+ const h = `${height}px`;
+ const w = `${width}px`;
+
+ return (
+
+ );
+};
+
+Icon.defaultProps = {
+ fill: '#000',
+ width: 32,
+ height: 32
+};
+
+export default Icon;
diff --git a/browser/src/scripts/components/BookSelector.tsx b/browser/src/scripts/components/BookSelector.tsx
new file mode 100644
index 00000000..4ab86d87
--- /dev/null
+++ b/browser/src/scripts/components/BookSelector.tsx
@@ -0,0 +1,117 @@
+/* Copyright (C) 2019, 2020 Monomax Software Pty Ltd
+ *
+ * This file is part of Dnote.
+ *
+ * Dnote is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Dnote is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Dnote. If not, see .
+ */
+
+import React from 'react';
+import CreatableSelect from 'react-select/creatable';
+import cloneDeep from 'lodash/cloneDeep';
+import { useSelector, useDispatch } from '../store/hooks';
+import { updateBook, resetBook } from '../store/composer/actions';
+
+interface Props {
+ selectorRef: React.Dispatch;
+ onAfterChange: () => void;
+}
+
+function useCurrentOptions(options) {
+ const currentValue = useSelector(state => state.composer.bookUUID);
+
+ for (let i = 0; i < options.length; i++) {
+ const option = options[i];
+
+ if (option.value === currentValue) {
+ return option;
+ }
+ }
+
+ return null;
+}
+
+function useOptions() {
+ const { books, composer } = useSelector(state => ({
+ books: state.books,
+ composer: state.composer
+ }));
+
+ const opts = books.items.map(book => ({
+ label: book.label,
+ value: book.uuid
+ }));
+
+ if (composer.bookLabel !== '' && composer.bookUUID === '') {
+ opts.push({
+ label: composer.bookLabel,
+ value: ''
+ });
+ }
+
+ // clone the array so as not to mutate Redux state manually
+ // e.g. react-select mutates options prop internally upon adding a new option
+ return cloneDeep(opts);
+}
+
+const BookSelector: React.FunctionComponent = ({
+ selectorRef,
+ onAfterChange
+}) => {
+ const dispatch = useDispatch();
+ const { books } = useSelector(state => ({
+ books: state.books
+ }));
+ const options = useOptions();
+ const currentOption = useCurrentOptions(options);
+
+ let placeholder: string;
+ if (books.isFetched) {
+ placeholder = 'Choose a book';
+ } else {
+ placeholder = 'Loading books...';
+ }
+
+ return (
+ {
+ selectorRef(el);
+ }}
+ multi={false}
+ isClearable
+ placeholder={placeholder}
+ options={options}
+ value={currentOption}
+ onChange={(option, meta) => {
+ if (meta.action === 'clear') {
+ dispatch(resetBook());
+ } else {
+ let uuid: string;
+ if (meta.action === 'create-option') {
+ uuid = '';
+ } else {
+ uuid = option.value;
+ }
+
+ dispatch(updateBook({ uuid, label: option.label }));
+ }
+
+ onAfterChange();
+ }}
+ formatCreateLabel={label => `Add a new book ${label}`}
+ isDisabled={!books.isFetched}
+ />
+ );
+};
+
+export default BookSelector;
diff --git a/browser/src/scripts/components/CloseIcon.tsx b/browser/src/scripts/components/CloseIcon.tsx
new file mode 100644
index 00000000..c574d1ce
--- /dev/null
+++ b/browser/src/scripts/components/CloseIcon.tsx
@@ -0,0 +1,29 @@
+/* Copyright (C) 2019, 2020 Monomax Software Pty Ltd
+ *
+ * This file is part of Dnote.
+ *
+ * Dnote is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Dnote is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Dnote. If not, see .
+ */
+
+import React from 'react';
+
+export default () => (
+
+);
diff --git a/browser/src/scripts/components/Composer.tsx b/browser/src/scripts/components/Composer.tsx
new file mode 100644
index 00000000..154d3c03
--- /dev/null
+++ b/browser/src/scripts/components/Composer.tsx
@@ -0,0 +1,239 @@
+/* Copyright (C) 2019, 2020 Monomax Software Pty Ltd
+ *
+ * This file is part of Dnote.
+ *
+ * Dnote is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Dnote is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Dnote. If not, see .
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import classnames from 'classnames';
+
+import { KEYCODE_ENTER } from 'jslib/helpers/keyboard';
+import initServices from '../utils/services';
+import BookSelector from './BookSelector';
+import Flash from './Flash';
+import { useSelector, useDispatch } from '../store/hooks';
+import { updateContent, resetComposer } from '../store/composer/actions';
+import { fetchBooks } from '../store/books/actions';
+import { navigate } from '../store/location/actions';
+
+interface Props {}
+
+// focusBookSelectorInput focuses on the input element of the book selector.
+// It needs to traverse the tree returned by the ref API of the 'react-select' library,
+// and to guard against possible breaking changes, if the path does not exist, it noops.
+function focusBookSelectorInput(bookSelectorRef) {
+ return (
+ bookSelectorRef.select &&
+ bookSelectorRef.select.select &&
+ bookSelectorRef.select.select.inputRef &&
+ bookSelectorRef.select.select.inputRef.focus()
+ );
+}
+
+function useFetchData() {
+ const dispatch = useDispatch();
+
+ const { books } = useSelector(state => ({
+ books: state.books
+ }));
+
+ useEffect(() => {
+ if (!books.isFetched) {
+ dispatch(fetchBooks());
+ }
+ }, [dispatch, books.isFetched]);
+}
+
+function useInitFocus(contentRef, bookSelectorRef) {
+ const { composer, books } = useSelector(state => ({
+ composer: state.composer,
+ books: state.books
+ }));
+
+ useEffect(() => {
+ if (!books.isFetched) {
+ return () => null;
+ }
+
+ if (bookSelectorRef && contentRef) {
+ if (composer.bookLabel === '') {
+ focusBookSelectorInput(bookSelectorRef);
+ } else {
+ contentRef.focus();
+ }
+ }
+
+ return () => null;
+ }, [contentRef, bookSelectorRef, books.isFetched, composer.bookLabel]);
+}
+
+const Composer: React.FunctionComponent = () => {
+ useFetchData();
+ const [contentFocused, setContentFocused] = useState(false);
+ const [submitting, setSubmitting] = useState(false);
+ const [errMsg, setErrMsg] = useState('');
+ const dispatch = useDispatch();
+ const [contentRef, setContentEl] = useState(null);
+ const [bookSelectorRef, setBookSelectorEl] = useState(null);
+
+ const { composer, settings, auth } = useSelector(state => ({
+ composer: state.composer,
+ settings: state.settings,
+ auth: state.auth
+ }));
+
+ const handleSubmit = useCallback(
+ async e => {
+ e.preventDefault();
+
+ const services = initServices(settings.apiUrl);
+
+ setSubmitting(true);
+
+ try {
+ let bookUUID;
+ if (composer.bookUUID === '') {
+ const resp = await services.books.create(
+ {
+ name: composer.bookLabel
+ },
+ {
+ headers: {
+ Authorization: `Bearer ${auth.sessionKey}`
+ }
+ }
+ );
+
+ bookUUID = resp.book.uuid;
+ } else {
+ bookUUID = composer.bookUUID;
+ }
+
+ const resp = await services.notes.create(
+ {
+ book_uuid: bookUUID,
+ content: composer.content
+ },
+ {
+ headers: {
+ Authorization: `Bearer ${auth.sessionKey}`
+ }
+ }
+ );
+
+ // clear the composer state
+ setErrMsg('');
+ setSubmitting(false);
+
+ dispatch(resetComposer());
+
+ // navigate
+ dispatch(
+ navigate('/success', {
+ bookName: composer.bookLabel,
+ noteUUID: resp.result.uuid
+ })
+ );
+ } catch (err) {
+ setErrMsg(err.message);
+ setSubmitting(false);
+ }
+ },
+ [
+ settings.apiUrl,
+ composer.bookUUID,
+ composer.content,
+ composer.bookLabel,
+ auth.sessionKey,
+ dispatch
+ ]
+ );
+
+ useEffect(() => {
+ const handleSubmitShortcut = e => {
+ // Shift + Enter
+ if (e.shiftKey && e.keyCode === KEYCODE_ENTER) {
+ handleSubmit(e);
+ }
+ };
+
+ window.addEventListener('keydown', handleSubmitShortcut);
+
+ return () => {
+ window.removeEventListener('keydown', handleSubmitShortcut);
+ };
+ }, [composer, handleSubmit]);
+
+ let submitBtnText: string;
+ if (submitting) {
+ submitBtnText = 'Saving...';
+ } else {
+ submitBtnText = 'Save';
+ }
+
+ useInitFocus(contentRef, bookSelectorRef);
+
+ return (
+