publish: address comments

This commit is contained in:
Liam Fitzgerald 2020-08-25 10:49:33 +10:00
parent 1282e2abd1
commit 487377bd19
3 changed files with 23 additions and 9 deletions

View File

@ -1,7 +1,7 @@
import React from "react";
import * as Yup from "yup";
import { Formik, FormikHelpers, Form } from "formik";
import { AsyncButton } from '../../../../components/AsyncButton';
import { Formik, FormikHelpers, Form, useFormikContext } from "formik";
import { AsyncButton } from "../../../../components/AsyncButton";
import { TextArea } from "@tlon/indigo-react";
interface FormSchema {
@ -22,11 +22,21 @@ interface CommentInputProps {
label?: string;
placeholder?: string;
}
const SubmitTextArea = (props) => {
const { submitForm } = useFormikContext<FormSchema>();
const onKeyDown = (e: KeyboardEvent) => {
if ((e.getModifierState("Control") || e.metaKey) && e.key === "Enter") {
submitForm();
}
};
return <TextArea onKeyDown={onKeyDown} {...props} />;
};
export default function CommentInput(props: CommentInputProps) {
const initialValues: FormSchema = { comment: props.initial || "" };
const label = props.label || "Add Comment";
const loading = props.loadingText || "Commenting...";
return (
<Formik
validationSchema={formSchema}
@ -34,7 +44,10 @@ export default function CommentInput(props: CommentInputProps) {
initialValues={initialValues}
>
<Form>
<TextArea id="comment" placeholder={props.placeholder || ""} />
<SubmitTextArea
id="comment"
placeholder={props.placeholder || ""}
/>
<AsyncButton loadingText={loading} border type="submit">
{label}
</AsyncButton>

View File

@ -82,7 +82,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
<Text display="block" mb={2}>{note?.title || ""}</Text>
<Box display="flex">
<Author
ship={ship}
ship={note?.author}
contacts={contacts}
date={note?.["date-created"]}
/>

View File

@ -1,5 +1,5 @@
import React, { Component } from "react";
import { Col } from '@tlon/indigo-react';
import { Col } from "@tlon/indigo-react";
import { Notes, NoteId } from "../../../../types/publish-update";
import { NotePreview } from "./NotePreview";
import { Contacts } from "../../../../types/contact-update";
@ -17,15 +17,16 @@ export function NotebookPosts(props: NotebookPostsProps) {
<Col>
{props.list.map((noteId: NoteId) => {
const note = props.notes[noteId];
if(!note) {
console.log(noteId)
if (!note) {
console.log(noteId);
return null;
}
return (
<NotePreview
host={props.host}
key={noteId}
host={note?.author}
book={props.book}
note={props.notes[noteId]}
note={note}
contact={props.contacts[note.author.substr(1)]}
/>
);