Refactor Advertisement to use useScript (codesandbox#1962)

* 🔨 Add useScript Hook, Refactor Advertisement to use useScript

Removed unused container styles and reorganized code to follow updated coding conventions (to be documented at a later date). Added a new useScript hook (based on https://usehooks.com/useScript) and a hooks directory.

* Resolve discussions

Author: MichaelDeBoey

packages/app/src/app/hooks/index.ts

@@ -0,0 +1 @@
+export { useScript } from './useScript';

packages/app/src/app/hooks/useScript.ts

@@ -0,0 +1,62 @@
+// Based on https://usehooks.com/useScript/
+import { useEffect, useState } from 'react';
+
+const cachedScripts = [];
+
+export const useScript = (src: string) => {
+  const [state, setState] = useState({
+    loaded: false,
+    error: false,
+  });
+
+  useEffect(() => {
+    if (cachedScripts.includes(src)) {
+      setState({
+        loaded: true,
+        error: false,
+      });
+    } else {
+      cachedScripts.push(src);
+
+      const script = document.createElement('script');
+      script.src = src;
+      script.async = true;
+
+      const onScriptLoad = () => {
+        setState({
+          loaded: true,
+          error: false,
+        });
+      };
+
+      const onScriptError = () => {
+        const index = cachedScripts.indexOf(src);
+
+        if (index >= 0) {
+          cachedScripts.splice(index, 1);
+        }
+
+        script.remove();
+
+        setState({
+          loaded: true,
+          error: true,
+        });
+      };
+
+      script.addEventListener('load', onScriptLoad);
+      script.addEventListener('error', onScriptError);
+
+      document.body.appendChild(script);
+
+      return () => {
+        script.removeEventListener('load', onScriptLoad);
+        script.removeEventListener('error', onScriptError);
+      };
+    }
+
+    return undefined;
+  }, [src]);
+
+  return [state.loaded, state.error];
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/Advertisement.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { useScript } from 'app/hooks';
+
+import { Container } from './elements';
+
+export const Advertisement = () => {
+  useScript(`https://codefund.app/properties/24/funder.js`);
+
+  return (
+    <Container>
+      <div id="codefund" />
+    </Container>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeFund.js

@@ -0,0 +1,9 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    color: ${theme.light
+      ? css`rgba(0, 0, 0, 0.8)`
+      : css`rgba(255, 255, 255, 0.8)`} !important;
+  `};
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/elements.js

@@ -0,0 +1 @@
+export { Advertisement } from './Advertisement';

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/elements.ts

@@ -16,7 +16,7 @@ import Deployment from './items/Deployment';
 import ConfigurationFiles from './items/ConfigurationFiles';
 import NotOwnedSandboxInfo from './items/NotOwnedSandboxInfo';
 
-import Advertisement from './Advertisement';
+import { Advertisement } from './Advertisement';
 import Chat from './Chat';
 import { ConnectionNotice } from './ConnectionNotice';
 import { SSEDownNotice } from './SSEDownNotice';