From 931a8931fa9cf013f4d06e66a7e114962bf9725e Mon Sep 17 00:00:00 2001
From: Thien-Nam <thiennam.tnd@gmail.com>
Date: Mon, 30 Sep 2019 01:31:20 -0600
Subject: [PATCH] change fetchPolicy to avoid getting stuck on load bar as per
 https://github.com/apollographql/react-apollo/issues/2899

---
 application/src/Pages/Donation/index.js       |  2 +-
 application/src/Pages/Event/index.js          |  2 +-
 application/src/Pages/News/index.js           |  2 +-
 application/src/Pages/Nonprofit/index.js      |  2 +-
 application/src/Pages/Person/index.js         |  2 +-
 application/src/Pages/Transaction/index.js    |  2 +-
 .../src/Pages/TransactionList/index.js        |  2 +-
 .../src/Pages/__Common__/QueryHelper/index.js | 50 +++++++++++++------
 8 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/application/src/Pages/Donation/index.js b/application/src/Pages/Donation/index.js
index 76df245..8e2f8f0 100644
--- a/application/src/Pages/Donation/index.js
+++ b/application/src/Pages/Donation/index.js
@@ -207,7 +207,7 @@ class Donation extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY} 
 		variables={{ id, self: context.userID }}
 	    >
diff --git a/application/src/Pages/Event/index.js b/application/src/Pages/Event/index.js
index cb25dda..731fb85 100644
--- a/application/src/Pages/Event/index.js
+++ b/application/src/Pages/Event/index.js
@@ -293,7 +293,7 @@ class Event extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY}
 		variables={{ id, self: context.userID }}
 	    >
diff --git a/application/src/Pages/News/index.js b/application/src/Pages/News/index.js
index c605614..e6bcef3 100644
--- a/application/src/Pages/News/index.js
+++ b/application/src/Pages/News/index.js
@@ -192,7 +192,7 @@ class News extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY}
 		variables={{ id, self: context.userID }}
 	    >
diff --git a/application/src/Pages/Nonprofit/index.js b/application/src/Pages/Nonprofit/index.js
index ee65888..d278d86 100644
--- a/application/src/Pages/Nonprofit/index.js
+++ b/application/src/Pages/Nonprofit/index.js
@@ -237,7 +237,7 @@ class Nonprofit extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY}
 		variables={{ id, self: context.userID }}
 	    >
diff --git a/application/src/Pages/Person/index.js b/application/src/Pages/Person/index.js
index 9f4a119..f33b245 100644
--- a/application/src/Pages/Person/index.js
+++ b/application/src/Pages/Person/index.js
@@ -221,7 +221,7 @@ class Person extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY}
 		variables={{ id, self: context.userID }}
 	    >
diff --git a/application/src/Pages/Transaction/index.js b/application/src/Pages/Transaction/index.js
index a4cd7a6..3fbe70d 100644
--- a/application/src/Pages/Transaction/index.js
+++ b/application/src/Pages/Transaction/index.js
@@ -208,7 +208,7 @@ class Transaction extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY} 
 		variables={{ id, self: context.userID }}
 	    >
diff --git a/application/src/Pages/TransactionList/index.js b/application/src/Pages/TransactionList/index.js
index f57cd43..2dfeda0 100644
--- a/application/src/Pages/TransactionList/index.js
+++ b/application/src/Pages/TransactionList/index.js
@@ -106,7 +106,7 @@ class TransactionList extends Component {
 	    <Typography variant="body2" className={classes.label}>
 	      {`${node.user.name}`}
 	      {<ToIcon className={classes.toIcon} />}
-	      {`${node.target.name}`}
+	      {node.target.name}
 	    </Typography>
 	);
     }
diff --git a/application/src/Pages/__Common__/QueryHelper/index.js b/application/src/Pages/__Common__/QueryHelper/index.js
index b70bd9b..8bb45c7 100644
--- a/application/src/Pages/__Common__/QueryHelper/index.js
+++ b/application/src/Pages/__Common__/QueryHelper/index.js
@@ -33,6 +33,12 @@ const styles = theme => ({
 	color: theme.palette.tertiary.main,
 	textAlign: 'center',
     },
+    empty: {
+	margin: '0 auto',
+	fontWeight: 'bold',
+	color: theme.palette.tertiary.main,
+	textAlign: 'center',
+    },
 
 })
 
@@ -72,7 +78,7 @@ class QueryHelper extends Component {
 		<div>
 		  {dataOld && make(dataOld)}
 		  <Query
-		      fetchPolicy="network-only"
+		      fetchPolicy="no-cache"
 		      query={query}
 		      variables={variables}
 		      partialRefetch={true}
@@ -84,17 +90,25 @@ class QueryHelper extends Component {
 			let dataCurrent = dataOld.concat(data[Object.keys(data)[0]].edges)
 
 			return (
-			    <InfiniteScroll
-				pageStart={0}
-				className={classes.infiniteScroll}
-				loadMore={() => this.paginate(dataCurrent)}
-				hasMore={(dataCurrent.length > dataOld.length) || data[Object.keys(data)[0]].pageInfo.hasNextPage}
-				loader={
-				    <Typography type="body2" className={classes.loader}>
-				      Loading more results...
-				    </Typography>
-				}
-			    />
+			    <div>
+			      <InfiniteScroll
+				  pageStart={0}
+				  className={classes.infiniteScroll}
+				  loadMore={() => this.paginate(dataCurrent)}
+				  hasMore={(dataCurrent.length > dataOld.length) || data[Object.keys(data)[0]].pageInfo.hasNextPage}
+				  loader={
+				      <Typography type="body2" className={classes.loader}>
+					Loading more results...
+				      </Typography>
+				  }
+			      />
+			      {
+				  (dataCurrent.length === 0) &&
+				  <Typography type="body2" className={classes.empty}>
+				    Nothing to see here
+				  </Typography>
+			      }
+			    </div>
 			)
 		    }}
 		  </Query>
@@ -102,11 +116,19 @@ class QueryHelper extends Component {
 	    );
 	} else {
 	    return (
-		<Query fetchPolicy="network-only" query={query} variables={variables}>
+		<Query fetchPolicy="no-cache" query={query} variables={variables}>
 		  {({ loading, error, data }) => {
 		      if (loading) return <LinearProgress className={classes.progress} />;
 		      if (error) return `Error! ${error.message}`;
-		      return make(data[Object.keys(data)[0]].edges)
+		      if (data[Object.keys(data)[0]].edges.length > 0) {
+			  return make(data[Object.keys(data)[0]].edges)
+		      } else {
+			  return (
+			      <Typography type="body2" className={classes.empty}>
+				Nothing to see here
+			      </Typography>
+			  );
+		      }
 		  }}
 		</Query>
 	    );