Update readme

llooker · May 3, 2022 · a3fe61d · a3fe61d
1 parent efeae58
commit a3fe61d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 99 deletions.
diff --git a/README.md b/README.md
@@ -1,22 +1,20 @@
-# Looker Extension Hello World (React & Typescript)
+# Looker Extension Hello World (React & JavaScript)
 
-This repository demonstrates a bare bones Looker extension using Typescript.
-
-It uses [React](https://reactjs.org/) and [Typescript](https://typescriptlang.org) for writing your extension, the [React Extension SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk-react) for interacting with Looker, [Looker Components](https://components.looker.com) for UI, and [Webpack](https://webpack.js.org/) for building your code.
+This example has been adopted from the extension-examples helloworld example.
 
 ## Getting Started for Development
 
-1. Clone or download a copy of this template to your development machine, if you haven't already cloned the entire repo.
+1. Clone this repo.
 
    ```
    # cd ~/ Optional, your user directory is usually a good place to git clone to.
-   git clone git@github.com:looker-open-source/extension-examples.git
+   [email protected]:llooker/scooter-extension.git
    ```
 
-2. Navigate (`cd`) to the template directory on your system
+2. Navigate (`cd`) to the scooter-extension directory on your system
 
    ```
-   cd extension-examples/react/typescript/helloworld-ts
+   cd query-builder-ef
    ```
 
 3. Install the dependencies with [Yarn](https://yarnpkg.com/).
@@ -25,93 +23,10 @@ It uses [React](https://reactjs.org/) and [Typescript](https://typescriptlang.or
    yarn install
    ```
 
-   > You may need to update your Node version or use a [Node version manager](https://github.com/nvm-sh/nvm) to change your Node version.
-
-4) Start the development server
+4. Start the development server
 
    ```
    yarn develop
    ```
 
    The extension is now running and serving the JavaScript locally at http://localhost:8080/bundle.js.
-
-5) Log in to Looker and create a new project.
-
-   This is found under **Develop** => **Manage LookML Projects** => **New LookML Project**.
-
-   Select "Blank Project" as your "Starting Point". This will create a new project with no files.
-
-   1. The extension folder has a `manifest.lkml` file.
-
-   Either drag & upload this file into your Looker project, or create a `manifest.lkml` with the same content. Change the `id`, `label`, or `url` as needed.
-
-   ```
-   project_name: "helloworld-ts"
-   application: helloworld-ts {
-    label: "Helloworld (TypeScript)"
-    url: "http://localhost:8080/bundle.js"
-    entitlements: {
-    core_api_methods: ["me"]
-   }
-   }
-   ```
-
-6. Create a `model` LookML file in your project. The name doesn't matter but the convention is to name it the same as the project— in this case, helloworld-js.
-
-- Add a connection in this model.
-- [Configure the model you created](https://docs.looker.com/data-modeling/getting-started/create-projects#configuring_a_model) so that it has access to the selected connection.
-  We do this because Looker permissions data access via models— In order to grant / limit access to an extension, it must be associated with a model.
-
-7. Connect the project to Git. This can be done in multiple ways:
-
-- Create a new repository on GitHub or a similar service, and follow the instructions to [connect your project to Git](https://docs.looker.com/data-modeling/getting-started/setting-up-git-connection)
-- A simpler but less powerful approach is to set up git with the "Bare" repository option which does not require connecting to an external Git Service.
-
-8. Commit the changes and deploy them to production through the Project UI.
-
-9. Reload the page and click the `Browse` dropdown menu. You will see the extension in the list.
-
-- The extension will load the JavaScript from the `url` provided in the `application` definition. By default, this is http://localhost:8080/bundle.js. If you change the port your server runs on in the package.json, you will need to also update it in the manifest.lkml.
-- Refreshing the extension page will bring in any new code changes from the extension template, although some changes will hot reload.
-
-## Extension Entitlements
-
-Entitlements are defined in the project manifest file for the extension.
-
-Resources required by the extension (Looker API methods for example) must be defined in entitlements. This extension uses the `me` api method, as such it is defined in the entitlements.
-
-[//] TODO: List entitlement options.
-
-## Deployment
-
-The process above describes how to run the extension for development. Once you're done developing and ready to deploy, the production version of the extension may be deployed as follows:
-
-1. In the extension project directory build the extension by running `yarn build`.
-2. Drag and drop the generated `dist/bundle.js` file into the Looker project interface
-3. Modify the `manifest.lkml` to use `file` instead of `url`:
-
-   ```
-   project_name: "helloworld-ts"
-   application: helloworld-ts {
-    label: "Helloworld (TypeScript)"
-    url: "http://localhost:8080/bundle.js"
-    file: "bundle.js"
-    entitlements: {
-    core_api_methods: ["me"]
-   }
-   }
-   ```
-
-## Notes
-
-- Webpack's module splitting is not currently supported.
-- This template uses Looker's [component library](https://components.looker.com) and [styled components](https://styled-components.com/). Neither of these libraries are required, and you may remove and replace them with a component library of your own choice or simply build your UI from scratch.
-
-## Related Projects
-
-- [Looker Extension SDK React](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk-react)
-- [Looker Extension SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk)
-- [Looker SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/sdk)
-- [Looker Embed SDK](https://github.com/looker-open-source/embed-sdk)
-- [Looker Components](https://components.looker.com/)
-- [Styled components](https://www.styled-components.com/docs)
diff --git a/src/Home.tsx b/src/Home.tsx
@@ -33,7 +33,13 @@ import {AppContext} from './context'
 import {getWindowDimensions, computeDirections} from './utils'
 import { Resizable } from "re-resizable";
 import {Spinner} from './Accessories'
-import logo from './images/logo.png'
+import type { ISDKSuccessResponse } from '@looker/sdk-rtl'
+import type {  IQuery, IError } from '@looker/sdk'
+import type { SDKResponse } from '@looker/sdk-rtl'
+
+
+
+const logo =  require("./images/logo.png")
 
 
 /**
@@ -58,12 +64,31 @@ export const Home: React.FC = () => {
     //load data from technician and scooter query from Looker
     const getData = async () => {
       try {
-        const scooterQueryForSlugResp = await core40SDK.ok(core40SDK.query_for_slug("9vP8udIOywTCPEwQgAxYTM"))
-        const scooterQuery = await core40SDK.ok(core40SDK.run_query({query_id: scooterQueryForSlugResp.id,
-          result_format: "json_detail",  cache: false}))
-        setScooterData(scooterQuery.data)
+        const pblDevScooterSlug = "9vP8udIOywTCPEwQgAxYTM"
+        const googleDemoScooterSlug = "MntYBKBgzVgGMZA5JXJd74"
+        const scooterQueryForSlugResp = await core40SDK.ok(core40SDK.query_for_slug(pblDevScooterSlug))
+        // eslint-disable-next-line MESSAGE_TO_DISABLE ???
+
+        const scooterQueryId : number | undefined = scooterQueryForSlugResp.id;
+        if (scooterQueryId){
+          const scooterQuery : SDKResponse< IQuery, IError> = await core40SDK.run_query({query_id: scooterQueryId,
+            result_format: "json_detail",  
+            cache: false
+          })
+          if (scooterQuery && scooterQuery?.value?.data){
+            setScooterData(scooterQuery?.value?.data)
+          }
+        }
+
+        // prev implementation
+        // const scooterQuery = await core40SDK.ok(core40SDK.run_query({query_id: scooterQueryForSlugResp.id || 0,
+        //   result_format: "json_detail",  cache: false}))
+        //   console.log({scooterQuery})
+        // setScooterData(scooterQuery.data)
 
-        const technicianQueryForSlugResp = await core40SDK.ok(core40SDK.query_for_slug("ngrhaLC06ISup26mbYVIQp"))
+        const pblDevTechnicianSlug = "ngrhaLC06ISup26mbYVIQp"
+        const googleDemoTechnicianSlug = "H7eDvomWG40owoiXhFVHv4"
+        const technicianQueryForSlugResp = await core40SDK.ok(core40SDK.query_for_slug(pblDevTechnicianSlug))
         const technicianQuery = await core40SDK.ok(core40SDK.run_query({query_id: technicianQueryForSlugResp.id,
           result_format: "json_detail", cache: false}))
         setTechnicianData(technicianQuery.data)
@@ -121,7 +146,6 @@ export const Home: React.FC = () => {
     }
   }, [technicianToDispatch])
 
-
   return (
     <AppContext.Provider value={{scooterToService, 
     setScooterToService,