wip for we, refactor appWebsocket

web/src/api/projectDataFetchers.ts

@@ -1,4 +1,4 @@
-import { getAppWs } from '../hcWebsockets'
+import { AppAgentClient } from '@holochain/client'
 import { fetchConnections } from '../redux/persistent/projects/connections/actions'
 import { fetchEntryPoints } from '../redux/persistent/projects/entry-points/actions'
 import { fetchMembers } from '../redux/persistent/projects/members/actions'
@@ -12,13 +12,13 @@ import { cellIdFromString } from '../utils'
 import ProjectsZomeApi from './projectsApi'
 
 export default function constructProjectDataFetchers(
+  appWebsocket: AppAgentClient,
   dispatch: any,
   cellIdString: CellIdString
 ) {
   const cellId = cellIdFromString(cellIdString)
   return {
     fetchProjectMeta: async () => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const projectMeta = await projectsZomeApi.projectMeta.fetchProjectMeta(
         cellId
@@ -27,7 +27,6 @@ export default function constructProjectDataFetchers(
       return dispatch(fetchProjectMeta(cellIdString, projectMeta))
     },
     fetchEntryPoints: async () => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const entryPoints = await projectsZomeApi.entryPoint.fetch(cellId, {
         All: null,
@@ -36,14 +35,12 @@ export default function constructProjectDataFetchers(
       return dispatch(fetchEntryPoints(cellIdString, entryPoints))
     },
     fetchMembers: async () => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const members = await projectsZomeApi.member.fetch(cellId)
       // is not currently a layout affecting action
       return dispatch(fetchMembers(cellIdString, members))
     },
     fetchOutcomes: async () => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const outcomes = await projectsZomeApi.outcome.fetch(cellId, {
         All: null,
@@ -54,7 +51,6 @@ export default function constructProjectDataFetchers(
       )
     },
     fetchConnections: async () => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const connections = await projectsZomeApi.connection.fetch(cellId, {
         All: null,
@@ -65,7 +61,6 @@ export default function constructProjectDataFetchers(
       )
     },
     fetchOutcomeMembers: async () => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const outcomeMembers = await projectsZomeApi.outcomeMember.fetch(cellId, {
         All: null,
@@ -76,7 +71,6 @@ export default function constructProjectDataFetchers(
       )
     },
     fetchOutcomeComments: async () => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const outcomeComments = await projectsZomeApi.outcomeComment.fetch(
         cellId,
@@ -86,7 +80,6 @@ export default function constructProjectDataFetchers(
       return dispatch(fetchOutcomeComments(cellIdString, outcomeComments))
     },
     fetchTags: async () => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const tags = await projectsZomeApi.tag.fetch(cellId, { All: null })
       const skipLayoutAnimation = true

web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvComments/EvComments.component.tsx

@@ -13,10 +13,12 @@ import CommentPosted from '../../../../CommentPosted/CommentPosted'
 import './EvComments.scss'
 import EvReadOnlyHeading from '../../../../EvReadOnlyHeading/EvReadOnlyHeading'
 import Icon from '../../../../Icon/Icon'
+import { AppAgentClient } from '@holochain/client'
 
 export type EvCommentsOwnProps = {
   projectId: CellIdString
   outcomeContent: string
+  appWebsocket: AppAgentClient
 }
 
 export type EvCommentsConnectorStateProps = {

web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvComments/EvComments.connector.ts

@@ -40,12 +40,11 @@ function mapStateToProps(
   }
 }
 
-function mapDispatchToProps(dispatch, ownProps) {
-  const { projectId: cellIdString } = ownProps
+function mapDispatchToProps(dispatch: any, ownProps: EvCommentsOwnProps) {
+  const { projectId: cellIdString, appWebsocket } = ownProps
   const cellId = cellIdFromString(cellIdString)
   return {
     createOutcomeComment: async (payload: OutcomeComment) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const outcomeComment = await projectsZomeApi.outcomeComment.create(
         cellId,
@@ -57,7 +56,6 @@ function mapDispatchToProps(dispatch, ownProps) {
       entry: OutcomeComment,
       actionHash: ActionHashB64
     ) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const outcomeComment = await projectsZomeApi.outcomeComment.update(
         cellId,
@@ -66,7 +64,6 @@ function mapDispatchToProps(dispatch, ownProps) {
       return dispatch(updateOutcomeComment(cellIdString, outcomeComment))
     },
     deleteOutcomeComment: async (actionHash: ActionHashB64) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       await projectsZomeApi.outcomeComment.delete(cellId, actionHash)
       return dispatch(deleteOutcomeComment(cellIdString, actionHash))

web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.component.tsx

@@ -28,10 +28,12 @@ import EditingOverlay from '../../../../EditingOverlay/EditingOverlay'
 import DateRangePicker, { DatePicker } from '../../../../DatePicker/DatePicker'
 import Typography from '../../../../Typography/Typography'
 import Icon from '../../../../Icon/Icon'
+import { AppAgentClient } from '@holochain/client'
 
 /* end testing data */
 
 export type EvDetailsOwnProps = {
+  appWebsocket: AppAgentClient
   projectId: CellIdString
   outcome: ComputedOutcome
   content: string

web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.connector.tsx

@@ -121,14 +121,13 @@ function mapStateToProps(
 }
 
 function mapDispatchToProps(
-  dispatch,
+  dispatch: any,
   ownProps: EvDetailsOwnProps
 ): EvDetailsConnectorDispatchProps {
-  const { projectId: cellIdString } = ownProps
+  const { projectId: cellIdString, appWebsocket } = ownProps
   const cellId = cellIdFromString(cellIdString)
   return {
     onCreateTag: async (text: string, backgroundColor: string) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const createdTag = await projectsZomeApi.tag.create(cellId, {
         text,
@@ -137,7 +136,6 @@ function mapDispatchToProps(
       return dispatch(createTag(cellIdString, createdTag))
     },
     onUpdateExistingTag: async (actionHash, text, backgroundColor) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const updatedExistingTag = await projectsZomeApi.tag.update(cellId, {
         actionHash,
@@ -150,7 +148,6 @@ function mapDispatchToProps(
       memberAgentPubKey: AgentPubKeyB64,
       creatorAgentPubKey: AgentPubKeyB64
     ) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const outcomeMember = await projectsZomeApi.outcomeMember.create(cellId, {
         outcomeActionHash,
@@ -162,7 +159,6 @@ function mapDispatchToProps(
       return dispatch(createOutcomeMember(cellIdString, outcomeMember))
     },
     deleteOutcomeMember: async (actionHash: ActionHashB64) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       await projectsZomeApi.outcomeMember.delete(cellId, actionHash)
       return dispatch(deleteOutcomeMember(cellIdString, actionHash))

web/src/components/ExpandedViewMode/EVRightColumn/EVRightColumn.connector.ts

@@ -47,14 +47,13 @@ function mapStateToProps(
 }
 
 function mapDispatchToProps(
-  dispatch,
+  dispatch: any,
   ownProps: EvRightColumnOwnProps
 ): EvRightColumnConnectorDispatchProps {
-  const { projectId: cellIdString } = ownProps
+  const { projectId: cellIdString, appWebsocket } = ownProps
   const cellId = cellIdFromString(cellIdString)
   return {
     updateOutcome: async (outcome: Outcome, actionHash: ActionHashB64) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const updatedOutcome = await projectsZomeApi.outcome.update(cellId, {
         actionHash,
@@ -66,7 +65,6 @@ function mapDispatchToProps(
       projectMeta: ProjectMeta,
       actionHash: ActionHashB64
     ) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const updatedProjectMeta = await projectsZomeApi.projectMeta.update(
         cellId,
@@ -75,7 +73,6 @@ function mapDispatchToProps(
       return dispatch(updateProjectMeta(cellIdString, updatedProjectMeta))
     },
     createEntryPoint: async (entryPoint: EntryPoint) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const wireRecord = await projectsZomeApi.entryPoint.create(
         cellId,
@@ -84,13 +81,11 @@ function mapDispatchToProps(
       return dispatch(createEntryPoint(cellIdString, wireRecord))
     },
     deleteEntryPoint: async (actionHash: ActionHashB64) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       await projectsZomeApi.entryPoint.delete(cellId, actionHash)
       return dispatch(deleteEntryPoint(cellIdString, actionHash))
     },
     onDeleteClick: async (outcomeActionHash: ActionHashB64) => {
-      const appWebsocket = await getAppWs()
       const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
       const fullyDeletedOutcome = await projectsZomeApi.outcome.deleteOutcomeFully(
         cellId,

web/src/components/ExpandedViewMode/EVRightColumn/EvRightColumn.component.tsx

@@ -31,8 +31,10 @@ import Typography from '../../Typography/Typography'
 import ReadOnlyInfo from '../../ReadOnlyInfo/ReadOnlyInfo'
 import cleanOutcome from '../../../api/cleanOutcome'
 import ProgressIndicator from '../../ProgressIndicator/ProgressIndicator'
+import { AppAgentClient } from '@holochain/client'
 
 export type EvRightColumnOwnProps = {
+  appWebsocket: AppAgentClient
   projectId: CellIdString
   onClose: () => void
   outcome: ComputedOutcome

web/src/components/ExpandedViewMode/ExpandedViewMode.connector.tsx

@@ -21,6 +21,7 @@ import EvChildren from './EVMiddleColumn/TabContent/EvChildren/EvChildren'
 import EvTaskList from './EVMiddleColumn/TabContent/EvTaskList/EvTaskList'
 import cleanOutcome from '../../api/cleanOutcome'
 import moment from 'moment'
+import useAppWebsocket from '../../hooks/useAppWebsocket'
 
 function mapStateToProps(
   state: RootState,
@@ -82,6 +83,7 @@ const ConnectedExpandedViewMode: React.FC<ConnectedExpandedViewModeProps> = ({
   const [githubInputLinkText, setGithubInputLinkText] = useState('')
   // the live editor state
   const [description, setDescription] = useState('')
+  const appWebsocket = useAppWebsocket()
 
   // close Expanded view after hitting Esc key:
   useEffect(() => {
@@ -229,6 +231,7 @@ const ConnectedExpandedViewMode: React.FC<ConnectedExpandedViewModeProps> = ({
     <ConnectedEvComments
       projectId={projectId}
       outcomeContent={outcomeContent}
+      appWebsocket={appWebsocket}
     />
   )
   const rightColumn = (

web/src/components/Footer/Footer.tsx

@@ -79,19 +79,19 @@ const Footer: React.FC<FooterProps> = ({
       if (!projectId) {
         return
       }
-      const appWs = await getAppWs()
+      // TODOOOOO
       // TODO: check `last_time_queried` parameter to see if its useful
-      try {
-        const dnaHash = cellIdFromString(projectId)[0]
-        const networkInfo = await appWs.networkInfo({
-          agent_pub_key: agentAddress as any,
-          dnas: [dnaHash],
-        })
-        let sum = networkInfo[0].fetch_pool_info.num_ops_to_fetch
-        setNumOpsToFetch(sum)
-      } catch (e) {
-        console.log('error during call to networkInfo', e)
-      }
+      // try {
+      //   const dnaHash = cellIdFromString(projectId)[0]
+      //   const networkInfo = await appWs.networkInfo({
+      //     agent_pub_key: agentAddress as any,
+      //     dnas: [dnaHash],
+      //   })
+      //   let sum = networkInfo[0].fetch_pool_info.num_ops_to_fetch
+      //   setNumOpsToFetch(sum)
+      // } catch (e) {
+      //   console.log('error during call to networkInfo', e)
+      // }
     }
 
     const interval = setInterval(() => fetchOpData(), 1000)

web/src/components/IntroScreen/IntroScreen.component.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Redirect, useHistory } from 'react-router-dom'
-
-import './IntroScreen.scss'
+import { AppAgentClient } from '@holochain/client'
 
 import Button from '../Button/Button'
 import Icon from '../Icon/Icon'
@@ -10,14 +9,21 @@ import { Profile } from '../../types'
 import { WireRecord } from '../../api/hdkCrud'
 import { CellIdString } from '../../types/shared'
 
-export type StateIntroScreenProps = {
+import './IntroScreen.scss'
+
+export type IntroScreenStateProps = {
   whoami: WireRecord<Profile>
   profilesCellId: CellIdString
 }
-export type DispatchIntroScreenProps = {
+export type IntroScreenDispatchProps = {
   fetchWhoami: (profilesCellId: CellIdString) => Promise<void>
 }
-export type IntroScreenProps = StateIntroScreenProps & DispatchIntroScreenProps
+export type IntroScreenOwnProps = {
+  appWebsocket: AppAgentClient
+}
+export type IntroScreenProps = IntroScreenOwnProps &
+  IntroScreenStateProps &
+  IntroScreenDispatchProps
 
 const IntroScreen: React.FC<IntroScreenProps> = ({
   fetchWhoami,

web/src/components/IntroScreen/IntroScreen.connector.tsx

@@ -1,32 +1,48 @@
 import { connect } from 'react-redux'
 import ProfilesZomeApi from '../../api/profilesApi'
-import { getAppWs } from '../../hcWebsockets'
 import { whoami } from '../../redux/persistent/profiles/who-am-i/actions'
 import { RootState } from '../../redux/reducer'
 import { CellIdString } from '../../types/shared'
 import { cellIdFromString } from '../../utils'
-import IntroScreen, {
-  DispatchIntroScreenProps,
-  StateIntroScreenProps,
+import IntroScreenInner, {
+  IntroScreenDispatchProps,
+  IntroScreenOwnProps,
+  IntroScreenStateProps,
 } from './IntroScreen.component'
+import useAppWebsocket from '../../hooks/useAppWebsocket'
+import React from 'react'
 
-function mapStateToProps(state: RootState): StateIntroScreenProps {
+function mapStateToProps(state: RootState): IntroScreenStateProps {
   return {
     whoami: state.whoami,
     profilesCellId: state.cells.profiles,
   }
 }
 
-function mapDispatchToProps(dispatch): DispatchIntroScreenProps {
+function mapDispatchToProps(
+  dispatch: any,
+  ownProps: IntroScreenOwnProps
+): IntroScreenDispatchProps {
+  const { appWebsocket } = ownProps
   return {
     fetchWhoami: async (profilesCellId: CellIdString) => {
       const cellId = cellIdFromString(profilesCellId)
-      const client = await getAppWs()
-      const profilesZomeApi = new ProfilesZomeApi(client)
+      const profilesZomeApi = new ProfilesZomeApi(appWebsocket)
       const profile = await profilesZomeApi.profile.whoami(cellId)
       dispatch(whoami(profilesCellId, profile))
     },
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(IntroScreen)
+const IntroScreen = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(IntroScreenInner)
+
+// done this way because this is rendered directly by a route
+const IntroScreenWrapper = () => {
+  const appWebsocket = useAppWebsocket()
+  return <IntroScreen appWebsocket={appWebsocket} />
+}
+
+export default IntroScreenWrapper

web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx

@@ -16,9 +16,11 @@ import { coordsCanvasToPage } from '../../drawing/coordinateSystems'
 import Icon from '../Icon/Icon'
 import checkForKeyboardKeyModifier from '../../event-listeners/helpers/osPlatformHelper'
 import useContainWithinScreen from '../../hooks/useContainWithinScreen'
+import { AppAgentClient } from '@holochain/client'
 
 export type MapViewCreateOutcomeOwnProps = {
   projectId: CellIdString
+  appWebsocket: AppAgentClient
 }
 
 export type MapViewCreateOutcomeConnectorStateProps = {