Signup.js

import React ,{useState,useEffect} from "react";
import {Link,useNavigate} from "react-router-dom"
import M from "materialize-css"
import Logo from "../logo";
const Signup=()=>{

    const navigate = useNavigate();        /*instead of useHistory */
    const [name,setName]=useState("")
    const [password,setPassword]=useState("")
    const [email,setEmail]=useState("")
    const [image,setImage] = useState("")
    const [url,setUrl] = useState(undefined)
    
    useEffect(()=>{
        if(url){
            uploadFields()
        }
    },[url])

    const uploadPic = ()=>{
        const data = new FormData()
        data.append("file", image)   
        data.append("upload_preset", "zaayka")
        data.append("cloud_name", "dkp8phxth") 
        fetch("https://api.cloudinary.com/v1_1/dkp8phxth/image/upload",{
            method:"post",
            body:data
        })
        .then(res=>res.json())
        .then(data=>{
           setUrl(data.url)
        })
        .catch(err=>{
            console.log(err)
        })
    }
    const uploadFields = ()=>{
        if(!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
            M.toast({html: "invalid email",classes:"#c62828 red darken-3"})
            return
        }
        fetch("/signup",{
            method:"post",
            headers:{
                "Content-Type":"application/json"
            },
            body:JSON.stringify({
                name,
                password,
                email,
                pic:url
            })
        }).then(res=>res.json())
        .then(data=>{
           if(data.error){
              M.toast({html: data.error,classes:"#c62828 red darken-3"})
           }
           else{
               M.toast({html:data.message,classes:"#43a047 green darken-1"})
               navigate('/login')
           }
        }).catch(err=>{
            console.log(err)
        })
    }
    const PostData = ()=>{
        if(image){
            uploadPic()
        }else{
            uploadFields()
        }
    }
    return  (
        <div className="mycard">
 <div className="card auth-card input-field bg-body">
              <Logo/>
            <h2>Zaayka</h2>
              <input
              className="ip"
              type="text"
              placeholder="Name"
              value={name}
              onChange={(e)=>setName(e.target.value)}
              />
             <input
            className="ip"
            
            type="text"
            placeholder="Email"  
            value={email}
              onChange={(e)=>setEmail(e.target.value)}          
            />
            <input
           className="ip"
            type="password"
            placeholder="Password"
            value={password }
              onChange={(e)=>setPassword(e.target.value)}
            />
           
                <div className="file-field input-field">
            <div className="btn #64b5f6 blue darken-1">
                <span>Upload pic</span>
                <input type="file" onChange={(e)=>setImage(e.target.files[0])} />
            </div>
            <div className="file-path-wrapper">
                <input className="file-path validate" type="text" />
            </div>
            </div>
              <button onClick={()=>PostData()} className="btn waves-effect waves-light #64b5f6 blue darken-1">              
                  SignUP
              </button>
              <h5>
                  <Link to="/login">Already have an account ?</Link>
              </h5>
   
          </div>
        </div>
     )

}

export default Signup;