@codecademy/codebytes 0.4.1-alpha.ea7234.0 → 0.4.1-alpha.f8fe5c.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.4.1-alpha.ea7234.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.4.0...@codecademy/codebytes@0.4.1-alpha.ea7234.0) (2022-01-23)
+### [0.4.1-alpha.f8fe5c.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.4.0...@codecademy/codebytes@0.4.1-alpha.f8fe5c.0) (2022-01-25)
 
 **Note:** Version bump only for package @codecademy/codebytes
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.4.1-alpha.ea7234.0",
+  "version": "0.4.1-alpha.f8fe5c.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -23,6 +23,7 @@
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
+    "@codecademy/tracking": "0.18.0",
     "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
@@ -55,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d7b63a94addf85f9a816a1c48c17d74e036cd60a"
+  "gitHead": "3756c6e51177c3cffe5e7c2f962cf195d86edbbd"
 }

package/src/__tests__/codebyte-test.tsx

@@ -171,6 +171,7 @@ describe('CodeBytes', () => {
       renderWrapperWith({
         text: 'some-value',
         language: 'javascript',
+        isForums: true,
       });
 
       expect(trackUserImpression).toHaveBeenCalledWith({
@@ -185,6 +186,7 @@ describe('CodeBytes', () => {
         text: 'some-value',
         language: 'javascript',
         mode: 'compose',
+        isForums: true,
       });
 
       expect(trackUserImpression).toHaveBeenCalledWith({
@@ -193,5 +195,16 @@ describe('CodeBytes', () => {
         target: 'codebyte',
       });
     });
+
+    it('does not trigger a trackUserImpression when not isForum is false', () => {
+      renderWrapperWith({
+        text: 'some-value',
+        language: 'javascript',
+        mode: 'compose',
+        isForums: false,
+      });
+
+      expect(trackUserImpression).not.toHaveBeenCalled();
+    });
   });
 });

package/src/index.tsx

@@ -13,7 +13,7 @@ import { trackUserImpression } from './libs/eventTracking';
 import { CodeByteEditorProps } from './types';
 
 const editorStates = states({
-  isIFrame: { height: '100vh' },
+  isForums: { height: '100vh' },
 });
 
 const editorBaseStyles = system.css({
@@ -38,7 +38,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language: initialLanguage,
   hideCopyButton = false,
-  isIFrame = false,
+  isForums = false,
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
   onEdit,
   onLanguageChange,
@@ -51,17 +51,19 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   const [hasBeenEdited, setHasBeenEdited] = useState(false);
 
   useEffect(() => {
-    const options = getOptions();
-    const page_name = options.renderMode
-      ? `${options.clientName}_${options.renderMode}`
-      : options.clientName;
+    if (isForums) {
+      const options = getOptions();
+      const page_name = options.renderMode
+        ? `${options.clientName}_${options.renderMode}`
+        : options.clientName;
 
-    trackUserImpression({
-      page_name,
-      context: options.parentPage,
-      target: 'codebyte',
-    });
-  }, []);
+      trackUserImpression({
+        page_name,
+        context: options.parentPage,
+        target: 'codebyte',
+      });
+    }
+  }, [isForums]);
 
   useEffect(() => {
     if (language) {
@@ -70,7 +72,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   }, [language, initialText]);
 
   return (
-    <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
+    <EditorContainer bg="black" as="main" isForums={isForums}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
         <IconButton
           icon={FaviconIcon}

package/src/types.ts

@@ -9,7 +9,7 @@ export interface CodeByteEditorProps {
   language?: LanguageOption;
   hideCopyButton?: boolean;
   onCopy?: CodebytesChangeHandler;
-  isIFrame?: boolean;
+  isForums?: boolean;
   snippetsBaseUrl?: string;
   onEdit?: CodebytesChangeHandler;
   onLanguageChange?: CodebytesChangeHandler;