Add context, initial work

Examples.md

@@ -52,7 +52,6 @@ To use the synapse markdown-it component you must pass it a wiki page id and an
 | wikiId: String                             | wikiId for the synapse page                             |
 | markdown: String                           | markdown that is to be rendered                         |
 | errorMessageView?: React.FunctionComponent | Should accept and render an error message to the string |
-| token?: string                             | auth token from synapse                                 |
 
 Example 1: Rendering a Synapse Wiki page without any markdown pre-loaded
 
@@ -234,7 +233,6 @@ This card can be used in two ways - as a standard row renderer or as a 'Header'
 | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | sql: string                           | The sql to be run against Synapse                                                                                                                                                                                                                                                                      |
 | unitDescription: string               | Fills in 'Displaying 50 <unitDescription>', NOTE: If not specified then no label will render                                                                                                                                                                                                           |
-| token?: string                        | Authentication token                                                                                                                                                                                                                                                                                   |
 | limit?: number                        | Used to constrain the number of cards shown, defaults to Infinity                                                                                                                                                                                                                                      |
 | secondaryLabelLimit?: number          | Used to constraint the number of secondary labels shown, defaults to three                                                                                                                                                                                                                             |
 | type: string                          | Type of card to be rendered.                                                                                                                                                                                                                                                                           |

README.md

@@ -14,7 +14,11 @@ This project helps you integrate your app with the Synapse API backend.
 
 Interested in contributing to this project? See [contributing](./CONTRIBUTING.md).
 
-## Installation with npm
+## Installation
+
+We provide multiple ways to add Synapse React Client to your project
+
+### NPM
 
 Run the following command:<br>
 `npm install synapse-react-client`
@@ -28,7 +32,7 @@ If using Typescript then you'll need to create a file called "synapse-react-clie
  declare module "synapse-react-client"
 ```
 
-## Installation without npm or yarn
+### Installation without npm or yarn
 
 To see an example index.html page with all the necessary imports view [here](./src/demo/SingleFileBuild/index.html)
 
@@ -128,6 +132,12 @@ Note there are a number of CDNs required to finish this functionality-
 <script src="https://unpkg.com/[email protected]/dist/markdown-it-br.min.js"></script>
 ```
 
+## Usage
+
+Virtually all components require a SynapseContext (exported....)
+
+Example: 
+
 ## Setting Endpoints
 
 ### Configuring endpoint destinations for repo and portal

src/demo/containers/playground/Playground.tsx

@@ -112,7 +112,6 @@ const App = ({
           <div className="container download-list-demo">
             <div className="col-xs-10">
               <DownloadListTable
-                token={token}
                 listUpdatedCallback={() => {
                   console.log('DownloadList updated')
                 }}
@@ -158,7 +157,7 @@ const App = ({
         component={() => (
           <div className="container">
             {' '}
-            <Resources entityId="syn22311127" token={token} />{' '}
+            <Resources entityId="syn22311127" />{' '}
           </div>
         )}
       />
@@ -167,7 +166,7 @@ const App = ({
         exact={true}
         path={`${match.url}/ExternalFileHandleLink`}
         component={() => (
-          <ExternalFileHandleLink synId={'syn22276050'} token={token} />
+          <ExternalFileHandleLink synId={'syn22276050'} />
         )}
       />
 

src/lib/containers/AddToDownloadListV2.tsx

@@ -1,24 +1,25 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {
   AddBatchOfFilesToDownloadListResponse,
 } from '../utils/synapseTypes/DownloadListV2/AddBatchOfFilesToDownloadListResponse'
 import {
   addFileToDownloadListV2,
 } from '../utils/SynapseClient'
 import IconSvg from './IconSvg'
+import { SynapseContext } from '../utils/SynapseContext'
 
 export type AddToDownloadListV2Props = {
-  token?: string
   entityId: string
   entityVersionNumber?: number
 }
 
 const AddToDownloadListV2: React.FunctionComponent<AddToDownloadListV2Props> = (props) => {
 
-  const {token, entityId, entityVersionNumber} = props
+  const {entityId, entityVersionNumber} = props
+  const { accessToken } = useContext(SynapseContext)
   const addToDownloadListV2 = async () => {
     try {
-      const result:AddBatchOfFilesToDownloadListResponse = await addFileToDownloadListV2(entityId, entityVersionNumber, token)
+      const result:AddBatchOfFilesToDownloadListResponse = await addFileToDownloadListV2(entityId, entityVersionNumber, accessToken)
       if (result.numberOfFilesAdded === 1)
         console.log(`Successfully added ${entityId} (version=${entityVersionNumber}) to the Download List v2`)
       else

src/lib/containers/CardContainer.tsx

@@ -35,7 +35,6 @@ export type CardContainerProps = {
   unitDescription?: string
   hasMoreData?: boolean
   showBarChart?: boolean
-  token?: string
 } & CardConfiguration
 
 export const CardContainer = (props: CardContainerProps) => {
@@ -49,13 +48,11 @@ export const CardContainer = (props: CardContainerProps) => {
     secondaryLabelLimit = 3,
     showBarChart = true,
     title,
-    token,
     getLastQueryRequest,
     executeQueryRequest,
     hasMoreData,
     ...rest
   } = props
-
   const queryRequest = props.getLastQueryRequest!()
   /**
    * Handle a click on next or previous
@@ -89,7 +86,6 @@ export const CardContainer = (props: CardContainerProps) => {
   const tableEntityConcreteType = useGetInfoFromIds<EntityHeader>({
     ids,
     type: 'ENTITY_HEADER',
-    token: props.token,
   })
   // the cards only show the loading screen on initial load, this occurs when data is undefined
   if (!data) {
@@ -153,7 +149,6 @@ export const CardContainer = (props: CardContainerProps) => {
         tableEntityConcreteType:
           tableEntityConcreteType[0] && tableEntityConcreteType[0].type,
         tableId: props.data?.queryResult.queryResults.tableId,
-        token,
         ...rest,
       }
       return renderCard(propsForCard, type)
@@ -165,7 +160,6 @@ export const CardContainer = (props: CardContainerProps) => {
       {title && <h2 className="SRC-card-overview-title">{title}</h2>}
       {!title && unitDescription && showBarChart && (
         <TotalQueryResults
-          token={token}
           isLoading={isLoading!}
           unitDescription={unitDescription}
           executeQueryRequest={executeQueryRequest}

src/lib/containers/CardContainerLogic.md

@@ -1,6 +1,6 @@
 Standard generic card renderer:
 ```jsx
-<CardContainerLogic token={accessToken}  
+<CardContainerLogic
   rgbIndex={1}
   name='Publications'
   sql="SELECT * FROM syn22095937.4 order by authors asc"
@@ -18,7 +18,7 @@ Standard generic card renderer:
 
 Empty results:
 ```jsx
-<CardContainerLogic token={accessToken}  
+<CardContainerLogic  
   rgbIndex={1}
   name='Publications'
   sql="SELECT * FROM syn22095937.4 WHERE study='not a study value'"

src/lib/containers/CardContainerLogic.tsx

@@ -15,6 +15,7 @@ import { GenericCardSchema, IconOptions } from './GenericCard'
 import { cloneDeep, isEqual } from 'lodash-es'
 import { IconSvgOptions } from './IconSvg'
 import { DEFAULT_PAGE_SIZE } from '../utils/SynapseConstants'
+import { SynapseContext } from '../utils/SynapseContext'
 export interface CardLink {
   baseURL: string
   // the key that will go into the url
@@ -73,7 +74,6 @@ export type CardConfiguration = {
 } & CommonCardProps
 
 export type CardContainerLogicProps = {
-  token?: string
   limit?: number
   title?: string
   unitDescription?: string
@@ -115,6 +115,8 @@ export default class CardContainerLogic extends React.Component<
     hasMoreData: true,
   }
 
+  static contextType = SynapseContext
+
   constructor(props: CardContainerLogicProps) {
     super(props)
     this.executeInitialQueryRequest = this.executeInitialQueryRequest.bind(this)
@@ -147,9 +149,8 @@ export default class CardContainerLogic extends React.Component<
       prevSearchParams,
       currentSearchParams,
     )
-    const hasTokenChanged = this.props.token !== prevProps.token
     const hasSqlChanged = this.props.sql !== prevProps.sql
-    if (hasTokenChanged || hasSqlChanged || hasSearchParamsChanged) {
+    if (hasSqlChanged || hasSearchParamsChanged) {
       this.executeInitialQueryRequest()
     }
   }
@@ -180,7 +181,7 @@ export default class CardContainerLogic extends React.Component<
     await getNextPageOfData(
       queryRequest,
       this.state.data!,
-      this.props.token,
+      this.context.accessToken,
     ).then(newState => {
       this.setState({
         ...newState,
@@ -229,7 +230,7 @@ export default class CardContainerLogic extends React.Component<
       },
     }
 
-    SynapseClient.getQueryTableResults(initQueryRequest, this.props.token)
+    SynapseClient.getQueryTableResults(initQueryRequest, this.context.accessToken)
       .then((data: QueryResultBundle) => {
         const queryRequestWithoutCount = cloneDeep(initQueryRequest)
         queryRequestWithoutCount.partMask =
@@ -258,12 +259,11 @@ export default class CardContainerLogic extends React.Component<
    */
   public render() {
     // only forward the necessary props
-    const { sql, searchParams, token, ...rest } = this.props
+    const { sql, searchParams, ...rest } = this.props
     return (
       <CardContainer
         {...rest}
         data={this.state.data}
-        token={token}
         getLastQueryRequest={this.getLastQueryRequest}
         getNextPageOfData={this.getNextPageOfData}
         hasMoreData={this.state.hasMoreData}

src/lib/containers/DirectDownload.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { Icon } from './row_renderers/utils'
 import {
   BatchFileRequest,
@@ -15,9 +15,9 @@ import {
 } from '../utils/SynapseClient'
 import IconSvg from './IconSvg'
 import { useInView } from 'react-intersection-observer'
+import { SynapseContext } from '../utils/SynapseContext'
 
 export type DirectFileDownloadProps = {
-  token?: string
   associatedObjectId: string
   entityVersionNumber?: string
   associatedObjectType?: FileHandleAssociateType
@@ -27,7 +27,8 @@ export type DirectFileDownloadProps = {
 
 const DirectDownload: React.FunctionComponent<DirectFileDownloadProps> = (props) => {
 
-  const {token, associatedObjectId, entityVersionNumber, associatedObjectType, fileHandleId, displayFileName} = props
+  const { accessToken } = useContext(SynapseContext)
+  const { associatedObjectId, entityVersionNumber, associatedObjectType, fileHandleId, displayFileName} = props
   const { ref, inView } = useInView()
   const [isExternalFile, setIsExternalFile] = useState<boolean>(false)
   const [hasFileAccess, setHasFileAccess] = useState<boolean>(false)
@@ -43,7 +44,7 @@ const DirectDownload: React.FunctionComponent<DirectFileDownloadProps> = (props)
     return () => {
       mounted = false
     }
-  }, [token, inView])
+  }, [accessToken, inView])
 
   const getDownloadLink = async () => {
     let preSignedURL
@@ -54,7 +55,7 @@ const DirectDownload: React.FunctionComponent<DirectFileDownloadProps> = (props)
       } else {
         const file = await getFileResult(
           fileEntity!,
-          token,
+          accessToken,
           false,
           true
         )
@@ -94,11 +95,11 @@ const DirectDownload: React.FunctionComponent<DirectFileDownloadProps> = (props)
       includePreviewPreSignedURLs: false,
       requestedFiles: fileHandleAssociationList,
     }
-    return getFiles(batchFileRequest, token)
+    return getFiles(batchFileRequest, accessToken)
   }
 
   const getFileEntityFileHandle = () => {
-    return getEntity(token, associatedObjectId, entityVersionNumber)
+    return getEntity(accessToken, associatedObjectId, entityVersionNumber)
       .then( async (entity) => {
 
         // From file view
@@ -107,7 +108,7 @@ const DirectDownload: React.FunctionComponent<DirectFileDownloadProps> = (props)
           setFileEntity(entity as FileEntity)
           return getFileResult(   // TODO: Why can we just use getFiles here?
             entity as FileEntity,
-            token,
+            accessToken,
             true,
           ).then((data) => {
             const fh = data.fileHandle

src/lib/containers/DirectDownloadButton.tsx

@@ -1,23 +1,23 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Button } from 'react-bootstrap'
 import { BatchFileRequest, FileHandleAssociation } from '../utils/synapseTypes'
 import { getFiles } from '../utils/SynapseClient'
+import { SynapseContext } from '../utils/SynapseContext'
 
 export type DirectFileDownloadButtonProps = {
   id?: string
-  token: string
   fileHandleAssociation: FileHandleAssociation
   fileName: string | undefined
   className?: string
   variant?: string  // This allows you to change the look of the button (see react bootstrap doc)
 }
 
 const DirectDownloadButton: React.FC<DirectFileDownloadButtonProps> = props => {
-
-  const {id, token, fileHandleAssociation, className, variant, fileName}  = props
+  const {id, fileHandleAssociation, className, variant, fileName}  = props
+  const { accessToken } = useContext(SynapseContext)
 
   const getDownloadLink = async () => {
-    if (!fileHandleAssociation.fileHandleId || !token) return
+    if (!fileHandleAssociation.fileHandleId || !accessToken) return
 
     const batchFileRequest:BatchFileRequest = {
       requestedFiles: [fileHandleAssociation],
@@ -26,7 +26,7 @@ const DirectDownloadButton: React.FC<DirectFileDownloadButtonProps> = props => {
       includePreviewPreSignedURLs: false
     }
     try {
-      const file = await getFiles(batchFileRequest, token)
+      const file = await getFiles(batchFileRequest, accessToken)
       const preSignedURL = file.requestedFiles[0].preSignedURL
       if (!preSignedURL) {
         console.log("Fail to get file download link")