partial

web/src/components/JoinProjectModal/JoinProjectModal.tsx

@@ -60,12 +60,12 @@ function JoinProjectForm({
 export default function JoinProjectModal({
   showModal,
   onClose,
-  doJoinProject,
+  onJoinProject,
   joinedProjectsSecrets,
 }: {
   showModal: boolean
   onClose: () => void
-  doJoinProject: (projectSecret: string) => Promise<CellIdString>
+  onJoinProject: (projectSecret: string) => Promise<CellIdString>
   joinedProjectsSecrets: string[]
 }) {
   // pull in the toast context
@@ -90,7 +90,7 @@ export default function JoinProjectModal({
   const onClickJoinProject = async () => {
     setPendingJoiningProject(true)
     try {
-      await doJoinProject(projectSecret)
+      await onJoinProject(projectSecret)
       setCheckDone(true)
       setPendingJoiningProject(false)
       resetJoinProjectState()

web/src/context/ModalContexts.ts

@@ -4,35 +4,34 @@ import { ViewingReleaseNotes } from '../components/UpdateModal/UpdateModal'
 
 export enum OpenModal {
   None,
-  DeleteProject,
-  RemoveSelfProject,
-  UpdateApp,
+  CreateProject,
+  JoinProject,
+  ImportProject,
   ProjectSettings,
   InviteMembers,
-  ProjectMigrated,
+  DeleteProject,
+  RemoveSelfProject,
   Preferences,
   ProfileEditForm,
+  UpdateApp,
+  ProjectMigrated,
 }
 
 export type ModalState =
   | {
       id: OpenModal.None
     }
   | {
-      id: OpenModal.DeleteProject
-      cellId: CellIdString
-      projectName: string
-      projectAppId: string
+      id: OpenModal.CreateProject
+      passphrase: string
     }
   | {
-      id: OpenModal.RemoveSelfProject
-      cellId: CellIdString
-      projectName: string
-      projectAppId: string
+      id: OpenModal.JoinProject
+      passphrase: string
     }
   | {
-      id: OpenModal.UpdateApp
-      section: ViewingReleaseNotes
+      id: OpenModal.ImportProject
+      passphrase: string
     }
   | {
       id: OpenModal.ProjectSettings
@@ -43,15 +42,31 @@ export type ModalState =
       passphrase: string
     }
   | {
-      id: OpenModal.ProjectMigrated
+      id: OpenModal.DeleteProject
       cellId: CellIdString
+      projectName: string
+      projectAppId: string
+    }
+  | {
+      id: OpenModal.RemoveSelfProject
+      cellId: CellIdString
+      projectName: string
+      projectAppId: string
     }
   | {
       id: OpenModal.Preferences
     }
   | {
       id: OpenModal.ProfileEditForm
     }
+  | {
+      id: OpenModal.ProjectMigrated
+      cellId: CellIdString
+    }
+  | {
+      id: OpenModal.UpdateApp
+      section: ViewingReleaseNotes
+    }
 
 export interface ModalContextsShape {
   modalState: ModalState

web/src/routes/App.component.tsx

@@ -56,11 +56,13 @@ import {
 } from '../redux/ephemeral/local-preferences/reducer.js'
 import { ProjectMetaState } from '../redux/persistent/projects/project-meta/reducer'
 import { MembersState } from '../redux/persistent/projects/members/reducer'
+import useProjectStatusInfos from '../hooks/useProjectStatusInfos'
 
 export type AppStateProps = {
   projectMetas: ProjectMetaState
   projectMembers: MembersState
   profilesCellIdString: string
+  projectCellIdStrings: CellIdString[]
   members: Profile[]
   presentMembers: AgentPubKeyB64[]
   activeEntryPoints: {
@@ -94,16 +96,32 @@ export type AppDispatchProps = {
 }
 
 export type AppMergeProps = {
+  createProject: (
+    agentAddress: AgentPubKeyB64,
+    project: { name: string; image: string },
+    passphrase: string
+  ) => Promise<void>
+  joinProject: (passphrase: string) => Promise<CellIdString>
+  importProject: (
+    cellIdString: CellIdString,
+    agentAddress: AgentPubKeyB64,
+    projectData: any,
+    passphrase: string
+  ) => Promise<void>
   uninstallProject: (appId: string, cellIdString: CellIdString) => Promise<void>
   updateWhoami: (entry: Profile, actionHash: ActionHashB64) => Promise<void>
   setSelectedLayeringAlgo: (
     layeringAlgorithm: LayeringAlgorithm
   ) => Promise<void>
+  fetchMembers: (cellIdString: CellIdString) => Promise<void>
+  fetchProjectMeta: (cellIdString: CellIdString) => Promise<void>
+  fetchEntryPointDetails: (cellIdString: CellIdString) => Promise<void>
 }
 
 export type AppProps = AppStateProps & AppDispatchProps & AppMergeProps
 
 const App: React.FC<AppProps> = ({
+  projectCellIdStrings,
   projectMetas,
   projectMembers,
   members,
@@ -130,6 +148,9 @@ const App: React.FC<AppProps> = ({
   selectedLayeringAlgo,
   setSelectedLayeringAlgo,
   uninstallProject,
+  fetchEntryPointDetails,
+  fetchMembers,
+  fetchProjectMeta,
 }) => {
   const [networkInfoOpen, setNetworkInfoOpen] = useState(false)
 
@@ -146,6 +167,14 @@ const App: React.FC<AppProps> = ({
 
   const setModalToNone = () => setModalState({ id: OpenModal.None })
 
+    // calling this triggers the fetchProjectMeta for each project
+    const { projectStatusInfos, setProjectStatusInfos } = useProjectStatusInfos(
+      projectCellIdStrings,
+      fetchProjectMeta,
+      fetchEntryPointDetails,
+      fetchMembers
+    )
+
   const [showUpdateBar, setShowUpdateBar] = useState(false)
   // custom hooks
   const updateVersionInfo = useVersionChecker()

web/src/routes/App.connector.ts

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
 
-import { ActionHashB64, CellIdString } from '../types/shared'
-import { LayeringAlgorithm, Profile } from '../types'
+import { ActionHashB64, AgentPubKeyB64, CellIdString } from '../types/shared'
+import { LayeringAlgorithm, Profile, ProjectMeta } from '../types'
 
 import { updateWhoami } from '../redux/persistent/profiles/who-am-i/actions'
 import {
@@ -25,8 +25,16 @@ import {
   showSmallOutcomes,
 } from '../redux/ephemeral/map-view-settings/actions'
 import ProjectsZomeApi from '../api/projectsApi'
-import { updateProjectMeta } from '../redux/persistent/projects/project-meta/actions'
+import {
+  fetchProjectMeta,
+  updateProjectMeta,
+} from '../redux/persistent/projects/project-meta/actions'
 import { uninstallProject } from '../projects/uninstallProject'
+import { fetchEntryPointDetails } from '../redux/persistent/projects/entry-points/actions'
+import { fetchMembers } from '../redux/persistent/projects/members/actions'
+import { importProject } from '../migrating/import/importProject'
+import { createProject } from '../projects/createProject'
+import { joinProject, triggerJoinSignal } from '../projects/joinProject'
 
 function mapStateToProps(state: RootState): AppStateProps {
   const {
@@ -93,6 +101,8 @@ function mapStateToProps(state: RootState): AppStateProps {
     hiddenAchievedOutcomes: state.ui.mapViewSettings.hiddenAchievedOutcomes,
     hiddenSmallOutcomes: state.ui.mapViewSettings.hiddenSmallOutcomes,
     selectedLayeringAlgo,
+    // includes projects whose projectMeta is not loaded
+    projectCellIdStrings: state.cells.projects,
   }
 }
 
@@ -141,6 +151,72 @@ function mergeProps(
       const adminWs = await getAdminWs()
       uninstallProject(appId, cellIdString, dispatch, adminWs)
     },
+    fetchEntryPointDetails: async (cellIdString: CellIdString) => {
+      const appWebsocket = await getAppWs()
+      const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
+      const cellId = cellIdFromString(cellIdString)
+      const entryPointDetails = await projectsZomeApi.entryPoint.fetchEntryPointDetails(
+        cellId
+      )
+      return dispatch(fetchEntryPointDetails(cellIdString, entryPointDetails))
+    },
+    fetchMembers: async (cellIdString: CellIdString) => {
+      const appWebsocket = await getAppWs()
+      const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
+      const cellId = cellIdFromString(cellIdString)
+      const members = await projectsZomeApi.member.fetch(cellId)
+      return dispatch(fetchMembers(cellIdString, members))
+    },
+    fetchProjectMeta: async (cellIdString: CellIdString) => {
+      const appWebsocket = await getAppWs()
+      const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
+      const cellId = cellIdFromString(cellIdString)
+      const projectMeta = await projectsZomeApi.projectMeta.fetchProjectMeta(
+        cellId
+      )
+      return dispatch(fetchProjectMeta(cellIdString, projectMeta))
+    },
+    createProject: async (
+      agentAddress: AgentPubKeyB64,
+      project: { name: string; image: string },
+      passphrase: string
+    ) => {
+      const appWs = await getAppWs()
+      const projectsZomeApi = new ProjectsZomeApi(appWs)
+      const projectMeta: ProjectMeta = {
+        ...project, // name and image
+        passphrase,
+        creatorAgentPubKey: agentAddress,
+        createdAt: Date.now(),
+        isImported: false,
+        layeringAlgorithm: LayeringAlgorithm.Classic,
+        topPriorityOutcomes: [],
+        isMigrated: null,
+      }
+      await createProject(
+        passphrase,
+        projectMeta,
+        agentAddress,
+        dispatch,
+        projectsZomeApi
+      )
+    },
+    joinProject: async (passphrase: string) => {
+      const appWs = await getAppWs()
+      const cellIdString = await joinProject(passphrase, dispatch)
+      const cellId = cellIdFromString(cellIdString)
+      triggerJoinSignal(cellId, appWs)
+      return cellIdString
+    },
+    importProject: (cellIdString, agentAddress, projectData, passphrase) => {
+      return importProject(
+        cellIdString,
+        agentAddress,
+        projectData,
+        passphrase,
+        dispatch
+      )
+    },
     updateWhoami: async (entry: Profile, actionHash: string) => {
       const appWebsocket = await getAppWs()
       const profilesZomeApi = new ProfilesZomeApi(appWebsocket)

web/src/routes/Dashboard/Dashboard.component.tsx

@@ -31,27 +31,12 @@ export type DashboardStateProps = {
 }
 
 export type DashboardDispatchProps = {
-  createProject: (
-    agentAddress: AgentPubKeyB64,
-    project: { name: string; image: string },
-    passphrase: string
-  ) => Promise<void>
-  fetchMembers: (cellIdString: CellIdString) => Promise<void>
-  fetchProjectMeta: (cellIdString: CellIdString) => Promise<void>
   updateProjectMeta: (
     projectMeta: ProjectMeta,
     actionHash: ActionHashB64,
     cellIdString: CellIdString
   ) => Promise<void>
-  fetchEntryPointDetails: (cellIdString: CellIdString) => Promise<void>
-  joinProject: (passphrase: string) => Promise<CellIdString>
   uninstallProject: (appId: string, cellId: CellIdString) => Promise<void>
-  importProject: (
-    cellIdString: CellIdString,
-    agentAddress: AgentPubKeyB64,
-    projectData: any,
-    passphrase: string
-  ) => Promise<void>
 }
 
 export type DashboardProps = DashboardStateProps & DashboardDispatchProps
@@ -61,13 +46,9 @@ const Dashboard: React.FC<DashboardProps> = ({
   agentAddress,
   projectCellIdStrings,
   projects,
-  fetchEntryPointDetails,
-  fetchMembers,
-  fetchProjectMeta,
+
   updateProjectMeta,
-  createProject,
-  joinProject,
-  importProject,
+
 }) => {
   // pull in the modal context
   const { modalState, setModalState } = useContext(ModalContexts)
@@ -84,25 +65,6 @@ const Dashboard: React.FC<DashboardProps> = ({
   const [showProjectMigratedModal, setShowProjectMigratedModal] = useState('')
   //
 
-  // calling this triggers the fetchProjectMeta for each project
-  const { projectStatusInfos, setProjectStatusInfos } = useProjectStatusInfos(
-    projectCellIdStrings,
-    fetchProjectMeta,
-    fetchEntryPointDetails,
-    fetchMembers
-  )
-
-  const onCreateProject = (
-    project: { name: string; image: string },
-    passphrase: string
-  ) => createProject(agentAddress, project, passphrase)
-  const doJoinProject = (passphrase: string) => joinProject(passphrase)
-  const onImportProject = (
-    cellIdString: CellIdString,
-    projectData: any,
-    passphrase: string
-  ) => importProject(cellIdString, agentAddress, projectData, passphrase)
-
   const setSortBy = (sortBy) => () => {
     setSelectedSort(sortBy)
     setShowSortPicker(false)
@@ -229,13 +191,13 @@ const Dashboard: React.FC<DashboardProps> = ({
           </div>
         </div>
       </div>
-      <CreateProjectModal
+      {/* <CreateProjectModal
         onCreateProject={onCreateProject}
         showModal={showCreateModal}
         onClose={() => setShowCreateModal(false)}
       />
       <JoinProjectModal
-        doJoinProject={doJoinProject}
+        onJoinProject={doJoinProject}
         showModal={showJoinModal}
         onClose={() => setShowJoinModal(false)}
         joinedProjectsSecrets={joinedProjectsSecrets}
@@ -245,7 +207,7 @@ const Dashboard: React.FC<DashboardProps> = ({
         uninstallProject={uninstallProject}
         showModal={showImportModal}
         onClose={() => setShowImportModal(false)}
-      />
+      /> */}
       <ProjectMigratedModal
         showModal={showProjectMigratedModal !== ''}
         onClose={() => setShowProjectMigratedModal('')}