WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2024-03-12 12:35:04 -04:00
parent 7173901c9b 380d014964
commit 6cd92f6372
14 changed files with 236 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.jsx
+11 -8
View File
@@ -2,19 +2,22 @@ import { Navigate, useLocation } from "react-router-dom";
import Routers from "./Routers";
import Toaster from "./components/Helpers/Toaster";
import Default from "./components/Partials/Default";
import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
function App() {
const { pathname } = useLocation();
return (
<Default>
<>
{pathname.startsWith("/@") ? (
<Navigate to="/app" replace={true} />
) : (
<Routers />
)}
<Toaster />
</>
<SocketIOContextProvider>
<>
{pathname.startsWith("/@") ? (
<Navigate to="/app" replace={true} />
) : (
<Routers />
)}
<Toaster />
</>
</SocketIOContextProvider>
</Default>
);
}
src/components/Breadcrumb/CustomBreadcrumb.jsx
+20 -17
View File
@@ -1,22 +1,25 @@
import React from 'react'
import { Link } from 'react-router-dom'
import React from "react";
import { Link } from "react-router-dom";
export default function CustomBreadcrumb({title, breadcrumb}) {
export default function CustomBreadcrumb({ title, breadcrumb }) {
return (
<div className="">
<h3 className="text-26 font-bold text-dark-gray dark:text-white">{title}</h3>
<nav aria-label="breadcrumb" className='text-base text-dark-gray dark:text-white flex items-center'>
{breadcrumb.map((value, index) => (
<p key={index}>
<Link className={`${value.active ? 'opacity-60' : ''}`} to={value.link}>{value.title}</Link>
{index != breadcrumb.length - 1 ?
<span className='px-1'>/</span>
:
null
}
</p>
))}
</nav>
<h3 className="text-26 font-bold text-dark-gray dark:text-white">
{title}
</h3>
<nav
aria-label="breadcrumb"
className="text-base text-dark-gray dark:text-white flex items-center"
>
{breadcrumb.map((value, index) => (
<React.Fragment key={index}>
<Link className={value.active ? "opacity-60" : ""} to={value.link}>
{value.title}
</Link>
{index !== breadcrumb.length - 1 && <span className="px-1">\</span>}
</React.Fragment>
))}
</nav>
</div>
)
);
}
src/components/Contexts/SocketIOContext.js
+62
View File
@@ -0,0 +1,62 @@
import React, { createContext, useContext, useEffect, useState } from "react";
import { tableReload } from "../../store/TableReloads";
import { useDispatch } from "react-redux";
import io from "socket.io-client";
let SocketIOContext = createContext({})
export default function SocketIOContextProvider({children}) {
const dispatch = useDispatch()
const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET);
// //Room State
// const [room, setRoom] = useState("");
// // Messages States
// const [message, setMessage] = useState("");
const [socketMsgReceived, setSocketMsgReceived] = useState("");
const joinRoom = (room) => {
if (room !== "") {
socket.emit("join_room", room);
}
};
const sendMessage = (message, room) => {
if(message && room){
socket.emit("send_message", { message, room });
}
};
useEffect(() => {
socket.on("receive_message", (data) => {
// setSocketMsgReceived(data.message);
dispatch(tableReload({type:'CHATMESSAGELIST'}))
});
}, [socket]);
let values = {
socket,
sendMessage,
joinRoom,
setSocketMsgReceived,
socketMsgReceived,
// room,
// setRoom,
// message,
// setMessage,
}
return (
<SocketIOContext.Provider value={values}>
{children}
</SocketIOContext.Provider>
)
}
export const SocketValues = () => {
return useContext(SocketIOContext)
}
src/components/FamilyAcc/FamilyActivities.jsx
+17 -6
View File
@@ -1,12 +1,11 @@
import React, { Suspense, useMemo, useState } from "react";
import React, { Suspense } from "react";
import { Link } from "react-router-dom";
import usersService from "../../services/UsersService";
import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import FamilyTableNew from "./FamilyTableNew";
export default function FamilyActivities() {
return (
<Layout>
{/*<CommonHead />*/}
@@ -15,9 +14,21 @@ export default function FamilyActivities() {
{/* heading */}
<div className="sm:flex justify-between items-center mb-6">
<div className="mb-5 sm:mb-0">
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
<span className={``}>Tasks & Chores</span>
</h1>
<CustomBreadcrumb
title={"Tasks & Chores"}
breadcrumb={[
{ link: "/", title: "Home" },
{
link: "/acc-family",
title: "Family Account",
},
{
link: "/acc-family/activities",
title: "Tasks & Chores",
active: true,
},
]}
/>
</div>
<Link
className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+23 -19
View File
@@ -188,31 +188,35 @@ const AssignTaskPopout = React.memo(
});
};
console.log(details);
return (
<>
<ModalCom action={action} situation={situation}>
<div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide flex items-center">
Assign task to{" "}
{pathname === "/acc-family/activities" ? (
<div className="w-[270px] h-[40px] ml-2">
<select
name=""
id=""
className="text-black/70 bg-transparent px-2 transition-all cursor-pointer focus:outline-none border border-gray-200 rounded-lg w-full h-full py-1"
onChange={handleFamChange}
value={selectedFamilyUid}
>
<option value="" disabled selected>
Select a member
</option>
{familyList}
</select>
</div>
) : (
<>{familyDetailsData?.firstname || details?.firstName}</>
)}
<>
Assign task to{" "}
{pathname === "/acc-family/activities" ? (
<div className="w-[270px] h-[40px] ml-2">
<select
name=""
id=""
className="text-black/70 bg-transparent px-2 transition-all cursor-pointer focus:outline-none border border-gray-200 rounded-lg w-full h-full py-1"
onChange={handleFamChange}
value={selectedFamilyUid}
>
<option value="" disabled selected>
Select a member
</option>
{familyList}
</select>
</div>
) : (
<>{familyDetailsData?.firstname || details?.firstName}</>
)}
</>
</h1>
<button
type="button"
src/components/FamilyAcc/FamilySettings/index.jsx
+36 -8
View File
@@ -1,11 +1,12 @@
import React, { useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import CustomBreadcrumb from "../../Breadcrumb/CustomBreadcrumb";
import Icons from "../../Helpers/Icons";
import Layout from "../../Partials/Layout";
import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
const FamilySettings = () => {
let {state} = useLocation()
let { state } = useLocation();
const tabs = [
{
id: 1,
@@ -58,15 +59,42 @@ const FamilySettings = () => {
{/* heading */}
<div className="sm:flex justify-between items-center mb-6">
<div className="mb-5 sm:mb-0">
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
<span className={``}>Family Settings</span>
</h1>
<CustomBreadcrumb
title={"Family Settings"}
breadcrumb={[
{ link: "/", title: "Home" },
{
link: "/acc-family",
title: "Family Account",
},
{
link: "/familysettings",
title: "Family Settings",
active: true,
},
]}
/>
</div>
<Link to="/acc-family" className="flex gap-2 items-center text-dark-gray dark:text-white">
<svg className="w-5 h-5 rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
<Link
className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
to="/acc-family"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
/>
</svg>
Family
<span>Family</span>
</Link>
</div>
src/components/FamilyAcc/FamilyTableNew.jsx
+1 -1
View File
@@ -1,9 +1,9 @@
import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
import { apiConst } from "../../lib/apiConst";
import usersService from "../../services/UsersService";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
import { useLocation } from "react-router-dom";
// Lazy Imports for components
const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx
+1 -1
View File
@@ -44,7 +44,7 @@ const FamilyNewWaitlist = ({
setContinueTaskPopup({ show: false, data: {} });
};
// console.log("Check this >>",currentTask)
console.log("Check this >>",continueTaskPopup)
return (
<div
src/components/FamilyAcc/index.jsx
+1 -1
View File
@@ -146,7 +146,7 @@ export default function FamilyAcc() {
breadcrumb={
[
{ link: "/", title: "Home" },
{ link: "/acc-family", title: "Family-acc", active: true},
{ link: "/acc-family", title: "Family Account", active: true},
]
}
/>
src/components/FamilyPopup/SuggestTask.jsx
+41 -20
View File
@@ -2,7 +2,6 @@ import { Form, Formik } from "formik";
import { useState } from "react";
import { useLocation } from "react-router-dom";
import usersService from "../../services/UsersService";
import Icons from "../Helpers/Icons";
import InputCom from "../Helpers/Inputs/InputCom";
import ModalCom from "../Helpers/ModalCom";
@@ -52,22 +51,46 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
const handleParentSuggestion = (values) => {
if (suggestedNextStep === "Send Task") {
let firstName = state?.firstname;
let family_uid = state?.family_uid;
continuePopupData({ ...details, firstName, family_uid });
let firstname = state?.firstname || details?.firstname;
let family_uid = state?.family_uid || details?.family_uid;
continuePopupData({
...details,
firstname,
family_uid,
});
}
onClose();
};
const isActivitiesPage = pathname === "/acc-family/activities";
const isManageFamilyPage = pathname === "/manage-family";
const getButtonText = () => {
if (isActivitiesPage) {
return suggestedNextStep === "Send Task" ? "Continue" : "Complete";
} else {
if (!isManageFamilyPage) {
if (submitTask.loading) return "Submitting Task";
if (submitTask.state === "success") return "Task Submitted";
if (submitTask.state === "bad") return "An Error Occurred";
return "Send to Parents";
} else {
return suggestedNextStep === "Send Task" ? "Continue" : "Complete";
}
}
};
console.log(details);
return (
<ModalCom action={onClose} situation={situation}>
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
{pathname === "/manage-family"
{isManageFamilyPage
? `${state?.firstname}'s Suggested Task`
: pathname === "/acc-family/activities"
? "Suggested Task"
: isActivitiesPage
? `${details?.firstname}'s Suggested Task`
: "Suggest to Parent"}
</h1>
<button
@@ -99,10 +122,11 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
<Formik
initialValues={initialValues}
onSubmit={
pathname !== "/manage-family" ||
pathname !== "/acc-family/activities"
? handleSuggestedTask
: handleParentSuggestion
isActivitiesPage
? handleParentSuggestion
: isManageFamilyPage
? handleParentSuggestion
: handleSuggestedTask
}
>
{(props) => {
@@ -252,18 +276,14 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
disabled={props.isSubmitting}
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out flex items-center"
>
{pathname === "/acc-family/activities" ? (
{/* {pathname === "/acc-family/activities" ? (
<>
{submitTask.loading ? (
"Sending..."
) : submitTask.state === "success" ? (
"Completed"
) : submitTask.state === "bad" ? (
"An Error Occurred"
) : (
{suggestedNextStep === "Send Task" ? (
<>
Continue <Icons name="chevron-right" />
</>
) : (
"Complete"
)}
</>
) : (
@@ -290,7 +310,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
</>
)}
</>
)}
)} */}
{getButtonText()}
</button>
</div>
</div>
src/components/MyActiveJobs/ActiveJobs.jsx
+12
View File
@@ -11,8 +11,11 @@ import IndexJobActions from "./JobActions/IndexJobActions";
import usersService from "../../services/UsersService";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import { SocketValues } from "../Contexts/SocketIOContext";
function ActiveJobs(props) {
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
const ApiCall = new usersService();
const navigate = useNavigate();
@@ -139,6 +142,9 @@ function ActiveJobs(props) {
status: true,
message: "Message Sent Successfully",
});
// function to trigger socket to emit 'send_message'
sendMessage(messageToSend, `${props.details.contract}-${props.details.contract_uid}`)
props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
setMessageToSend(""); // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS
})
@@ -255,6 +261,12 @@ function ActiveJobs(props) {
props.details?.currency
);
useEffect(()=>{
// calls function to add user to a room
joinRoom(`${props.details.contract}-${props.details.contract_uid}`)
},[props.details.contract, props.details.contract_uid])
return (
<Layout>
<div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
src/middleware/AuthRoute.jsx
+1 -1
View File
@@ -229,7 +229,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
apiCall
.getHeroJBanners()
.then((res) => {
if (res.data.internal_return < 0) {
if (res.data?.internal_return < 0) {
return;
}
dispatch(commonHeadBanner(res.data));
src/store/TableReloads.js
+4
View File
@@ -9,6 +9,7 @@ const initialState = {
walletTable: false,
uploadsTable: false,
familyBannersListTable: false,
chatMessageList: false,
};
export const tableReloadSlice = createSlice({
@@ -41,6 +42,9 @@ export const tableReloadSlice = createSlice({
case "FAMILYBANNERSLIST":
state.familyBannersListTable = !state.familyBannersListTable;
return;
case "CHATMESSAGELIST":
state.chatMessageList = !state.chatMessageList;
return;
default:
return state;
}
src/views/ManageActiveJobs.jsx
+6 -1
View File
@@ -2,12 +2,17 @@ import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
import usersService from "../services/UsersService";
import { useSelector } from "react-redux";
/**
* This code defines a React functional component called `ManageActiveJobs`.
* It fetches a list of active job messages and renders the `ActiveJobs` component with the necessary props.
*/
function ManageActiveJobs() {
const { chatMessageList } = useSelector(
(state) => state.tableReload
);
const ApiCall = new usersService();
const navigate = useNavigate();
@@ -54,7 +59,7 @@ function ManageActiveJobs() {
}
setDetails(state);
getActiveJobMesList();
}, [activeJobMesListReload]);
}, [activeJobMesListReload, chatMessageList]);
return (
<ActiveJobs