Loading and api fix

src/Pages/ListMenu/ListMenu.jsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { useContext, useEffect, useState } from "react";
 import { ListContext } from "../../context/ListContext/ListContext"
 import { deleteList, getLists } from "../../context/ListContext/apiCalls";
+import Loader from "../../components/Loader/Loader";
 
 const ListMenu=()=> {
   const { lists, dispatch,isFetching,error } = useContext(ListContext);
@@ -19,6 +20,9 @@ const ListMenu=()=> {
   const handleDelete = (id) => {
     deleteList(id, dispatch);
   };
+  if(isFetching){
+    return <Loader/>
+  }
 
   const columns = [
     { field: "_id", headerName: "ID", width: 250 },

src/Pages/Login/Login.jsx

@@ -36,16 +36,16 @@ const Login = () => {
     await login({ username: data.email, password: data.password }, dispatch);
   };
 
+  console.log(error,isFetching)
   // if(user){
   //   return navigate("/")
   // }
 
   return (
     <div className="login">
-      {err.is ||
-        (error.has && (
+      {err.is || error.has && (
           <div className="errMsg">{err.message || error.message}</div>
-        ))}
+        )}
       <form className="loginForm">
         <div className="adminImg">
           <img

src/Pages/Movies/Movies.jsx

@@ -5,6 +5,7 @@ import { getMovies, deleteMovies } from "../../context/movieContext/apiCalls";
 import { MovieContext } from "../../context/movieContext/MovieContetxt";
 import { AuthContext } from "../../context/authContext/AuthContext";
 import { Link } from "react-router-dom";
+import Loader from "../../components/Loader/Loader";
 const Movies = () => {
   // const [data, setData] = useState([]);
 
@@ -25,6 +26,10 @@ const Movies = () => {
   }, []);
 
 
+  if(isFetching) {
+    return <Loader/>
+  }
+
   // if (error) return "Sorry unable to get any movies";
 
   return (

src/Pages/Users/Users.jsx

@@ -6,6 +6,7 @@ import { deleteUser, getUsers } from "../../context/userConetxt/apiCalls";
 import { UserContext } from "../../context/userConetxt/UserContext";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
+import Loader from "../../components/Loader/Loader";
 const Users = () => {
   const {
     users: data,
@@ -23,6 +24,9 @@ const Users = () => {
     await deleteUser(dispatch, id);
   };
   console.log(data)
+  if(isFetching){
+    return <Loader/>
+  }
   return (
     <div className="users">
       <Link to="/new-user">

src/components/Loader/Loader.css

@@ -0,0 +1,77 @@
+.wifi{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 4;
+  padding: 20px;
+  height: 100vh;
+  overflow-x: hidden;
+}
+#nest1 {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 50px;
+    width: 50px;
+    margin: -25px 0 0 -25px;
+    border: 2px solid transparent;
+    border-top-color: #313bac;
+    border-radius: 50%;
+    -webkit-animation: spin7 1.5s ease infinite;
+            animation: spin7 1.5s ease infinite;
+  }
+
+  #nest1:before {
+    content: "";
+    position: absolute;
+    top: 7px;
+    right: 7px;
+    bottom: 7px;
+    left: 7px;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    border-top-color: #313bac;
+    -webkit-animation: spin7 3s linear infinite;
+            animation: spin7 3s linear infinite;
+  }
+
+  #nest1:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    bottom: 15px;
+    left: 15px;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    border-top-color: #313bac;
+    -webkit-animation: spin7 1.5s ease infinite;
+            animation: spin7 1.5s ease infinite;
+  }
+
+  @-webkit-keyframes spin7 {
+    from {
+      -webkit-transform: rotate(0deg);
+              transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(359deg);
+              transform: rotate(359deg);
+    }
+  }
+  @keyframes spin7 {
+    from {
+      -webkit-transform: rotate(0deg);
+              transform: rotate(0deg);
+      -webkit-transform: rotate(0deg);
+              transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(359deg);
+              transform: rotate(359deg);
+      -webkit-transform: rotate(359deg);
+              transform: rotate(359deg);
+    }
+  }

src/components/Loader/Loader.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import "./Loader.css"
+
+const Loader = () => {
+  return (
+<div className='wifi'>
+<div id="nest1"></div>
+</div>
+  )
+}
+
+export default Loader

src/components/WidgetSm/WidgetSm.jsx

@@ -4,13 +4,16 @@ import "./WidgetSm.css";
 import { Email, Person } from "@material-ui/icons";
 import { AuthContext } from "../../context/authContext/AuthContext";
 import { api } from "../../config";
+import Loader from "../Loader/Loader"
 export default function WidgetSm() {
   const [latestUser, setLatestUser] = useState([]);
   const [error, setError] = useState(false);
-  const {user} = useContext(AuthContext)
+  const {user} = useContext(AuthContext);
+  const [loading,setIsLoading] = useState(false);
 
   useEffect(() => {
     const getLatestUser = async () => {
+      setIsLoading(true);
       try {
         const res = await api.get("/users?latest=true", {
           headers: {
@@ -29,8 +32,10 @@ export default function WidgetSm() {
         );
         setError(false);
         setLatestUser(users);
+        setIsLoading(false)
       } catch (error) {
         setError(true);
+        setIsLoading(false)
       }
     };
     getLatestUser();
@@ -39,6 +44,7 @@ export default function WidgetSm() {
   return (
     <div className="widgetSm">
       <span className="widgetSmTitle">New Join Members</span>
+      {loading && <Loader/>}
       {!error ? (
         <ul className="widgetSmList">
           {latestUser.map(({ profilePic, username, email }) => (

src/config.js

@@ -1,4 +1,4 @@
 import axios from "axios"
 export const api=axios.create({
-    baseURL:"https://subhradwip-netflix.herokuapp.com/netflixApi"
+    baseURL:"https://subh-netflix-api.onrender.com/netflixApi"
 })

src/context/authContext/AuthReducers.js

@@ -20,6 +20,7 @@ const AuthReducer = (state, action) => {
         },
       };
     case "LOGIN_FAILURE":
+      console.log(action.payload);
       return {
         user: null,
         isFetching: false,

src/context/authContext/apiCalls.js

@@ -3,12 +3,14 @@ import { api } from "../../config";
 import { loginStart, loginSuccess, loginFailure } from "./AuthActions";
 export const login = async (user, dispatch) => {
   dispatch(loginStart());
+  console.log("Started")
   try {
     const res = await api.post("/auth/login", user);
     res.data.userInfo.isAdmin
       ? dispatch(loginSuccess(res.data.userInfo))
       : dispatch(loginFailure("You are not allowed to access admin panel"));
   } catch (error) {
+    console.log(error)
     dispatch(
       loginFailure(
         error.response.data.message || "Unable to login! Please try again later"

src/context/movieContext/apiCalls.js

@@ -98,7 +98,7 @@ export const createMovie = async (dispatch, m, navigate) => {
 
 export const upadateMovie= async (dispatch,m,navigate)=>{
   try {
-    dispatch(upadteMovieStart);
+    dispatch(upadteMovieStart());
     const {id,...movieDesc}=m;
     const res=await api.put(`/movies/${id}`,movieDesc, {
       headers: {