Filterbar context

apps/projects/app/App.js

@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { ApolloProvider } from 'react-apollo'
-
+import styled from 'styled-components'
 import { useAragonApi } from './api-react'
 import {
   Bar,
   Button,
   BackButton,
+  GU,
   Header,
+  IconFilter,
   IconPlus,
   Main,
   Tabs,
@@ -30,12 +32,12 @@ import { LoadingAnimation } from './components/Shared'
 import { EmptyWrapper } from './components/Shared'
 import { Error } from './components/Card'
 import { DecoratedReposProvider } from './context/DecoratedRepos'
+import { IssueFiltersProvider } from './context/IssueFilters'
+import { TextFilter } from './components/Shared/FilterBar/TextFilter'
 
 const App = () => {
   const { api, appState } = useAragonApi()
-  const [ activeIndex, setActiveIndex ] = useState(
-    { tabIndex: 0, tabData: {} }
-  )
+  const [ activeIndex, setActiveIndex ] = useState(0)
   const [ selectedIssueId, setSelectedIssue ] = useState(null)
   const [ githubLoading, setGithubLoading ] = useState(false)
   const [ panel, setPanel ] = useState(null)
@@ -88,9 +90,7 @@ const App = () => {
     }
   }
 
-  const changeActiveIndex = data => {
-    setActiveIndex(data)
-  }
+  const changeActiveIndex = index => setActiveIndex(index)
 
   const closePanel = () => {
     setPanel(null)
@@ -112,10 +112,6 @@ const App = () => {
     window.addEventListener('message', handlePopupMessage)
   }
 
-  const handleSelect = index => {
-    changeActiveIndex({ tabIndex: index, tabData: {} })
-  }
-
   const handleResolveLocalIdentity = address => {
     return api.resolveAddressIdentity(address).toPromise()
   }
@@ -154,16 +150,24 @@ const App = () => {
   tabs.push({ name: 'Settings', body: Settings })
 
   // Determine current tab details
-  const TabComponent = tabs[activeIndex.tabIndex].body
+  const TabComponent = tabs[activeIndex].body
   const TabAction = () => {
-    const { setupNewIssue, setupNewProject } = usePanelManagement()
+    const { setupNewIssue, setupNewProject, filters: filtersPanel } = usePanelManagement()
 
-    switch (tabs[activeIndex.tabIndex].name) {
+    switch (tabs[activeIndex].name) {
     case 'Overview': return (
       <Button mode="strong" icon={<IconPlus />} onClick={setupNewProject} label="New project" />
     )
     case 'Issues': return (
-      <Button mode="strong" icon={<IconPlus />} onClick={setupNewIssue} label="New issue" />
+      <>
+        {!selectedIssueId && (
+          <MiniFilterBar>
+            <Button icon={<IconFilter />} onClick={filtersPanel} label="Filters Panel" />
+            <TextFilter />
+          </MiniFilterBar>
+        )}
+        <Button mode="strong" icon={<IconPlus />} onClick={setupNewIssue} label="New issue" />
+      </>
     )
     default: return null
     }
@@ -178,56 +182,66 @@ const App = () => {
             onShowLocalIdentityModal={handleShowLocalIdentityModal}
           >
             <DecoratedReposProvider>
-              <Header
-                primary="Projects"
-                secondary={
-                  <TabAction />
-                }
-              />
-              <ErrorBoundary>
-
-                {selectedIssueId
-                  ? (
-                    <React.Fragment>
-                      <Bar>
-                        <BackButton onClick={() => setSelectedIssue(null)} />
-                      </Bar>
-                      <IssueDetail issueId={selectedIssueId} />
-                    </React.Fragment>
-                  )
-                  : (
-                    <React.Fragment>
-                      <Tabs
-                        items={tabs.map(t => t.name)}
-                        onChange={handleSelect}
-                        selected={activeIndex.tabIndex}
-                      />
-                      <TabComponent
-                        status={github.status}
-                        app={api}
-                        bountyIssues={issues}
-                        bountySettings={bountySettings}
-                        tokens={tokens}
-                        activeIndex={activeIndex}
-                        changeActiveIndex={changeActiveIndex}
-                        setSelectedIssue={setSelectedIssue}
-                        onLogin={handleGithubSignIn}
-                      />
-                    </React.Fragment>
-                  )
-                }
-              </ErrorBoundary>
-              <PanelManager
-                activePanel={panel}
-                onClose={closePanel}
-                {...panelProps}
-              />
+              <IssueFiltersProvider>
+                <Header
+                  primary="Projects"
+                  secondary={
+                    <TabAction />
+                  }
+                />
+                <ErrorBoundary>
+                  {selectedIssueId
+                    ? (
+                      <React.Fragment>
+                        <Bar>
+                          <BackButton onClick={() => setSelectedIssue(null)} />
+                        </Bar>
+                        <IssueDetail issueId={selectedIssueId} />
+                      </React.Fragment>
+                    )
+                    : (
+                      <React.Fragment>
+                        <Tabs
+                          items={tabs.map(t => t.name)}
+                          onChange={changeActiveIndex}
+                          selected={activeIndex}
+                        />
+                        <TabComponent
+                          status={github.status}
+                          app={api}
+                          bountyIssues={issues}
+                          bountySettings={bountySettings}
+                          tokens={tokens}
+                          activeIndex={activeIndex}
+                          changeActiveIndex={changeActiveIndex}
+                          setSelectedIssue={setSelectedIssue}
+                          onLogin={handleGithubSignIn}
+                        />
+                      </React.Fragment>
+                    )
+                  }
+                </ErrorBoundary>
+                <PanelManager
+                  activePanel={panel}
+                  onClose={closePanel}
+                  {...panelProps}
+                />
+              </IssueFiltersProvider>
             </DecoratedReposProvider>
           </IdentityProvider>
         </PanelContext.Provider>
       </ApolloProvider>
     </Main>
   )
 }
+const MiniFilterBar = styled.span`
+  > * {
+    margin-right: ${GU}px;
+  }
+
+  @media only screen and (min-width: 515px) {
+    display: none;
+  }
+`
 
 export default App

apps/projects/app/assets/index.js

@@ -1,11 +1,9 @@
 import IconMore from './IconMore'
 import IconSort from './IconSort'
 import IconGrid from './IconGrid'
-import IconCoins from './IconCoins'
-import IconFilter from './IconFilter'
 import IconBarbell from './IconBarbell'
 import IconOpen from './IconOpen'
 import IconCollapse from './IconCollapse'
 import IconDropArrow from './IconDropArrow'
 
-export { IconMore, IconSort, IconGrid, IconCoins, IconFilter, IconBarbell, IconOpen, IconCollapse, IconDropArrow }
+export { IconMore, IconSort, IconGrid, IconBarbell, IconOpen, IconCollapse, IconDropArrow }

apps/projects/app/components/Card/Project.js

@@ -19,6 +19,7 @@ import {
 } from '../../utils/responsive'
 import { useAragonApi } from '../../api-react'
 import { toHex } from 'web3-utils'
+import { useIssueFilters } from '../../context/IssueFilters'
 
 const Project = ({
   repoId,
@@ -34,6 +35,14 @@ const Project = ({
 
   const theme = useTheme()
   const { width } = useLayout()
+  const {
+    activeFilters,
+    availableFilters,
+    setAvailableFilters,
+    setActiveFilters,
+    activeFiltersCount,
+    setActiveFiltersCount,
+  } = useIssueFilters()
 
   const removeProject = () => {
     removeRepo(toHex(repoId)).toPromise()
@@ -44,10 +53,12 @@ const Project = ({
 
   const clickContext = e => {
     e.stopPropagation()
-    changeActiveIndex({
-      tabIndex: 1,
-      tabData: { filterIssuesByRepoId: repoId },
-    })
+    const newActiveFilters = { ...activeFilters, projects: { [repoId]: true } }
+    setActiveFilters(newActiveFilters)
+    const newAvailableFilters = { ...availableFilters, projects: { [repoId]: { name: label } } }
+    setAvailableFilters(newAvailableFilters)
+    setActiveFiltersCount(activeFiltersCount + 1)
+    changeActiveIndex(1)
   }
 
   return (