feat: add deal filter modal

This could use click away close detection
filecoin-project · Jan 25, 2023 · a723dd1 · a723dd1
1 parent 47351f9
commit a723dd1
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 21 deletions.
diff --git a/react/src/DealPublish.js b/react/src/DealPublish.js
@@ -17,7 +17,7 @@ export function DealPublishPage(props) {
 
 function DealPublishContent() {
     const {loading, error, data} = useQuery(DealPublishQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
     })
     const [publishNow] = useMutation(DealPublishNowMutation, {
         refetchQueries: [{ query: DealPublishQuery }]
@@ -110,7 +110,7 @@ function DealsTable(props) {
 
 export function DealPublishMenuItem(props) {
     const {data} = useQuery(DealPublishQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: 'network-only',
     })
 

diff --git a/react/src/DealTransfers.js b/react/src/DealTransfers.js
@@ -26,7 +26,7 @@ function DealTransfersContent(props) {
 
 function DealTransfersChart(props) {
     const {loading, error, data} = useQuery(TransfersQuery, {
-        pollInterval: 1000,
+        pollInterval: 10e3,
         fetchPolicy: 'network-only',
     })
 
@@ -178,7 +178,7 @@ export function humanTransferRate(bytesPerSecond) {
 
 export function DealTransfersMenuItem(props) {
     const {data} = useQuery(TransfersQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: 'network-only',
     })
 

diff --git a/react/src/Deals.css b/react/src/Deals.css
@@ -96,12 +96,51 @@
     background-repeat: no-repeat;
     background-position: left 0.5em center;
     padding-left: 2em;
-    padding-right: 2em;
+    padding-right: 3em;
 }
 
 .deals .search .clear-text {
+    position: absolute;
+    right: 2.2em;
+    top: 1.1em;
+    cursor: pointer;
+}
+
+.search-toggle {
+    color: black;
     position: absolute;
     right: 1em;
     top: 1.1em;
     cursor: pointer;
+}
+
+.search-toggle.active::before {
+    content: " ";
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: -0.1em;
+    background: #00000033;
+    box-shadow: 0 0 5px 1px #b3b3b3;
+}
+
+.search-filters {
+    background: white;
+    border: 1px solid #cccccc;
+    border-radius: 0.5em;
+    box-shadow: 0px 0px 10px 2px #888888;
+    padding: 0em 1em 2em;
+    position: absolute;
+    z-index: 100;
+}
+
+.search-filters h3 {
+    margin-left: 0.5em;
+}
+
+.search-filters hr {
+    border: 1px solid #DDD;
+    margin: 1em 0em;
 }
diff --git a/react/src/Deals.js b/react/src/Deals.js
@@ -63,13 +63,37 @@ function StorageDealsContent(props) {
         setSearchQuery('')
     }
 
+    const [displayFilters, setDisplayFilters] = useState(false)
+    const toggleFilters = () => {
+        setDisplayFilters(!displayFilters)
+    }
+
+    const [searchFilters, setSearchFilters] = useState(null)
+    const handleFiltersChanged = (event) => {
+        var value = event.target.value
+        if (value === "true") value = true
+        if (value === "false") value = false
+
+        var newFilters = {
+            ...searchFilters || {},
+            [event.target.name]: value
+        }
+
+        if (event.target.value === "") delete newFilters[event.target.name]
+        if (Object.keys(newFilters).length === 0) newFilters = null
+
+        console.log(newFilters)
+        setSearchFilters(newFilters)
+    }
+
     // Fetch deals on this page
     const dealListOffset = (pageNum-1) * dealsPerPage
     const queryCursor = (pageNum === 1) ? null : params.cursor
     const {loading, error, data} = useQuery(DealsListQuery, {
-        pollInterval: searchQuery ? undefined : 1000,
+        pollInterval: searchQuery ? undefined : 10e3,
         variables: {
             query: searchQuery,
+            filter: searchFilters,
             cursor: queryCursor,
             offset: dealListOffset,
             limit: dealsPerPage,
@@ -107,7 +131,15 @@ function StorageDealsContent(props) {
 
     return <div className="deals">
         <LegacyDealsLink />
-        <SearchBox value={searchQuery} clearSearchBox={clearSearchBox} onChange={handleSearchQueryChange} />
+        <SearchBox
+            value={searchQuery}
+            displayFilters={displayFilters}
+            clearSearchBox={clearSearchBox}
+            onChange={handleSearchQueryChange}
+            toggleFilters={toggleFilters}
+            searchFilters={searchFilters}
+            handleFiltersChanged={handleFiltersChanged} />
+
         <table>
             <tbody>
             <tr>
@@ -135,7 +167,7 @@ function StorageDealsContent(props) {
 
 function LegacyDealsLink(props) {
     const {data} = useQuery(LegacyDealsCountQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: 'network-only',
     })
 
@@ -151,14 +183,51 @@ function LegacyDealsLink(props) {
 }
 
 export function SearchBox(props) {
+    const searchFilters = props.searchFilters || {}
     return <div className="search">
         <DebounceInput
             autoFocus={!!props.value}
             minLength={4}
             debounceTimeout={300}
             value={props.value}
             onChange={props.onChange} />
-        { props.value ? <img alt="clear" class="clear-text" onClick={props.clearSearchBox} src={xImg} /> : null }
+        { props.value ? <img alt="clear" className="clear-text" onClick={props.clearSearchBox} src={xImg} /> : null }
+        <span className={(props.displayFilters ? "active": "") + " search-toggle"} onClick={props.toggleFilters}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-list" viewBox="0 0 16 16">
+                <path fillRule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+            </svg>
+        </span>
+        <div className={(props.displayFilters ? "": "hidden") + " search-filters"}>
+            <h3>Checkpoint</h3>
+            <div onChange={props.handleFiltersChanged}>
+                <input type="radio" id="CP-Any" name="Checkpoint" value="" checked={searchFilters.Checkpoint === undefined} />
+                <label htmlFor="CP-Any">Any</label><br />
+                <input type="radio" id="CP-Accepted" name="Checkpoint" value="Accepted" checked={searchFilters.Checkpoint === "Accepted"}  />
+                <label htmlFor="CP-Accepted">Accepted</label><br />
+                <input type="radio" id="CP-Transferred" name="Checkpoint" value="Transferred" checked={searchFilters.Checkpoint === "Transferred"} />
+                <label htmlFor="CP-Transferred">Transferred</label><br />
+                <input type="radio" id="CP-Published" name="Checkpoint" value="Published" checked={searchFilters.Checkpoint === "Published"}/>
+                <label htmlFor="CP-Published">Published</label><br />
+                <input type="radio" id="CP-PublishConfirmed" name="Checkpoint" value="PublishConfirmed" checked={searchFilters.Checkpoint === "PublishConfirmed"} />
+                <label htmlFor="CP-PublishConfirmed">PublishConfirmed</label><br />
+                <input type="radio" id="CP-AddedPiece" name="Checkpoint" value="AddedPiece" checked={searchFilters.Checkpoint === "AddedPiece"} />
+                <label htmlFor="CP-AddedPiece">AddedPiece</label><br />
+                <input type="radio" id="CP-IndexedAndAnnounced" name="Checkpoint" value="IndexedAndAnnounced" checked={searchFilters.Checkpoint === "IndexedAndAnnounced"} />
+                <label htmlFor="CP-IndexedAndAnnounced">IndexedAndAnnounced</label><br />
+                <input type="radio" id="CP-Complete" name="Checkpoint" value="Complete" checked={searchFilters.Checkpoint === "Complete"} />
+                <label htmlFor="CP-Complete">Complete</label><br />
+            </div>
+            <hr />
+            <h3>IsOffline</h3>
+            <div onChange={props.handleFiltersChanged}>
+                <input type="radio" id="IO-Any" name="IsOffline" value="" checked={searchFilters.IsOffline === undefined} />
+                <label htmlFor="IO-Any">Any</label><br />
+                <input type="radio" id="IO-True" name="IsOffline" value="true" checked={searchFilters.IsOffline === true}  />
+                <label htmlFor="IO-True">True</label><br />
+                <input type="radio" id="IO-False" name="IsOffline" value="false" checked={searchFilters.IsOffline === false} />
+                <label htmlFor="IO-False">False</label><br />
+            </div>
+        </div>
     </div>
 }
 
@@ -240,7 +309,7 @@ function TransferRate({deal}) {
 
 export function StorageDealsMenuItem(props) {
     const {data} = useQuery(DealsCountQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: 'network-only',
     })
 

diff --git a/react/src/Epoch.js b/react/src/Epoch.js
@@ -6,7 +6,7 @@ import {Info} from "./Info";
 
 export function Epoch(props) {
     const {data} = useQuery(EpochQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: "network-only",
     })
 

diff --git a/react/src/Funds.js b/react/src/Funds.js
@@ -335,7 +335,7 @@ function FundsLog(props) {
 
 export function FundsMenuItem(props) {
     const {data} = useQuery(FundsQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: "network-only",
     })
 

diff --git a/react/src/LegacyDealDetail.js b/react/src/LegacyDealDetail.js
@@ -25,7 +25,7 @@ export function LegacyDealDetail(props) {
     const currentEpochData = useQuery(EpochQuery)
 
     const {loading, error, data} = useQuery(LegacyDealQuery, {
-        pollInterval: 1000,
+        pollInterval: 10e3,
         variables: {id: params.dealID},
     })
 

diff --git a/react/src/ProposalLogs.js b/react/src/ProposalLogs.js
@@ -53,7 +53,7 @@ function ProposalLogsContent(props) {
         } catch {}
     }
     const {loading, error, data} = useQuery(ProposalLogsListQuery, {
-        pollInterval: 1000,
+        pollInterval: 10e3,
         variables: {
             cursor: queryCursor,
             offset: listOffset,
@@ -172,7 +172,7 @@ function LogRow(props) {
 
 export function ProposalLogsMenuItem(props) {
     const {data} = useQuery(ProposalLogsCountQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: 'network-only',
         variables: {
             accepted: true,

diff --git a/react/src/RetrievalLogs.js b/react/src/RetrievalLogs.js
@@ -53,7 +53,7 @@ function RetrievalLogsContent(props) {
         } catch {}
     }
     const {loading, error, data} = useQuery(RetrievalLogsListQuery, {
-        pollInterval: 1000,
+        pollInterval: 10e3,
         variables: {
             cursor: queryCursor,
             offset: listOffset,
@@ -195,7 +195,7 @@ function TableRow(props) {
 
 export function RetrievalLogsMenuItem(props) {
     const {data} = useQuery(RetrievalLogsCountQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: 'network-only',
         variables: {
             accepted: true,

diff --git a/react/src/SealingPipeline.js b/react/src/SealingPipeline.js
@@ -194,7 +194,7 @@ function Workers(props) {
 
 export function SealingPipelineMenuItem(props) {
     const {data} = useQuery(SealingPipelineQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: "network-only",
     })
 

diff --git a/react/src/StorageSpace.js b/react/src/StorageSpace.js
@@ -138,7 +138,7 @@ function LegacyStorageSpaceContent(props) {
 
 export function StorageSpaceMenuItem(props) {
     const {data} = useQuery(StorageQuery, {
-        pollInterval: 5000,
+        pollinterval: 50000,
         fetchPolicy: 'network-only',
     })
 

diff --git a/react/src/gql.js b/react/src/gql.js
@@ -70,8 +70,8 @@ const EpochQuery = gql`
 `;
 
 const DealsListQuery = gql`
-    query AppDealsListQuery($query: String, $cursor: ID, $offset: Int, $limit: Int) {
-        deals(query: $query, cursor: $cursor, offset: $offset, limit: $limit) {
+    query AppDealsListQuery($query: String, $filter: DealFilter, $cursor: ID, $offset: Int, $limit: Int) {
+        deals(query: $query, filter: $filter, cursor: $cursor, offset: $offset, limit: $limit) {
             deals {
                 ID
                 CreatedAt

diff --git a/react/src/index.css b/react/src/index.css
@@ -111,3 +111,7 @@ h3 {
   font-weight: normal;
   font-size: 1.25em;
 }
+
+.hidden {
+  display: none;
+}