create separate plugincards for active and inactive state. create custom hook for localstorage and method to handle pluginManager state
joseph izang
4 years ago
parent
e3c887f88c
commit
3c951a9cbf
@ -1,29 +0,0 @@ |
||||
import React, { useState } from 'react' |
||||
import { PluginManagerComponent } from '../../types' |
||||
|
||||
interface ActivateButtonProps { |
||||
buttonText: string |
||||
pluginName: string |
||||
pluginComponent: PluginManagerComponent |
||||
} |
||||
|
||||
function ActivateButton ({ |
||||
buttonText, |
||||
pluginName, |
||||
pluginComponent |
||||
}: ActivateButtonProps) { |
||||
const [dataId] = useState(`pluginManagerComponent${buttonText}Button${pluginName}`) |
||||
|
||||
return ( |
||||
<button |
||||
onClick={() => { |
||||
pluginComponent.activateP(pluginName) |
||||
}} |
||||
className={buttonText === 'Activate' ? 'btn btn-success btn-sm' : 'btn btn-secondary btn-sm'} |
||||
data-id={dataId} |
||||
> |
||||
{buttonText} |
||||
</button> |
||||
) |
||||
} |
||||
export default ActivateButton |
||||
@ -0,0 +1,76 @@ |
||||
import { Profile } from '@remixproject/plugin-utils' |
||||
import React, { useState } from 'react' |
||||
import { RemoveActivatedPlugin } from '../../pluginManagerStateMachine' |
||||
// import { RemoveActivatedPlugin } from '../../pluginManagerStateMachine'
|
||||
import { PluginManagerComponent } from '../../types' |
||||
import '../remix-ui-plugin-manager.css' |
||||
interface PluginCardProps { |
||||
profile: Profile & { |
||||
icon?: string |
||||
} |
||||
pluginComponent: PluginManagerComponent |
||||
buttonText: string |
||||
reRender: () => void |
||||
} |
||||
|
||||
// eslint-disable-next-line no-empty-pattern
|
||||
function ActivePluginCard ({ |
||||
profile, |
||||
pluginComponent, |
||||
buttonText, |
||||
reRender |
||||
}: PluginCardProps) { |
||||
const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name) |
||||
const [docLink] = useState<JSX.Element>((profile.documentation) ? ( |
||||
<a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer"> |
||||
<i aria-hidden="true" className="fas fa-book"/> |
||||
</a> |
||||
) : null) |
||||
|
||||
const [versionWarning] = useState<JSX.Element>((profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) ? ( |
||||
<small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small> |
||||
) : (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) ? ( |
||||
<small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small> |
||||
) : null) |
||||
// const [stateManager] = useState<PluginManagerStateMachine>(new PluginManagerStateMachine(pluginComponent))
|
||||
|
||||
return ( |
||||
<div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile"> |
||||
<article className="list-group-item py-1 mb-1 plugins-list-group-item" title={displayName}> |
||||
<div className="remixui_row justify-content-between align-items-center mb-2"> |
||||
<h6 className="remixui_displayName plugin-name"> |
||||
<div> |
||||
{displayName} |
||||
{docLink} |
||||
{versionWarning} |
||||
</div> |
||||
{ |
||||
<button |
||||
onClick={() => { |
||||
// pluginComponent.deactivateP(profile.name)
|
||||
console.log('calling pluginComponent.call directly...') |
||||
pluginComponent.call('manager', 'deactivatePlugin', profile.name) |
||||
console.log('called pluginComponent.call successfully') |
||||
pluginComponent._paq.push(['trackEvent', 'manager', 'deactivate', profile.name]) |
||||
console.log('matomo tracking captured for deactivation successfully') |
||||
RemoveActivatedPlugin(profile.name) |
||||
reRender() |
||||
}} |
||||
className="btn btn-secondary btn-sm" |
||||
data-id={`pluginManagerComponentDeactivateButton${profile.name}`} |
||||
> |
||||
{buttonText} |
||||
</button> |
||||
} |
||||
</h6> |
||||
</div> |
||||
<div className="remixui_description d-flex text-body plugin-text mb-2"> |
||||
{ profile.icon ? <img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/> : null } |
||||
<span className="remixui_descriptiontext">{profile.description}</span> |
||||
</div> |
||||
</article> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default ActivePluginCard |
||||
@ -0,0 +1,67 @@ |
||||
import { Profile } from '@remixproject/plugin-utils' |
||||
import React, { useState } from 'react' |
||||
import { PersistActivatedPlugin } from '../../pluginManagerStateMachine' |
||||
import { PluginManagerComponent } from '../../types' |
||||
import '../remix-ui-plugin-manager.css' |
||||
interface PluginCardProps { |
||||
profile: Profile & { |
||||
icon?: string |
||||
} |
||||
pluginComponent: PluginManagerComponent |
||||
buttonText: string |
||||
} |
||||
|
||||
// eslint-disable-next-line no-empty-pattern
|
||||
function InactivePluginCard ({ |
||||
profile, |
||||
pluginComponent, |
||||
buttonText |
||||
}: PluginCardProps) { |
||||
const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name) |
||||
const [docLink] = useState<JSX.Element>((profile.documentation) ? ( |
||||
<a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer"> |
||||
<i aria-hidden="true" className="fas fa-book"/> |
||||
</a> |
||||
) : null) |
||||
|
||||
const [versionWarning] = useState<JSX.Element>((profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) ? ( |
||||
<small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small> |
||||
) : (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) ? ( |
||||
<small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small> |
||||
) : null) |
||||
// const [stateManager] = useState<PluginManagerStateMachine>(new PluginManagerStateMachine(pluginComponent))
|
||||
|
||||
return ( |
||||
<div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile"> |
||||
<article className="list-group-item py-1 mb-1 plugins-list-group-item" title={displayName}> |
||||
<div className="remixui_row justify-content-between align-items-center mb-2"> |
||||
<h6 className="remixui_displayName plugin-name"> |
||||
<div> |
||||
{displayName} |
||||
{docLink} |
||||
{versionWarning} |
||||
</div> |
||||
{ |
||||
<button |
||||
onClick={() => { |
||||
pluginComponent.activateP(profile.name) |
||||
PersistActivatedPlugin(pluginComponent, profile) |
||||
}} |
||||
className="btn btn-success btn-sm" |
||||
data-id={`pluginManagerComponentActivateButton${profile.name}`} |
||||
> |
||||
{buttonText} |
||||
</button> |
||||
} |
||||
</h6> |
||||
</div> |
||||
<div className="remixui_description d-flex text-body plugin-text mb-2"> |
||||
{ profile.icon ? <img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/> : null } |
||||
<span className="remixui_descriptiontext">{profile.description}</span> |
||||
</div> |
||||
</article> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default InactivePluginCard |
||||
@ -1,28 +0,0 @@ |
||||
import React, { useState } from 'react' |
||||
import { PluginManagerComponent } from '../../types' |
||||
|
||||
interface DeactivateButtonProps { |
||||
buttonText: string |
||||
pluginName: string |
||||
pluginComponent: PluginManagerComponent |
||||
} |
||||
|
||||
function DeactivateButton ({ |
||||
buttonText, |
||||
pluginName, |
||||
pluginComponent |
||||
}: DeactivateButtonProps) { |
||||
const [dataId] = useState(`pluginManagerComponent${buttonText}Button${pluginName}`) |
||||
return ( |
||||
<button |
||||
onClick={() => { |
||||
pluginComponent.deactivateP(pluginName) |
||||
}} |
||||
className={buttonText === 'Deactivate' ? 'btn btn-secondary btn-sm' : ''} |
||||
data-id={dataId} |
||||
> |
||||
{buttonText} |
||||
</button> |
||||
) |
||||
} |
||||
export default DeactivateButton |
||||
@ -1,14 +0,0 @@ |
||||
import React, { createContext } from 'react' |
||||
import { PluginManagerContextProviderProps } from '../../types' |
||||
|
||||
export const PluginManagerContext = createContext<Partial<PluginManagerContextProviderProps>>({}) |
||||
|
||||
function PluginManagerContextProvider ({ children, props }) { |
||||
return ( |
||||
<PluginManagerContext.Provider value={props}> |
||||
{children} |
||||
</PluginManagerContext.Provider> |
||||
) |
||||
} |
||||
|
||||
export default PluginManagerContextProvider |
||||
@ -0,0 +1,61 @@ |
||||
import { useRef, useEffect, useState } from 'react' |
||||
|
||||
interface EventHandler<T extends Event = Event> { |
||||
(e: T): void; |
||||
} |
||||
|
||||
interface WindowEventHook { |
||||
<K extends keyof WindowEventMap>( |
||||
eventName: K, |
||||
handler: EventHandler<WindowEventMap[K]> |
||||
): void; |
||||
} |
||||
|
||||
export const useWindowEvent: WindowEventHook = (eventName, handler) => { |
||||
// optimization: using useRef here helps us guarantee that this function is
|
||||
// is only mutated during effect lifecycles, adding some assurance that the
|
||||
// function invoked by the event listener is the same function passed to the
|
||||
// hook.
|
||||
const handlerRef = useRef<typeof handler>() |
||||
|
||||
useEffect(() => { |
||||
handlerRef.current = handler |
||||
}, [handler]) |
||||
|
||||
useEffect(() => { |
||||
const eventListener: typeof handler = event => handlerRef.current(event) |
||||
window.addEventListener(eventName, eventListener) |
||||
|
||||
return () => { |
||||
window.removeEventListener(eventName, eventListener) |
||||
} |
||||
}, [eventName, handler]) |
||||
} |
||||
|
||||
export const useLocalStorage = (key: string) => { |
||||
// initialize the value from localStorage
|
||||
const [currentValue, setCurrentValue] = useState<string | null>(() => |
||||
localStorage.getItem(key) |
||||
) |
||||
|
||||
const handler = (e: StorageEvent) => { |
||||
if ( |
||||
e.storageArea === localStorage && |
||||
e.key === key && |
||||
e.newValue !== currentValue |
||||
) { |
||||
setCurrentValue(e.newValue) |
||||
} |
||||
} |
||||
|
||||
// set up the event listener
|
||||
useWindowEvent('storage', handler) |
||||
|
||||
// update localStorage when the currentValue changes via setCurrentValue
|
||||
useEffect(() => { |
||||
localStorage.setItem(key, currentValue) |
||||
}, [key, currentValue]) |
||||
|
||||
// use as const to tell TypeScript this is a tuple
|
||||
return [currentValue, setCurrentValue] as const |
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
import { Profile } from '@remixproject/plugin-utils' |
||||
import { PluginManagerComponent } from './types' |
||||
|
||||
const defaultActivatedPlugins = [ |
||||
'manager', |
||||
'contentImport', |
||||
'theme', |
||||
'editor', |
||||
'fileManager', |
||||
'compilerMetadata', |
||||
'compilerArtefacts', |
||||
'network', |
||||
'web3Provider', |
||||
'offsetToLineColumnConverter', |
||||
'mainPanel', |
||||
'menuicons', |
||||
'tabs', |
||||
'sidePanel', |
||||
'home', |
||||
'hiddenPanel', |
||||
'contextualListener', |
||||
'terminal', |
||||
'fetchAndCompile', |
||||
'pluginManager', |
||||
'filePanel', |
||||
'settings', |
||||
'udapp' |
||||
] |
||||
|
||||
/** |
||||
* Compares default enabled plugins of remix ide |
||||
* and tracks newly activated plugins and manages |
||||
* their state by persisting in local storage |
||||
* @param newPlugin Profile of a Plugin |
||||
* @param pluginComponent PluginManagerComponent Instance |
||||
*/ |
||||
export async function PersistActivatedPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile) { |
||||
const persisted = localStorage.getItem('newActivePlugins') |
||||
const activatedPlugins: Profile[] = JSON.parse(persisted) |
||||
|
||||
const newlyActivatedPlugins: Array<Profile> = [] |
||||
if (newPlugin) { |
||||
if (defaultActivatedPlugins.includes(newPlugin.name) === false) { |
||||
// if this is true then we are sure that the profile name is in localStorage/workspace
|
||||
if (activatedPlugins.length > 0 && !activatedPlugins.includes(newPlugin)) { |
||||
await FetchAndPersistPlugin(pluginComponent, newPlugin, activatedPlugins) |
||||
localStorage.setItem('newActivePlugins', JSON.stringify(activatedPlugins)) |
||||
} else { |
||||
await FetchAndPersistPlugin(pluginComponent, newPlugin, newlyActivatedPlugins) |
||||
localStorage.setItem('newActivePlugins', JSON.stringify(newlyActivatedPlugins)) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
async function FetchAndPersistPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile<any>, newlyActivatedPlugins: Profile<any>[]) { |
||||
try { |
||||
const targetProfile = await pluginComponent.appManager.getProfile(newPlugin.name) |
||||
if (targetProfile !== null || targetProfile !== undefined) newlyActivatedPlugins.push(targetProfile) |
||||
} catch { |
||||
throw new Error('Could not fetch and persist target profile!') |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Remove a deactivated plugin from persistence (localStorage) |
||||
* @param pluginName Name of plugin profile to be removed |
||||
*/ |
||||
export function RemoveActivatedPlugin (pluginName: string) { |
||||
// eslint-disable-next-line no-debugger
|
||||
debugger |
||||
const getWorkspacePlugins = JSON.parse(localStorage.getItem('newActivePlugins')) |
||||
const removeExisting = getWorkspacePlugins.filter(target => target.name === pluginName) |
||||
localStorage.setItem('newActivePlugins', JSON.stringify(removeExisting)) |
||||
} |
||||
Loading…
Reference in new issue