Add new posts form

src/app/components/NewPostForm.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { UserContext } from "@/lib/context";
+import { db, storage } from "@/lib/firebase";
+import { addDoc, collection } from "firebase/firestore";
+import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage";
+import { useContext, useState } from "react";
+import { Hash } from "crypto";
+import toast from "react-hot-toast";
+
+export default function NewPostForm() {
+  const [formValuePostTitle, setFormValuePostTitle] = useState('');
+  const [_isValid, setIsValidPostTitle] = useState(false);
+  const [_loading, _setLoading] = useState(false);
+
+  const { user, username } = useContext(UserContext);
+
+  const handleChangePostTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.toLowerCase();
+    const regex = /^\w*$/;
+    if (val.length < 5) {
+      setIsValidPostTitle(false);
+    }
+    if (regex.test(val)) {
+      setIsValidPostTitle(true);
+    }
+    setFormValuePostTitle(val);
+  }
+
+  const [formValuePostDescription, setFormValuePostDescription] = useState('');
+  const [_isValidPostDescription, setIsValidPostDescription] = useState(false);
+
+  const handleChangePostDescription = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value.toLowerCase();
+    if (val.length < 20) {
+      setIsValidPostDescription(false);
+    }
+    setFormValuePostDescription(val);
+  }
+
+
+  const [formValueImages, setFormValueImages] = useState<FileList | null>(null);
+
+  const handleChangeImages = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.files;
+    setFormValueImages(val);
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    let images = [];
+
+    if (formValueImages !== null) {
+        for(let i = 0; i < formValueImages.length; i++) {
+            const buffer = await formValueImages.item(i)?.arrayBuffer();
+            const name = formValueImages.item(i)?.name;
+            const storageUri = `images/${name}`;
+            const storageRef = ref(storage, storageUri);
+            if (buffer !== undefined) {
+              uploadBytesResumable(storageRef, buffer);
+              images.push(await getDownloadURL(storageRef));
+            }
+        }
+    }
+
+    const postRef = await addDoc(collection(db, 'posts'), 
+        {uid: user.uid, post_title: formValuePostTitle, post_description: formValuePostDescription, images}
+    );
+
+    toast.success(`Succesfully created new post ID: ${postRef.id}!`);
+  }
+
+  return (
+    <form  onSubmit={handleSubmit}>
+        <div className="flex flex-col p-20 m-10">
+          <fieldset className="my-5">
+            <label htmlFor="post-title" >Post Title:</label>
+            <input type="text" name="post-title" id="post-title" className="px-2 py-1 bg-gray-300 mx-10 rounded-md" value={formValuePostTitle} onChange={handleChangePostTitle} />
+          </fieldset>
+          <fieldset className="my-5">
+            <label htmlFor="post-description">Post Description:</label>
+            <textarea name="post-description" id="post-description" className="px-2 py-1 mx-10 bg-gray-300 rounded-md" onChange={handleChangePostDescription} >
+            {formValuePostDescription}
+            </textarea>
+          </fieldset>
+          <fieldset>
+            <label htmlFor="photos">Photos:</label>
+            <input className="px-20" type="file" id="photos" multiple accept="image/*" onChange={handleChangeImages}/>
+          </fieldset>
+          <div>
+          <button type="submit" className="bg-gray-300 px-2 py-1 rounded-md">Submit</button>
+          </div>
+        </div>
+    </form>
+  )
+}

src/app/post/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { signInWithGoogle } from "@/lib/auth";
+import { UserContext } from "../../lib/context";
+import { useContext } from "react";
+import Link from "next/link";
+import NewPostForm from "../components/NewPostForm";
+
+export default function Post() {
+  const { user, username } = useContext(UserContext);
+
+  return (
+    <main className="p-10">
+      {Object.keys(user).length ? 
+        username ?
+          <div>
+            <h1>Create a new Post</h1>
+            <NewPostForm/>
+          </div>
+          :
+          <div>
+            <h1>Please set up the username!</h1>
+            <Link href={"/login"}>
+                Go username setup 
+            </Link>
+          </div>
+        :
+        <div>
+          <h1 className="font-bold text-2xl">Sign in</h1>
+          <button onClick={signInWithGoogle} className="bg-gray-300 px-2 py-1 rounded-md">Sign in with Google</button>
+        </div>
+      }
+    </main>
+  );
+}