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" ? (
+
+ ) : (
+
+
+
+
+
+
+ {filesToSend.length > 0 &&
+ filesToSend.map((item, index) => (
+
+ {item.name}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+
+ {/* error or success display */}
+ {requestStatus.message != "" &&
+ (!requestStatus.status ? (
+
+ {requestStatus.message}
+
+ ) : (
+ requestStatus.status && (
+
+ {requestStatus.message}
+
+ )
+ ))}
+
+ {/* End of error or success display */}
+
+ {/* Buttons Sections */}
+
+
+
+ {tab == "files" ? (
+
+ ) : (
+
+ )}
+
+
+ {/* end of Buttons Sections */}
+
+ {/* END OF TEXTAREA */}
+
+ {/* MESSAGE SECTION */}
+
+ {/*
+
+ Message
+
+
+
+ {props.activeJobMesList.loading ? (
+
+ ) : (
+
+ )} */}
+
+ {/* END OF MESSAGE */}
+
+
)
}