Can now submit new news items. URL gets validated but validation messages are not implemented in UI fully.

Author: clintonwoo

Diff for: src/components/presentational/NewsFeed.js

@@ -6,7 +6,6 @@ import NewsTitle from '../container/NewsTitleWithData';
 import NewsDetail from '../container/NewsDetailWithData';
 
 const NewsFeed = (props) => {
-  // props.newsItems.sort((a, b) => (a.rank - b.rank));
   const nextPage = Math.ceil((props.skip || 1) / props.first) + 1;
 
   const rows = [];

Diff for: src/data/Database.js

@@ -1,5 +1,8 @@
 import debug from 'debug';
 
+import {
+  Feed,
+} from './Models';
 import data from './SampleData';
 import cache from './Cache';
 
@@ -78,7 +81,11 @@ export function hideNewsItem(id, userId) {
 
 export function submitNewsItem(id, newsItem) {
   // Submit the News Item in the DB
-  if (cache.setNewsItem(id, newsItem)) return newsItem;
+  if (cache.setNewsItem(id, newsItem)) {
+    Feed.new.unshift(id);
+    Feed.new.pop();
+    return newsItem;
+  }
   throw new Error('Unable to submit News Item.');
 }
 

Diff for: src/data/SampleData.js

@@ -131,7 +131,7 @@ export default {
       title: 'Clinton wins again',
       text: null,
       url: 'https://www.shavelikeaboss.com.au',
-      upvotes: new Set(['clintonwoo', 'john']),
+      upvotes: ['clintonwoo', 'john'],
       hides: [],
       hidden: false,
       hiddenCount: 0,
@@ -659,8 +659,8 @@ export default {
       creationTime: 1504740146516,
       commenterId: 'clintonwoo',
       text: 'I know this might come accross as bragging, but I just won the internet again.',
-      upvotes: new Set([1, 2, 3, 4]),
-      upvoteCount: 4,
+      upvotes: ['clintonwoo', 'john'],
+      upvoteCount: 2,
       hides: [],
       hidden: false,
       hiddenCount: 0,

Diff for: src/data/Schema.js

@@ -168,12 +168,9 @@ const typeDefs = `
 
     submitNewsItem (
       title: String!
+      url: String
+      text: String
     ): NewsItem
-
-    registerUser (
-      id: String!
-      password: String!
-    ): User
   }
 
 `;
@@ -238,11 +235,6 @@ export const resolvers = {
       if (!context.userId) throw new Error('Must be logged in to submit a news item.');
       return context.NewsItem.submitNewsItem({ ...newsItem, submitterId: context.userId });
     },
-
-    registerUser: (_, user, context) => {
-      if (context.userId) throw new Error('Logged in user cannot register a user');
-      return context.User.registerUser(user);
-    },
   },
 
   /*       GRAPHQL TYPE RESOLVERS        */

Diff for: src/data/models/Feed.js

@@ -17,9 +17,10 @@ class Feed {
         return Promise.all(
           this.top.slice(skip, first + skip)
             .map(id => cache.getNewsItem(id) || HNDB.fetchNewsItem(id)));
-        // return this.topNewsItems.slice(skip, first + skip);
       case 'NEW':
-        return this.newNewsItems.slice(skip, first + skip);
+        return Promise.all(
+          this.new.slice(skip, first + skip)
+            .map(id => cache.getNewsItem(id) || HNDB.fetchNewsItem(id)));
       case 'SHOW':
         return this.showNewsItems.slice(skip, first + skip);
       case 'ASK':

Diff for: src/data/models/NewsItem.js

@@ -3,16 +3,18 @@ import debug from 'debug';
 import cache from '../Cache';
 import * as HNDB from '../HNDataAPI';
 import * as DB from '../Database';
+import isValidUrl from '../../helpers/isValidUrl';
 
 const logger = debug('app:NewsItem');
 
 let newPostIdCounter = 100;
 
 export default class NewsItem {
   constructor(props) {
-    if (!props.id) throw new Error('Instantiating News Item failed, id is required:', props.id);
-    if (!props.submitterId) throw new Error('Instantiating News Item failed, submitterId is required:', props.id);
-    if (!props.title) throw new Error('Instantiating News Item failed, title is required:', props.id);
+    if (!props.id) throw new Error('Error instantiating News Item, id is required:', props.id);
+    if (!props.submitterId) throw new Error('Error instantiating News Item, submitterId is required:', props.id);
+    if (!props.title) throw new Error('Error instantiating News Item, title is required:', props.id);
+    if (props.url && !isValidUrl(props.url)) throw new Error(`Error instantiating News Item ${props.id}, invalid URL: ${props.url}`);
 
     this.id = props.id || (newPostIdCounter += 1);
     this.creationTime = props.creationTime || +new Date();
@@ -22,8 +24,8 @@ export default class NewsItem {
     this.submitterId = props.submitterId;
     this.text = props.text || null;
     this.title = props.title;
-    this.upvotes = props.upvotes || [];
-    this.upvoteCount = props.upvoteCount || 0;
+    this.upvotes = props.upvotes || [props.submitterId];
+    this.upvoteCount = props.upvoteCount || 1;
     this.url = props.url;
   }
 

Diff for: src/data/mutations/submitNewsItem.js

@@ -0,0 +1,12 @@
+import { gql } from 'react-apollo';
+import NewsFeed from '../../components/presentational/NewsFeed';
+
+export default gql`
+  mutation SubmitNewsItem($title: String!, $url: String) {
+    submitNewsItem(title: $title, url: $url) {
+      id
+      ...NewsFeed
+    }
+  }
+  ${NewsFeed.fragments.newsItem}
+`;

Diff for: src/helpers/isValidUrl.js

@@ -0,0 +1,40 @@
+
+export default (str) => {
+  const pattern = new RegExp(
+    '^' +
+      // protocol identifier
+      '(?:(?:https?|ftp)://)' +
+      // user:pass authentication
+      '(?:\\S+(?::\\S*)?@)?' +
+      '(?:' +
+        // IP address exclusion
+        // private & local networks
+        '(?!(?:10|127)(?:\\.\\d{1,3}){3})' +
+        '(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})' +
+        '(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})' +
+        // IP address dotted notation octets
+        // excludes loopback network 0.0.0.0
+        // excludes reserved space >= 224.0.0.0
+        // excludes network & broacast addresses
+        // (first & last IP address of each class)
+        '(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])' +
+        '(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}' +
+        '(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))' +
+      '|' +
+        // host name
+        '(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)' +
+        // domain name
+        '(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*' +
+        // TLD identifier
+        '(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))' +
+        // TLD may end with dot
+        '\\.?' +
+      ')' +
+      // port number
+      '(?::\\d{2,5})?' +
+      // resource path
+      '(?:[/?#]\\S*)?' +
+    '$', 'i',
+  );
+  return pattern.test(str);
+};

Diff for: src/pages/login.js

@@ -1,41 +1,38 @@
 import React from 'react';
 import Link from 'next/link';
 import Router from 'next/router';
-import { gql, graphql } from 'react-apollo';
 import PropTypes from 'prop-types';
 
 import Blank from '../layouts/Blank';
 import withData from '../helpers/withData';
 
 
-const Page = ({ registerUser, url }) => {
-  // const onClick = () => {
-  //   props.mutate({
-  //     variables: { id: id, password: password }
-  //   })
-  //     .then(data)
-  //     .catch(error)
-  // }
-  // const registerUser = () => {
-  //   registerUser(user, pass)
-  // }
-
+const Page = ({ url }) => {
   let message;
   switch (url && url.query.how) {
     case 'up':
       message = 'You have to be logged in to vote.';
       break;
+    case 'pw':
+      message = 'Incorrect password.';
+      break;
+    case 'id':
+      message = 'Username is taken.';
+      break;
+    case 'user':
+      message = 'Logged in user cannot register a new user.';
+      break;
     default:
       message = undefined;
+      break;
   }
 
   let user = '';
-  let pass = '';
   const onUserChange = (e) => { user = e.target.value; };
-  const onPasswordChange = (e) => { pass = e.target.value; };
+
   return (
     <Blank>
-      {message && <div>{message}</div>}
+      {message && <p>{message}</p>}
       <b>Login</b>
       <br />
       <br />
@@ -70,7 +67,7 @@ const Page = ({ registerUser, url }) => {
       <br />
       <form method="post" action="/login" /* onSubmit={e => e.preventDefault()} */ style={{ marginBottom: '1em' }}>
         <input type="hidden" name="goto" value={`user?id=${user}`} />
-        <input type="hidden" name="creating" value={true} />
+        <input type="hidden" name="creating" value />
         <table style={{ border: '0px' }} >
           <tbody>
             <tr>
@@ -82,44 +79,23 @@ const Page = ({ registerUser, url }) => {
             <tr>
               <td>password:</td>
               <td>
-                <input type="password" name="password" onChange={onPasswordChange} size="20" />
+                <input type="password" name="password" size="20" />
               </td>
             </tr>
           </tbody>
         </table>
         <br />
-        <input type="submit" value="create account" /* onClick={() => registerUser(user, pass)} */ />
+        <input type="submit" value="create account" />
       </form>
     </Blank>
   );
 };
 Page.propTypes = {
-  registerUser: PropTypes.func.isRequired,
+  url: PropTypes.shape({
+    query: PropTypes.shape(),
+  }).isRequired,
 };
 
-const registerUser = gql`
-  mutation RegisterUser($id: String!, $password: String!) {
-    registerUser(id: $id, password: $password) {
-      id
-      karma
-    }
-  }
-`;
-
-const PageWithData = graphql(registerUser, {
-  props: ({ ownProps, mutate, url }) => ({
-    url,
-    registerUser: (id, password) => {
-      return mutate({
-        variables: { id, password },
-      })
-      // .then(() => Router.push(`/login?id=${id}&password=${password}`))
-        .catch(reason => console.error(reason));
-    },
-   
-  }),
-})(Page);
-
 export default withData(props => (
-  <PageWithData url={props.url} />
+  <Page url={props.url} />
 ));