joshwcomeau/guppy

Save flash for app settings & project configuration

Open

#314 opened on Oct 31, 2018

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (151 forks)github user discovery
good first issueinvolves design

Repository metrics

Stars
 (3,248 stars)
PR merge metrics
 (PR metrics pending)

Description

During the work on PR #295 we've noticed that we need a message after the saving acutally happend so the user gets a feedback.

We'd like to change the behaviour at ProjectConfiguationModal too. As there it will autohide the dialog and this is the feedback that saving happend. We'd like to keep the modal open and show the flash message as well.

Describe the solution you'd like Add a small text saved close to the save button that will auto hide after 2 seconds. Styling could be similar to the style from the info text on ProjectConfiguration modal if save button is blocked.

I think it's OK to add a saved flag on app-status.reducer and then the component that will display the flash can connect to this do display the message for two seconds and clear afterwards the saved flag with an action.

Additional context This requires the app-settings feature from PR #295. You could start working if you're using app-settings branch as base for your work.

Contributor guide

Research direction
Add a flash message to show 'saved' for 2 seconds after saving settings. Use the app status reducer to manage a 'saved' flag, create an action to clear it after timeout, and connect the flash component to this state.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitReactRedux
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70