mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 17:45:52 -05:00
Replace loading with fetching in new components
This commit is contained in:
parent
f9419ac8fc
commit
dec9f96eed
7 changed files with 41 additions and 41 deletions
|
@ -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
|
||||
};
|
||||
|
|
|
@ -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)
|
||||
}),
|
||||
|
|
|
@ -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)
|
||||
}),
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
}),
|
||||
|
|
|
@ -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)
|
||||
}),
|
||||
|
|
|
@ -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)
|
||||
}),
|
||||
|
|
Loading…
Reference in a new issue