Projects/TextFilter: rm all props

The props that were passed into TextFilter were not used anywhere outside of the component, and can therefore live within it instead.
AutarkLabs · Dec 3, 2019 · 5b05b35 · 5b05b35
1 parent 5d8d8ce
commit 5b05b35
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 28 deletions.
diff --git a/apps/projects/app/App.js b/apps/projects/app/App.js
@@ -43,8 +43,6 @@ const App = () => {
   const [ panel, setPanel ] = useState(null)
   const [ panelProps, setPanelProps ] = useState(null)
   const [ popupRef, setPopupRef ] = useState(null)
-  const [ textFilterVisible, setTextFilterVisible ] = useState(false)
-  const textFilterOpenerApp = useRef(null)
 
   const {
     repos = [],
@@ -151,8 +149,6 @@ const App = () => {
     tabs.push({ name: 'Issues', body: Issues })
   tabs.push({ name: 'Settings', body: Settings })
 
-  const activateTextFilter = () => setTextFilterVisible(true)
-
   // Determine current tab details
   const TabComponent = tabs[activeIndex].body
   const TabAction = () => {
@@ -167,12 +163,7 @@ const App = () => {
         {!selectedIssueId && (
           <MiniFilterBar>
             <Button icon={<IconFilter />} onClick={filtersPanel} label="Filters Panel" />
-            <TextFilter
-              onClick={activateTextFilter}
-              visible={textFilterVisible}
-              openerRef={textFilterOpenerApp}
-              setVisible={setTextFilterVisible}
-            />
+            <TextFilter />
           </MiniFilterBar>
         )}
         <Button mode="strong" icon={<IconPlus />} onClick={setupNewIssue} label="New issue" />

diff --git a/apps/projects/app/components/Shared/FilterBar/FilterBar.js b/apps/projects/app/components/Shared/FilterBar/FilterBar.js
@@ -184,11 +184,9 @@ const FilterBar = ({
 }) => {
   const [ sortMenuVisible, setSortMenuVisible ] = useState(false)
   const [ actionsMenuVisible, setActionsMenuVisible ] = useState(false)
-  const [ textFilterVisible, setTextFilterVisible ] = useState(false)
   const [ filtersDisplayNumber, setFiltersDisplayNumber ] = useState(10)
   const actionsOpener = useRef(null)
   const sortersOpener = useRef(null)
-  const textFilterOpener = useRef(null)
   const mainFBRef = useRef(null)
   const rightFBRef = useRef(null)
   const { availableFilters, activeFiltersCount } = useIssueFilters()
@@ -212,7 +210,6 @@ const FilterBar = ({
   const actionsClickHandler = () =>
     selectedIssues.length && setActionsMenuVisible(true)
 
-  const activateTextFilter = () => setTextFilterVisible(true)
   const activateSort = () => setSortMenuVisible(true)
 
   return (
@@ -240,12 +237,7 @@ const FilterBar = ({
         </FilterBarMainLeft>
 
         <FilterBarMainRight ref={rightFBRef}>
-          <TextFilter
-            onClick={activateTextFilter}
-            visible={textFilterVisible}
-            openerRef={textFilterOpener}
-            setVisible={setTextFilterVisible}
-          />
+          <TextFilter />
 
           <Button icon={<IconSort />} display="icon" onClick={activateSort} ref={sortersOpener} label="Sort by" />
           <SortPopover visible={sortMenuVisible} opener={sortersOpener.current} setVisible={setSortMenuVisible}
@@ -312,6 +304,7 @@ const FilterBarCard = styled(Card)`
   height: auto;
   padding: 12px;
   margin-bottom: 16px;
+
   @media only screen and (max-width: 514px) {
     display: none;
   }

diff --git a/apps/projects/app/components/Shared/FilterBar/TextFilter.js b/apps/projects/app/components/Shared/FilterBar/TextFilter.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import {
   Button,
@@ -51,15 +51,23 @@ TextFilterPopover.propTypes = {
   setVisible: PropTypes.func.isRequired,
 }
 
-export const TextFilter = ({ visible, setVisible, openerRef, onClick }) => {
+export const TextFilter = () => {
   const { layoutName } = useLayout()
+  const openerRef = useRef()
+  const [ visible, setVisible ] = useState(false)
 
   if (layoutName === 'large') return (
     <TextFilterInput />
   )
   return (
     <>
-      <Button icon={<IconSearch />} display="icon" onClick={onClick} ref={openerRef} label="Text Filter" />
+      <Button
+        display="icon"
+        icon={<IconSearch />}
+        label="Text Filter"
+        onClick={() => setVisible(!visible)}
+        ref={openerRef}
+      />
       <TextFilterPopover
         visible={visible}
         opener={openerRef.current}
@@ -68,9 +76,3 @@ export const TextFilter = ({ visible, setVisible, openerRef, onClick }) => {
     </>
   )
 }
-TextFilter.propTypes = {
-  visible: PropTypes.bool.isRequired,
-  openerRef: PropTypes.object,
-  setVisible: PropTypes.func.isRequired,
-  onClick: PropTypes.func.isRequired,
-}