From 1339e5d427d106dd5e9eab9fd88996a8886b5d1c Mon Sep 17 00:00:00 2001 From: aaronlutkowitz2 <44262742+aaronlutkowitz2@users.noreply.github.com> Date: Fri, 10 Jul 2020 16:07:08 -0400 Subject: [PATCH] Update and rename audienceselector2 to audienceselector2.tsx --- src/components/audienceselector2 | 1 - src/components/audienceselector2.tsx | 260 +++++++++++++++++++++++++++ 2 files changed, 260 insertions(+), 1 deletion(-) delete mode 100644 src/components/audienceselector2 create mode 100644 src/components/audienceselector2.tsx diff --git a/src/components/audienceselector2 b/src/components/audienceselector2 deleted file mode 100644 index 071da0e..0000000 --- a/src/components/audienceselector2 +++ /dev/null @@ -1 +0,0 @@ -### test diff --git a/src/components/audienceselector2.tsx b/src/components/audienceselector2.tsx new file mode 100644 index 0000000..1c12235 --- /dev/null +++ b/src/components/audienceselector2.tsx @@ -0,0 +1,260 @@ +import React, { useCallback, useContext, useEffect } from "react" +import { EmbedProps } from "./types" +import { LookerEmbedSDK, LookerEmbedDashboard } from '@looker/embed-sdk' +import {ExtensionContext, ExtensionContextData,} from "@looker/extension-sdk-react" +import { Button, Heading, Label, ToggleSwitch, FieldText, + Fieldset, Slider, Card, theme, SpaceVertical, Box, CardContent, Select, SelectMulti, Grid, FieldRadioGroup +,Status, StatusIntent, Flex, Tooltip, Paragraph +} from "@looker/components" + +import { EmbedContainer } from './Embed/components/EmbedContainer' +import { InputText } from '@looker/components' +import { background } from "styled-system" +import { initial } from "lodash" + +export const AudienceSelector: React.FC = () => { + + //Instantiate iframe dashboard via Extension Context (to obtain host) and Looker Embed SDK + const extensionContext = useContext(ExtensionContext) + const hostUrl = extensionContext?.extensionSDK?.lookerHostData?.hostUrl + LookerEmbedSDK.init(hostUrl) + const db = LookerEmbedSDK.createDashboardWithId(4) + + //Add dashboard to component state + const [dashboard, setDashboard] = React.useState() + + //Callback function which binds the dashboard to the DOM container + const bindDashboard = useCallback(container => { + //do you have a container and a host? + if (container && hostUrl) { + container.innerHTML = '' + //Bind the dashboard into the EmbedContainter + db.appendTo(container) + //subscribe to all filter change events, sending them to React state + .on('dashboard:loaded',mangageFilterState) + .on('dashboard:filters:changed',mangageFilterState) + .withNext() + .build() + .connect() + //set dashboard in React state + .then(setDashboard) + .catch((error: Error) => { + console.error('Connection error', error) + }) + } + }, []) + + //Tracks the state of the dashboard filters + const [filterState, setFilterState] = React.useState() + //Obtains just the filter values from the change event for depositing in React state + const mangageFilterState = (event: any) => { + setFilterState(event.dashboard.dashboard_filters) + } + + //Width of fields in the form + const fieldWidth = 250; + + //Tracks the state of the form components on each change event + const [formState, setFormState] = React.useState({ + audience_name:"" + ,ga_account_brand: "" + ,DBM_LINKS: [] + ,ADWORDS_LINKS: [] + ,OPTIMIZE: [] + ,lookback_period:30 + ,duration:"7" + }) + + + //Destructures for incremental capture + const manageFormState = (id:string,value:any) => { + setFormState({...formState, [id]:value}) + //special case due to nuance of slider + if(id=="membership_duration") { + setsliderState(value) + } + if(id=="lookback_period") { + setlookbackState(value) + } + } + //Tracks the state for components that natively leverage the onchange event + const [sliderState, setsliderState] = React.useState(30) + const [lookbackState, setlookbackState] = React.useState("7") + + //Tracks the success of the most recent send to cloud function + const [postState, setPostState] = React.useState(""); + +//submission state +const [submissionState, setsubmissionState] = React.useState("") +const [didSubmit, setdidSubmit] = React.useState(false) +//Handles the data submission to endpoint + const submit = async (event: any) => { + let myHeaders = new Headers(); + myHeaders.append("Content-Type", "application/json"); + + const requestOptions: RequestInit = { + method: 'POST', + headers: myHeaders, + body: JSON.stringify({ + filterState, formState + }), + redirect: 'follow' + }; + // Performs the call + fetch("https://kewl1.free.beeceptor.com", requestOptions) + .then(response => response.json()) + .then(result => setsubmissionState(result['status'])) + .then(e => setdidSubmit(true)) + .catch(error => {console.log('error', error); setsubmissionState('error')}); + } + +//Set up a table of brands to use for each of the LOV selectors below +let brandList = [ + { value: 'Aveeno', label: 'Aveeno' }, + { value: 'Neutrogena', label: 'Neutrogena' }, + { value: 'BandAid', label: 'BandAid' }, + { value: 'Benadryl', label: 'Benadryl' }, + { value: 'Benylin', label: 'Benylin' }, + { value: 'Clean and Clear', label: 'Clean and Clear' }, + { value: 'Nicoderm', label: 'Nicoderm' }, + { value: 'Listerine', label: 'Listerine' }, + { value: 'Imodium', label: 'Imodium' }, + { value: 'Pepcid', label: 'Pepcid' }, + { value: 'Johnson\'s Baby', label: 'Johnson\'s Baby' }, + { value: 'Motrin', label: 'Motrin' }, + { value: 'Nicorette', label: 'Nicorette' }, + { value: 'Polysporin', label: 'Polysporin' }, + { value: 'Reactine', label: 'Reactine' }, + { value: 'Rogaine', label: 'Rogaine' }, + { value: 'Tylenol', label: 'Tylenol' }, + { value: 'Multi-Brand', label: 'Multi-Brand' } +]; + +//Options for the Lookback period +const lookbackPeriodOptions = [ + { + label: '7 Days', + value: '7', + }, + { + label: '14 Days', + value: '14', + }, + { + label: '30 Days', + value: '30', + }, +] + + +let account_ids = [ + { value: 6548511, label: '6548511' }, + { value: 24536442, label: '24536442' }, + { value: 12177048, label: '12177048' }, + { value: 24556558, label: '24556558' }, + { value: 21937847, label: '21937847' }, + { value: 24536447, label: '24536447' }, + { value: 25814349, label: '25814349' }, + { value: 24535977, label: '24535977' }, + { value: 134412268, label: '134412268' }, +]; + + + +const {audience_name, ga_account_brand } = formState +const isFieldValid = ( audience_name.length && ga_account_brand.length ) +const [userInteracted, setuserInteracted] = React.useState(false); + +return ( + <> + + + + +
+ + + + + + {manageFormState('audience_name',val.target.value)}} + width={fieldWidth} + onBlur={(val)=>setuserInteracted(true)} + /> + + + +