Merge pull request #232 from cofacts/no-user-error

Fixes searchUserByArticleId and reply page error

components/ReplyItem.js

@@ -61,10 +61,12 @@ ReplyItem.fragments = {
       type
       createdAt
       user {
+        id
         name
       }
       articleReplies(status: NORMAL) {
         articleId
+        replyId
       }
     }
   `,

constants/errors.js

@@ -1,2 +1,6 @@
 // Matches setup in rumors-api
 export const AUTH_ERROR_MSG = 'userId is not set via query string.';
+
+// Matches setup in rumors-api
+export const NO_USER_FOR_ARTICLE =
+  'fromUserOfArticleId does not match any existing articles';

lib/rollbar.js

@@ -5,6 +5,7 @@
  */
 import Rollbar from 'rollbar';
 import getConfig from 'next/config';
+import { NO_USER_FOR_ARTICLE } from 'constants/errors';
 
 if (typeof window !== 'undefined') {
   throw new Error(
@@ -25,6 +26,7 @@ const rollbar = new Rollbar({
   captureUncaught: true,
   captureUnhandledRejections: true,
   nodeSourceMaps: true,
+  ignoredMessages: [NO_USER_FOR_ARTICLE],
 });
 
 export default rollbar;

pages/_document.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
 import getConfig from 'next/config';
 import { ServerStyleSheets } from '@material-ui/styles';
-import { AUTH_ERROR_MSG } from 'constants/errors';
+import { AUTH_ERROR_MSG, NO_USER_FOR_ARTICLE } from 'constants/errors';
 import theme from 'lib/theme';
 import agent from 'lib/stackimpact';
 import rollbar from 'lib/rollbar';
@@ -60,7 +60,7 @@ class MyDocument extends Document {
                   captureUncaught: true,
                   captureUnhandledRejections: true,
                   payload: { environment: "${PUBLIC_ROLLBAR_ENV}" },
-                  ignoredMessages: ["${AUTH_ERROR_MSG}"],
+                  ignoredMessages: ["${AUTH_ERROR_MSG}", "${NO_USER_FOR_ARTICLE}"],
                 };
                 ${rollbarSnippet}
               `,

pages/articles.js

@@ -195,7 +195,8 @@ function ArticleListPage() {
 
   const {
     loading,
-    data: { ListArticles: articleData },
+    data: listArticlesData,
+    error: listArticlesError,
   } = useQuery(LIST_ARTICLES, {
     variables: {
       ...listQueryVars,
@@ -207,19 +208,21 @@ function ArticleListPage() {
   // Separate these stats query so that it will be cached by apollo-client and sends no network request
   // on page change, but still works when filter options are updated.
   //
-  const {
-    loading: statsLoading,
-    data: { ListArticles: statsData },
-  } = useQuery(LIST_STAT, {
+  const { loading: statsLoading, data: listStatData } = useQuery(LIST_STAT, {
     variables: listQueryVars,
   });
 
+  // List data
+  const statsData = listStatData?.ListArticles || {};
+  const articleEdges = listArticlesData?.ListArticles?.edges || [];
+
+  // Flags
   const showOneTimeMessages = +query.replyRequestCount === 1;
-  const searchedArticleEdge = (articleData?.edges || []).find(
+  const searchedArticleEdge = articleEdges.find(
     ({ node: { id } }) => id === query.searchUserByArticleId
   );
   const searchedUserArticleElem = (
-    <mark>
+    <mark key="searched-user">
       {ellipsis(searchedArticleEdge?.node?.text || '', { wordCount: 15 })}
     </mark>
   );
@@ -304,15 +307,17 @@ function ArticleListPage() {
 
       {loading ? (
         'Loading....'
+      ) : listArticlesError ? (
+        listArticlesError.toString()
       ) : (
         <>
           <Pagination
             query={query}
             pageInfo={statsData?.pageInfo}
-            edges={articleData?.edges}
+            edges={articleEdges}
           />
           <ul className="article-list">
-            {articleData.edges.map(({ node }) => (
+            {articleEdges.map(({ node }) => (
               <ArticleItem
                 key={node.id}
                 article={node}
@@ -323,7 +328,7 @@ function ArticleListPage() {
           <Pagination
             query={query}
             pageInfo={statsData?.pageInfo}
-            edges={articleData?.edges}
+            edges={articleEdges}
           />
           {!showOneTimeMessages && (
             <Typography variant="body2" component="p">

pages/replies.js

@@ -171,10 +171,7 @@ function ReplyListPage() {
     orderBy: urlQuery2OrderBy(query),
   };
 
-  const {
-    loading,
-    data: { ListReplies: replyData },
-  } = useQuery(LIST_REPLIES, {
+  const { loading, data: listRepliesData } = useQuery(LIST_REPLIES, {
     variables: {
       ...listQueryVars,
       before: query.before,
@@ -185,15 +182,15 @@ function ReplyListPage() {
   // Separate these stats query so that it will be cached by apollo-client and sends no network request
   // on page change, but still works when filter options are updated.
 
-  const {
-    loading: statsLoading,
-    data: { ListReplies: statsData },
-  } = useQuery(LIST_STAT, {
+  const { loading: statsLoading, data: listStatData } = useQuery(LIST_STAT, {
     variables: listQueryVars,
   });
 
   const currentUser = useCurrentUser();
 
+  const replyEdges = listRepliesData?.ListReplies?.edges || [];
+  const statsData = listStatData?.ListReplies || {};
+
   return (
     <AppLayout>
       <Head>
@@ -261,17 +258,17 @@ function ReplyListPage() {
           <Pagination
             query={query}
             pageInfo={statsData?.pageInfo}
-            edges={replyData?.edges}
+            edges={replyEdges}
           />
           <ul className="reply-list">
-            {replyData.edges.map(({ node }) => (
+            {replyEdges.map(({ node }) => (
               <ReplyItem key={node.id} reply={node} showUser={!query.mine} />
             ))}
           </ul>
           <Pagination
             query={query}
             pageInfo={statsData?.pageInfo}
-            edges={replyData?.edges}
+            edges={replyEdges}
           />
         </>
       )}