mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Finish implementing Context for easy state access

Browse Source
pull/1344/head
joseph izang 3 years ago
parent 2f62e81069
commit 9f516a8467
4 changed files with 72 additions and 84 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 28
      apps/remix-ide/src/app/components/plugin-manager-component.js
  2. 2
      libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx
  3. 27
      libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
  4. 99
      libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

28
apps/remix-ide/src/app/components/plugin-manager-component.js
Unescape View File

@ -116,9 +116,9 @@ class PluginManagerComponent extends ViewPlugin {
ReactDOM.render(<RemixUiPluginManager />, document.getElementById('pluginManager'))
}
// isActive (name) {
// return this.appManager.actives.includes(name)
// }
isActive (name) {
return this.appManager.actives.includes(name)
}
activateP (name) {
this.appManager.activatePlugin(name)
@ -219,17 +219,17 @@ class PluginManagerComponent extends ViewPlugin {
}
// // Filter all active and inactive modules that are not required
// const { actives, inactives } = this.appManager.getAll()
// .filter(isFiltered)
// .filter(isNotRequired)
// .filter(isNotDependent)
// .filter(isNotHome)
// .sort(sortByName)
// .reduce(({ actives, inactives }, profile) => {
// return this.isActive(profile.name)
// ? { actives: [...actives, profile], inactives }
// : { inactives: [...inactives, profile], actives }
// }, { actives: [], inactives: [] })
const { actives, inactives } = this.appManager.getAll()
.filter(isFiltered)
.filter(isNotRequired)
.filter(isNotDependent)
.filter(isNotHome)
.sort(sortByName)
.reduce(({ actives, inactives }, profile) => {
return this.isActive(profile.name)
? { actives: [...actives, profile], inactives }
: { inactives: [...inactives, profile], actives }
}, { actives: [], inactives: [] })
// const activeTile = actives.length !== 0
// ? yo`

2
libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx
Unescape View File

@ -12,7 +12,7 @@ function ActiveTile ({ inactivesCount, activesCount, tileLabel }: ActiveTileProp
<nav className="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span className="navbar-brand plugins-list-title h6 mb-0 mr-2">{tileLabel.label}</span>
<span className="badge badge-primary" style={{ cursor: 'default' }} data-id="pluginManagerComponentInactiveTilesCount">
{tileLabel.label === 'Active Module' ? activesCount : inactivesCount}
{tileLabel.label === 'Active Module' ? activesCount : tileLabel.label === 'Inactive Modules' ? inactivesCount : '-' }
</span>
</nav>
)

27
libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
Unescape View File

@ -1,25 +1,14 @@
import React from 'react'
import { Profile, TileLabel } from '../../customTypes'
import React, { useContext } from 'react'
import { PluginManagerContext } from '../remix-ui-plugin-manager'
import ActiveTile from './activeTile'
import ListGroupItem from './listGroupItem'
interface RootViewProps {
localPluginButtonText: string
activeProfiles: Profile[]
inactiveProfiles?: Profile[]
filterPlugins: () => void
openLocalPlugins: () => void
tileLabel: TileLabel
}
function RootView ({
localPluginButtonText,
activeProfiles,
inactiveProfiles,
filterPlugins,
openLocalPlugins,
tileLabel
}: RootViewProps) {
function RootView ({ localPluginButtonText }: RootViewProps) {
const { actives, inactives, tileLabel } = useContext(PluginManagerContext)
return (
<div id="pluginManager" data-id="pluginManagerComponentPluginManager">
<header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
@ -28,13 +17,13 @@ function RootView ({
</header>
<section data-id="pluginManagerComponentPluginManagerSection">
<ActiveTile
activesCount={activeProfiles.length}
inactivesCount={inactiveProfiles.length}
activesCount={actives.length}
inactivesCount={inactives.length}
tileLabel={tileLabel}
/>
<ListGroupItem
activeProfiles={activeProfiles}
inactiveProfiles={inactiveProfiles}
activeProfiles={actives}
inactiveProfiles={inactives}
/>
</section>
</div>

99
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
Unescape View File

@ -1,69 +1,51 @@
import React, { createContext, useEffect, useState } from 'react'
import { Profile } from '../customTypes'
import { Profile, TileLabel } from '../customTypes'
import { RemixAppManager, RemixEngine, _Paq } from '../types'
import RootView from './components/rootView'
import './remix-ui-plugin-manager.css'
/* eslint-disable-next-line */
export interface RemixUiPluginManagerProps {
export interface PluginManagerContextProviderProps {
appManager: RemixAppManager
engine: RemixEngine
_paq: _Paq
filter: string
actives: Profile[]
inactives: Profile[]
activatePlugin: (name: string) => void
deActivatePlugin: (name: string) => void
isActive: (name: string) => void
isActive: (name: string) => any
openLocalPlugin: () => Promise<void>
filterPlugins: () => void
profile: Profile
tileLabel: TileLabel
}
export const PluginManagerContext = createContext({})
function PluginManagerContextProvider ({ children }) {
const [globalState] = useState<RemixUiPluginManagerProps>({} as RemixUiPluginManagerProps)
return (
<PluginManagerContext.Provider value={globalState}>
{children}
</PluginManagerContext.Provider>
)
export interface RemixUiPluginManagerProps {
appManager: RemixAppManager
engine: RemixEngine
_paq: _Paq
filter: string
actives: Profile[]
inactives: Profile[]
activatePlugin: (name: string) => void
deActivatePlugin: (name: string) => void
isActive: (name: string) => any
openLocalPlugin: () => Promise<void>
filterPlugins: () => void
profile: Profile
tileLabel: TileLabel
}
// // Filtering helpers
// const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
// const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
// const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
// const isNotHome = (profile) => profile.name !== 'home'
// const sortByName = (profileA, profileB) => {
// const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
// const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
// return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
// }
// // Filter all active and inactive modules that are not required
// const { actives, inactives } = this.appManager.getAll()
// .filter(isFiltered)
// .filter(isNotRequired)
// .filter(isNotDependent)
// .filter(isNotHome)
// .sort(sortByName)
// .reduce(({ actives, inactives }, profile) => {
// return this.isActive(profile.name)
// ? { actives: [...actives, profile], inactives }
// : { inactives: [...inactives, profile], actives }
// }, { actives: [], inactives: [] })
export const PluginManagerContext = createContext<Partial<PluginManagerContextProviderProps>>({})
export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
function PluginManagerContextProvider ({ children, props }) {
const [isFiltered] = useState((profile) =>
(profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(props.filter))
const [isNotRequired, setIsNotRequired] = useState<boolean>(false)
const [isNotDependent, setIsNotDependent] = useState((profile) => !props.appManager.isDependent(profile.name))
const [isNotHome, setIsNotHome] = useState((profile) => profile.name !== 'home')
const [sortByName, setSortByName] = useState<1 | -1 | 0>((profileA, profileB) => {
const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
})
const [isNotRequired, setIsNotRequired] = useState<any>()
const [isNotDependent, setIsNotDependent] = useState<any>()
const [isNotHome, setIsNotHome] = useState<any>()
const [sortByName, setSortByName] = useState<any>()
const { actives, inactives } = props.appManager.getAll()
.filter(isFiltered)
.filter(isNotRequired)
@ -71,21 +53,38 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
.filter(isNotHome)
.sort(sortByName)
.reduce(({ actives, inactives }, profile) => {
return this.isActive(profile.name)
return props.isActive(profile.name)
? { actives: [...actives, profile], inactives }
: { inactives: [...inactives, profile], actives }
}, { actives: [], inactives: [] })
props.actives = actives
props.inactives = inactives
useEffect(() => {
const notRequired = (profile: Profile) => !props.appManager.isRequired(profile.name)
const notDependent = (profile) => !props.appManager.isDependent(profile.name)
const notHome = (profile) => profile.name !== 'home'
const sortedByName = (profileA: Profile, profileB: Profile) => {
const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
}
setIsNotRequired(notRequired(props.profile))
})
setIsNotDependent(notDependent(notDependent))
setIsNotHome(notHome)
setSortByName(sortedByName)
}, [props.appManager, props.profile])
return (
<PluginManagerContext.Provider value={...props}>
{children}
</PluginManagerContext.Provider>
)
}
export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
return (
<PluginManagerContextProvider>
<PluginManagerContextProvider props>
<RootView
openLocalPlugins={props.openLocalPlugin}
filterPlugins={props.filterPlugins}
activeProfiles
localPluginButtonText="Connect to a Local Plugin"
/>
</PluginManagerContextProvider>
)

Write Preview
Loading…
Cancel
Save