refactor and remove redundant components listgroupitem and renderItem

libs/remix-ui/plugin-manager/src/lib/components/listGroupItem.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { Profile } from '../../customTypes'
-import RenderItem from './renderItem'
-
-interface ListGroupItemProps {
-  activeProfiles?: Profile[]
-  inactiveProfiles?: Profile[]
-}
-
-function ListGroupItem () {
-  return (
-    <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
-      {/* { activeProfiles.length > 0
-        ? activeProfiles.map(profile => (
-          <RenderItem profile={profile} />
-        ))
-        : inactiveProfiles.map(profile => (
-          <RenderItem profile={profile}/>
-        ))
-      } */}
-      <RenderItem />
-      <h6 className="h6">List Group Item Component</h6>
-    </div>
-  )
-}
-
-export default ListGroupItem

libs/remix-ui/plugin-manager/src/lib/components/moduleHeading.tsx

@@ -6,12 +6,12 @@ interface ModuleHeadingProps {
 }
 
 function ModuleHeading ({ headingLabel }: ModuleHeadingProps) {
-  const { inactivesCount, activesCount } = useContext(PluginManagerContext)
+  const { actives, inactives } = useContext(PluginManagerContext)
   return (
     <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">{headingLabel}</span>
       <span className="badge badge-primary" style={{ cursor: 'default' }} data-id="pluginManagerComponentInactiveTilesCount">
-        {headingLabel === 'Active Modules' ? activesCount : inactivesCount}
+        {headingLabel === 'Active Modules' ? actives.length : inactives.length}
       </span>
     </nav>
   )

libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx

@@ -3,17 +3,12 @@ import { PluginManagerContext } from '../contexts/pluginmanagercontext'
 import '../remix-ui-plugin-manager.css'
 import Button from './button'
 interface PluginCardProps {
-  profileName: string
-  displayName: string
-  docLink: string
-  versionWarning: any
-  profileIcon: string
-  profileDescription: string
+  profile: any
 }
 
 // eslint-disable-next-line no-empty-pattern
-function PluginCard () {
-  const { profile, isActive } = useContext(PluginManagerContext)
+function PluginCard ({ profile }: PluginCardProps) {
+  const { isActive } = useContext(PluginManagerContext)
   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">
@@ -26,26 +21,28 @@ function PluginCard () {
     <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
   ) : null)
   return (
-    <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={displayName}>
-      <div className="row justify-content-between align-items-center mb-2">
-        <h6 className="remixui_displayName plugin-name">
-          <div>
-            {displayName}
-            {docLink}
-            {versionWarning}
-          </div>
-          { isActive(profile.name) ? (
-            <Button
-              buttonText="Deactivate"
-            />) : <Button buttonText="Activate" />
-          }
-        </h6>
-      </div>
-      <div className="remixui_description d-flex text-body plugin-text mb-2">
-        <img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/>
-        <span className="remixui_descriptiontext">{profile.description}</span>
-      </div>
-    </article>
+    <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>
+            { isActive(profile.name) ? (
+              <Button
+                buttonText="Deactivate"
+              />) : <Button buttonText="Activate" />
+            }
+          </h6>
+        </div>
+        <div className="remixui_description d-flex text-body plugin-text mb-2">
+          <img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/>
+          <span className="remixui_descriptiontext">{profile.description}</span>
+        </div>
+      </article>
+    </div>
   )
 }
 

libs/remix-ui/plugin-manager/src/lib/components/renderItem.tsx

@@ -1,57 +0,0 @@
-import React, { useContext } from 'react'
-import { Profile } from '../../customTypes'
-import { PluginManagerContext } from '../contexts/pluginmanagercontext'
-import PluginCard from './pluginCard'
-
-interface RenderItemProps {
-  profile: Profile
-}
-
-function RenderItem () {
-  const { profile } = useContext(PluginManagerContext)
-  // const [displayName, setDisplayName] = useState('')
-  // const [docLink, setDocLink] = useState<any>()
-  // const [versionWarning, setVersionWarning] = useState<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>>()
-
-  // useEffect(() => {
-  //   const checkPluginVersion = (version: string) => {
-  //     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  //     let versionWarning: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
-  //     if (version && version.match(/\b(\w*alpha\w*)\b/g)) {
-  //       versionWarning = <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
-  //     }
-  //     // Beta
-  //     if (version && version.match(/\b(\w*beta\w*)\b/g)) {
-  //       versionWarning = <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
-  //     }
-  //     return versionWarning
-  //   }
-
-  //   setDisplayName((profile.displayName) ? profile.displayName : profile.name)
-  //   setDocLink(
-  //     profile.documentation ? (
-  //       <a href={profile.documentation}
-  //         className="px-1"
-  //         title="link to documentation"
-  //         // eslint-disable-next-line react/jsx-no-target-blank
-  //         target="_blank">
-  //         <i aria-hidden="true" className="fas fa-book"></i>
-  //       </a>
-  //     ) : '')
-  //   setVersionWarning(checkPluginVersion(profile.version))
-  // }, [profile.displayName, profile.documentation, profile.name, profile.version, versionWarning])
-  console.log('Profile object from render item component', profile)
-
-  return (
-    <PluginCard
-      // displayName={displayName}
-      // docLink={docLink}
-      // versionWarning={versionWarning}
-      // profileDescription={profile.description}
-      // profileIcon={profile.icon}
-      // profileName={profile.name}
-    />
-  )
-}
-
-export default RenderItem

libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx

@@ -1,32 +1,15 @@
-import React from 'react'
-import ListGroupItem from './listGroupItem'
+import React, { Fragment, useContext } from 'react'
+import { PluginManagerContext } from '../contexts/pluginmanagercontext'
 import ModuleHeading from './moduleHeading'
+import PluginCard from './pluginCard'
 
 interface RootViewProps {
   localPluginButtonText: string
 }
 
 function RootView ({ localPluginButtonText }: RootViewProps) {
-  // const { actives, inactives, tileLabel } = useContext(PluginManagerContext)
+  const { actives, inactives } = 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">
-  //     <input type="text" className="form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput" />
-  //     <button className="btn btn-secondary text-dark border-0" data-id="pluginManagerComponentPluginSearchButton">{localPluginButtonText}</button>
-  //   </header>
-  //   <section data-id="pluginManagerComponentPluginManagerSection">
-  //     <ActiveTile
-  //       activesCount={actives.length}
-  //       inactivesCount={inactives.length}
-  //       tileLabel={tileLabel}
-  //     />
-  //     <ListGroupItem
-  //       activeProfiles={actives}
-  //       inactiveProfiles={inactives}
-  //     />
-  //   </section>
-  // </div>
-
     <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
       <header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
         <input type="text" className="form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput" />
@@ -35,9 +18,22 @@ function RootView ({ localPluginButtonText }: RootViewProps) {
         </button>
       </header>
       <section data-id="pluginManagerComponentPluginManagerSection">
-        <ModuleHeading headingLabel="Active Modules"/>
-        <ModuleHeading headingLabel="Inactive Modules"/>
-        <ListGroupItem />
+        {actives.length === 0 ? (
+          <Fragment>
+            <ModuleHeading headingLabel="Active Modules"/>
+            {actives.map((profile) => (
+              <PluginCard profile={profile}/>
+            ))}
+          </Fragment>
+        ) : null }
+        {inactives.length === 0 ? (
+          <Fragment>
+            <ModuleHeading headingLabel="Inactive Modules"/>
+            {inactives.map((profile) => (
+              <PluginCard profile={profile}/>
+            ))}
+          </Fragment>
+        ) : null}
       </section>
     </div>
   )

libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

@@ -14,7 +14,6 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
     //   />
     // </PluginManagerContextProvider>
     <PluginManagerContextProvider props={props}>
-      <h3 className="h3">Remix UI Plugin Manager React</h3>
       <RootView localPluginButtonText="Local Plugin"/>
     </PluginManagerContextProvider>
   )