assign job rounded select tag

src/components/AuthPages/Login/index2.jsx

@@ -145,8 +145,9 @@ export default function Login() {
         localStorage.setItem("member_id", `${res.data.member_id}`);
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
-        if (name === "family") {
+        if (res.data?.account_type == "FAMILY") {
           sessionStorage.setItem("family_uid", res.data?.family_uid);
+          sessionStorage.setItem("parent_uid", res.data?.parent_uid);
         }
         // localStorage.setItem("session", `${res.data.session}`);
         dispatch(updateUserDetails({ ...res.data }));

src/components/Contexts/SocketIOContext.js

@@ -1,12 +1,14 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { tableReload } from "../../store/TableReloads";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import io from "socket.io-client";
 
 let SocketIOContext = createContext({})
 
 export default function SocketIOContextProvider({children}) {
+    const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER UID, to determine if user is active
+
     const dispatch = useDispatch()
 
     const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET); 
@@ -36,6 +38,12 @@ export default function SocketIOContextProvider({children}) {
         }
     };
 
+    const parentAssignJobToKid = (message, room) => {
+        if(message && room){
+            socket.emit("family", { message:{...message}, room });
+        }
+    };
+
     useEffect(() => {
         socket.on("receive_message", (data) => {
             // setSocketMsgReceived(data.message);
@@ -45,6 +53,14 @@ export default function SocketIOContextProvider({children}) {
             // setSocketMsgReceived(data.message);
             dispatch(tableReload({type:'MARKETTABLELIST'}))
         });
+        socket.on("family_actions", (data) => {
+            // setSocketMsgReceived(data.message);
+            let user_uid = userDetails.account_type == 'FULL' ? userDetails.uid : sessionStorage.getItem('family_uid')
+            let {message} = data
+            if(message.action == "REFRESH_OFFER" && message.family_uid == user_uid && message.audience == "MEMBER"){
+                dispatch(tableReload({type:'FAMILYOFFERLIST'}))
+            }
+        });
     }, [socket]);
 
     let values = {
@@ -52,8 +68,9 @@ export default function SocketIOContextProvider({children}) {
         sendMessage,
         joinRoom,
         setSocketMsgReceived,
-        socketMsgReceived,
         marketUpdate,
+        parentAssignJobToKid,
+        socketMsgReceived,
         // room,
         // setRoom,
         // message,

src/components/FamilyAcc/FamilyPendingOffer.jsx

@@ -4,26 +4,27 @@ import MyOffersFamilyTable from '../MyTasks/MyOffersFamilyTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner';
 import usersService from '../../services/UsersService';
 import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb';
+import { useSelector } from 'react-redux';
 
 export default function FamilyPendingOffer() {
     const userApi = new usersService();
 
+    const {familyOfferList} = useSelector((state) => state.tableReload)
+
     const [myOffersList, setMyOffersList] = useState({loading: true, data: []});
 
     const getMyOffersList = async () => {
         try {
             const res = await userApi.getOffersList();
             setMyOffersList({loading:false, data:res.data});
-            console.log('SAME', res.data)
         } catch (error) {
             setMyOffersList({loading:false, data:[]});
-            console.log("Error getting offers", error);
         }
     };
 
     useEffect(()=>{
         getMyOffersList()
-    },[])
+    },[familyOfferList])
     return (
         <Layout>
             {myOffersList.loading ?

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import { tableReload } from "../../../store/TableReloads";
@@ -8,6 +8,7 @@ import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
 import { NewTasks } from "./forms";
+import { SocketValues } from "../../Contexts/SocketIOContext";
 
 const AssignTaskPopout = ({
   action,
@@ -21,9 +22,12 @@ const AssignTaskPopout = ({
   assignTaskChecker,
   
 }) => {
+  const {parentAssignJobToKid} = SocketValues()
   const apiCall = new usersService();
   let { pathname, state } = useLocation();
 
+  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
   const [selectedFamilyUid, setSelectedFamilyUid] = useState('');
 
   const handleFamChange = (event) => {
@@ -188,6 +192,16 @@ const AssignTaskPopout = ({
 
           dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
 
+          //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
+          // message, room
+          let socketMsg = {
+            "audience": "MEMBER",
+            "action": "REFRESH_OFFER",
+            "family_uid": reqData.family_uid,
+          }
+          let socketRoom = `FAMILY-${userDetails.uid}`
+          parentAssignJobToKid(socketMsg, socketRoom) //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
+
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
             action(); // FUNCTION THAT CLOSES THE MODAL BOX
@@ -228,17 +242,17 @@ const AssignTaskPopout = ({
               ) : familyDetailsData ? (
                 ` Assign ${familyDetailsData.firstname}'s Task`
               ) : (
-                <div className="flex items-center">
+                <div className="flex items-center gap-2">
                   <span className="text-black">Assign task to{" "}</span>
-                  <div className="w-[270px] h-[40px] ml-2">
+                  <div className="w-[270px] h-[40px] flex items-center relative after:absolute after:content-['▼'] active:after:rotate-180 after:transition-all after:duration-300 after:z-20 after:right-2 after:top-1/2 after:-translate-y-1/2 after:text-white after:text-lg">
                     <select
                       name=""
                       id=""
-                      className="text-white px-2 transition-all cursor-pointer bg-blue-900 focus:outline-none border border-gray-200 rounded-lg w-full h-full py-1"
+                      className="relative z-10 appearance-none text-lg text-white px-2 tracking-wide font-semibold transition-all cursor-pointer bg-blue-900 focus:outline-none border border-gray-200 rounded-full w-full h-full"
                       onChange={handleFamChange}
                       value={selectedFamilyUid}
                     >
-                      <option value="">
+                      <option value="" className="">
                         Select a kid
                       </option>
                       {familyList}

src/components/Partials/Layout.jsx

@@ -20,10 +20,7 @@ export default function Layout({ children }) {
   };
   const navigate = useNavigate();
   const logOut = () => {
-    localStorage.removeItem("session_token");
-    localStorage.removeItem("member_id");
-    localStorage.removeItem("uid");
-    sessionStorage.removeItem("family_uid");
+    sessionStorage.clear();
     localStorage.clear();
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,

src/middleware/AuthRoute.jsx

@@ -32,18 +32,15 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   );
 
   const {
-    userDetails: { username, uid, session, account_type },
+    userDetails: { username, uid, session, account_type, parent_uid },
   } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
   let loggedIn = username && session && uid ? true : false; // variable to determine if user is logged in
-
+  
   useEffect(() => {
     //Removing Data stored at localStorage after session expires
     const expireSession = () => {
-      localStorage.removeItem("uid");
-      localStorage.removeItem("member_id");
-      localStorage.removeItem("session_token");
-      sessionStorage.removeItem("family_uid");
+      sessionStorage.clear();
       localStorage.clear();
       navigate("/login", { replace: true }); // redirects user to login page after session expires
     };
@@ -109,6 +106,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
           });
       };
       loadProfile();
+    }else{
+      setIsLogin({ loading: false, status: true });
     }
   }, []);
 
@@ -323,6 +322,12 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       joinRoom('full-markets-jobs')
   },[isLogin.status])
 
+  useEffect(()=>{ // sends an event to the socket to enable user join a room to be able to receive update for parent child job assign
+    if(loggedIn || isLogin.status){
+      joinRoom(`FAMILY-${account_type == 'FULL' ? uid : sessionStorage.getItem('parent_uid')}`)
+      console.log(`Room joined for parent child task assign as ${account_type} with ${account_type == 'FULL' ? uid : sessionStorage.getItem('parent_uid')}}`)
+    }
+  },[isLogin.status])
 
   // RENDER PAGE
   return isLogin.loading && !loggedIn ? (

src/store/TableReloads.js

@@ -11,6 +11,7 @@ const initialState = {
   familyBannersListTable: false,
   chatMessageList: false,
   marketTableList: false,
+  familyOfferList: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -49,6 +50,9 @@ export const tableReloadSlice = createSlice({
         case "MARKETTABLELIST":
           state.marketTableList = !state.marketTableList;
           return;
+        case "FAMILYOFFERLIST":
+          state.familyOfferList = !state.familyOfferList;
+          return;
         default:
           return state;
       }