Bryan's finishing touches

src/App.tsx

@@ -1,27 +1,3 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2019 Looker Data Sciences, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
 import { Sidebar } from "./components/Sidebar"
 import { CoreSDKFunctions } from "./components/CoreSDKFunctions"
 import { ApiFunctions } from "./components/ApiFunctions"
@@ -33,6 +9,9 @@ import { ExtensionProvider } from "@looker/extension-sdk-react"
 import { EmbedDashboard } from "./components/Embed"
 import { EmbedExplore } from "./components/Embed/EmbedExplore"
 import { EmbedLook } from "./components/Embed/EmbedLook"
+// import { MyEditor } from "./MyEditor"
+import { CoolApp } from "./CoolApp"
+
 
 interface AppProps {
 }
@@ -48,6 +27,7 @@ export enum ROUTES {
 export const App: React.FC<AppProps> = () => {
   const [route, setRoute] = useState("")
   const [routeState, setRouteState] = useState()
+
 
   const onRouteChange = (route: string, routeState?: any) => {
     setRoute(route)
@@ -57,15 +37,22 @@ export const App: React.FC<AppProps> = () => {
   return (
     <ExtensionProvider onRouteChange={onRouteChange}>
       <ThemeProvider theme={theme}>
-      <EmbedDashboard />
+        <>
+          <GlobalStyle />
+
+            <Layout p="xlarge">
+              {/* <EmbedDashboard></EmbedDashboard> */}
+              {/* <MyEditor></MyEditor> */}
+              <CoolApp></CoolApp>
+              {/* <ping-pong></ping-pong> */}
+            </Layout>
+        </>
       </ThemeProvider>
     </ExtensionProvider>
   )
 }
 
 export const Layout = styled(Box)`
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: 200px auto;
-  width: 100vw
+  width: 100vw;
+  height: 100vh;
 `

src/CoolApp.tsx

@@ -0,0 +1,39 @@
+import React, { useState, useEffect, useContext, useLayoutEffect } from 'react';
+import { ExtensionContextData, ExtensionContext } from '@looker/extension-sdk-react';
+import { Code } from '@looker/components';
+import styled from 'styled-components'
+
+export function CoolApp() {
+  // var ref = React.createRef();
+  const [me, setMe] = useState({});
+  const extensionContext = useContext<ExtensionContextData>(ExtensionContext)
+  const sdk = extensionContext.coreSDK
+
+  // ref.sdk = sdk;
+
+  useEffect(()=>{
+    apiCall();
+  },[])
+
+  const apiCall = async () => {
+    const me = await sdk.ok(sdk.me())
+    setMe(me)
+  }
+
+  useLayoutEffect(()=>{
+    var pp = document.getElementById('pp-div');
+    var new_pp = document.createElement('ping-pong');
+    new_pp.sdk = sdk;
+    pp?.appendChild(new_pp);
+  },[])
+
+  return (
+    <div id="pp-div">
+
+    </div>
+  );
+}
+
+const StyledCode = styled(Code)`
+  white-space: pre;
+`

src/components/CoreSDKFunctions/CoreSDKFunctions.tsx

@@ -22,7 +22,7 @@
  * THE SOFTWARE.
  */
 
- import isEqual from 'lodash/isEqual'
+import isEqual from 'lodash/isEqual'
 import React, { useContext, useEffect, useState } from "react"
 import { useLocation } from 'react-router-dom'
 import { Heading, Box } from "@looker/components"

src/components/Embed/EmbedDashboard.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { useCallback, useContext, useEffect } from "react"
 import { EmbedProps } from "./types"
 import { LookerEmbedSDK, LookerEmbedDashboard } from '@looker/embed-sdk'
@@ -11,6 +12,7 @@ import { EmbedContainer } from './components/EmbedContainer'
 
 
 class PingPong extends HTMLElement {
+
   constructor() {
     super();
     this.element = this.attachShadow({ mode: "open" });
@@ -805,7 +807,7 @@ class PingPong extends HTMLElement {
     await this.render(this.element);
   }
 }
-
+customElements.define('ping-pong', PingPong);