➕ feat: firebase storage

semana-9/todolist/src/pages/SignUp/index.jsx

@@ -1,36 +1,104 @@
+import { useState, useRef } from "react";
 import { TextField } from "../../components";
+import { storeFile } from "../../services/firebase";
 
 export default function SignUp() {
+  const [values, setValues] = useState({
+    fullName: "",
+    email: "",
+    password: "",
+    photoURL: "",
+  });
+
+  const imageInput = useRef(null);
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setValues({
+      ...values,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    await storeFile(event.target[4].files[0]);
+  };
+
   return (
     <>
       <section className="max-w-md m-auto flex items-center justify-center h-[100vh]">
         <div className="bg-white p-6 rounded-md w-full md:w-md">
           <div className="my-5">
             <h2 className="text-center text-2xl font-bold">🤗 Bienvenido</h2>
           </div>
-          <form className="my-5">
+          <form className="my-5" onSubmit={handleSubmit}>
             <TextField
               type="text"
               name="fullName"
+              value={values.fullName}
+              onChange={handleInputChange}
               placeholder="Ingrese su nombre completo"
             />
             <TextField
               type="email"
               name="email"
+              value={values.email}
+              onChange={handleInputChange}
               placeholder="Ingrese su correo"
             />
             <TextField
               type="password"
               name="password"
+              value={values.password}
+              onChange={handleInputChange}
               placeholder="Ingrese su password"
             />
-
             <div className="my-5">
               <button
+                type="button"
+                onClick={() => imageInput.current.click()}
+                className="border border-dashed border-green-400 text-black font-semibold w-full px-3 py-2 rounded-md
+              hover:bg-green-400 hover:text-white transition-all ease-in-out duration-300"
+              >
+                Subir imagen 📸
+              </button>
+              <input
+                ref={imageInput}
+                name="photoURL"
+                value={values.photoURL}
+                onChange={handleInputChange}
+                type="file"
+                className="hidden"
+              />
+            </div>
+            <div className="my-5">
+              <button
+                type="submit"
                 className="border border-green-400 text-black font-bold w-full px-3 py-2 rounded-md
               hover:bg-green-400 hover:text-white transition-all ease-in-out duration-300"
               >
-                Iniciar sesión
+                <svg
+                  className="animate-spin -ml-1 mr-3 h-5 w-5 text-black"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                Registrarme
               </button>
             </div>
           </form>

semana-9/todolist/src/services/firebase.js

@@ -4,6 +4,7 @@ import {
   createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
 } from "firebase/auth";
+import { getStorage, ref, getDownloadURL, uploadBytes } from "firebase/storage";
 
 const firebaseConfig = {
   apiKey: "AIzaSyBlWDKtkbgcHds1vyO13xev36wCI-NbCaM",
@@ -15,7 +16,9 @@ const firebaseConfig = {
 };
 
 const app = initializeApp(firebaseConfig);
+
 const auth = getAuth(app);
+const storage = getStorage(app);
 
 // function to create an user
 export async function createUser(email, password) {
@@ -49,3 +52,18 @@ export async function signIn(email, password) {
     return null;
   }
 }
+
+export async function storeFile(file) {
+  try {
+    const storageRef = ref(storage, `images/${file.name}`);
+
+    const snapshot = await uploadBytes(storageRef, file);
+    const url = await getDownloadURL(snapshot.ref);
+
+    return url;
+  } catch (error) {
+    console.log(error.code);
+    console.log(error.message);
+    return null;
+  }
+}