fix(ui) - project - gdpr settings

frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js

@@ -1,9 +1,7 @@
 import React, { useState } from 'react'
 import { connect } from 'react-redux';
 import { editGDPR, saveGDPR } from 'Duck/site';
-import copy from 'copy-to-clipboard';
 import { Checkbox } from 'UI';
-import GDPR from 'Types/site/gdpr';
 import cn from 'classnames'
 import styles from './projectCodeSnippet.module.css'
 import Select from 'Shared/Select'
@@ -22,78 +20,21 @@ inputModeOptions.forEach((o, i) => inputModeOptionsMap[o.value] = i)
 const ProjectCodeSnippet = props  => {
   const { gdpr, site } = props;
   const [changed, setChanged] = useState(false)
-  const [copied, setCopied] = useState(false)
 
-  const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
-<script>
-  var initOpts = {
-    projectKey: "PROJECT_KEY",
-    ingestPoint: "https://${window.location.hostname}/ingest",
-    defaultInputMode: ${inputModeOptionsMap[gdpr.defaultInputMode]},
-    obscureTextNumbers: ${gdpr.maskNumbers},
-    obscureTextEmails: ${gdpr.maskEmails},
-  };
-  var startOpts = { userID: "" };
-  (function(A,s,a,y,e,r){
-    r=window.OpenReplay=[e,r,y,[s-1, e]];
-    s=document.createElement('script');s.src=A;s.async=!a;
-    document.getElementsByTagName('head')[0].appendChild(s);
-    r.start=function(v){r.push([0])};
-    r.stop=function(v){r.push([1])};
-    r.setUserID=function(id){r.push([2,id])};
-    r.setUserAnonymousID=function(id){r.push([3,id])};
-    r.setMetadata=function(k,v){r.push([4,k,v])};
-    r.event=function(k,p,i){r.push([5,k,p,i])};
-    r.issue=function(k,p){r.push([6,k,p])};
-    r.isActive=function(){return false};
-    r.getSessionToken=function(){};
-  })("//static.openreplay.com/${window.env.TRACKER_VERSION}/openreplay.js",1,0,initOpts,startOpts);
-</script>`;
-
-  const saveGDPR = (value) => {
+  const saveGDPR = () => {
     setChanged(true)
-    props.saveGDPR(site.id, GDPR({...value}));
+    props.saveGDPR(site.id);
   }
 
   const onChangeSelect = ({ name, value }) => {
-    const { gdpr } = site;
     props.editGDPR({ [ name ]: value });
-    saveGDPR({ ...gdpr, [ name ]: value });
+    saveGDPR();
   };
 
   const onChangeOption = ({ target: { name, checked }}) => {
-    const { gdpr } = props.site;
-    const _gdpr = { ...gdpr.toData() };
-    _gdpr[name] = checked;
     props.editGDPR({ [ name ]: checked });
-    saveGDPR(_gdpr)
+    saveGDPR()
   }
-
-  const getOptionValues = () => {
-    const { gdpr } = props.site;
-    return (!!gdpr.maskEmails)|(!!gdpr.maskNumbers << 1)|(['plain' , 'obscured', 'hidden'].indexOf(gdpr.defaultInputMode) << 5)|28
-  }
-
-
-  const getCodeSnippet = site => {
-    let snippet = codeSnippet;
-    if (site && site.id) {
-      snippet = snippet.replace('PROJECT_KEY', site.projectKey);
-    }
-    return snippet
-      //.replace('XXX', getOptionValues())
-      //.replace('HOST', site && site.host);   
-  }   
-
-  const copyHandler = (code) => {
-    setCopied(true);
-    copy(code);
-    setTimeout(() => {
-      setCopied(false);
-    }, 1000);
-  };  
-
-  const _snippet = getCodeSnippet(site);
   
   return (
     <div>
@@ -154,8 +95,6 @@ const ProjectCodeSnippet = props  => {
 }
 
 export default connect(state => ({
-  // siteId: state.getIn([ 'site', 'siteId' ]),
-  // site: state.getIn([ 'site', 'instance' ]),
   gdpr: state.getIn([ 'site', 'instance', 'gdpr' ]),
   saving: state.getIn([ 'site', 'saveGDPR', 'loading' ])
 }), { editGDPR, saveGDPR })(ProjectCodeSnippet)

frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Tabs } from 'UI';
-import { editGDPR, saveGDPR } from 'Duck/site';
-import { connect } from 'react-redux';
 import ProjectCodeSnippet from './ProjectCodeSnippet';
 import InstallDocs from './InstallDocs';
 
@@ -31,7 +29,7 @@ class TrackingCodeModal extends React.PureComponent {
     };
 
     render() {
-        const { site, displayed, onClose, title = '', subTitle } = this.props;
+        const { title = '', subTitle } = this.props;
         const { activeTab } = this.state;
         return (
             <div className="bg-white h-screen overflow-y-auto" style={{ width: '700px' }}>
@@ -48,14 +46,4 @@ class TrackingCodeModal extends React.PureComponent {
     }
 }
 
-export default connect(
-    (state) => ({
-        // site: state.getIn(['site', 'instance']),
-        // gdpr: state.getIn(['site', 'instance', 'gdpr']),
-        saving: state.getIn(['site', 'saveGDPR', 'loading']),
-    }),
-    {
-        editGDPR,
-        saveGDPR,
-    }
-)(TrackingCodeModal);
+export default TrackingCodeModal;

frontend/app/duck/site.js

@@ -103,11 +103,12 @@ export function fetchGDPR(siteId) {
   }
 }
 
-export function saveGDPR(siteId, gdpr) {
-  return {
+export const saveGDPR = (siteId, gdpr) => (dispatch, getState) => {
+  const g = getState().getIn(['site', 'instance', 'gdpr']);
+  return dispatch({
     types: array(SAVE_GDPR),
-    call: client => client.post(`/${ siteId }/gdpr`, gdpr.toData()),
-  };
+    call: client => client.post(`/${ siteId }/gdpr`, g.toData()),
+  });
 }
 
 export function fetchList(siteId) {