React,js onclick custom hook - reactjs

Question

Hi im a programming student and im trying to build a login/register page. and ive written a custom hook to get data of the user/ post data to login or register.
and my problem is that react only accepts custom hooks inside react components or other custom hooks and i want to post the login/register on button click.
whats the best why to use custom hooks onClick?
Custom useFetch hook
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";
import { toast } from "react-toastify";
const useFetch = () => {
const [data, setData] = useState([]);
const history = useHistory();
let initialBizCardArray = [];
useEffect(() => {
(async () => {
try {
let currLocation = history.location.pathname;
switch (currLocation) {
case (currLocation = "/my-cards"):
case (currLocation = "/cards"):
{
let { data } = await axios.get(`/cards${currLocation}`);
initialBizCardArray = data;
setData(initialBizCardArray);
}
break;
case (currLocation = "/login"):
case (currLocation = "/register"):
{
let { data } = await axios.post(`/users${currLocation}`);
initialBizCardArray = data;
setData(initialBizCardArray);
}
break;
}
} catch (error) {
toast.error(error, {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
return { error };
}
})();
}, []);
return { data, setData, initialBizCardArray };
};
export default useFetch;
How i tried using the useFetch
const handleSubmitLogIn = async (ev) => {
ev.preventDefault();
ValidateErr(
{
email: loginInput.email,
password: loginInput.password,
},
loginSchema
);
try {
let { data } = await useFetch(userLocation, {
email: loginInput.email,
password: loginInput.password,
});
console.log("Succuss");
localStorage.setItem("token", data.token);
autoLoginFunction(data.token);
setTimeout(() => {
let userInfo = jwt_decode(data.token);
userInfo && userInfo.biz
? history.push("/my-cards")
: history.push("/");
}, 100);
} catch (err) {
console.error("error", err.response.data);
toast.error(`😭 Email or password are invalid.`, err, {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
progress: undefined,
});
history.push("/login");
}

Answer 1

You could replace your useEffect hook within useFetch by a method, that way you can return it and call it in your event handler :
import React, { useState } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";
import { toast } from "react-toastify";
const useFetch = () => {
const [data, setData] = useState([]);
const history = useHistory();
const fetchData = async () => {
try {
let currLocation = history.location.pathname;
switch (currLocation) {
case (currLocation = "/my-cards"):
case (currLocation = "/cards"):
{
let { data } = await axios.get(`/cards${currLocation}`);
setData(data);
}
break;
case (currLocation = "/login"):
case (currLocation = "/register"):
{
let { data } = await axios.post(`/users${currLocation}`);
setData(data);
}
break;
}
} catch (error) {
toast.error(error, {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
}
return { data, fetchData };
};
export default useFetch;
Then you would use it like this within your component :
import React, {useEffect} from "react"
const Component = () => {
const { data,fetchData} = useFetch()
useEffect(() => {
fetchData()
},[])
return (
<div>{data.property}</div>
)
}

Answer 2

Some points
Avoid using location string to decide which api call to make as it makes the code fragile, i.e. it has many reasons to break, like route name change and every time a new route is added/changed there is a possiblity that someone can break other parts of the code block
try just create a api function and export them
export const loginRegisterApi = async (email, password) => {
//network call with axios instance or anything you
// error checks
return response.data
}
use libraries like React query which make server related state management a lot more easier
cont LoginComponent = ({ ... }) => {
const { mutate, ... } = useMutation({
mutationFn: loginRegisterApi,
onSuccess: () => {
// Invalidate and refetch
// queryClient.invalidateQueries({ queryKey: ['userProfile'] })
},
})
return (
<button
onClick={() => {
// validations and checks
mutate({
{
email: loginInput.email,
password: loginInput.password,
},
})
}}
>
Login
</button>
...
)
}
If you expect the login and register requirments will change and code becomes complex, its could be better to seperate them as changing one could break the other, and login is used more often then register
Consider these as points for discussion, hope they help in someway