From a5631b629185479c91c83b0ab687353df585caef Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 2 Apr 2024 16:42:54 +0100 Subject: [PATCH 1/4] initial commit --- src/Routers.jsx | 2 + src/components/Partials/MediaHeader.jsx | 2 +- src/components/Partials/MediaLayout.jsx | 2 +- src/components/familyResources/FamGames.jsx | 509 +++++++++++++++++++- 4 files changed, 509 insertions(+), 6 deletions(-) diff --git a/src/Routers.jsx b/src/Routers.jsx index f1b658b..e8466e5 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -66,6 +66,7 @@ import FamWorkInProgressPage from "./views/FamWorkInProgressPage"; import MyPastDueTasksPage from "./views/MyPastDueTasksPage"; import FamilyWalletPage from "./views/FamilyWalletPage"; import FamilyActivitiesPage from "./views/FamilyActivitiesPage"; +import FamGamesPage from "./views/FamGamesPage"; export default function Routers() { return ( @@ -144,6 +145,7 @@ export default function Routers() { } /> } /> } /> + } /> } /> { if (backpath == "/manage-family") { navigate(backpath, - { state: { ...state} }, + { state: state ? { ...state } : {} }, { replace: true } ); } else { diff --git a/src/components/Partials/MediaLayout.jsx b/src/components/Partials/MediaLayout.jsx index f76d824..d1f9fc4 100644 --- a/src/components/Partials/MediaLayout.jsx +++ b/src/components/Partials/MediaLayout.jsx @@ -69,7 +69,7 @@ export default function MediaLayout({backpath, title, state, children }) {
{/* header */}
- setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} /> + setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
{/* container */}
diff --git a/src/components/familyResources/FamGames.jsx b/src/components/familyResources/FamGames.jsx index 6e23e26..e9f2a2f 100644 --- a/src/components/familyResources/FamGames.jsx +++ b/src/components/familyResources/FamGames.jsx @@ -1,10 +1,511 @@ -import React from 'react' +import React, { useRef, useState } from 'react' import Layout from '../Partials/Layout' +import MediaLayout from '../Partials/MediaLayout' +import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb' +import ActiveJobMessageMedia from '../MyActiveJobs/ActiveJobMessageMedia' +import LoadingSpinner from '../Spinners/LoadingSpinner' +import usersService from '../../services/UsersService' +import { useNavigate } from 'react-router-dom' +import { useSelector } from 'react-redux' +import { useReactToPrint } from 'react-to-print' export default function FamGames() { + + const ApiCall = new usersService(); + const navigate = useNavigate(); + + const { userDetails } = useSelector((state) => state.userDetails); + + const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent + + const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent + + const [tab, setTab] = useState("message"); + + const [requestStatus, setRequestStatus] = useState({ + loading: false, + status: false, + message: "", + }); + + // let [popUp, setPopUp] = useState(false); // STATE FOR POPOUT MODAL + + const printRef = useRef(); + // to handle printing + const handlePrint = useReactToPrint({ + content: () => printRef.current, + }); + + // FUNCTION TO HANDLE POPOUT + const popUpHandler = () => { + setPopUp((prev) => !prev); + }; + + // FUNCTION TO HANDLE MESSAGE CHANGE + const handleMessageChange = ({ target: { value } }) => { + setMessageToSend(value); + }; + + // FUNCTION TO HANDLE FILE UPlOAD CHANGE + const handleFileChange = ({ target: { files } }) => { + setRequestStatus({ loading: false, status: false, message: "" }); // State to determine error state + + if (!files[0]) { + // IF NO FILE SELECTED RETURN + return; + } + if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { + setRequestStatus({ + loading: false, + status: false, + message: "File must be <= 1mb", + }); + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + return; + } + if (filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)) { + setRequestStatus({ + loading: false, + status: false, + message: `Total number of attachment is ${Number( + process.env.REACT_APP_TOTAL_NUM_FILE + )}`, + }); + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + return; + } + // INCLUDE FILE IF NO ERROR + setFilesToSend((prev) => [...prev, files[0]]); + }; + + // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES + const handleClearAll = ({ target: { name } }) => { + if (tab == "message") { + setMessageToSend(""); + } else if (tab == "files") { + setFilesToSend([]); + } else { + return; + } + }; + + // FUNCTION TO REMOVE AND IMAGE + const handleRemoveImage = (imageToDelete) => { + setFilesToSend((prev) => + prev.filter((item) => item.name != imageToDelete.name) + ); + }; + + // FUNCTION TO SEND TASK MESSAGE + const sendTaskMessage = () => { + let reqData = { + message: messageToSend, + msg_type: "TEXT", + contract: props.details.contract, + }; + if (!reqData.message) { + setRequestStatus({ + loading: false, + status: false, + message: "Message is empty", + }); + return setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + } + setRequestStatus({ loading: true, status: false, message: "" }); + ApiCall.sendTaskMessage(reqData) + .then((res) => { + if (res.status != 200 || res.data.internal_return < 0) { + setRequestStatus({ + loading: false, + status: false, + message: "Message could not be sent, try again later", + }); + return; + } + setRequestStatus({ + loading: false, + 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 + }) + .catch((error) => { + setRequestStatus({ + loading: false, + status: false, + message: "Opps! something went wrong", + }); + }) + .finally(() => { + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + }); + }; + + // FUNCTION TO SEND FILES + const sendFile = async () => { + setRequestStatus({ loading: true, status: false, message: "" }); + + if (!filesToSend.length) { + // checks if file to send is empty + setRequestStatus({ + loading: false, + status: false, + message: "No File(s) selected", + }); + return setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + } + + for (let i = 0; i <= filesToSend.length - 1; i++) { + // Loops through files to send array and trigger upload API call + + const fileToBase64 = async () => { + // Converts file data to base64 string + try { + const base64String = await convertFileToBase64(filesToSend[i]); + return base64String; + } catch (error) { + return false; + } + }; + + // if(await !fileToBase64()){ + // return + // } + + let reqData = { + file_name: filesToSend[i].name, + file_size: filesToSend[i].size, + file_type: "image/png", + file_data: await fileToBase64(), + msg_type: "FILE", + contract: props.details.contract, + }; + + ApiCall.sendFiles(reqData) + .then((res) => { + // if(res.status != 200 || res.data.internal_return < 0){ + // setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'}) + // return + // } + // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'}) + // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD + // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY + }) + .catch((error) => { + // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'}) + }) + .finally(() => { + if (i == filesToSend.length - 1) { + setRequestStatus({ + loading: false, + status: true, + message: "File(s) Uploaded Successfully", + }); + setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY + props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + } + }); + } + }; + + return ( - -
Family Games Page
- + + {/*
+ +
*/} +
+
+ +
+ {/* */} +
+ +
+
+
+ {/*

+ {props?.details && props.details.job_to} +

+
+

+ Description:{" "} +

+

+ {props?.details && props.details.description} +

+
+
+
+

+ Delivery Detail:{" "} +

+

+ {props?.details && props.details.job_description} +

+
+
+ +
+
*/} +
+
+ + {/* job details */} +
+ {/*

Delivery Detail

*/} + {/* {passDue ? ( +
+

+ Due: + {props?.details && props.details.delivery_date.split(" ")[0]} +

+ {props?.delivery_date && ( +

+ {props.details.delivery_date.split(" ")[1]} +

+ )} +
+ ) : ( +
+

Due:

+
+

+ +

+
+ Hrs + Min + Sec +
+
+
+ )} */} + + {/*
+ + Reward:{" "} + + {thePrice} +
+ +
+ + Duration:{" "} + + + {props.details?.timeline_days && props.details.timeline_days}{" "} + day(s) + +
*/} +
+ {/* end of job details */} +
+
+ +
+ {/* TEXTAREA SECTION */} +
+
+
+ + +
+ {tab == "message" ? ( +