diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..fd3dbb57 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/app/components/FeedPost.tsx b/app/components/FeedPost.tsx new file mode 100644 index 00000000..8c2423b1 --- /dev/null +++ b/app/components/FeedPost.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; +import Post from "../model/Post"; + +interface PostProps { + post: Post; + postDeletedHandler: (post: Post) => void; +} + +export default function FeedPost({post, postDeletedHandler}: PostProps) { + + return ( +
+ +
+ Image placeholder postDeletedHandler(post)} width={24} height={24} priority /> +
+ +
+
+
+ { post.image == "" + ? Image placeholder + : User avatar + } +
+
+
+

{post.text}

+

+ Enviado por
+ {post.author} +

+
+
+
+ ) + +} \ No newline at end of file diff --git a/app/components/PostForm.tsx b/app/components/PostForm.tsx new file mode 100644 index 00000000..e7f493ae --- /dev/null +++ b/app/components/PostForm.tsx @@ -0,0 +1,100 @@ +import { v4 as uuidv4 } from 'uuid'; +import Image from "next/image"; +import { useRef, useState } from "react"; +import Post from "../model/Post"; + +interface PostFormProps { + postSubmitedHandler: (post: Post) => void; +} + +export default function PostForm({ + postSubmitedHandler +}: PostFormProps) { + + const imageUploadRef = useRef(null); + + const [username, setUsername] = useState(""); + const [text, setText] = useState(""); + const [imagePreview, setImagePreview] = useState(""); + + const handleImageClick = () => { + imageUploadRef.current.click(); + }; + + const submit = () => { + if(username === "" || text === "") { + return; + } + let id = uuidv4(); + postSubmitedHandler({ id: id, author: username, text: text, image: imagePreview }); + setImagePreview(""); + setUsername(""); + setText(""); + } + + const clearImage = () => { + setImagePreview(""); + } + + const discardPost = () => { + setImagePreview(""); + setUsername(""); + setText(""); + } + + const handleUsernameChange = (e: any) => setUsername(e.target.value); + + const handleTextChange = (e: any) => setText(e.target.value); + + const handleImageChange = (e: any) => { + e.preventDefault(); + const reader = new FileReader(); + const file = e.target.files[0]; + if (reader !== undefined && file !== undefined) { + reader.onloadend = () => { + setImagePreview(reader.result); + } + reader.readAsDataURL(file); + } + } + + const canBeSubmited = (): boolean => { + return username != "" && text != "" + } + + return ( +
+ + +
+ +
+
+ {imagePreview == "" + ? Image placeholder + : User avatar + } +
+ {imagePreview != "" && Image placeholder} +
+ + + + +