Create Reference React #827

mrkvon · 2018-11-12T19:55:41Z

Proposed Changes

User interface for creating a new reference.
~~Will need a replacement for angular-ui-bootstrap library.~~ (react-bootstrap)
It depends on ~~Add React and an example component #790~~ React #912 by @nicksellen.
It reuses major parts of code from References API & Angular UI #649 by @simison.
~~Currently work in progress.~~
React tests written with enzyme (react test helper) and jasmine (current client-side test framework).

TODO

replace angular-ui-bootstrap nicely
~~split ReferencesNew.component to smart and dummy component~~ (wont do now)
hide behind flags
~~show Write a reference link only if the reference doesn't exist already~~ (probably will do in different PR)
design looks and info
fix issues from feedback
- add some space between the checkbox and text in How do you know them? and next to report checkbox
- Either make the tabs clickable like the next/back button or not display them as links
- Sorry, you cannot leave them a reference if you didn't have any previous interraction.
  typo in the end (completely reworded)
- ~~Display only as tooltip for Next button. It is confusing for me, it seems like I am not allowed to access this page~~ (just changed the wording to positive one)
- Make the text next to checkboxes black not gray. It looks like it is disabled.
- Move the link to your reference in the success display to Your reference for x y is public now. It will look more clear.

For the next iterations, design improvement points by @petr-hajek (I don't want to decide or figure out this) (may also require API changes):

Recommendation does not make much sense to me. That does not help me much if I see it in someone's profile. CS also dropped the neutral reference.
Met in person is little unclear to me. If it is for cases when I know someone from elsewhere than hosting it maybe should have little different name

Testing Instructions

Automated

npm run test:client

Manual

npm start
Go to /profile/:username/references/new

Continued work on #718
Based and dependent on #912

modules/references/client/components/ReferencesNew.component.js

modules/references/client/components/references.api.js

modules/users/client/config/users.client.routes.js

petr-hajek · 2018-12-10T17:15:34Z

My comments looking at it at dev:
Cosmetic (can be later iteration):

add some space between the checkbox and text in How do you know them? and next to report checkbox
Either make the tabs clickable like the next/back button or not display them as links

Logical:

I don't know recommendation does not make much sense to me. That does not help me much if I see it in someone's profile. CS also dropped the neutral reference.
Met in person is little unclear to me. If it is for cases when I know someone from elsewhere than hosting it maybe should have little different name

petr-hajek · 2018-12-13T18:12:26Z

Sorry, you cannot leave them a reference if you didn't have any previous interraction.

typo in the end
Display only as tooltip for Next button. It is confusing for me, it seems like I am not allowed to access this page
Make the text next to checkboxes and the checkboxes black not gray. It looks like it is disabled.
Move the link to your reference in the success display to <a>Your reference</a> for x y is public now. It will look more clear.

mrkvon · 2018-12-13T20:57:36Z

@petr-hajek I fixed your comments I was able to fix. Thank you for the feedback! 💚

Noted the rest for further discussion and iterations. Can be added to #718 and meta.trustroots.org.

Note about feelings: I'm finding out that I'm most comfortable with implementing the functionality. I don't want to decide about UX, texts and appearance and I don't derive much pleasure from discussing it. I also suffer when dealing with css. It would be wonderful if there was somebody who enjoys doing these things.

Do we have a trustroots style guide?

mrkvon · 2018-12-14T15:11:56Z

can we merge this? @simison @guaka

Sorry, false alert. There is still stuff to do. (axios, wrapping strings for translation)

modules/references/client/components/Info.js

modules/references/client/components/Interaction.js

modules/references/client/components/Info.js

simison · 2018-12-16T20:44:12Z

modules/references/client/api/references.api.js

+import axios from 'axios';
+import set from 'lodash/set';
+import get from 'lodash/get';
+import has from 'lodash/has';


Flagging for future work to make import { set, get, has } from 'lodash' not to explode bundle size — as I expect this is a workaround for that?

I found it in a text about bundle size. But I used it, because importing lodash directly was breaking tests including angular.

Oh, funky!

We'll need to look into this more eventually.

simison

Nicely done!

🚢 after package.json rebase.

dummy component designed by Mikael Korpela Co-authored-by: Mikael Korpela <[email protected]>

…etState(stateChange) - React.Component.setState(stateChange) performs a shallow merge of stateChange into the new state

- also added empty test files for each dummy subcomponent

- add div with class=checkbox around checkboxes (fix spacing and color) - disable tabs - reworded info about need to pick an interaction - add links to reference pages after the second reference is given

- mapper between deep and flat state - rename, simplify - fix tests to reflect the changes

mrkvon · 2018-12-17T17:52:51Z

I'm merging. Still missing: the logic when only (Recommend: Yes) is allowed. That is - after the other direction reference is published already.

mrkvon added [Needs] tests labels Nov 12, 2018

mrkvon force-pushed the references-create-react branch 2 times, most recently from aeda61f to 095be93 Compare November 13, 2018 18:31

nicksellen reviewed Nov 14, 2018

View reviewed changes

modules/references/client/components/ReferencesNew.component.js Outdated Show resolved Hide resolved

nicksellen reviewed Nov 14, 2018

View reviewed changes

modules/references/client/components/references.api.js Outdated Show resolved Hide resolved

mrkvon force-pushed the references-create-react branch from c61eb90 to 1807d9a Compare November 16, 2018 16:35

mrkvon force-pushed the react branch from 1068500 to 177e77b Compare November 17, 2018 21:07

mrkvon force-pushed the references-create-react branch from 095dadc to 252d1b2 Compare November 18, 2018 02:42

guaka removed the in progress label Nov 21, 2018

simison force-pushed the react branch from 177e77b to 2ed1a2c Compare November 25, 2018 15:31

mrkvon force-pushed the react branch from d54323a to b33e40d Compare December 2, 2018 21:17

mrkvon changed the base branch from react to master December 2, 2018 22:46

mrkvon force-pushed the references-create-react branch from 252d1b2 to 0aed9f3 Compare December 2, 2018 23:13

mrkvon changed the base branch from master to react December 5, 2018 14:51

mrkvon force-pushed the references-create-react branch from efda875 to 25540e7 Compare December 5, 2018 15:00

mrkvon commented Dec 5, 2018

View reviewed changes

modules/users/client/config/users.client.routes.js Show resolved Hide resolved

mrkvon changed the title ~~[WIP] Create Reference React~~ Create Reference React Dec 5, 2018

mrkvon changed the base branch from react to master December 7, 2018 15:29

mrkvon force-pushed the references-create-react branch from 0e44e6e to 65ea41c Compare December 7, 2018 15:33

mrkvon added the React label Dec 8, 2018

mrkvon force-pushed the references-create-react branch from 65ea41c to 1116c40 Compare December 13, 2018 20:48

simison reviewed Dec 14, 2018

View reviewed changes

modules/references/client/components/Info.js Outdated Show resolved Hide resolved

simison reviewed Dec 14, 2018

View reviewed changes

modules/references/client/components/Interaction.js Outdated Show resolved Hide resolved

simison reviewed Dec 15, 2018

View reviewed changes

modules/references/client/components/Info.js Outdated Show resolved Hide resolved

mrkvon force-pushed the references-create-react branch 2 times, most recently from 1572ea5 to 2a72c4a Compare December 16, 2018 19:29

simison reviewed Dec 16, 2018

View reviewed changes

simison approved these changes Dec 16, 2018

View reviewed changes

mrkvon and others added 20 commits December 17, 2018 00:02

implement Create Reference with React

6a7c37a

dummy component designed by Mikael Korpela Co-authored-by: Mikael Korpela <[email protected]>

wire userTo from angular to react component, send API request

a467501

don't copy the first level of the old state to stateChange for this.s…

bb06d0d

…etState(stateChange) - React.Component.setState(stateChange) performs a shallow merge of stateChange into the new state

add tests for react with enzyme

fabe89c

Split component file, send (report member support request) to api

c4eaf54

- also added empty test files for each dummy subcomponent

Improve UX and workflow, write tests

cd6c4e1

improve the info

46f931a

add react-bootstrap Tabs

452d125

make PropTypes required

e549316

hide references in production

2bc3f96

disable References tab in production

625a1f0

UX and style improvements

b35fcd7

- add div with class=checkbox around checkboxes (fix spacing and color) - disable tabs - reworded info about need to pick an interaction - add links to reference pages after the second reference is given

no this.state in this.setState + eslint rule

6445f16

fetch -> axios, comments, references.api => client/api/

066b7cb

replace some ternary operators (a) ? b : c with short-circuit &&

6e7a00c

flatten react state

b58106b

- mapper between deep and flat state - rename, simplify - fix tests to reflect the changes

removing alerts, rewording, comments

14128cb

hide forgotten link behind reference feature flag

bd33c08

comment: explain await null

183b44e

renaming files and components

8318c6c

mrkvon force-pushed the references-create-react branch from 2a72c4a to 8318c6c Compare December 16, 2018 23:05

use react-bootstrap ToggleButton for recommend selecting

ea954be

mrkvon merged commit 55fd5a0 into master Dec 17, 2018

mrkvon deleted the references-create-react branch February 23, 2019 17:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create Reference React #827

Create Reference React #827

mrkvon commented Nov 12, 2018 •

edited

Loading

petr-hajek commented Dec 10, 2018 •

edited

Loading

petr-hajek commented Dec 13, 2018 •

edited

Loading

mrkvon commented Dec 13, 2018 •

edited

Loading

mrkvon commented Dec 14, 2018

simison Dec 16, 2018

mrkvon Dec 16, 2018

simison Dec 16, 2018

simison left a comment •

edited

Loading

mrkvon commented Dec 17, 2018

Create Reference React #827

Create Reference React #827

Conversation

mrkvon commented Nov 12, 2018 • edited Loading

Proposed Changes

TODO

Testing Instructions

Automated

Manual

petr-hajek commented Dec 10, 2018 • edited Loading

petr-hajek commented Dec 13, 2018 • edited Loading

mrkvon commented Dec 13, 2018 • edited Loading

mrkvon commented Dec 14, 2018

simison Dec 16, 2018

Choose a reason for hiding this comment

mrkvon Dec 16, 2018

Choose a reason for hiding this comment

simison Dec 16, 2018

Choose a reason for hiding this comment

simison left a comment • edited Loading

Choose a reason for hiding this comment

mrkvon commented Dec 17, 2018

mrkvon commented Nov 12, 2018 •

edited

Loading

petr-hajek commented Dec 10, 2018 •

edited

Loading

petr-hajek commented Dec 13, 2018 •

edited

Loading

mrkvon commented Dec 13, 2018 •

edited

Loading

simison left a comment •

edited

Loading