import {
Button,
FormControl,
FormLabel,
Input,
InputGroup,
InputRightElement,
VStack,
useToast,
} from "@chakra-ui/react";
import React from "react";
import { useState } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";
const Signup = () => {
const [show, setShow] = useState(false);
const [name, setName] = useState();
const [email, setEmail] = useState();
const [confirmpassword, setConfirmpassword] = useState();
const [password, setPssword] = useState();
const [pic, setPic] = useState();
const [loading, setLoading] = useState(false);
const toast = useToast();
const history = useHistory();
const handleClick = () => setShow(!show);
const postDetails = (pics) => {
setLoading(true);
if (pics === undefined) {
toast({
title: "Please select an image",
status: "warning",
duration: 5000,
isClosable: true,
position: "buttom",
});
return;
}
if (pics.type === "image/jpeg" || pics.type === "image/png") {
const data = new FormData();
data.append("file", pics);
data.append("upload_preset", "Kist-talk");
data.append("cloud_name", "dd1n3ffit");
fetch("https://api.cloudinary.com/v1_1/dd1n3ffit/image/upload", {
method: "post",
body: data,
})
.then((res) => res.json())
.then((data) => {
setPic(data.url.toString());
console.log(data.url.toString());
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
} else {
toast({
title: "Please select an image",
status: "warning",
duration: 5000,
isClosable: true,
position: "buttom",
});
setLoading(false);
return;
}
};
const submitHandler = async () => {
setLoading(true);
if (!name || !email || !password || !confirmpassword) {
toast({
title: "Please Fill all the Fields",
status: "warning",
duration: 5000,
isClosable: true,
position: "bottom",
});
setLoading(false);
return;
}
if (password !== confirmpassword) {
toast({
title: "Passwords Do Not Match",
status: "warning",
duration: 5000,
isClosable: true,
position: "bottom",
});
return;
}
try {
const config = {
Headers: {
"Content-type": "application/json",
},
};
const { data } = await axios.post(
"/api/user",
{ name, email, password, pic },
config
);
toast({
title: "Registration Successful",
status: "Success",
duration: 5000,
isClosable: true,
position: "bottom",
});
localStorage.setItem("userInfo", JSON.stringify(data));
setLoading(false);
history.push("/chats");
} catch (error) {
toast({
title: "Error occured!",
description: error.response.data.message,
status: "error",
duration: 5000,
isClosable: true,
position: "buttom",
});
setLoading(false);
}
};
return (
<VStack spacing="5px" color="black">
<FormControl id="first-name" isRequired>
<FormLabel>Name</FormLabel>
<Input
placeholder="Enter Your Name"
onChange={(e) => setName(e.target.value)}
/>
</FormControl>
<FormControl id="email" isRequired>
<FormLabel>Email</FormLabel>
<Input
type={"email"}
placeholder="Enter Your Email Id"
onChange={(e) => setEmail(e.target.value)}
/>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<InputGroup size="md">
<Input
type={show ? "text" : "password"}
placeholder="Enter password"
onChange={(e) => setPssword(e.target.value)}
/>
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={handleClick}>
{show ? "Hide" : "Show"}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel> Confirm Password</FormLabel>
<InputGroup size="md">
<Input
type={show ? "text" : "password"}
placeholder="Confirm your password"
onChange={(e) => setConfirmpassword(e.target.value)}
/>
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={handleClick}>
{show ? "Hide" : "Show"}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<FormControl id="pic">
<FormLabel>Upload your Picture</FormLabel>
<input
type="file"
p={1.5}
accept="image/*"
onChange={(e) => postDetails(e.target.files[0])}
/>
</FormControl>
<Button
colorScheme="blue"
width="100%"
style={{ marginTop: 15 }}
onClick={submitHandler}
isLoading={loading}
>
Sign Up
</Button>
</VStack>
);
};
export default Signup;
What I have tried:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app