diff --git a/.env b/.env index 949303d..51e90d8 100644 --- a/.env +++ b/.env @@ -118,4 +118,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1 REACT_APP_SHOW_SLIDER_BANNERS=0 # FOR MEDIA LINK -REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com' \ No newline at end of file +REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com' + +# FOR FAMILY GAME LINK +REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' \ No newline at end of file diff --git a/.env.development b/.env.development index 3e1b1be..0d41f9c 100644 --- a/.env.development +++ b/.env.development @@ -86,4 +86,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1 REACT_APP_SHOW_SLIDER_BANNERS=0 # FOR MEDIA LINK -REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com' \ No newline at end of file +REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com' + +# FOR FAMILY GAME LINK +REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' \ No newline at end of file diff --git a/.env.production b/.env.production index 615202b..04014b2 100644 --- a/.env.production +++ b/.env.production @@ -92,4 +92,7 @@ REACT_APP_SHOW_ACCOUNT_DASH=1 REACT_APP_SHOW_SLIDER_BANNERS=0 # FOR MEDIA LINK -REACT_APP_MEDIA_LINK='https://media.wrenchboard.com' \ No newline at end of file +REACT_APP_MEDIA_LINK='https://media.wrenchboard.com' + +# FOR FAMILY GAME LINK +REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' \ No newline at end of file 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() { } /> } /> } /> + } /> } /> + + ) +} diff --git a/src/components/MyActiveJobs/ActiveJobsMedia.jsx b/src/components/MyActiveJobs/ActiveJobsMedia.jsx index 3e545eb..a40f143 100644 --- a/src/components/MyActiveJobs/ActiveJobsMedia.jsx +++ b/src/components/MyActiveJobs/ActiveJobsMedia.jsx @@ -273,8 +273,7 @@ function ActiveJobsMedia(props) { return ( {/* job title */} {/*
diff --git a/src/components/Partials/MediaHeader.jsx b/src/components/Partials/MediaHeader.jsx index a167768..612b775 100644 --- a/src/components/Partials/MediaHeader.jsx +++ b/src/components/Partials/MediaHeader.jsx @@ -19,7 +19,7 @@ import TimeDifference from "../Helpers/TimeDifference"; const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg"); -export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, state, title }) { +export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, title }) { const darkMode = useContext(DarkModeContext); @@ -172,7 +172,6 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa onClick={() => { if (backpath == "/manage-family") { navigate(backpath, - { state: { ...state} }, { replace: true } ); } else { diff --git a/src/components/Partials/MediaLayout.jsx b/src/components/Partials/MediaLayout.jsx index f76d824..8869d76 100644 --- a/src/components/Partials/MediaLayout.jsx +++ b/src/components/Partials/MediaLayout.jsx @@ -10,7 +10,7 @@ import RightSideBar from "./RightSideBar"; import Sidebar from "./Sidebar"; import MediaHeader from "./MediaHeader"; -export default function MediaLayout({backpath, title, state, children }) { +export default function MediaLayout({backpath, title, children }) { const { drawer } = useSelector((state) => state.drawer); const { userJobList } = useSelector((state) => state.userJobList); const dispatch = useDispatch(); @@ -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..e56d6f7 100644 --- a/src/components/familyResources/FamGames.jsx +++ b/src/components/familyResources/FamGames.jsx @@ -1,10 +1,529 @@ -import React from 'react' +import React, { lazy, Suspense, 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' + +const Iframe = lazy(() => import("../Iframe/Iframe")); 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
- + + {/*
+ +
*/} +
+
+ +
+ }> +