Async actions #522

mradenovic · 2021-02-05T17:09:45Z

Pros:

Strongly recomended
Easier testing
Easier mocking of libraries and use of storybook
More flexible notification handling

Resolves #517
Resolves #518

Pros: - [Strongly recomended](https://redux.js.org/style-guide/style-guide#put-as-much-logic-as-possible-in-reducers) - Easier testing - Easier mocking of libraries and use of storybook - More flexible notification handling

The user is already on Home page. There is no need to redirect.

github-actions · 2021-02-05T17:10:48Z

Preview branch generated at https://async-actions.dpmhbfuiok7f8.amplifyapp.com

Any status hanlding should be done in reducers.

…tend into async-actions

mradenovic · 2021-02-05T23:26:07Z

store/asyncActions/getQueueStatusByName.js is a fairly good example of how it should be done.

Long story short, every async action can have a state of pending, fulfilled, or rejected. The state (and payload) should be handled in the appropriate reducer. e.g., getQueueStatusByName.rejected is handled in `store/appSlice.js', but it can be handled in more than one reducer.

mradenovic · 2021-02-06T00:14:49Z

@daltonfury42 I suggest we keep all the work related to async actions in this branch. Make all related PRs to this branch and merge with master when ready.

daltonfury42 · 2021-02-06T03:40:31Z

No, we are good to merge to master. master branch is auto-deployed to https://dev.simplq.me

I don't mind breaking dev.simplq.me. master is stable, we can merge it into the prod branch, which will update the main site.

mradenovic · 2021-02-06T04:20:13Z

There will be some regressions 😄 👍

daltonfury42 · 2021-02-06T05:03:25Z

No problem. I like PRs to dev with regressions that stand out, so that they can be fixed in follow up PRs. ✌️

Perfect example is, after your change, queues list in case of unauthenticated users on home page will show queues created by all anonymous users (300+). I would prefer it standing out as a bug on dev, so that we fix it.

The final results describes action type better: e.g. `deleteQueue/action/pending` reads as `delte queue action is pending...`

daltonfury42

Let's merge... can't wait...

daltonfury42 · 2021-02-06T07:41:42Z

simplq/src/api/auth.js

+// TODO: Read base url from env
+const baseURL = 'https://devbackend.simplq.me/v1';


This we have done (ref), you can import and use it like this:

// config.js is generated at runtime, so disabling eslint warning /* eslint-disable import/no-unresolved, import/extensions */ import { baseURL } from '../config';

Currently, it doesn't work for me. When I replace it, the server gets timed out.

Let me see why... I'll merge and take a look.

Can you take a look at #525? I think you might have faced issues due to not generating the config file. Can you try again?

Try restarting your dev server, or do npm run config (ref).

simplq/src/store/queues/queuesSlice.js

simplq/src/api/auth.js

* Remove amplify backend (#524) * Async actions for Queue Status and My Queues API calls (#522) * Add gitter chat badge (#530) * Pick api base url from config. (#525) * Remove unused backend env amplify (#532) * Add LoadingStatus Component (#531) * Add LoadingStatus Component Upgrade storybook to 6.1.17 Fix LoadingIndicator stories Add new Loading component Use Loading wrapper in Join page Separate Loading container from presentation Add Loading stories * Pass async action to LoadingStatus * Add PropTypes to LoadingStatus * Move auth0 out of async actions. (#535) Since an async action is called whithin a hook, it is guaranteed that it will be called within a component. It doesn't need to know anything about auth0. * Use storybook for components development (#533) * Add storybook esentials addon Use essential addons to develop components in isolation. See https://storybook.js.org/docs/react/essentials/introduction. * Add redux decorator to storybook All components will be wraped in store provider. Store state can be passed to container components thru components/story parameters. * Pass string instead of function to LoadingStatus Passing function just to avoid passing string, unnecessarily complicates the component and testing. * Add LoadingStatus stories * Fix bug in Loading component Loading component was returning children as a default option. * Add PropTypes to Loading component (#536) * Update CODEOWNERS (#538) * Cleaned up lots of ugly import statements (#541) * started cleaning up imports * Cleaned up more imprts * Final import cleanup * Use async actions for token status page (#526) * Tour guide implementation: Implemented the suggested changes. (#539) * Refactor join page (#542) * Add @storybook/addon-actions back to package.json The package is installed with @storybook/addon-essentials, so it doesn't affect package-lock.json. However, eslint warns that it should be listed as dependency. * Intercept dispatch in redux store decorator In order to develop components in isolation, all async calls should be intercepted and mocked. * Rename Join page file * Update relative paths * Remove history parameter from JoinPage History is no longer dependency of useEffects(), and it is passed to the HeaderSection, but never used. * Pass queueName from url params to HeaderSection Header section is visible while loading spinner. If queue exists, the name will be same as in url params. * Add JoinPage stories * Update QueueStats stories to storybook 6.x style * Reuse sotries data in JoinPage stories * Rename Join scss file * Rename Join form * Destrurcture props in JoinForm * Fix react wornings in JoinForm Callback chained to the promise was attempting to change the form after redirect, which was causing errors in the cosnole. * Add joining case to JoinPage stories This sotry desribes state after the user click Join button, before the request is fulfilled. * added star button (#540) * added star button * added line break at bottom * Refactor home page (#544) * Rename home files * Rename Layout files * Refactor loading handling in Layout * Load user queues when isAuthenticated changes User queues were loaded on every round trip to the home page. This should be done only once when the user state is known, and on every change in user status or queue list (create/delete/pause). This also gives an opportunity to reuse MyQueues component in the Admin page. * Create alias for CreateJoinForm CreateJoinForm sounds like a function that will create JoinForm. QueueForm is a more appropriate name. It implies it's a queue Form, without explaining what form actions are. * Add MyQueues stories * Fix code style issues with Prettier Co-authored-by: Lint Action <lint-action@samuelmeuli.com> * Mock auth0 in storybook (#546) * Mock auth0 in storybook This allows components that depend on auth0 to be in developed in isolation. * Fix code style issues with Prettier Co-authored-by: Lint Action <lint-action@samuelmeuli.com> * Changed createJoinForm to use redux actions (#553) * Changed createJoinForm to use redux actions * Modified LoadingStatus and used in JoinPage and CreateJoinForm * Fixed a bug in fn call and a type * Refactor admin page (#550) * Rename admin page file * Add getQueue() request creator * Add getSelectedQueue async action * Add selectedQueue slice * Add mock data for testing * Add Token stories * Remove token with dispatch * Add notifyToken() request creator * Add notifyToken() async action * Notify token with dispatch * Refactor NotifyButton * Extract CallButton * Redesign RemoveButton * Disable NotifyButton while notifyToken() is pending * Refactored delete queue (#551) * Refactored AddMember to use redux actions (#552) * Refactored AddMember * Fixed some imports * Added popup for adding to queues * Disable RemoveButton while dleteToken is pending * Refactor TaskList component * Extract AdminPage HeaderSection * Refactor AdminPage component * Fix: set timeoutId before clearing it Co-authored-by: Nithin <nithinjosetom@gmail.com> * Add anonymous UUID to unauthinticated API Calls (#554) * Add anonymous UUID to unauthinticated API Calls * Update jsdoc * Fix security vulnerabilities (#557) * Moved token and getUserQueues selectors to prevent useless side effects (#556) * Moved token selector to tokenlist * Moved getUserQueues dispatch to LandingPage to prevent unneeded popup on other page loads * Removed console.log * Moved getUserQueues back to Layout and changes the popup behaviour * Changed anchor tag redirects to use react router history * Add comments to layout * Fix code style issues with Prettier * Made utility function for delayed scrolling Co-authored-by: daltonfury42 <daltonfury42@users.noreply.github.com> Co-authored-by: Lint Action <lint-action@samuelmeuli.com> * Fixed broken queue details in admin page, removed unused hooks and components (#558) * Fixed queue details breaking for admin side panel * Made a QueueDetails component for admin * Changed loading condition * Removed LoadingIndicator * Removed useRequest and RequestFactory exports * Refactor status page (#562) * Replace makeAuthedRequest with hook Since no async actions use make authed request, remove it. * Rename Status page * Rename TokenStatusPage components * Add Token stories * Rename folder Status --> TokenStatus * Reuse TokenStatus stories * Fix useDeleteQueue to immediately return expression (#566) * Fix return statement to immediately expression (#564) * Fix return statement to immediately return data (#563) * Remove Stale Comments from ErrorHandler and others (#572) * Delete unused file aws-exports.js (#571) * Revert "Fix async actions to immediately return expression" (#569) * Fix: remove commented out code (#573) * smell issue#21- return authedRequest (#574) * Footer Greeting (#575) * Change: rename files as per sonarqube (#576) * Change: rename files (#565) * Added deployment process, remove Hall of Frame (#578) * Request refresh tokens from client side (#580) * Use Typeform for Contact Us (#581) * Handle token add/remove in selectedQueueSlice (#582) * Centralised request updates and failures (#583) * Prevent failed call with queueId undefined (#584) * Fix for loading component failure breaking user flow + reverting token remove button + package updates (#589) * Updated packages and modified loading component * Removed showing error message * Reverting token remove button * Missed adding this file * Added pointer cursor style * Show spiner on first load in token status page (#591) * Fix Shaky Sidepanel (#592) * Rename QueueStatus/QueueStats to QueueInfo (#593) * CSS Optimisations for small screen: Fix token and header sections (#596) Co-authored-by: Mischa Radenovic <mradenovic@users.noreply.github.com> Co-authored-by: Nithin <nithinjosetom@gmail.com> Co-authored-by: promarcussmith <77528300+promarcussmith@users.noreply.github.com> Co-authored-by: Bhargava Prabu Reddy <44055337+prabureddy@users.noreply.github.com> Co-authored-by: Lint Action <lint-action@samuelmeuli.com> Co-authored-by: hallelshohat <hallelsh206@gmail.com> Co-authored-by: Solomon kabaliisa <36126424+kabaliisa@users.noreply.github.com> Co-authored-by: Tarun Sharma <47457466+ME-ON1@users.noreply.github.com> Co-authored-by: navaneeth-spotnana <57885431+navaneeth-spotnana@users.noreply.github.com>

* Remove amplify backend (#524) * Async actions for Queue Status and My Queues API calls (#522) * Add gitter chat badge (#530) * Pick api base url from config. (#525) * Remove unused backend env amplify (#532) * Add LoadingStatus Component (#531) * Add LoadingStatus Component Upgrade storybook to 6.1.17 Fix LoadingIndicator stories * Pause resume queue (#586) * Merge fixes after pause queue (#598) * Add plus prefix to phone number, rename onClick to onSubmit (#600) * Fix Sonarqube code smells and lint errors (#599) * Fix Sonarqube code smells and lint errors * Address review comments - revert direct return and eslintrc * Some minor changes to add A2HS (#602) * Added size property to the icons & shortened name * file name changed * a square 144x144px icon of the logo * register the service worker to enable pwa * Modified phone icon on footer and ErrorHandler (#604) * Removed phone icon with outdated link * Added optional chaining in PageNotFound * Fix return home button when reaching from errorHandler * Intentional bug to check sentry logging * Customized sentry logs * Still experimenting with sentry * Trying another approach * Reverted intentional bugs and removed popup notifcation (#605) * Reverted intentional bugs and removed popup notifcation * Fix code style issues with ESLint * Make Contact Us on Navbar bit more bold to stand out (#609)

mradenovic and others added 30 commits January 30, 2021 23:20

Move logic to redux

a529132

Pros: - [Strongly recomended](https://redux.js.org/style-guide/style-guide#put-as-much-logic-as-possible-in-reducers) - Easier testing - Easier mocking of libraries and use of storybook - More flexible notification handling

Move auth to async action hook

d3180fc

Queue handleDelete() with dispatch()

3d3ea48

Update state on queue delete

939a03a

Merge branch 'master' into rb

ea73ba5

Remove redundant parameter

3b21f91

Use call back for useEfffect() dependency

119e480

Merge branch 'master' into move-logic-to-redux

cd6d3d5

Cosolidate api files

30f76a5

Refactor QueueDetails component

5845eb0

Fix typos in api/

29e4381

Remove redundant request creator

5de77df

Remove redundant reference

99f5374

Remove redundant history manipulation

058b6e4

The user is already on Home page. There is no need to redirect.

Fix: Unwrap Result before using it

447dcb9

Add getQueueStatusByName request creator

6462333

Add qetQueueStatusByName async action

3bad0c5

Update Join page with dispatch

76db038

Refactor folder sturcture

835acdd

Merge branch 'master' into move-logic-to-redux

c6a9b2c

Add selectedQueue slice

e1a0d8f

Fix action type to match

515f5f1

Connect Join page with redux store

2094c4f

Redirect from async action on Join error

cc81ab8

Update requestFactory docs

32682f2

Use constant for typePrefix in async actions

d549470

Connect QueueDetails to redux store

fc1d2b5

Rename selectedQueueSlice --> queueStatusSlice

f4b6038

Merge branch 'master' into async-actions

e7e627b

Fix code style issues with ESLint

d846fb8

mradenovic added the enhancement New feature or request label Feb 5, 2021

mradenovic added 5 commits February 5, 2021 14:52

Fix typo in api/

d0dd6c4

Remove auth check in async actions

86c19fd

Any status hanlding should be done in reducers.

Fix docs in store/

2011148

Merge branch 'async-actions' of https://github.com/SimplQ/simplQ-fron…

1425763

…tend into async-actions

Clear queueStatus on request pending

f381e96

mradenovic mentioned this pull request Feb 5, 2021

Move logic to redux #507

Closed

Refactor action types /requestStatus/ --> /action/

a5bb672

The final results describes action type better: e.g. `deleteQueue/action/pending` reads as `delte queue action is pending...`

daltonfury42 approved these changes Feb 6, 2021

View reviewed changes

mradenovic added 6 commits February 6, 2021 15:22

Add async action status to store

f56ddd3

Update docs in api/

384a640

Fix nameing in store/

d52fc09

Add crreateToken() request Creator

6c74cf2

Add joinQueue() async action

97729a0

Update Join page with joinQueue() action

6fa529d

mradenovic marked this pull request as ready for review February 7, 2021 00:09

mradenovic requested a review from maaverik as a code owner February 7, 2021 00:09

Merge branch 'master' into async-actions

85658d1

daltonfury42 merged commit ccca912 into master Feb 7, 2021

daltonfury42 deleted the async-actions branch February 7, 2021 04:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Async actions #522

Async actions #522

mradenovic commented Feb 5, 2021

github-actions bot commented Feb 5, 2021

mradenovic commented Feb 5, 2021

mradenovic commented Feb 6, 2021

daltonfury42 commented Feb 6, 2021

mradenovic commented Feb 6, 2021

daltonfury42 commented Feb 6, 2021 •

edited

Loading

daltonfury42 left a comment

daltonfury42 Feb 6, 2021

mradenovic Feb 6, 2021

daltonfury42 Feb 7, 2021

daltonfury42 Feb 7, 2021 •

edited

Loading

		// TODO: Read base url from env
		const baseURL = 'https://devbackend.simplq.me/v1';

Async actions #522

Async actions #522

Conversation

mradenovic commented Feb 5, 2021

github-actions bot commented Feb 5, 2021

mradenovic commented Feb 5, 2021

mradenovic commented Feb 6, 2021

daltonfury42 commented Feb 6, 2021

mradenovic commented Feb 6, 2021

daltonfury42 commented Feb 6, 2021 • edited Loading

daltonfury42 left a comment

Choose a reason for hiding this comment

daltonfury42 Feb 6, 2021

Choose a reason for hiding this comment

mradenovic Feb 6, 2021

Choose a reason for hiding this comment

daltonfury42 Feb 7, 2021

Choose a reason for hiding this comment

daltonfury42 Feb 7, 2021 • edited Loading

Choose a reason for hiding this comment

daltonfury42 commented Feb 6, 2021 •

edited

Loading

daltonfury42 Feb 7, 2021 •

edited

Loading