Skip to content

fix(frontend): fix autofocus on author editor step#82

Merged
germanurrus merged 3 commits intomainfrom
cas-110
Jun 28, 2022
Merged

fix(frontend): fix autofocus on author editor step#82
germanurrus merged 3 commits intomainfrom
cas-110

Conversation

@germanurrus
Copy link
Copy Markdown
Contributor

@germanurrus germanurrus commented Jun 28, 2022 •
edited
Loading

On community creation workflow, second step, autofocus is applied to last element on authors list. It should be applied to admins since it's the first input to complete that appears:
Screen Shot 2022-06-28 at 11 09 15

Fixed:
Screen Shot 2022-06-28 at 11 00 38

Next new inputs will have autofocus as the are added on the page

@germanurrus germanurrus self-assigned this Jun 28, 2022
dbslone
dbslone reviewed Jun 28, 2022
View reviewed changes
Comment thread frontend/packages/client/src/components/Community/CommunityEditorDetails.js Outdated
Comment on lines +13 to +21
const determineAutoFocus = (listLength, index, addr, autoFocusOnLoad) => {
return (
// fist element of list depends on configuration (autoFocusOnLoad)
(listLength === 1 && addr === '' && autoFocusOnLoad) ||
// new elements on list will be autofocus by default
(listLength === index + 1 && addr === '' && index !== 0)
);
};

Copy link
Copy Markdown
Contributor

@dbslone dbslone Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any way we could simplify this by using ref? Or does the current component structure prevent us from being able to take this approach?

useEffect(() => {
        mainRef.current.focus();
    }, [mainRef]);

<

Copy link
Copy Markdown
Contributor Author

@germanurrus germanurrus Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dbslone that would also work!...just pushed the change

germanurrus
germanurrus commented Jun 28, 2022
View reviewed changes
Comment thread frontend/packages/client/src/components/Community/CommunityEditorDetails.js
addrList.length === 1 && addr === '' && autoFocusOnLoad
? refOnFirstInput
: undefined
}
Copy link
Copy Markdown
Contributor Author

@germanurrus germanurrus Jun 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component is used twice in the same step so the last focus will win. For that reason using autoFocusOnLoad to enable one and disable the second one. That way the first input will keep the focus.
Screen Shot 2022-06-28 at 15 55 29

@sarahy-Dapper sarahy-Dapper self-requested a review June 28, 2022 20:59
sarahy-Dapper
sarahy-Dapper approved these changes Jun 28, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@sarahy-Dapper sarahy-Dapper left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good

CJamesKeller
CJamesKeller approved these changes Jun 28, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@CJamesKeller CJamesKeller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@germanurrus germanurrus merged commit 72a43cb into main Jun 28, 2022
@germanurrus germanurrus deleted the cas-110 branch June 28, 2022 21:18
sarahy-Dapper added a commit that referenced this pull request Jun 29, 2022
@sarahy-Dapper @germanurrus
@jbluks @0xmovses
dev -> staging (#87)
2596806 
* fix: make proposal description apear under stepper (#74)

fix index

* fix(frontend): fix user removal from community (#72)

* fix url request

* fix component update

* add await

* remove output

* fix(frontend): add button community settings  on mobile (#76)

add button on mobile

* feat(frontend): add github link on community links (#75)

add githuburl link

* CAS-135: Add Leaderboard Endpoint (#65)

* CAS-135: Add Leaderboard Endpoint

* CAS-135: Add leaderboard test file and remove unnecessary comments

Co-authored-by: Jonathan <jon.bluks@gmail.com>
Co-authored-by: Richard Melkonian <r.v.melkonian@gmail.com>
Co-authored-by: rvmelkonian <35300528+rvmelkonian@users.noreply.github.com>

* fix(frontend): update field on payload (#85)

update field on payload

* fix(frontend): fix autofocus on author editor step (#82)

* fix autofocus

* use Ref for first element

* fix(frontend): update edit community form validation (#86)

* update validation

* update regular expression for discord

Co-authored-by: German Urrustarazú <germanurrus@users.noreply.github.com>
Co-authored-by: Jonathan <jonathan.bluks@gmail.com>
Co-authored-by: Jonathan <jon.bluks@gmail.com>
Co-authored-by: Richard Melkonian <r.v.melkonian@gmail.com>
Co-authored-by: rvmelkonian <35300528+rvmelkonian@users.noreply.github.com>
germanurrus added a commit that referenced this pull request Jul 20, 2022
@germanurrus @sarahy-Dapper
@jbluks @0xmovses @dbslone @fersan1985 @mannynotfound
Merge Back Staging (#191)
c96756d 
* dev -> staging  (#87)

* fix: make proposal description apear under stepper (#74)

fix index

* fix(frontend): fix user removal from community (#72)

* fix url request

* fix component update

* add await

* remove output

* fix(frontend): add button community settings  on mobile (#76)

add button on mobile

* feat(frontend): add github link on community links (#75)

add githuburl link

* CAS-135: Add Leaderboard Endpoint (#65)

* CAS-135: Add Leaderboard Endpoint

* CAS-135: Add leaderboard test file and remove unnecessary comments

Co-authored-by: Jonathan <jon.bluks@gmail.com>
Co-authored-by: Richard Melkonian <r.v.melkonian@gmail.com>
Co-authored-by: rvmelkonian <35300528+rvmelkonian@users.noreply.github.com>

* fix(frontend): update field on payload (#85)

update field on payload

* fix(frontend): fix autofocus on author editor step (#82)

* fix autofocus

* use Ref for first element

* fix(frontend): update edit community form validation (#86)

* update validation

* update regular expression for discord

Co-authored-by: German Urrustarazú <germanurrus@users.noreply.github.com>
Co-authored-by: Jonathan <jonathan.bluks@gmail.com>
Co-authored-by: Jonathan <jon.bluks@gmail.com>
Co-authored-by: Richard Melkonian <r.v.melkonian@gmail.com>
Co-authored-by: rvmelkonian <35300528+rvmelkonian@users.noreply.github.com>

* Adding prod flow

* cancel build backend - cancel build frontend

* cancel build backend - cancel build frontend

* cancel build backend - cancel build frontend

* cancel build backend - cancel build frontend

* cancel build backend - cancel build frontend

* cancel build backend - cancel build frontend

* cancel migrations - cancel build backend - cancel build frontend

* cancel migrations - cancel build frontend - cancel build backend - PUSH TO PROD

* cancel migrations - cancel build frontend - cancel build backend

* cancel migrations - cancel build backend - cancel build frontend

* cancel migrations - cancel build backend - cancel build frontend

* PUSH TO PROD (#100)

cancel migrations - cancel build backend - cancel build frontend

Co-authored-by: Fernando Sanchez <fer@Fernandos-MacBook-Pro.local>

* PUSH TO PROD

* Update PROD again

* Staging to PROD GCP (#101)

* cancel migrations - cancel build backend - cancel build frontend

* PUSH TO PROD

* Update PROD again

Co-authored-by: Fernando Sanchez <fer@Fernandos-MacBook-Pro.local>

* FORCE PROD

* change flow prod again

* cancel build frontend - cancel build backend

* cancel build frontend - cancel build backend

* cancel build frontend - cancel build backend

* cancel build frontend - cancel build backend

* cancel build frontend - cancel build backend

* cancel build frontend - cancel build backend

* cancel build frontend - cancel build backend

* cancel build frontend - cancel build backend

* cancel build frontend - cancel build backend - cancel migrations

* force update develop

* Adding flow.json

* Update update-prod.yaml

* Main -> Staging (#160)

* fix contract validation when form is empty (#155)

unify check for undefined or empty string

* update avatar max size and standardize error message language (#149)

* update avatar max size and standardize error message language

* use MAX_AVATAR_SIZE in CommunityEditorProfile

* make create community steps the same color scheme as create proposal (#158)

* make create community steps the same color scheme as create proposal

* improve className formatting

* fix overflowing community titles and cap title input to 50 characters (#150)

* fix join button position

* adjust styles

* visually truncate community titles at 2 lines and cap title input to 50 characters

* add 50 character limit to CommunityEditorProfile name

Co-authored-by: German Urrustarazu <germanurrus@gmail.com>

* removed wrong error handle and old balance function (#159)

* removed wrong error handle and old balance function

* faulty unit test

Co-authored-by: German Urrustarazú <germanurrus@users.noreply.github.com>
Co-authored-by: Manny404 <manny@art404.com>
Co-authored-by: German Urrustarazu <germanurrus@gmail.com>
Co-authored-by: rvmelkonian <35300528+rvmelkonian@users.noreply.github.com>

* Update Dockerfile

* Update Dockerfile

* ADDED DOCKERFILE ENVS TO FRONTEND

* update docker config

* Update Dockerfile

* update env variables

* Plausible

* update index

* PLAUSIBLE Vol.2

* Nginx conf

* JS Cache

* update variables

* Plausible NGINX conf.

Co-authored-by: sarahy-Dapper <98421164+sarahy-Dapper@users.noreply.github.com>
Co-authored-by: Jonathan <jonathan.bluks@gmail.com>
Co-authored-by: Jonathan <jon.bluks@gmail.com>
Co-authored-by: Richard Melkonian <r.v.melkonian@gmail.com>
Co-authored-by: rvmelkonian <35300528+rvmelkonian@users.noreply.github.com>
Co-authored-by: David Slone <dbslone@gmail.com>
Co-authored-by: Fernando Sanchez <fer@192.168.1.12>
Co-authored-by: Fernando Sanchez <fer@Fernandos-MacBook-Pro.local>
Co-authored-by: FerSanchez <72047538+fersan1985@users.noreply.github.com>
Co-authored-by: Manny404 <manny@art404.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

3 more reviewers

@dbslone dbslone dbslone approved these changes

@CJamesKeller CJamesKeller CJamesKeller approved these changes

@sarahy-Dapper sarahy-Dapper sarahy-Dapper approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@germanurrus germanurrus

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@germanurrus @dbslone @CJamesKeller @sarahy-Dapper