p2p、分布式，区块链笔记(OrbitDB.ControlCenter 004): 在浏览器中运行 OrbitDB Control Center 默认界面：src\views\Databases.js

• 在状态管理 StateProvider更新状态的时候，会依次更新与渲染以下界面。
  
  
  
  
• Table相关组件

默认界面：src\views\Databases.js

• 第一个更新的界面即为src\views\Databases.js。

界面主体部分

• ，{!appState.loading.programs ? ... : ...} 根据 appState.loading.programs 的布尔值选择渲染的内容：

  • 如果为 false，则渲染 ProgramList 组件，传入 programs: [] 和 handleRemoveDatabase 函数。handleRemoveDatabase会调用database的 removeDatabase(hash)移除数据。

  • 如果为 true，则渲染一个包含 Spinner 和 Text 的 Pane 组件，用于显示加载状态。

<Pane display='flex' justifyContent='center' overflow='auto'>
      <CreateDialog onCreate={createDB}/>
      <AddDialog onAdd={addDB}/>
      <Pane
        flex='1'
        overflow='auto'
        elevation={1}
        background='white'
        marginX={majorScale(6)}
      >
        {!appState.loading.programs 
          ? (<ProgramList
              programs={appState.programs}
              onRemove={handleRemoveDatabase}
            />)
          : (<Pane
              display='flex' 
              flexDirection='column' 
              alignItems='center' 
              marginTop={majorScale(3)}
              marginBottom={majorScale(1)}
            >
              <Spinner size={24}/>
              <Text marginY={majorScale(1)}>Loading...</Text>
            </Pane>)
        }
        <Pane
              display='flex' 
              flexDirection='column' 
              alignItems='center' 
              marginTop={majorScale(3)}
              marginBottom={majorScale(1)}
            >
              <Spinner size={24}/>
              <Text marginY={majorScale(1)}>Loading...</Text>
            </Pane>
      </Pane>
    </Pane>

ProgramList - - src\components\DatabaseList.js

Create按钮部分

• 点击“Create”按钮执行handleCreateDatabase 函数：

  const handleCreateDatabase = () => {
    dispatch({ type: actions.DB.OPEN_CREATEDB_DIALOG })
  }

• 在App.js中进行相应的状态更新：

      case actions.DB.OPEN_CREATEDB_DIALOG:
        return {
          ...state,
          createDBDialogOpen: true
        }

• 当appState.createDBDialogOpen设置为true时，src\components\CreateDialog.js中的Dialog DOM对象就会显示到界面上：

    <Dialog
      isShown={appState.createDBDialogOpen}
      title='Create Database'
      onCloseComplete={() => dispatch({ type: actions.DB.CLOSE_CREATEDB_DIALOG })}
      cancelLabel='Cancel'
      confirmLabel='Create'
      onConfirm={close => handleSubmit(null, close)}
    >

src\components\AddDialog.js