Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added commented out Form component using hooks

Browse source 
- demoing how to use useState and function components to keep the code minimal
This commit is contained in:
Hannah Wolfe 2022-07-06 15:16:48 +02:00
parent 22c99f3b31
commit 1e9b5d6bcf
1 changed files with 61 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
apps/comments-ui/src/components/Form.js
View file

@ -1,7 +1,67 @@
// import React, {useState} from 'react';
import React 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">&nbsp;</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 Form extends React.Component {
static contextType = AppContext;
@ -75,5 +135,5 @@ class Form extends React.Component {
);
}
}
export default Form;