Updating data model

Author: clintonwoo

.eslintrc.js

@@ -28,6 +28,9 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'react/prop-types': 'off',
     'react/state-in-constructor': 'off',
+    'react/static-property-placement': ['error', 'static public field'],
+    'react/destructuring-assignment': ['warn', 'always', { ignoreClassFields: true }],
+    'no-nested-ternary': 'off',
     // '@typescript-eslint/adjacent-overload-signatures': 'warn',
     // '@typescript-eslint/array-type': 'warn',
     // '@typescript-eslint/ban-types': 'warn',
@@ -50,7 +53,7 @@ module.exports = {
     // '@typescript-eslint/member-ordering': 'off',
     // '@typescript-eslint/no-empty-function': 'warn',
     // '@typescript-eslint/no-empty-interface': 'warn',
-    // '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
     // '@typescript-eslint/no-misused-new': 'warn',
     // '@typescript-eslint/no-namespace': 'warn',
     // '@typescript-eslint/no-parameter-properties': 'off',

README.md

@@ -74,9 +74,9 @@ This project is a clone of hacker news rewritten with universal JavaScript, usin
   <img alt="Hacker News Clone Architecture Overview" width="auto" height="400px" src="docs/HN-Clone-Architecture-overview.png">
 </p>
 
-_Server.js_ is the entry point. It uses Express and passes requests to Next. Next SSR renders the pages using `getInitialProps()` hook from Apollo helper. Therefore the app makes GraphQL requests on the client or server.
+_server.ts_ is the entry point. It uses Express and passes requests to Next. Next SSR renders the pages using `getServerSideProps()` hook from Apollo helper. Therefore the app makes GraphQL requests on the client or server.
 
-When the client receives the page it preloads next page JS designated with `<Link prefetch href="/">`. When the client navigates to the linked page it only needs to make a GraphQL query to render. _Great!_
+When the client loads the page it preloads next pages code from any `<Link href="/">`. When the client navigates to the next page it only needs to make one GraphQL query to render. _Great!_
 
 See more: <a href="https://github.com/zeit/next.js/">Next.js</a>,
 <a href="http://dev.apollodata.com/react/">Apollo GraphQL Client</a>

package-lock.json

@@ -11,7 +11,7 @@
     "build:docker": "docker build --tag 'clintonwoo/hackernews-react-graphql:latest' --rm . && docker run -p 80:3000 --name hackernews-react-graphql clintonwoo/hackernews-react-graphql",
     "build:static-website": "NODE_ENV=production rm -rf build/static && npm install --only=dev && next build && next export -o build/static",
     "debug": "DEBUG=app:* npm start",
-    "debug:inspect": "node --inspect -r ts-node/register src/server.ts",
+    "debug:inspect": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} node --inspect -r ts-node/register src/server.ts",
     "debug:inspect-production": "NODE_ENV=production node --inspect dist/server.js",
     "debug:inspectr": "NODE_ENV=production DEBUG=app* ts-node --inspect dist/server.js",
     "debug:all": "DEBUG=* npm start",
@@ -21,7 +21,7 @@
     "prettier:format": "prettier --write .",
     "test": "jest --config jest.config.js",
     "tsc:check": "tsc --noEmit",
-    "start": "ts-node --compiler-options=\"{\"\"module\"\":\"\"commonjs\"\"}\" src/server.ts",
+    "start": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} ts-node src/server.ts",
     "start:prod": "NODE_ENV=production node dist/server.js"
   },
   "author": "Clinton D'Annolfo",
@@ -49,7 +49,7 @@
     "graphql": "14.6.0",
     "graphql-tag": "2.10.3",
     "graphql-tools": "4.0.7",
-    "isomorphic-fetch": "2.2.1",
+    "isomorphic-unfetch": "3.0.0",
     "lru-cache": "5.1.1",
     "next": "9.3.1",
     "passport": "0.4.1",
@@ -83,6 +83,7 @@
     "@zeit/next-css": "1.0.1",
     "babel-loader": "8.1.0",
     "babel-plugin-transform-define": "2.0.0",
+    "cross-env": "7.0.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.2",
     "enzyme-to-json": "3.4.4",

package.json

@@ -3,5 +3,5 @@ module.exports = {
   tabWidth: 2,
   semi: true,
   singleQuote: true,
-  printWidth: 120,
+  printWidth: 100,
 };

prettier.config.js

@@ -2,7 +2,7 @@
 
 _src_ - Source code
 
-- _\_\_tests\_\__: Jest tests colocated in each folder.
+- \_\_\_tests\_\_\_: Jest tests colocated in each folder.
 - _.next_: Next build files containing code-split modules and assets.
 - _components_: React components with GraphQL fragments colocated in-file.
 - _data_: GraphQL Schema, HN Web APIs, cache, sample data.

src/README.md

@@ -50,7 +50,9 @@ export class Comment extends React.Component<ICommentProps> {
                     alt=""
                     src="/static/s.gif"
                     height="1"
-                    width={`${indentationLevel * 40}px`} /* Width varies depending on comment level */
+                    width={`${
+                      indentationLevel * 40
+                    }px`} /* Width varies depending on comment level */
                   />
                 </td>
                 <td style={{ verticalAlign: 'top' }} className="votelinks">

src/components/comment.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { NewsItem } from '../data/models/news-item';
+import { NewsItemModel } from '../data/models';
 import { Comment, commentFragment } from './comment';
 
 export interface ICommentsProps {
-  newsItem: NewsItem;
+  newsItem: NewsItemModel;
 }
 
 export const commentsFragment = `
@@ -32,8 +32,10 @@ export const commentsFragment = `
 `;
 
 export class Comments extends React.Component<ICommentsProps> {
-  renderComment = (comment, indent): JSX.Element => {
-    return <Comment key={comment.id} parentId={comment.parent} indentationLevel={indent} {...comment} />;
+  renderComment = (comment, indent: number): JSX.Element => {
+    return (
+      <Comment key={comment.id} parentId={comment.parent} indentationLevel={indent} {...comment} />
+    );
   };
 
   render(): JSX.Element {

src/components/comments.tsx

@@ -45,7 +45,11 @@ export function Header(props: IHeaderProps): JSX.Element {
                       <a>{me.id}</a>
                     </Link>
                     {` (${me.karma}) | `}
-                    <a href={`/logout?auth=d78ccc2c6120ffe08f32451519c2ff46d34c51ab&amp;goto=${currentUrl}`}>logout</a>
+                    <a
+                      href={`/logout?auth=d78ccc2c6120ffe08f32451519c2ff46d34c51ab&amp;goto=${currentUrl}`}
+                    >
+                      logout
+                    </a>
                   </span>
                 ) : (
                   <span className="pagetop">

src/components/header.tsx

@@ -13,7 +13,9 @@ MockDate.set(1506022129802);
 describe('NewsFeed component', () => {
   it('renders news items passed in as props', () => {
     const hideNewsItem = () => console.log('1');
-    const wrapper = shallow(<NewsDetail {...newsItem} hideNewsItem={hideNewsItem} isFavoriteVisible={false} />);
+    const wrapper = shallow(
+      <NewsDetail {...newsItem} hideNewsItem={hideNewsItem} isFavoriteVisible={false} />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 });

src/components/news-detail.spec.tsx

@@ -4,7 +4,7 @@ import Router from 'next/router';
 import * as React from 'react';
 import { graphql } from 'react-apollo';
 
-import { hideNewsItemMutation } from '../data/mutations/hide-news-item';
+import { hideNewsItemMutation } from '../data/mutations/hide-news-item-mutation';
 import { convertNumberToTimeAgo } from '../helpers/convert-number-to-time-ago';
 
 interface INewsDetailProps extends INewsDetailOwnProps {
@@ -76,7 +76,11 @@ export function NewsDetailView(props: INewsDetailProps): JSX.Element {
           </Link>
         </span>
         {' | '}
-        {hidden ? <a onClick={() => hideNewsItem(id)}>hide</a> : <a onClick={() => unhideNewsItem(id)}>hide</a>}
+        {hidden ? (
+          <a onClick={() => hideNewsItem(id)}>hide</a>
+        ) : (
+          <a onClick={() => unhideNewsItem(id)}>hide</a>
+        )}
         {isPostScrutinyVisible && (
           <span>
             {' | '}
@@ -89,7 +93,13 @@ export function NewsDetailView(props: INewsDetailProps): JSX.Element {
         )}
         {' | '}
         <Link href={`/item?id=${id}`}>
-          <a>{commentCount === 0 ? 'discuss' : commentCount === 1 ? '1 comment' : `${commentCount} comments`}</a>
+          <a>
+            {commentCount === 0
+              ? 'discuss'
+              : commentCount === 1
+              ? '1 comment'
+              : `${commentCount} comments`}
+          </a>
         </Link>
         {isFavoriteVisible && ' | favorite'}
       </td>
@@ -103,18 +113,21 @@ NewsDetailView.defaultProps = {
   isPostScrutinyVisible: false,
 };
 
-export const NewsDetail = graphql<INewsDetailOwnProps, {}, {}, INewsDetailProps>(gql(hideNewsItemMutation), {
-  props({ ownProps, mutate }) {
-    return {
-      ...ownProps,
-      hideNewsItem: (id: number): Promise<any> =>
-        mutate!({ variables: { id } }).catch(() => {
-          Router.push('/login', `/hide?id=${id}&how=up&goto=news`);
-        }),
-      unhideNewsItem: (id: number): Promise<any> =>
-        mutate!({ variables: { id } }).catch(() => {
-          Router.push('/login', `/unhide?id=${id}&how=up&goto=news`);
-        }),
-    };
-  },
-})(NewsDetailView);
+export const NewsDetail = graphql<INewsDetailOwnProps, {}, {}, INewsDetailProps>(
+  gql(hideNewsItemMutation),
+  {
+    props({ ownProps, mutate }) {
+      return {
+        ...ownProps,
+        hideNewsItem: (id: number): Promise<any> =>
+          mutate!({ variables: { id } }).catch(() => {
+            Router.push('/login', `/hide?id=${id}&how=up&goto=news`);
+          }),
+        unhideNewsItem: (id: number): Promise<any> =>
+          mutate!({ variables: { id } }).catch(() => {
+            Router.push('/login', `/unhide?id=${id}&how=up&goto=news`);
+          }),
+      };
+    },
+  }
+)(NewsDetailView);

src/components/news-detail.tsx

@@ -9,7 +9,9 @@ MockDate.set(1506022129802);
 
 describe('NewsFeed component', () => {
   it('renders news items passed in as props', () => {
-    const wrapper = shallow(<NewsFeed newsItems={sampleData.newsItems} currentUrl="/" first={30} skip={0} />);
+    const wrapper = shallow(
+      <NewsFeed newsItems={sampleData.newsItems} currentUrl="/" first={30} skip={0} />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 });

src/components/news-feed.spec.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { DataValue } from 'react-apollo';
 
-import { NewsItem } from '../data/models';
+import { NewsItemModel } from '../data/models';
 import { LoadingSpinner } from './loading-spinner';
 import { NewsDetail, newsDetailNewsItemFragment } from './news-detail';
 import { NewsTitle, newsTitleFragment } from './news-title';
 
 export interface INewsFeedProps {
   isPostScrutinyVisible?: boolean;
   first: number;
-  newsItems: NewsItem[];
+  newsItems: NewsItemModel[];
   notice?: JSX.Element;
   skip: number;
   isJobListing?: boolean;
@@ -84,7 +84,12 @@ export function NewsFeedView(props: INewsFeedProps): JSX.Element {
     <tr>
       <td style={{ padding: '0px' }}>
         <table
-          style={{ border: '0px', padding: '0px', borderCollapse: 'collapse', borderSpacing: '0px' }}
+          style={{
+            border: '0px',
+            padding: '0px',
+            borderCollapse: 'collapse',
+            borderSpacing: '0px',
+          }}
           className="itemlist"
         >
           <tbody>
@@ -115,7 +120,10 @@ export interface INewsFeedContainerProps {
   options;
 }
 
-export const NewsFeed: React.SFC<INewsFeedContainerProps> = ({ data: { error, feed }, options }) => {
+export const NewsFeed: React.SFC<INewsFeedContainerProps> = ({
+  data: { error, feed },
+  options,
+}) => {
   if (error) {
     return (
       <tr>