Frontend #38

heruka-urgyen · 2020-10-21T22:24:44Z

Scope

Run in dev mode

cd frontend
npm i
npm run dev
open localhost:9000 in browser

Questions

Get data for unread emails?
What is read / unread in data and how to move articles between them?
What are unique paper titles?
How should refs be rendered? It's returned as a list, but all examples have only one. What is the number inside parentheses? Again, in all examples it's always 1.
What is Freq in data?
How should we approach bundling everything together? I can build to a dir with all assets and scripts. Perhaps we need a higher level automation that will trigger front-end build.
Shall we update readme with info about front-end, e.g. how to run it in dev / prod mode? Or shall I make a separate readme under frontend dir?

Preview

bzz

Awesome 😍

I will try to answer all questions about data-model (1-5) in a simple doc a bit later.

On 6: IMO ATM in this or subsequent PRs it would be enough to have a frontend build profile in npm that outputs all nessesary resources to a dir.
I.e. it's totally fine to expect having everyone to run it locally in the dev mode for now.
As soon as we remove all impediments for having an actual deployment (#20 ) - I will add a build.sh that triggered it and a backend build, bundles all the resources into the single binary and add a route serving them.

On 7: We definitely should have a readme inside the frontend dir, with the dev mode instructions.

We should also add a section to the root readme, pointing to the frontend dir and mentioning the status (experiential) of our new, awesome, interactive GUI.

frontend/src/index.ejs

frontend/src/index.js

heruka-urgyen · 2020-10-22T18:37:36Z

I will try to answer all questions about data-model (1-5) in a simple doc a bit later.

I'm waiting on this to finalize the page.

Also, let me know if you want any changes in front-end before that. Shall we consider simple UI enhancements? Maybe we could make a short roadmap?

bzz · 2020-10-23T08:43:12Z

Shall we consider simple UI enhancements?

yes!

make a short roadmap

yes, that would be awesome! So far #19 has several thoughts on that, as well as #32 proposes improvements with regards to the source of citations.

Most probably, we should talk to @jzuken to get his ideas for immediate improvements.

What I think would be great is to follow the same pattern as we did with CLI, where ALL improvements of the template of the report (now the UI) were first introduced behind a feature flags.

So basically, there were no surprises for the users until and they can try a new feature by adding the flags e.g --new-template to server CLI, that would start serving the a new feature. IDK if that is a be big enough change to more it to a separate discussion though.

I will try to answer all questions about data-model (1-5) in a simple doc a bit later.

I'm waiting on this to finalize the page.

got it, will do that today ASAP.

One more thing, do you think it would make sense to include a script for static page generation here as well?

bzz · 2020-10-23T12:02:09Z

I will try to answer all questions about data-model (1-5) in a simple doc a bit later.

I'm waiting on this to finalize the page.

got it, will do that today ASAP.

Done at #39

bzz · 2020-10-23T13:14:35Z

New fixtures forth, read and unread messages were added in #40 and merged to master.

heruka-urgyen · 2020-10-23T16:13:48Z

New fixtures forth, read and unread messages were added in #40 and merged to master.

On master, I'm getting

> go run main.go -test
flag provided but not defined: -test

Am I missing something?

bzz · 2020-10-23T16:57:24Z

New fixtures forth, read and unread messages were added in #40 and merged to master.

On master, I'm getting
> go run main.go -test
flag provided but not defined: -test
Am I missing something?

No, you are not. Sorry for the confusion, but as mentioned elsewhere, CLI does not yet support the -test, only the server does. At least until this todo is addressed (which is also a message fetching part of the #20).

The only way to test CLI is to configure and subscribe for some alerts from scholar.

Hopefully going to add it soon.

heruka-urgyen · 2020-10-23T17:01:16Z

Got it. Got confused by https://github.com/bzz/scholar-alert-digest/pull/40/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R30

bzz · 2020-10-23T21:41:36Z

I tried this branch on the real data and got a blank page with that in the console

and server logs

go run ./cmd/server
2020/10/23 23:37:18 starting the web server at http://localhost:8080
2020/10/23 23:37:25 GET - /?json
2020/10/23 23:37:25 Redirecting to /login as three is no session

the reason is that GET request did not have access token and was answered with the redirect to /login

HTTP/1.1 302 Found
Content-Type: text/html; charset=utf-8
Location: /login
Date: Fri, 23 Oct 2020 21:38:35 GMT
Content-Length: 29

heruka-urgyen · 2020-10-23T22:25:13Z

The error in console is due to cors not being enabled for normal mode. Ideally, cors only makes sense in dev mode, because normal mode should bundle front-end code, eliminating the need for cors. However, if you see a use case for dev mode with real data, then sure, we need cors.

That said, we still need to redirect to login screen. I will trigger it automatically when session cookie is missing.

bzz · 2020-10-24T09:54:35Z

The error in console is due to cors not being enabled for normal mode.

Right now, CORS is always enabled, but only for the JSON responses. The error is due to the 304 response not having CORS.

After #43 \w CORS enabled for all the routs the error is different now

That said, we still need to redirect to login screen. I will trigger it automatically when session cookie is missing.

sounds good 👍 feel free to merge #43 as you see fit

heruka-urgyen · 2020-10-24T17:15:54Z

EDIT: It's more confusing actually. It redirects in private window and in my old session it throws an error as below

I haven't figured out how to make this work. When I pass "Access-Control-Allow-Origin" header, I'm getting

Cross-Origin Request Blocked: 
The Same Origin Policy disallows reading the remote resource at http://localhost:8080/?json. 
(Reason: CORS request external redirect not allowed)

(Some information about it)

What we could do, is disable backend redirect and instead make an authorization routine. I think I will need to query the server for client_id, and then trigger redirect.

bzz · 2020-10-24T19:36:47Z

I see.

make an authorization routine

Isn't that what /login is for, in a way?

I guess, Instead of re-direct (302) to /login I can send back 200 with a JSON containing the external URL user needs to be sent to 🤔

Most probably the simplest way instead of refactoring existing logic on the backend - start creating new endpoints for that under /json/*

query the server for client_id

I'm not 100% sure what do you mean by that as the server is stateless.

bzz · 2020-10-26T17:40:54Z

#44 introduces proper /json/* endpoints that can be used for the frontend auth flow.

Now any request without a token will result in

HTTP/1.1 401 Unauthorized
Content-Type: application/json
Date: Mon, 26 Oct 2020 17:39:55 GMT
Content-Length: 354

{"error":{"status":"Unauthorized","Redirect":"https://accounts.google.com/o/oauth2/auth?...."}}

heruka-urgyen · 2020-10-27T01:20:52Z

Seems like rebase went a little wrong :/

heruka-urgyen · 2020-10-27T01:23:03Z

We have a problem with oauth. Currently, the redirect_uri is localhost:8080, which should be fine in production mode, when code is bundled. In development mode, however, we have to then manually go to localhost:9000, which isn't a big deal, but still differs from expected behavior. Perhaps, we could trigger another redirect from server (to :9000) in development mode?

bzz · 2020-10-27T11:45:43Z

Perhaps, we could trigger another redirect from server (to :9000) in development mode?

Add a server-side re-direct to the backed from what route to what route?

We could add -dev and ask google to re-direct the user to :9090 instead, if that would help 🤔

bzz · 2020-10-27T11:48:35Z

Seems like rebase went a little wrong :/

yes, it seems like when re-writing a history - a number of commits from master were re-written as well.

You need to remove those from this branch and rebase it on the latest master again.

heruka-urgyen · 2020-10-27T15:23:21Z

Add a server-side re-direct to the backed from what route to what route?

We could add -dev and ask google to re-direct the user to :9090 instead, if that would help thinking

Here's what's happening step by step.

Client sends get / post to server
Server returns 401 unauthorized
Client redirects to google
Google redirects to localhost:8080
After that, manually navigating to localhost:9000 shows 401 and triggers same loop again

You can try it, I just committed this

bzz · 2020-10-27T17:12:14Z

With #46

go run ./cmd/server -cors -dev

redirects to :9000 after successful auth.

exclude front-end related stuff

npm run lint to see lint report

+ add color for visited paper link

+ increase max-width to support large screens + remove top margin for list elements to increase density for large lists

+ initialize reducer in the container component and pass down state and actions as props for better testability

+ rename constants in report + add test ids for jest

+ aggregate all constants in one file + do not keep labels in local storage (currently not used)

+ italicize author names + show number of refs for each paper + show ref author's names in refs

bzz · 2020-11-06T17:08:25Z

Works like a charm, after #32 was merged.
Is there anything left here, before merging?

May be adding /static/ prefix to work with the #47

heruka-urgyen · 2020-11-06T17:33:57Z

May be adding /static/ prefix to work with the #47

Should work as npm run build -- --env baseUrl=/json

+ npm run prod --env baseUrl=xyz/abc + this will set the base url for REST endpoints

bzz reviewed Oct 22, 2020

View reviewed changes

frontend/src/index.ejs Outdated Show resolved Hide resolved

frontend/src/index.js Outdated Show resolved Hide resolved

heruka-urgyen force-pushed the frontend branch 2 times, most recently from d542511 to 2f48232 Compare October 23, 2020 18:19

heruka-urgyen force-pushed the frontend branch from 1690e85 to c04364e Compare October 27, 2020 01:20

heruka-urgyen force-pushed the frontend branch from aac1b77 to 46ea034 Compare October 27, 2020 16:29

heruka-urgyen added 6 commits October 27, 2020 13:18

frontend: initial commit

8ef8d0c

update .gitignore

61c4d0e

exclude front-end related stuff

frontend: add webpack

1da6873

frontend: add eslint

fab8380

npm run lint to see lint report

frontend: add hook to lint staged files pre-commit

324a472

frontend: add index.html template for webpack

97409f9

heruka-urgyen added 21 commits October 27, 2020 13:46

frontend: fix refs in paper component

3656b22

frontend: add switch for compact mode in report

05db187

frontend: refactor paper component

905108a

+ add color for visited paper link

frontend: add loader component

569ba55

frontend: add util components Maybe and Either

53ef0cf

frontend: refactor defaultState to reducer

faea9d5

frontend: add loader for papers

ec86c16

frontend: update report style

c69de3c

+ increase max-width to support large screens + remove top margin for list elements to increase density for large lists

frontend: refactor effects into a separate file

7ce71cb

frontend: rename and refactor Main container

8f46adb

frontend: add jest

c636c2b

frontend: refactor switch into a separate component

298e15e

frontend: add eslint plugin to jest

da0f3ee

frontend: add tests for components

64c5a66

frontend: refactor app container

c56a973

+ initialize reducer in the container component and pass down state and actions as props for better testability

frontend: update jest config

d61f6ef

frontend: refactor report and labels

730ce32

+ rename constants in report + add test ids for jest

frontend: add tests for app container

684cf4a

frontend: fix label selector

4a52116

frontend: fix duplicate refs in paper component

c9b1649

frontend: minor refactor

b502bbe

+ aggregate all constants in one file + do not keep labels in local storage (currently not used)

heruka-urgyen force-pushed the frontend branch from 0b6eebe to b502bbe Compare November 2, 2020 01:00

heruka-urgyen added 2 commits November 2, 2020 16:26

frontend: add tests to labels container

1413fac

frontend: update paper component

55ff49a

+ italicize author names + show number of refs for each paper + show ref author's names in refs

frontend: allow passing custom baseUrl at build

6fa5ed7

+ npm run prod --env baseUrl=xyz/abc + this will set the base url for REST endpoints

heruka-urgyen force-pushed the frontend branch from 11ab009 to 6fa5ed7 Compare November 6, 2020 17:50

heruka-urgyen merged commit f968286 into master Nov 6, 2020

heruka-urgyen deleted the frontend branch November 6, 2020 23:24

Frontend #38

Frontend #38

Uh oh!

Conversation

heruka-urgyen commented Oct 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Scope

Run in dev mode

Questions

Preview

Uh oh!

bzz left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

heruka-urgyen commented Oct 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bzz commented Oct 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bzz commented Oct 23, 2020

Uh oh!

bzz commented Oct 23, 2020

Uh oh!

heruka-urgyen commented Oct 23, 2020

Uh oh!

bzz commented Oct 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

heruka-urgyen commented Oct 23, 2020

Uh oh!

bzz commented Oct 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

heruka-urgyen commented Oct 23, 2020

Uh oh!

bzz commented Oct 24, 2020

Uh oh!

heruka-urgyen commented Oct 24, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bzz commented Oct 24, 2020

Uh oh!

bzz commented Oct 26, 2020

Uh oh!

heruka-urgyen commented Oct 27, 2020

Uh oh!

heruka-urgyen commented Oct 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bzz commented Oct 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bzz commented Oct 27, 2020

Uh oh!

heruka-urgyen commented Oct 27, 2020

Uh oh!

bzz commented Oct 27, 2020

Uh oh!

bzz commented Nov 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

heruka-urgyen commented Nov 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

heruka-urgyen commented Oct 21, 2020 •

edited

Loading

bzz left a comment •

edited

Loading

heruka-urgyen commented Oct 22, 2020 •

edited

Loading

bzz commented Oct 23, 2020 •

edited

Loading

bzz commented Oct 23, 2020 •

edited

Loading

bzz commented Oct 23, 2020 •

edited

Loading

heruka-urgyen commented Oct 24, 2020 •

edited

Loading

heruka-urgyen commented Oct 27, 2020 •

edited

Loading

bzz commented Oct 27, 2020 •

edited

Loading

bzz commented Nov 6, 2020 •

edited

Loading

heruka-urgyen commented Nov 6, 2020 •

edited

Loading