TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-30 11:54:33 +03:00
Code Issues Projects Releases Wiki Activity

Moved to modern React syntax for EditForm

Browse Source
This commit is contained in:
Simon Backx 2022-07-07 09:41:59 +02:00
parent 319a477aaf
commit 405c981131
3 changed files with 33 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/comments-ui/src/components/AddForm.js
View File

@ -79,7 +79,7 @@ const AddForm = (props) => {
</button>
<button
className={`transition-[opacity] duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-0' : 'opacity-100'}`}
disabled="true">
disabled={true}>
Comment
</button>
</div>

4
apps/comments-ui/src/components/Comment.js
View File

@ -53,7 +53,7 @@ class Comment extends React.Component {
if (this.state.isInEditMode) {
return (
<EditForm value={html} comment={comment} toggle={this.toggleEditMode} />
<EditForm comment={comment} toggle={this.toggleEditMode} />
);
} else {
return (
@ -86,4 +86,4 @@ class Comment extends React.Component {
}
}
export default Comment;
export default Comment;

79
apps/comments-ui/src/components/EditForm.js
View File

@ -1,64 +1,45 @@
import {formatRelativeTime} from '../utils/helpers';
import React from 'react';
import AppContext from '../AppContext';
import React, {useState} from 'react';
import Avatar from './Avatar';
class EditForm extends React.Component {
static contextType = AppContext;
const EditForm = (props) => {
// todo: we need to convert the HTML back to an editable state instead of putting it into the textarea
const [message, setMessage] = useState(props.comment.html);
constructor(props) {
super(props);
this.state = {
message: props.value.__html
};
this.submitForm = this.submitForm.bind(this);
this.handleChange = this.handleChange.bind(this);
}
getHTML() {
const text = this.state.message;
// Convert newlines to <br> for now (until we add a real editor)
return text.replace('\n', '<br>');
}
async submitForm(event) {
const submitForm = async (event) => {
event.preventDefault();
return false;
}
};
handleChange(event) {
this.setState({message: event.target.value});
}
const handleChange = (event) => {
setMessage(event.target.value);
};
render() {
const comment = this.props.comment;
const comment = props.comment;
return (
<form onSubmit={this.submitForm} className="comment-form mb-14">
<div className="w-full">
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
</div>
return (
<form onSubmit={submitForm} className="comment-form mb-14">
<div className="w-full">
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
</div>
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea className="w-full resize-none rounded-md border h-32 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={this.state.message} onChange={this.handleChange} autofocus="true" />
<div className="flex flex-start">
<button type="submit" className="rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
<button className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={this.props.toggle}>Cancel</button>
</div>
</div>
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea className="w-full resize-none rounded-md border h-32 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={message} onChange={handleChange} autoFocus={true} />
<div className="flex flex-start">
<button type="submit" className="rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
<button className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={props.toggle}>Cancel</button>
</div>
</div>
</div>
</form>
);
}
}
</div>
</form>
);
};
export default EditForm;