feat(webapp): merge producers node on one card

edenia · Dec 8, 2022 · c501e9b · c501e9b
1 parent 4ce70d1
commit c501e9b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/webapp/src/components/NodeCard/NodesCard.js b/webapp/src/components/NodeCard/NodesCard.js
@@ -98,7 +98,7 @@ const NodesCard = ({ nodes }) => {
   }
 
   const Keys = ({ node }) => {
-    if (!node.node_info?.length || !node.node_info[0]?.features?.keys)
+    if (!node?.node_info?.length || !node?.node_info[0]?.features?.keys)
       return <></>
 
     const keys = node.node_info[0].features.keys
@@ -124,7 +124,7 @@ const NodesCard = ({ nodes }) => {
         <Endpoints node={node} />
         <ChipList
           title={t('features')}
-          list={node.node_info[0]?.features?.list}
+          list={node?.node_info[0]?.features?.list}
         />
         {node.type.includes('query') && <SupportedAPIs node={node} />}
         <Keys node={node} />
@@ -153,6 +153,23 @@ const NodesCard = ({ nodes }) => {
     return type
   }
 
+  const showLocations = (node) => {
+    if(!node) return <></>
+
+    return (
+      <>
+        {(node.locations || [node.location]).map((location, index) => (
+          <div key={`location-${location?.name}-${node?.type?.join()}-${index}`}>
+            <span className={classes.country} >
+              {location?.name || 'N/A'}
+            </span>
+            <CountryFlag code={location?.country} />
+          </div>
+        ))}
+      </>
+    )
+  }
+
   return (
     <div className={classes.nodesWrapper}>
       <div className={classes.nodesContainer}>
@@ -161,14 +178,7 @@ const NodesCard = ({ nodes }) => {
             <CardHeader
               className={classes.cardHeader}
               title={getType(node) || ''}
-              subheader={
-                <>
-                  <span className={classes.country}>
-                    {node.location?.name || 'N/A'}
-                  </span>
-                  <CountryFlag code={node.location?.country} />
-                </>
-              }
+              subheader={showLocations(node)}
             />
             <CardContent className={classes.content}>
               <NodeInfo node={node} />

diff --git a/webapp/src/gql/producer.gql.js b/webapp/src/gql/producer.gql.js
@@ -56,6 +56,7 @@ export const NODES_QUERY = gql`
       total_votes_percent
       rank
       updated_at
+      producer_key
       nodes {
         info: endpoints_aggregate(
           where: { response: { _contains: { status: 200 } } }

diff --git a/webapp/src/hooks/customHooks/useNodeState.js b/webapp/src/hooks/customHooks/useNodeState.js
@@ -16,6 +16,7 @@ const useNodeState = () => {
 
   const getOrderNode = (node) => {
     return (
+      (node.type?.includes('full') ? 0.5 : 0) +
       (node.endpoints?.length || 0) +
       (node.node_info[0]?.features?.list?.length || 0)
     )
@@ -46,9 +47,38 @@ const useNodeState = () => {
       if (!producer?.nodes?.length) return []
 
       producer.nodes.sort((a, b) => {
-        return getOrderNode(b) - getOrderNode(a)
+        return getOrderNode(a) - getOrderNode(b)
       })
 
+      let producerNode
+
+      for (const node in producer.nodes) {
+        let current = producer.nodes[node]
+
+        if (current?.type[0] === 'producer') {
+          if (!producerNode) {
+            let features = { keys: { producer_key: producer.producer_key } }
+
+            producerNode = {
+              ...current,
+              locations: [],
+              node_info: [{ features }],
+            }
+          }
+
+          producerNode.locations.push(current.location)
+        } else {
+          producer.nodes = producer.nodes.splice(node)
+          producer.nodes.reverse()
+
+          if(producerNode){
+            producer.nodes.push(producerNode)
+          }
+
+          break
+        }
+      }
+
       return producer.nodes.length
         ? {
             ...producer,