dasbord user and admin

Author: rezwanhossen

package-lock.json

@@ -18,10 +18,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.5",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.23.1",
     "react-tabs": "^6.0.2",
     "sort-by": "^1.2.0",
+    "sweetalert2": "^11.11.1",
     "swiper": "^11.1.4"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,17 @@
+import { Navigate } from "react-router-dom";
+import useAdmin from "../../Hooks/useAdmin";
+import useAuth from "../../Hooks/useAuth";
+import LogingSpiner from "../../Sheare/LogingSpiner";
+
+const Adminrouter = ({ children }) => {
+  const { user, loding } = useAuth();
+  const [isAdmin, isLoading] = useAdmin();
+  const location = useLocation();
+  if (loding || isLoading) return <LogingSpiner></LogingSpiner>;
+  if (user && isAdmin) return children;
+  return (
+    <Navigate to="/login" state={location.pathname} replace="true"></Navigate>
+  );
+};
+
+export default Adminrouter;

src/Componente/Firbase/Adminrouter.jsx

@@ -10,13 +10,16 @@ import {
   updateProfile,
 } from "firebase/auth";
 import app from "./firbase.config";
+import axios from "axios";
+import useAxiosCommon from "../../Hooks/useAxiosCommon";
 
 export const AuthContext = createContext(null);
 const auth = getAuth(app);
 const googlepro = new GoogleAuthProvider();
 const AuthProvider = ({ children }) => {
   const [user, setuser] = useState(null);
   const [loding, setloding] = useState(true);
+  const axiosCommon = useAxiosCommon();
 
   //user create
   const creatuser = (email, password) => {
@@ -43,16 +46,20 @@ const AuthProvider = ({ children }) => {
   // logout
   const logout = async () => {
     setuser(null);
-
-    signOut(auth);
+    return signOut(auth);
   };
 
-  // Get token from server
-  const getToken = async (email) => {
+  //save user
+
+  const saveUser = async (user) => {
+    const cuser = {
+      name: user?.displayName,
+      email: user?.email,
+      badge: "bronze",
+    };
     const { data } = await axios.post(
-      `${import.meta.env.VITE_API_URL}/jwt`,
-      { email },
-      { withCredentials: true }
+      `${import.meta.env.VITE_API_URL}/user`,
+      cuser
     );
     return data;
   };
@@ -61,15 +68,26 @@ const AuthProvider = ({ children }) => {
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (user) => {
       setuser(user);
+      console.log(user);
+
       if (user) {
-        getToken(user.email);
+        const userinfo = { email: user.email };
+        axiosCommon.post("/jwt", userinfo).then((res) => {
+          if (res.data.token) {
+            localStorage.setItem("access-token", res.data.token);
+          }
+        });
+
+        saveUser(user);
+      } else {
+        localStorage.removeItem("access-token");
       }
       setloding(false);
     });
     return () => {
       return unsubscribe();
     };
-  }, []);
+  }, [axiosCommon]);
 
   const allvalue = {
     user,
@@ -80,6 +98,7 @@ const AuthProvider = ({ children }) => {
     logout,
     setuser,
     loding,
+    setloding,
   };
   return (
     <AuthContext.Provider value={allvalue}>{children}</AuthContext.Provider>

src/Componente/Firbase/AuthProvider.jsx

@@ -0,0 +1,15 @@
+import { Navigate, useLocation } from "react-router-dom";
+import useAuth from "../../Hooks/useAuth";
+import LogingSpiner from "../../Sheare/LogingSpiner";
+
+const PrivateRout = ({ children }) => {
+  const { user, loding } = useAuth();
+  const location = useLocation();
+  if (loding) return <LogingSpiner></LogingSpiner>;
+  if (user) return children;
+  return (
+    <Navigate to="/login" state={location.pathname} replace="true"></Navigate>
+  );
+};
+
+export default PrivateRout;

src/Componente/Firbase/PrivateRout.jsx

@@ -1,10 +1,26 @@
-import { Link } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import Social from "./Social";
 import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import useAuth from "../../Hooks/useAuth";
 
 const Login = () => {
+  const { login } = useAuth();
+  const naviget = useNavigate();
+  const location = useLocation();
+  const from = location?.state || "/";
+
   const { register, handleSubmit } = useForm();
-  const onSubmit = (data) => console.log(data);
+  const onSubmit = async (data) => {
+    const { email, password } = data;
+    try {
+      await login(email, password);
+      naviget(from);
+      toast.success(" Login successful !");
+    } catch (err) {
+      toast.error(err.message);
+    }
+  };
   return (
     <div className="w-full md:w-3/4 mx-auto p-4">
       <div className="md:flex gap-3 ">

src/Componente/LoginReg/Login.jsx

@@ -1,10 +1,37 @@
+import axios from "axios";
 import { useForm } from "react-hook-form";
-import { Link } from "react-router-dom";
+import toast from "react-hot-toast";
+import { Link, useNavigate } from "react-router-dom";
+import useAuth from "../../Hooks/useAuth";
 import Social from "./Social";
+import { ImSpinner9 } from "react-icons/im";
 
 const Register = () => {
+  const naviget = useNavigate();
+  const { creatuser, updatprofil, loding, setloding } = useAuth();
   const { register, handleSubmit } = useForm();
-  const onSubmit = (data) => console.log(data);
+  const onSubmit = async (data) => {
+    const { name, image, email, password } = data;
+    const imgfile = { image: data.image[0] };
+    try {
+      const { data } = await axios.post(
+        `https://api.imgbb.com/1/upload?key=${import.meta.env.VITE_IMGBB_key}`,
+        imgfile,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+      const result = await creatuser(email, password);
+      await updatprofil(name, data.data.display_url);
+      naviget("/");
+      toast("Sign up Successful !");
+    } catch (error) {
+      setloding(false);
+      toast(error.message);
+    }
+  };
   return (
     <div>
       <div className=" w-full md:w-3/6 mx-auto">
@@ -25,7 +52,13 @@ const Register = () => {
           <div>
             <label> Your photo : </label>
 
-            <input type="file" {...register("img")} required name="img" id="" />
+            <input
+              type="file"
+              {...register("image")}
+              required
+              name="image"
+              id=""
+            />
           </div>
           <br />
           <div>
@@ -55,7 +88,8 @@ const Register = () => {
           <input
             type="submit"
             className=" btn btn-outline btn-primary w-full"
-            value="Login"
+            value={loding ? "Please wait" : "Register"}
+            disabled={loding}
           />
         </form>
         <p className=" text-center mt-2">

src/Componente/LoginReg/Register.jsx

@@ -1,11 +1,29 @@
+import toast from "react-hot-toast";
 import { FaGoogle } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+import useAuth from "../../Hooks/useAuth";
 
 const Social = () => {
+  const { googlelogin, loding } = useAuth();
+  const naviget = useNavigate();
+  const handelglogin = async () => {
+    try {
+      await googlelogin();
+      naviget("/");
+      toast.success("google Login successful !");
+    } catch (err) {
+      toast.error(err.message);
+    }
+  };
   return (
-    <div className=" mt-2">
+    <div className=" mt-2 mb-10">
       <div className=" divider"> or </div>
       <div className=" flex justify-center">
-        <button className=" btn text-2xl btn-outline btn-primary">
+        <button
+          disabled={loding}
+          onClick={handelglogin}
+          className=" btn text-2xl btn-outline btn-primary"
+        >
           <FaGoogle /> Google
         </button>
       </div>