Replace loading with fetching in new components

This commit is contained in:
Paul Kaplan 2021-04-27 09:01:19 -04:00
parent f9419ac8fc
commit dec9f96eed
7 changed files with 41 additions and 41 deletions

View file

@ -89,9 +89,9 @@ const selectStudioDescription = state => state.studio.description;
const selectStudioImage = state => state.studio.image;
const selectStudioOpenToAll = state => state.studio.openToAll;
const selectStudioCommentsAllowed = state => state.studio.commentsAllowed;
const selectIsLoadingInfo = state => state.studio.infoStatus === Status.FETCHING;
const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING;
const selectIsFollowing = state => state.studio.following;
const selectIsLoadingRoles = state => state.studio.rolesStatus === Status.FETCHING;
const selectIsFetchingRoles = state => state.studio.rolesStatus === Status.FETCHING;
// Thunks
const getInfo = () => ((dispatch, getState) => {
@ -157,7 +157,7 @@ module.exports = {
selectStudioImage,
selectStudioOpenToAll,
selectStudioCommentsAllowed,
selectIsLoadingInfo,
selectIsLoadingRoles,
selectIsFetchingInfo,
selectIsFetchingRoles,
selectIsFollowing
};

View file

@ -3,17 +3,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {selectStudioCommentsAllowed, selectIsLoadingInfo} from '../../redux/studio';
import {selectStudioCommentsAllowed, selectIsFetchingInfo} from '../../redux/studio';
import {
mutateStudioCommentsAllowed, selectIsMutatingCommentsAllowed, selectCommentsAllowedMutationError
} from '../../redux/studio-mutations';
const StudioCommentsAllowed = ({
commentsAllowedError, isLoading, isMutating, commentsAllowed, handleUpdate
commentsAllowedError, isFetching, isMutating, commentsAllowed, handleUpdate
}) => (
<div>
{isLoading ? (
<h4>Loading...</h4>
{isFetching ? (
<h4>Fetching...</h4>
) : (
<div>
<label>
@ -33,7 +33,7 @@ const StudioCommentsAllowed = ({
StudioCommentsAllowed.propTypes = {
commentsAllowedError: PropTypes.string,
isLoading: PropTypes.bool,
isFetching: PropTypes.bool,
isMutating: PropTypes.bool,
commentsAllowed: PropTypes.bool,
handleUpdate: PropTypes.func
@ -42,7 +42,7 @@ StudioCommentsAllowed.propTypes = {
export default connect(
state => ({
commentsAllowed: selectStudioCommentsAllowed(state),
isLoading: selectIsLoadingInfo(state),
isFetching: selectIsFetchingInfo(state),
isMutating: selectIsMutatingCommentsAllowed(state),
commentsAllowedError: selectCommentsAllowedMutationError(state)
}),

View file

@ -3,19 +3,19 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {selectStudioDescription, selectIsLoadingInfo} from '../../redux/studio';
import {selectStudioDescription, selectIsFetchingInfo} from '../../redux/studio';
import {selectCanEditInfo} from '../../redux/studio-permissions';
import {
mutateStudioDescription, selectIsMutatingDescription, selectDescriptionMutationError
} from '../../redux/studio-mutations';
const StudioDescription = ({
descriptionError, isLoading, isMutating, description, canEditInfo, handleUpdate
descriptionError, isFetching, isMutating, description, canEditInfo, handleUpdate
}) => (
<div>
<h3>Description</h3>
{isLoading ? (
<h4>Loading...</h4>
{isFetching ? (
<h4>Fetching...</h4>
) : (canEditInfo ? (
<label>
<textarea
@ -37,7 +37,7 @@ const StudioDescription = ({
StudioDescription.propTypes = {
descriptionError: PropTypes.string,
canEditInfo: PropTypes.bool,
isLoading: PropTypes.bool,
isFetching: PropTypes.bool,
isMutating: PropTypes.bool,
description: PropTypes.string,
handleUpdate: PropTypes.func
@ -47,7 +47,7 @@ export default connect(
state => ({
description: selectStudioDescription(state),
canEditInfo: selectCanEditInfo(state),
isLoading: selectIsLoadingInfo(state),
isFetching: selectIsFetchingInfo(state),
isMutating: selectIsMutatingDescription(state),
descriptionError: selectDescriptionMutationError(state)
}),

View file

@ -2,7 +2,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {selectIsFollowing, selectIsLoadingRoles} from '../../redux/studio';
import {selectIsFollowing, selectIsFetchingRoles} from '../../redux/studio';
import {selectCanFollowStudio} from '../../redux/studio-permissions';
import {
mutateFollowingStudio, selectIsMutatingFollowing, selectFollowingMutationError
@ -11,7 +11,7 @@ import {
const StudioFollow = ({
canFollow,
isLoading,
isFetching,
isFollowing,
isMutating,
followingError,
@ -21,11 +21,11 @@ const StudioFollow = ({
<h3>Following</h3>
<div>
<button
disabled={isLoading || isMutating || !canFollow}
disabled={isFetching || isMutating || !canFollow}
onClick={() => handleFollow(!isFollowing)}
>
{isLoading ? (
'Loading...'
{isFetching ? (
'Fetching...'
) : (
isFollowing ? 'Unfollow' : 'Follow'
)}
@ -38,7 +38,7 @@ const StudioFollow = ({
StudioFollow.propTypes = {
canFollow: PropTypes.bool,
isLoading: PropTypes.bool,
isFetching: PropTypes.bool,
isFollowing: PropTypes.bool,
isMutating: PropTypes.bool,
followingError: PropTypes.string,
@ -48,7 +48,7 @@ StudioFollow.propTypes = {
export default connect(
state => ({
canFollow: selectCanFollowStudio(state),
isLoading: selectIsLoadingRoles(state),
isFetching: selectIsFetchingRoles(state),
isMutating: selectIsMutatingFollowing(state),
isFollowing: selectIsFollowing(state),
followingError: selectFollowingMutationError(state)

View file

@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {selectStudioImage, selectIsLoadingInfo} from '../../redux/studio';
import {selectStudioImage, selectIsFetchingInfo} from '../../redux/studio';
import {selectCanEditInfo} from '../../redux/studio-permissions';
import {
mutateStudioImage, selectIsMutatingImage, selectImageMutationError
@ -11,12 +11,12 @@ import {
import Spinner from '../../components/spinner/spinner.jsx';
const StudioImage = ({
imageError, isLoading, isMutating, image, canEditInfo, handleUpdate
imageError, isFetching, isMutating, image, canEditInfo, handleUpdate
}) => (
<div>
<h3>Image</h3>
{isLoading ? (
<h4>Loading...</h4>
{isFetching ? (
<h4>Fetching...</h4>
) : (
<div>
<div style={{width: '200px', height: '150px', border: '1px solid green'}}>
@ -49,7 +49,7 @@ const StudioImage = ({
StudioImage.propTypes = {
imageError: PropTypes.string,
canEditInfo: PropTypes.bool,
isLoading: PropTypes.bool,
isFetching: PropTypes.bool,
isMutating: PropTypes.bool,
image: PropTypes.string,
handleUpdate: PropTypes.func
@ -59,7 +59,7 @@ export default connect(
state => ({
image: selectStudioImage(state),
canEditInfo: selectCanEditInfo(state),
isLoading: selectIsLoadingInfo(state),
isFetching: selectIsFetchingInfo(state),
isMutating: selectIsMutatingImage(state),
imageError: selectImageMutationError(state)
}),

View file

@ -3,17 +3,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {selectStudioOpenToAll, selectIsLoadingInfo} from '../../redux/studio';
import {selectStudioOpenToAll, selectIsFetchingInfo} from '../../redux/studio';
import {
mutateStudioOpenToAll, selectIsMutatingOpenToAll, selectOpenToAllMutationError
} from '../../redux/studio-mutations';
const StudioOpenToAll = ({
openToAllError, isLoading, isMutating, openToAll, handleUpdate
openToAllError, isFetching, isMutating, openToAll, handleUpdate
}) => (
<div>
{isLoading ? (
<h4>Loading...</h4>
{isFetching ? (
<h4>Fetching...</h4>
) : (
<div>
<label>
@ -33,7 +33,7 @@ const StudioOpenToAll = ({
StudioOpenToAll.propTypes = {
openToAllError: PropTypes.string,
isLoading: PropTypes.bool,
isFetching: PropTypes.bool,
isMutating: PropTypes.bool,
openToAll: PropTypes.bool,
handleUpdate: PropTypes.func
@ -42,7 +42,7 @@ StudioOpenToAll.propTypes = {
export default connect(
state => ({
openToAll: selectStudioOpenToAll(state),
isLoading: selectIsLoadingInfo(state),
isFetching: selectIsFetchingInfo(state),
isMutating: selectIsMutatingOpenToAll(state),
openToAllError: selectOpenToAllMutationError(state)
}),

View file

@ -3,17 +3,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {selectStudioTitle, selectIsLoadingInfo} from '../../redux/studio';
import {selectStudioTitle, selectIsFetchingInfo} from '../../redux/studio';
import {selectCanEditInfo} from '../../redux/studio-permissions';
import {mutateStudioTitle, selectIsMutatingTitle, selectTitleMutationError} from '../../redux/studio-mutations';
const StudioTitle = ({
titleError, isLoading, isMutating, title, canEditInfo, handleUpdate
titleError, isFetching, isMutating, title, canEditInfo, handleUpdate
}) => (
<div>
<h3>Title</h3>
{isLoading ? (
<h4>Loading...</h4>
{isFetching ? (
<h4>Fetching...</h4>
) : (canEditInfo ? (
<label>
<input
@ -33,7 +33,7 @@ const StudioTitle = ({
StudioTitle.propTypes = {
titleError: PropTypes.string,
canEditInfo: PropTypes.bool,
isLoading: PropTypes.bool,
isFetching: PropTypes.bool,
isMutating: PropTypes.bool,
title: PropTypes.string,
handleUpdate: PropTypes.func
@ -43,7 +43,7 @@ export default connect(
state => ({
title: selectStudioTitle(state),
canEditInfo: selectCanEditInfo(state),
isLoading: selectIsLoadingInfo(state),
isFetching: selectIsFetchingInfo(state),
isMutating: selectIsMutatingTitle(state),
titleError: selectTitleMutationError(state)
}),