mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-28 13:22:39 +03:00
Moved to modern React syntax for AddForm
This commit is contained in:
Simon Backx
parent
e762853ac6
commit
319a477aaf
@ -1,93 +1,20 @@
|
||||
// import React, {useState} from 'react';
|
||||
import React from 'react';
|
||||
import React, {useContext, useState} from 'react';
|
||||
import AppContext from '../AppContext';
|
||||
import Avatar from './Avatar';
|
||||
|
||||
// const Form = (props) => {
|
||||
// const [message, setMessage] = useState('');
|
||||
|
||||
// const getHTML = () => {
|
||||
// // Convert newlines to <br> for now (until we add a real editor)
|
||||
// return message.replace('\n', '<br>');
|
||||
// };
|
||||
|
||||
// const submitForm = async (event) => {
|
||||
// event.preventDefault();
|
||||
|
||||
// if (message.length === 0) {
|
||||
// alert('Please enter a message');
|
||||
// return;
|
||||
// }
|
||||
|
||||
// try {
|
||||
// // Todo: send comment to server
|
||||
// await this.context.onAction('addComment', {
|
||||
// post_id: this.context.postId,
|
||||
// status: 'published',
|
||||
// html: getHTML()
|
||||
// });
|
||||
|
||||
// // Clear message on success
|
||||
// setMessage('');
|
||||
// } catch (e) {
|
||||
// // eslint-disable-next-line no-console
|
||||
// console.error(e);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const handleChange = (event) => {
|
||||
// setMessage(event.target.value);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <form onSubmit={submitForm} className="comment-form">
|
||||
// <div className="w-full">
|
||||
// <div className="flex mb-2 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">{this.context.member.name}</h4>
|
||||
// <h6 className="text-xs text-neutral-400 font-sans"> </h6>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="-mt-4 ml-14 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-36 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} />
|
||||
// <div className="absolute bottom-5 right-3">
|
||||
// <button type="submit" className="w-full rounded-md border p-3 py-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">Add your comment</button>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </form>
|
||||
// );
|
||||
// };
|
||||
|
||||
class AddForm extends React.Component {
|
||||
static contextType = AppContext;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
message: '',
|
||||
focused: false
|
||||
};
|
||||
|
||||
this.submitForm = this.submitForm.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleBlur = this.handleBlur.bind(this);
|
||||
this.handleFocus = this.handleFocus.bind(this);
|
||||
}
|
||||
|
||||
getHTML() {
|
||||
const text = this.state.message;
|
||||
const AddForm = (props) => {
|
||||
const [message, setMessage] = useState('');
|
||||
const [focused, setFocused] = useState(false);
|
||||
const {member, postId, onAction} = useContext(AppContext);
|
||||
|
||||
const getHTML = () => {
|
||||
// Convert newlines to <br> for now (until we add a real editor)
|
||||
return text.replace('\n', '<br>');
|
||||
}
|
||||
return message.replace('\n', '<br>');
|
||||
};
|
||||
|
||||
async submitForm(event) {
|
||||
const submitForm = async (event) => {
|
||||
event.preventDefault();
|
||||
const message = this.state.message;
|
||||
|
||||
if (message.length === 0) {
|
||||
// alert('Please enter a message'); TODO: Check, but don't think we really need this
|
||||
@ -96,74 +23,70 @@ class AddForm extends React.Component {
|
||||
|
||||
try {
|
||||
// Send comment to server
|
||||
await this.context.onAction('addComment', {
|
||||
post_id: this.context.postId,
|
||||
await onAction('addComment', {
|
||||
post_id: postId,
|
||||
status: 'published',
|
||||
html: this.getHTML()
|
||||
html: getHTML()
|
||||
});
|
||||
|
||||
// Clear message on success
|
||||
this.setState({
|
||||
message: '',
|
||||
focused: false
|
||||
});
|
||||
setMessage('');
|
||||
setFocused(false);
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleChange(event) {
|
||||
this.setState({message: event.target.value});
|
||||
}
|
||||
const handleChange = (event) => {
|
||||
setMessage(event.target.value);
|
||||
};
|
||||
|
||||
handleBlur(event) {
|
||||
if (this.state.message === '') {
|
||||
this.setState({focused: false});
|
||||
const handleBlur = (event) => {
|
||||
if (message === '') {
|
||||
setFocused(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleFocus(event) {
|
||||
this.setState({focused: true});
|
||||
}
|
||||
const handleFocus = (event) => {
|
||||
setFocused(true);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={this.submitForm} className="comment-form">
|
||||
<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">{this.context.member.name}</h4>
|
||||
<h6 className="text-[13px] text-neutral-400 font-sans">Now</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
|
||||
<div className="relative w-full">
|
||||
<textarea
|
||||
className={`transition-[height] duration-150 w-full resize-none rounded-md border border-slate-200 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 ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
|
||||
value={this.state.message}
|
||||
onChange={this.handleChange}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
placeholder={this.state.focused ? '' : 'Add to the discussion'}
|
||||
/>
|
||||
<button
|
||||
className={`transition-[opacity] duration-150 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 ${this.state.focused ? 'opacity-100' : 'opacity-0'}`}
|
||||
type="submit">
|
||||
Add your comment
|
||||
</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 ${this.state.focused ? 'opacity-0' : 'opacity-100'}`}
|
||||
disabled="true">
|
||||
Comment
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<form onSubmit={submitForm} className="comment-form">
|
||||
<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">{member.name}</h4>
|
||||
<h6 className="text-[13px] text-neutral-400 font-sans">Now</h6>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
|
||||
<div className="relative w-full">
|
||||
<textarea
|
||||
className={`transition-[height] duration-150 w-full resize-none rounded-md border border-slate-200 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 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
|
||||
value={message}
|
||||
onChange={handleChange}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
placeholder={focused ? '' : 'Add to the discussion'}
|
||||
/>
|
||||
<button
|
||||
className={`transition-[opacity] duration-150 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 ${focused ? 'opacity-100' : 'opacity-0'}`}
|
||||
type="submit">
|
||||
Add your comment
|
||||
</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">
|
||||
Comment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddForm;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user