From 75d60a05409b5bc135756289eec5ce44a3c6eed7 Mon Sep 17 00:00:00 2001
From: harbassan <harbassan@hotmail.com>
Date: Sat, 31 Aug 2024 16:17:30 +1200
Subject: [PATCH] chore(frontend/Thumbnail): replace old element

---
 frontend/src/components/ListContainer.jsx     |   7 +-
 frontend/src/components/Thumbnail.jsx         | 100 ------------------
 .../components/__tests__/Thumbnail.test.js    |  14 ---
 .../__snapshots__/Thumbnail.test.js.snap      |  74 -------------
 .../{ThumbImage.jsx => Thumbnail.jsx}         |   4 +-
 .../SceneNavigator/SceneNavigator.jsx         |   4 +-
 .../containers/pages/Dashboard/SceneNode.jsx  |  10 +-
 7 files changed, 9 insertions(+), 204 deletions(-)
 delete mode 100644 frontend/src/components/Thumbnail.jsx
 delete mode 100644 frontend/src/components/__tests__/Thumbnail.test.js
 delete mode 100644 frontend/src/components/__tests__/__snapshots__/Thumbnail.test.js.snap
 rename frontend/src/containers/pages/AuthoringTool/Components/{ThumbImage.jsx => Thumbnail.jsx} (98%)

diff --git a/frontend/src/components/ListContainer.jsx b/frontend/src/components/ListContainer.jsx
index 17747906..c51d4c0d 100644
--- a/frontend/src/components/ListContainer.jsx
+++ b/frontend/src/components/ListContainer.jsx
@@ -4,9 +4,8 @@ import { Box } from "@material-ui/core";
 import ImageList from "@material-ui/core/ImageList";
 import ImageListItem from "@material-ui/core/ImageListItem";
 
-import ThumbImage from "containers/pages/AuthoringTool/Components/ThumbImage";
+import Thumbnail from "containers/pages/AuthoringTool/Components/Thumbnail";
 import DashedCard from "./DashedCard";
-import Thumbnail from "./Thumbnail";
 
 import styles from "../styling/ListContainer.module.scss";
 import useStyles from "./component.styles";
@@ -130,9 +129,9 @@ export default function ListContainer({
                       }}
                     >
                       {sceneSelectionPage ? (
-                        <ThumbImage components={item.components} />
+                        <Thumbnail components={item.components} />
                       ) : (
-                        <ThumbImage
+                        <Thumbnail
                           components={item.thumbnail?.components || []}
                         />
                       )}
diff --git a/frontend/src/components/Thumbnail.jsx b/frontend/src/components/Thumbnail.jsx
deleted file mode 100644
index 379fb0b5..00000000
--- a/frontend/src/components/Thumbnail.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { useState } from "react";
-import Skeleton from "react-loading-skeleton";
-
-/**
- * Component used for thumbnails.
- *
- * @component
- * @example
- * const url = "https://canvas.ac.nz/"
- * const interactive = false
- * function onLoad() {
- *   console.log("Loading...")
- * }
- * return (
- *   <Thumbnail url={url} interactive={interactive} onLoad={onLoad} />
- * )
- */
-function Thumbnail({
-  url = "https://canvas.ac.nz/",
-  iframeWidth = 1920,
-  iframeHeight = 1080,
-  width = 266,
-  height = 150,
-  interactive = false,
-  style: customStyle,
-  onLoad,
-}) {
-  const [loading, setLoading] = useState(true);
-
-  const xscale = width / iframeWidth;
-  const yscale = height / iframeHeight;
-  const iframe = {
-    transform: `scaleX(${xscale}) scaleY(${yscale})`,
-    transformOrigin: "0 0",
-    width: `${iframeWidth}px`,
-    height: `${iframeHeight}px`,
-    border: "0px",
-  };
-
-  const iframeShade = {
-    position: "absolute",
-    width: "100%",
-    height: `${height}px`,
-    maxWidth: `${width}px`,
-    zIndex: "10",
-  };
-
-  const iframeWrapper = {
-    maxWidth: `${width}px`,
-    maxHeight: `${height}px`,
-    backgroundColor: "white",
-    filter: "drop-shadow(1px 1px 2px grey)",
-  };
-
-  const outerWrapper = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "100%",
-  };
-
-  /** Function which executes while the thumbnail is loading. */
-  const combinedOnLoad = () => {
-    if (onLoad) {
-      onLoad();
-    }
-    setLoading(false);
-  };
-
-  return (
-    <div
-      style={{ ...outerWrapper, ...customStyle }}
-      data-testid="div-outer-wrapper"
-    >
-      <div style={iframeWrapper} data-testid="div-iframe-wrapper">
-        {!interactive && <div style={iframeShade}> </div>}
-        {loading && (
-          <Skeleton
-            style={{ position: "absolute", zIndex: "15" }}
-            width={width}
-            height={height}
-            duration={0.8}
-          />
-        )}
-        <iframe
-          tabIndex="-1"
-          style={iframe}
-          title="webpage-thumbnail"
-          src={url}
-          sandbox="allow-scripts allow-same-origin"
-          scrolling="no"
-          onLoad={combinedOnLoad}
-        />
-      </div>
-    </div>
-  );
-}
-// TODO write proptypes
-export default Thumbnail;
diff --git a/frontend/src/components/__tests__/Thumbnail.test.js b/frontend/src/components/__tests__/Thumbnail.test.js
deleted file mode 100644
index 7d994abb..00000000
--- a/frontend/src/components/__tests__/Thumbnail.test.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { BrowserRouter } from "react-router-dom";
-import renderer from "react-test-renderer";
-import Thumbnail from "../Thumbnail";
-
-test("Thumbnail component snapshot test", () => {
-  const component = renderer.create(
-    <BrowserRouter>
-      <Thumbnail />
-    </BrowserRouter>
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
-});
diff --git a/frontend/src/components/__tests__/__snapshots__/Thumbnail.test.js.snap b/frontend/src/components/__tests__/__snapshots__/Thumbnail.test.js.snap
deleted file mode 100644
index 8c27d4a2..00000000
--- a/frontend/src/components/__tests__/__snapshots__/Thumbnail.test.js.snap
+++ /dev/null
@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Thumbnail component snapshot test 1`] = `
-<div
-  data-testid="div-outer-wrapper"
-  style={
-    Object {
-      "alignItems": "center",
-      "display": "flex",
-      "height": "100%",
-      "justifyContent": "center",
-      "width": "100%",
-    }
-  }
->
-  <div
-    data-testid="div-iframe-wrapper"
-    style={
-      Object {
-        "backgroundColor": "white",
-        "filter": "drop-shadow(1px 1px 2px grey)",
-        "maxHeight": "150px",
-        "maxWidth": "266px",
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "height": "150px",
-          "maxWidth": "266px",
-          "position": "absolute",
-          "width": "100%",
-          "zIndex": "10",
-        }
-      }
-    >
-       
-    </div>
-    <span>
-      <span
-        className="react-loading-skeleton css-bvijti-skeletonStyles-Skeleton"
-        style={
-          Object {
-            "height": 150,
-            "position": "absolute",
-            "width": 266,
-            "zIndex": "15",
-          }
-        }
-      >
-        ‌
-      </span>
-    </span>
-    <iframe
-      onLoad={[Function]}
-      sandbox="allow-scripts allow-same-origin"
-      scrolling="no"
-      src="https://canvas.ac.nz/"
-      style={
-        Object {
-          "border": "0px",
-          "height": "1080px",
-          "transform": "scaleX(0.13854166666666667) scaleY(0.1388888888888889)",
-          "transformOrigin": "0 0",
-          "width": "1920px",
-        }
-      }
-      tabIndex="-1"
-      title="webpage-thumbnail"
-    />
-  </div>
-</div>
-`;
diff --git a/frontend/src/containers/pages/AuthoringTool/Components/ThumbImage.jsx b/frontend/src/containers/pages/AuthoringTool/Components/Thumbnail.jsx
similarity index 98%
rename from frontend/src/containers/pages/AuthoringTool/Components/ThumbImage.jsx
rename to frontend/src/containers/pages/AuthoringTool/Components/Thumbnail.jsx
index 889026ae..d472aa1c 100644
--- a/frontend/src/containers/pages/AuthoringTool/Components/ThumbImage.jsx
+++ b/frontend/src/containers/pages/AuthoringTool/Components/Thumbnail.jsx
@@ -149,7 +149,7 @@ const ThumbElement = ({ component }) => {
   }
 };
 
-const ThumbImage = ({ components }) => {
+const Thumbnail = ({ components }) => {
   return (
     <svg viewBox="0 0 1920 1080">
       <rect x="0" y="0" width="1920" height="1080" fill="white" />
@@ -160,4 +160,4 @@ const ThumbImage = ({ components }) => {
   );
 };
 
-export default ThumbImage;
+export default Thumbnail;
diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx
index 9b0d51ab..815a82a8 100644
--- a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx
+++ b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx
@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import styles from "styling/SceneNavigator.module.scss";
 import SceneListItem from "./SceneListItem";
-import ThumbImage from "../Components/ThumbImage";
+import Thumbnail from "../Components/Thumbnail";
 
 const SceneNavigator = ({ saveScene }) => {
   const [thumbnails, setThumbnails] = useState(null);
@@ -48,7 +48,7 @@ const SceneNavigator = ({ saveScene }) => {
               }
               key={scene._id}
             >
-              <ThumbImage components={scene.components} />
+              <Thumbnail components={scene.components} />
             </button>
           </>
         ),
diff --git a/frontend/src/containers/pages/Dashboard/SceneNode.jsx b/frontend/src/containers/pages/Dashboard/SceneNode.jsx
index 78aeb397..36890b2f 100644
--- a/frontend/src/containers/pages/Dashboard/SceneNode.jsx
+++ b/frontend/src/containers/pages/Dashboard/SceneNode.jsx
@@ -1,18 +1,12 @@
 import { Box } from "@material-ui/core";
 import { Handle, Position } from "react-flow-renderer";
-import Thumbnail from "../../../components/Thumbnail";
 
-function SceneNode({ data }) {
-  const { scenarioId, sceneId } = data;
+function SceneNode() {
+  // const { scenarioId, sceneId } = data;
 
   return (
     <Box>
       <Handle type="target" position={Position.Top} />
-      <Thumbnail
-        url={`${process.env.PUBLIC_URL}/play/${scenarioId}/${sceneId}`}
-        width="160"
-        height="90"
-      />
       <Handle type="source" position={Position.Bottom} id="a" />
       {/* <h5 style={textStyle}>{sceneTitle}</h5> */}
     </Box>