diff --git a/src/components/MarketPlace/index.jsx b/src/components/MarketPlace/index.jsx index 7032940..11891e6 100644 --- a/src/components/MarketPlace/index.jsx +++ b/src/components/MarketPlace/index.jsx @@ -1,19 +1,21 @@ import React from "react"; -import products from "../../data/marketplace_data.json"; +// import products from "../../data/marketplace_data.json"; //import CreateNft from "../Home/CreateNft"; import Layout from "../Partials/Layout"; import MainSection from "./MainSection"; import CommonHead from "../UserHeader/CommonHead"; +import { useSelector } from "react-redux"; -export default function MarketPlace(props) { - const JobList = props.activeJobList?.result_list; - console.log("activeJobList->",props.activeJobList.result_list); - const marketProduct = products.data; +export default function MarketPlace() { + let { jobLists } = useSelector((state) => state.jobLists); + const marketData = jobLists?.result_list; + + // const marketProduct = products.data; return ( <> - + ); diff --git a/src/components/Partials/Sidebar.jsx b/src/components/Partials/Sidebar.jsx index 8ec198b..799ccbb 100644 --- a/src/components/Partials/Sidebar.jsx +++ b/src/components/Partials/Sidebar.jsx @@ -4,9 +4,15 @@ import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg"; import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg"; import DarkModeContext from "../Contexts/DarkModeContext"; import Icons from "../Helpers/Icons"; +import { useSelector } from "react-redux"; export default function Sidebar({ sidebar, action, logoutModalHandler }) { const darkMode = useContext(DarkModeContext); + + let { jobLists } = useSelector((state) => state.jobLists); + const marketData = jobLists?.result_list; + let noOfJobs = marketData?.length; + useEffect(() => { const title = document.querySelectorAll(".menu-setting-items .heading"); if (sidebar) { @@ -93,69 +99,20 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
-
- - Family Account +
+ + + Family Account +
-
- - Enable Job Post +
+ + + Enable Job Post +
-
@@ -287,19 +244,19 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
  • (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} + to="/myjobs" + className={`nav-item flex items-center ${ + ((navData) => (navData.isActive ? "active" : ""), + sidebar ? "justify-start space-x-3.5" : "justify-center") + }`} > List @@ -307,41 +264,41 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
  • (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} + to="/my-active-jobs" + className={`nav-item flex items-center ${ + ((navData) => (navData.isActive ? "active" : ""), + sidebar ? "justify-start space-x-3.5" : "justify-center") + }`} > - Pending + Pending
  • (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} + to="/my-active-jobs" + className={`nav-item flex items-center ${ + ((navData) => (navData.isActive ? "active" : ""), + sidebar ? "justify-start space-x-3.5" : "justify-center") + }`} > - Active + Active
    • @@ -453,3 +410,33 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
); } + +const ListItem = ({ sidebar, route, title, bubble }) => { + return ( +
  • + (navData.isActive ? "active" : ""), + sidebar ? "justify-start space-x-3.5" : "justify-center") + }`} + > + + + + + {title && title} + {bubble && ( + + {bubble} + + )} + + +
    • + ); +}; diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index 7629db3..ba160ec 100644 --- a/src/middleware/AuthRoute.jsx +++ b/src/middleware/AuthRoute.jsx @@ -1,84 +1,102 @@ -import { useEffect, useState, useCallback } from "react"; +import { useEffect, useState, useCallback, useMemo } from "react"; import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom"; -import usersService from '../services/UsersService' -import LoadingSpinner from '../components/Spinners/LoadingSpinner' -import WrenchBoard from "../assets/images/wrenchboard.png" +import usersService from "../services/UsersService"; +import LoadingSpinner from "../components/Spinners/LoadingSpinner"; import { useDispatch, useSelector } from "react-redux"; -import {updateUserDetails} from '../store/UserDetails' - +import { updateUserDetails } from "../store/UserDetails"; +import { updateJobs } from "../store/jobLists"; const AuthRoute = ({ redirectPath = "/login", children }) => { - const apiCall = new usersService() - - const dispatch = useDispatch() - + const apiCall = useMemo(() => new usersService(), []); + const dispatch = useDispatch(); const [lastActivityTime, setLastActivityTime] = useState(Date.now()); - let [isLogin, setIsLogin] = useState({loading: true, status: false}) - + const [isLogin, setIsLogin] = useState({ loading: true, status: false }); const navigate = useNavigate(); - - //Removing Data stored at localStorage after session expires - const expireSession = () => { - localStorage.removeItem('session_token'); - localStorage.removeItem('member_id'); - localStorage.removeItem('uid'); - localStorage.removeItem('session'); - navigate("/login", { replace: true }); // redirects user to login page after session expires - }; - - // Reset last activity time on user input - const resetTime = () => { - setLastActivityTime(Date.now()); - } - window.addEventListener('mousemove', resetTime) - window.addEventListener('keydown', resetTime) - - const loadProfile = ()=>{ // function to load user profile - setIsLogin({loading: true, status: false}) - apiCall.loadProfile().then((res)=>{ - if(res.data.internal_return < 0){ - setIsLogin({loading: false, status: false}) - return - } - dispatch(updateUserDetails(res.data)) - setIsLogin({loading: false, status: true}) - }).catch(error =>{ - setIsLogin({loading: false, status: false}) - }) - } useEffect(() => { - if(!isLogin.status){ - loadProfile() // LOADS USER PROFILE DETAILS AND CALLS DISPATCH UPDATEUSERDETAILS TO UPDATE USERDETAILS SLICE IN STORE - } + //Removing Data stored at localStorage after session expires + const expireSession = () => { + localStorage.clear(); + navigate("/login", { replace: true }); // redirects user to login page after session expires + }; const checkInactivity = setInterval(() => { - if (Date.now() - lastActivityTime > process.env.REACT_APP_SESSION_EXPIRE_MINUTES) { - expireSession() + if ( + Date.now() - lastActivityTime > + process.env.REACT_APP_SESSION_EXPIRE_MINUTES + ) { + expireSession(); } - }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER) // Checks for inactivity every minute + }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER); // Checks for inactivity every minute // cleaning up listeners return () => { - clearInterval(checkInactivity) - window.removeEventListener('mousemove', resetTime) - window.removeEventListener('keydown', resetTime) - } - }, [lastActivityTime]) + clearInterval(checkInactivity); + }; + }, [lastActivityTime, navigate]); - return ( - isLogin.loading ? - - // Stills needs fixing - //
    - // wrenchboard - //
    - : - !isLogin.status ? - - : - (children || ) - ) + // Reset last activity time on user input + const resetTime = useCallback(() => { + setLastActivityTime(Date.now()); + }, []); + + useEffect(() => { + window.addEventListener("mousemove", resetTime); + window.addEventListener("keydown", resetTime); + + return () => { + window.removeEventListener("mousemove", resetTime); + window.removeEventListener("keydown", resetTime); + }; + }, [resetTime]); + + useEffect(() => { + if (!isLogin.status) { + const loadProfile = () => { + // function to load user profile + setIsLogin({ loading: true, status: false }); + apiCall + .loadProfile() + .then((res) => { + if (res.data.internal_return < 0) { + setIsLogin({ loading: false, status: false }); + return; + } + dispatch(updateUserDetails(res.data)); + setIsLogin({ loading: false, status: true }); + }) + .catch((error) => { + setIsLogin({ loading: false, status: false }); + }); + }; + loadProfile(); + } + }, []); + + useEffect(() => { + // Getting market data + const getMarketActiveJobList = async () => { + try { + const res = await apiCall.getActiveJobList(); + dispatch(updateJobs(res.data)); + } catch (error) { + console.log("Error getting mode"); + } + }; + getMarketActiveJobList(); + }, [apiCall, dispatch]); + + return isLogin.loading ? ( + + ) : // Stills needs fixing + //
    + // wrenchboard + //
    + !isLogin.status ? ( + + ) : ( + children || + ); }; -export default AuthRoute; \ No newline at end of file +export default AuthRoute; diff --git a/src/store/jobLists.js b/src/store/jobLists.js new file mode 100644 index 0000000..6c07347 --- /dev/null +++ b/src/store/jobLists.js @@ -0,0 +1,19 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + jobLists: {} +}; + +export const jobSlice = createSlice({ + name: "jobLists", + initialState, + reducers: { + updateJobs: (state, payload) => { + state.jobLists = { ...payload.payload }; + }, + }, +}); + +export const { updateJobs } = jobSlice.actions; + +export default jobSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index deefd7d..07fbf4f 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -2,10 +2,12 @@ import { configureStore } from "@reduxjs/toolkit"; import drawerReducer from "./drawer"; import userDetailReducer from "./UserDetails"; +import jobReducer from "./jobLists"; export default configureStore({ reducer: { drawer: drawerReducer, userDetails: userDetailReducer, + jobLists: jobReducer }, }); \ No newline at end of file diff --git a/src/views/MarketPlacePage.jsx b/src/views/MarketPlacePage.jsx index 90a6793..5bac891 100644 --- a/src/views/MarketPlacePage.jsx +++ b/src/views/MarketPlacePage.jsx @@ -1,29 +1,9 @@ -import React, {useState, useEffect} from 'react' import MarketPlace from "../components/MarketPlace"; -import usersService from "../services/UsersService"; export default function MarketPlacePage() { - // const userApi = new usersService(); - // const activeJobList = userApi.getActiveJobList(); - // console.log("activeJobList->",activeJobList); - - const [marketActiveJobList, setMarketActiveJobList] = useState([]); - const api = new usersService(); - - const getMarketActiveJobList = async () => { - try { - const res = await api.getActiveJobList(); - setMarketActiveJobList(res.data); - } catch (error) { - console.log("Error getting mode"); - } - }; - useEffect(() => { - getMarketActiveJobList(); - }, []); return ( <> - + ); }