From bcd45edb2f16e22bfda0fb7842c3d8123e39e590 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 2 Apr 2024 17:23:54 +0100
Subject: [PATCH] added game link to env file

---
 .env                                          |  5 +++-
 .env.development                              |  5 +++-
 .env.production                               |  5 +++-
 src/components/Iframe/Iframe.jsx              | 12 +++++++++
 .../MyActiveJobs/ActiveJobsMedia.jsx          |  3 +--
 src/components/Partials/MediaHeader.jsx       |  3 +--
 src/components/Partials/MediaLayout.jsx       |  4 +--
 src/components/familyResources/FamGames.jsx   | 26 +++++++++++++++----
 src/views/FamGamesPage.jsx                    | 21 ++++++++++++---
 9 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Iframe/Iframe.jsx

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/components/Iframe/Iframe.jsx b/src/components/Iframe/Iframe.jsx
new file mode 100644
index 0000000..1b362b8
--- /dev/null
+++ b/src/components/Iframe/Iframe.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function Iframe({src, title}) {
+  return (
+    <iframe 
+        src={src}
+        title={title}
+        className='w-full h-full' 
+    >
+    </iframe>
+  )
+}
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 (
     <MediaLayout
         backpath={props.details.pathname}
-        title={props.details?.title && props.details.title}
-        state={props.details.accountDetails}
+        title={props.details?.title ? props.details.title : ''}
     >
         {/* job title */}
             {/* <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">
diff --git a/src/components/Partials/MediaHeader.jsx b/src/components/Partials/MediaHeader.jsx
index 9d1f502..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 ? { ...state } : {} },
                     { replace: true }
                 );
                 } else {
diff --git a/src/components/Partials/MediaLayout.jsx b/src/components/Partials/MediaLayout.jsx
index d1f9fc4..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 }) {
                     <div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px]  h-full`}>
                         {/* header */}
                         <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
-                            <MediaHeader backpath={backpath} title={title} state={state ? state : ''} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
+                            <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
                         </div>
                         {/* container */}
                         <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
diff --git a/src/components/familyResources/FamGames.jsx b/src/components/familyResources/FamGames.jsx
index e9f2a2f..5bbaf9b 100644
--- a/src/components/familyResources/FamGames.jsx
+++ b/src/components/familyResources/FamGames.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } 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'
@@ -9,6 +9,8 @@ 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();
@@ -229,8 +231,7 @@ export default function FamGames() {
   return (
     <MediaLayout
       backpath={'/'}
-      title={''}
-      state={''}
+      title={'Games'}
     >
         {/* <div className='mb-4'>
           <CustomBreadcrumb 
@@ -246,8 +247,13 @@ export default function FamGames() {
         <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
             <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
             
-            <div className="mb-4 w-full h-aut h-[600px] bg-white shadow-md rounded-2xl">
-                {/* <VideoElement videoId={props?.details?.media_uid} /> */}
+            <div className="mb-4 w-full h-screen max-h-[600px]">
+              <Suspense fallback={<Fallback />}>
+                <Iframe 
+                  src={process.env.REACT_APP_FAM_GAME_LINK}
+                  title='Games'
+                />
+              </Suspense>
             </div>
 
             <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
@@ -509,3 +515,13 @@ export default function FamGames() {
     </MediaLayout>
   )
 }
+
+
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen max-h-[600px]' />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/views/FamGamesPage.jsx b/src/views/FamGamesPage.jsx
index d98fe65..661e277 100644
--- a/src/views/FamGamesPage.jsx
+++ b/src/views/FamGamesPage.jsx
@@ -1,9 +1,24 @@
-import React from 'react'
-import FamGames from '../components/familyResources/FamGames'
+import React, { lazy, Suspense } from 'react'
+import LoadingSpinner from '../components/Spinners/LoadingSpinner';
+// import FamGames from '../components/familyResources/FamGames'
+
+const FamGames = lazy(() => import("../components/familyResources/FamGames"));
+
 export default function FamGamesPage() {
   return (
     <>
-        <FamGames />
+      <Suspense fallback={<Fallback />}>
+          <FamGames />
+      </Suspense>
     </>
   )
 }
+
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen' />
+    </div>
+  )
+}
\ No newline at end of file