clintonwoo/hackernews-react-graphql

Hacker News clone rewritten with universal JavaScript, using React and GraphQL.

hackernews-react-graphql's Issues

Downvoted comments aren't grayed out

Your clone doesn't seem to render the comment classes correctly. For example on the real site a comment with .c72 will be rendered on your site as .c00.

Permalinks don't work.

See:

https://news.ycombinator.com/item?id=15380658

vs

http://www.hnclone.win/item?id=15380658

Bind log to console

In both files comment-services.ts and news-item-service.ts, the loggers aren't bound to console.

Wrong filename for spec of CommentService

Currently, filename for spec of CommentService is comment-model.spec.ts. The correct must be comment-service.spec.ts

Error on install

Changing default port to 8080

Sorry,
I feel bad asking that very simple question : how to change the default 3000 port ?
the npm start --port 8080 doesn't seems to do the trick :(

Using both npm and yarn?

Is there a reason this project is using both npm and yarn? I think one or the other could be used exclusively (along with its respective lockfile).

If the reason is ¯_(ツ)_/¯ I'd be happy to submit a PR consolidating to one or the other!

EDIT: Apologies for not explaining where I got the assumptions that both were being used.

• npm: All commands in the README and some commands in package.json use npm
• yarn: Three commands in package.json use yarn

Video Series/ Step by step tutorial

It would be great to have this project as video series or as step by step tutorial where you learn bit by bit and have a functional product in the end.

Use a real database

Thanks so much for providing this. It's very interesting to see these technologies used together

One thing I noticed is that it looks like there is no database and perhaps data is just stored in memory. I was wondering what your thoughts were on adding a database like Postgres and using a data access layer like Prisma? It would also be interesting to see an example of that. Potentially I could add it if it's something you're open to, but no promises since I'm not sure yet whether I would have the time

Live Demo Doesn't Work

Getting a 404 error when going to www.hnclone.win

Removing inline styling

I would suggest to remove inline styling. It would make the code much more cleaner.

Link to github projects of each module

Non-HN Backend?

Hi!

Thanks for your work here. Any advice on the best way I can construct my own backend to make a company-internal version of this for myself? Right now this clone seems really to clone the front end, but I'm not sure how to "swap out" the HN API that it is currently using. Any advice / guidance is very appreciated!

Cannot POST comment on live demo after account creation and login.

Expected?

add to hnpwa?

You should consider adding this to HNPWA for additional exposure :), seems this would be the first implementation using GraphQL over there.

Live Demo link is broken

Making presentational components functional

I would suggest to make presentational components functional instead of class based. Functional components are not “dressed up” with any of the capabilities of React component objects and hence there may be performance advantages.

`npm install` fails in fresh clone

Bash output is below. I do have Yarn installed.

Seans-MacBook-Pro:Examples seanlanghi$ git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install
Cloning into 'hackernews-react-graphql'...
remote: Enumerating objects: 1141, done.
remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141
Receiving objects: 100% (1141/1141), 5.05 MiB | 14.31 MiB/s, done.
Resolving deltas: 100% (789/789), done.
npm WARN deprecated @zeit/[email protected]: Please use `update-check` instead.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: This version is no longer maintained. Please upgrade to the latest version.

> [email protected] install /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/fsevents
> node install

node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.4/fse-v1.2.4-node-v67-darwin-x64.tar.gz 
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp) 
  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
../fsevents.cc:63:6: warning: field 'async_resource' will be initialized after
      field 'lockStarted' [-Wreorder]
   : async_resource("fsevents:FSEvents"), lockStarted(false) {
     ^
1 warning generated.
  SOLINK_MODULE(target) Release/fse.node
  COPY /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node
  TOUCH Release/obj.target/action_after_build.stamp

> [email protected] install /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp ERR! Tried to download(403): https://storage.googleapis.com/grpc-precompiled-binaries/node/grpc/v1.10.1/node-v67-darwin-x64-unknown.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp) 
node-pre-gyp ERR! Pre-built binaries not installable for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp) 
node-pre-gyp ERR! Hit error Connection closed while downloading tarball file 
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
rm: ./Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o.d.raw: No such file or directory
make: *** [Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o] Error 1
gyp  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/avl/avl.o
 ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:188:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)
gyp ERR! System Darwin 18.2.0
gyp ERR! command "/usr/local/Cellar/node/11.6.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown/grpc_node.node" "--module_name=grpc_node" "--module_path=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown"
gyp ERR! cwd /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc
gyp ERR! node -v v11.6.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/Cellar/node/11.6.0/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown/grpc_node.node --module_name=grpc_node --module_path=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:188:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:978:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
node-pre-gyp ERR! System Darwin 18.2.0
node-pre-gyp ERR! command "/usr/local/Cellar/node/11.6.0/bin/node" "/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--library=static_library"
node-pre-gyp ERR! cwd /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc
node-pre-gyp ERR! node -v v11.6.0
node-pre-gyp ERR! node-pre-gyp -v v0.7.0
node-pre-gyp ERR! not ok 
Failed to execute '/usr/local/Cellar/node/11.6.0/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown/grpc_node.node --module_name=grpc_node --module_path=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown' (1)
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.oe
shell-init: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory
shell-init: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory
/bin/sh: ./Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o.d: No such file or directory
sed: ./Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o.d.raw: No such file or directory
make: *** [Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:188:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)
gyp ERR! System Darwin 18.2.0
gyp ERR! command "/usr/local/Cellar/node/11.6.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown/grpc_node.node" "--module_name=grpc_node" "--module_path=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown"
gyp ERR! cwd /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc
gyp ERR! node -v v11.6.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
npm WARN [email protected] requires a peer of eslint-plugin-jsx-a11y@^5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-addons-test-utils@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-test-renderer@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 15.4.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 15.4.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 15.4.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build --library=static_library`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/seanlanghi/.npm/_logs/2019-01-14T00_10_59_096Z-debug.log
Seans-MacBook-Pro:hackernews-react-graphql seanlanghi$ which yarn
/usr/local/bin/yarn

Standardize test location?

Thanks so much for providing this! It's helpful in learning these technologies

One question I had when looking at the code is that there seem to be different places to put the tests. Sometimes they're in a __tests__ directory and sometimes they aren't. For example:

• https://github.com/clintonwoo/hackernews-react-graphql/blob/master/src/__tests__/active.spec.tsx
• https://github.com/clintonwoo/hackernews-react-graphql/blob/master/src/components/comment-box.spec.tsx

Is this intended? If so, what goes where?

react 16 and next 4 support?

Any plan to support react 16 and next 4?

.

Failed when run test script

When I ran command "npm test", I received error:

Pattern: jest.config.js - 0 matches
npm ERR! Test failed.

The current test script is described as

"test": "jest --config --runInBand jest.config.js"

To fix it, I changed the script to:

"test": "jest --config jest.config.js --runInBand"

Freeze When i use this command npm run build && npm start command not working

I have run this command = npm run build && npm start

But some how npm run build command not working for me.
Node version : v8.11.4
Npm version : 5.6.0

Freeze :

Compiled successfully.

┌ /
├ /_app
├ /_document
├ /_error
├ /active
├ /ask
├ /best
├ /bestcomments
├ /bookmarklet
├ /changepw
├ /dmca
├ /favorites
├ /forgot
├ /formatdoc
├ /front
├ /hidden
├ /item
├ /jobs
├ /leaders
├ /lists
├ /login
├ /newcomments
├ /newest
├ /newpoll
├ /newsfaq
├ /newsguidelines
├ /newswelcome
├ /noobcomments
├ /noobstories
├ /reply
├ /security
├ /show
├ /showhn
├ /shownew
├ /submit
├ /submitted
├ /threads
├ /upvoted
└ /user

Run Dev Fails

can't run dev for various reasons

question about building(what should I do next to get data)

I run npm start then the project runs, what should I do next to get data from HN? I need to apply for API keys?

Thx!

Password storage

I'm not a security expert, but wouldn't it be advisable to only store the hashed password of a user? My understanding is that the LocalStrategy does not do any hashing for you, so the Cache is holding a plaintext copy of each user's password in memory.

localhost:3000 does not work

after I npm install，all package is installed successfully now
and then npm run dev,localhost:3000 in browser,but the page alway loading.chrome show 'ERR_EMPTY_RESPONSE'

here is the command line log

$ npm run dev

> [email protected] dev C:\My\work\React\hackernews-react-graphql
> babel-node src/server.js

> Using external babel configuration
> Location: "C:\My\work\React\hackernews-react-graphql\.babelrc"
 DONE  Compiled successfully in 2071ms18:25:15

> App ready on http://localhost:3000
> GraphQL Ready on http://localhost:3000/graphql
Dev: true
> Building page: /
 DONE  Compiled successfully in 2359ms18:25:20

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input
    in form
    in center
    in td
    in tr
    in Footer
    in tbody
    in table
    in center
    in Main
    in Query
    in Apollo(Main)
    in Unknown
    in ApolloProvider
    in RenderPromisesProvider
 WAIT  Compiling...18:25:21

 DONE  Compiled successfully in 105ms18:25:22

why?thank you!

wrong mention /react-apollo/getting started

when I follow the this documentation
( https://www.howtographql.com/react-apollo/1-getting-started/ )

I realise that here to wrong mention
because after the yarn start it gives to some error
and after the realise that,
I check it out and I find that`s wrong mention

should we give to black background color here
look like that --> import logo from './../logo.svg';

--> import './../styles/App.css';

Rebuild project in TypeScript

Hi, just wanted to see what the community's interest would be in seeing this project rebuilt in TypeScript. Obviously this would come with a number of benefits including strong types, better static code analysis and clearer APIs. This would lead to higher developer productivity.

If enough people are interested I can go ahead and do it.

Nodemon & next.js - infinite reloads on error.

When there is an error on build npm run nodemon causing infinite reloads (because of next.js) so there is no a easy way to develop the BE part without building manually after each change.

npm ERR! missing script: dev

i have checked the package.json but i am unable to dev script in it

It should be a clone... also in UI!

I wanted to say congrats for the nice project! 💪

I was thinking it would be nice to have a rendered UI as close as possible as the original one :)

Some time ago I started a css/html clone of the Hacker News UI just for fun, I was trying to reproduce the same pixel perfect result on the browser but with better markup (bleah those tables 🐙 ) and with flexbox :)

Do you think you can improve it?
Or either, would you accept a PR with some code introducing a 1:1 result but with better markup?

freeze when docker build --tag 'clintonwoo/hackernews-react-graphql:latest' --rm .

it will hang when trying to build docker container. it stops at step "RUN npm run build". I did some debug, it looks like hangs at "next build" command. any suggestion where to look next?

command -
docker build --tag 'clintonwoo/hackernews-react-graphql:latest' --rm .

docker freeze at here -

Step 7/17 : RUN npm run build
---> Running in daef81749112

[email protected] build /usr/src/app
npm run clean && tsc --project tsconfig.server.json && next build

[email protected] clean /usr/src/app
rm -rf build/app && rm -rf dist && rm -rf src/.next

Creating an optimized production build ...

Using external babel configuration
Location: "/usr/src/app/babel.config.js"
Browserslist: caniuse-lite is outdated. Please run next command npm update
Compiled successfully.

┌ /
├ /_app
├ /_document
├ /_error
├ /active
├ /ask
├ /best
├ /bestcomments
├ /bookmarklet
├ /changepw
├ /dmca
├ /favorites
├ /forgot
├ /formatdoc
├ /front
├ /hidden
├ /item
├ /jobs
├ /leaders
├ /lists
├ /login
├ /newcomments
├ /newest
├ /newpoll
├ /newsfaq
├ /newsguidelines
├ /newswelcome
├ /noobcomments
├ /noobstories
├ /reply
├ /security
├ /show
├ /showhn
├ /shownew
├ /submit
├ /submitted
├ /threads
├ /upvoted
└ /user

npm installation problem

I tried running the code
=> npm install
At the first installation, it says 'Can't find Python executable', but I resolved it by installing a python.
But after that when I tried running again, I got another error
Traceback (most recent call last): File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\gyp_main.py", line 16, in <module> sys.exit(gyp.script_main()) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 545, in script_main return main(sys.argv[1:]) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 538, in main return gyp_main(args) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 523, in gyp_main generator.GenerateOutput(flat_list, targets, data, params) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\generator\msvs.py", line 2025, in GenerateOutput version=msvs_version) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\MSVSNew.py", line 213, in __init__ self.Write() File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\MSVSNew.py", line 340, in Write f.close() File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\common.py", line 393, in close os.rename(self.tmp_path, filename) WindowsError: [Error 183] Cannot create a file when that file already exists

Anyone has a clue to resolve this?

Failed to run the app locally

npm start is not running the app locally. The app crashes at one point. Please check the attachment.