mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-22 19:05:56 -04:00
Merge branch 'develop' into add-studio-activity-pagination
This commit is contained in:
Paul Kaplan
commit
0fdf54339a
39 changed files with 680 additions and 194 deletions
package-lock.jsonpackage.json
src
_colors.scss
components/forms
l10n.jsonredux
views
developers
splash
studio
l10n.json
lib
studio-activity.jsxstudio-comments.jsxstudio-curator-invite.jsxstudio-curator-inviter.jsxstudio-curators.jsxstudio-follow.jsxstudio-managers.jsxstudio-member-tile.jsxstudio-project-adder.jsxstudio-projects.jsxstudio-report.jsxstudio-tab-nav.jsxstudio.jsxstudio.scssteachers/faq
static/svgs/studio
test/unit/redux
36
package-lock.json
generated
36
package-lock.json
generated
|
|
@ -20856,9 +20856,9 @@
|
|||
}
|
||||
},
|
||||
"scratch-blocks": {
|
||||
"version": "0.1.0-prerelease.20210509032512",
|
||||
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.1.0-prerelease.20210509032512.tgz",
|
||||
"integrity": "sha512-rgQrbtSXxCzuuiMdyX/HGhiP8eOX8yDG9ncML9ykgnaDF8ZnfflLD201GwfyvOv3D51Nu6w2Ktg0PcF3ZqnH2Q==",
|
||||
"version": "0.1.0-prerelease.20210510043314",
|
||||
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.1.0-prerelease.20210510043314.tgz",
|
||||
"integrity": "sha512-wXogEeojamKgRyBxkScpchd3sDp6sZsIxYcYNtWdPIbMpNacytMzC6hXYjFfq/BUZs4Vmnnu1x2+NKKX6N8WuA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"exports-loader": "0.6.3",
|
||||
|
|
@ -20866,9 +20866,9 @@
|
|||
}
|
||||
},
|
||||
"scratch-gui": {
|
||||
"version": "0.1.0-prerelease.20210509040505",
|
||||
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20210509040505.tgz",
|
||||
"integrity": "sha512-mXyQxytn3tnes2wiuNG9vnSFQ4anoDxkTHMLS2Xro91M5xP+KVgaR+60yWQegsBnz/8LAA+HTlKadHhr/t+PLQ==",
|
||||
"version": "0.1.0-prerelease.20210510170231",
|
||||
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20210510170231.tgz",
|
||||
"integrity": "sha512-RS12FvNZR1CoEUxtvRpHIrDQVJkPJWrIYkNS5Bjr/ZtixVN1fdRB/zHtfZ0LIbw+TOVABSyn81kKWGW011J73g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"arraybuffer-loader": "^1.0.6",
|
||||
|
|
@ -20919,14 +20919,14 @@
|
|||
"redux": "3.7.2",
|
||||
"redux-throttle": "0.1.1",
|
||||
"scratch-audio": "0.1.0-prerelease.20200528195344",
|
||||
"scratch-blocks": "0.1.0-prerelease.20210509032512",
|
||||
"scratch-l10n": "3.11.20210509031637",
|
||||
"scratch-blocks": "0.1.0-prerelease.20210510043314",
|
||||
"scratch-l10n": "3.11.20210510031549",
|
||||
"scratch-paint": "0.2.0-prerelease.20210407203313",
|
||||
"scratch-render": "0.1.0-prerelease.20210325231800",
|
||||
"scratch-render-fonts": "1.0.0-prerelease.20210401210003",
|
||||
"scratch-storage": "1.3.4",
|
||||
"scratch-svg-renderer": "0.2.0-prerelease.20210408171934",
|
||||
"scratch-vm": "0.2.0-prerelease.20210412181234",
|
||||
"scratch-vm": "0.2.0-prerelease.20210510162256",
|
||||
"startaudiocontext": "1.2.1",
|
||||
"style-loader": "^0.23.0",
|
||||
"text-encoding": "0.7.0",
|
||||
|
|
@ -21312,9 +21312,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"scratch-l10n": {
|
||||
"version": "3.11.20210509031637",
|
||||
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.11.20210509031637.tgz",
|
||||
"integrity": "sha512-MtO6InGeR6WCtJRlPSnnphWQGwv1bLZ8m7tWczF3kQeZopESq7iy36TkHdPioQ9NnptCtQw1xgeyVakuKbNGxg==",
|
||||
"version": "3.11.20210510031549",
|
||||
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.11.20210510031549.tgz",
|
||||
"integrity": "sha512-WeoSa4zxtOcAGeaASqVcJcZu/QWoWtHohsP71ICbNcBpcAqnpPV1AhdGNrOQyiwuj0Vy/6CBuH9QYpS0IF+AkA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/cli": "^7.1.2",
|
||||
|
|
@ -21401,9 +21401,9 @@
|
|||
}
|
||||
},
|
||||
"scratch-l10n": {
|
||||
"version": "3.11.20210510031549",
|
||||
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.11.20210510031549.tgz",
|
||||
"integrity": "sha512-WeoSa4zxtOcAGeaASqVcJcZu/QWoWtHohsP71ICbNcBpcAqnpPV1AhdGNrOQyiwuj0Vy/6CBuH9QYpS0IF+AkA==",
|
||||
"version": "3.11.20210511031531",
|
||||
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.11.20210511031531.tgz",
|
||||
"integrity": "sha512-E+Gm8pSNgZhVEsdRXshkhk6MnKeQdbqXx3KSctaJ9wBibxZwRX3kB+6vvkt75zESfCuQ5f3iXdB6s2KavZzHaA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/cli": "^7.1.2",
|
||||
|
|
@ -21679,9 +21679,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"scratch-vm": {
|
||||
"version": "0.2.0-prerelease.20210412181234",
|
||||
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-0.2.0-prerelease.20210412181234.tgz",
|
||||
"integrity": "sha512-xhLd4GJ9O9kgPzHj4LJhOALYbR/9FJBszrnsjKoiU2ErQD3/iZwWYqsnFjHKVvqv8wo27SAmF4crjDQyEIGY+A==",
|
||||
"version": "0.2.0-prerelease.20210510162256",
|
||||
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-0.2.0-prerelease.20210510162256.tgz",
|
||||
"integrity": "sha512-14KHdLRoEcpHRsLPkiBNnMDNAtoGYr0ZkAUdHatwvqTfzS1eN22qytqdkJ8Mx3LIxP52K/IMOVq9rFVUZ4df3w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@vernier/godirect": "1.5.0",
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
"redux-mock-store": "^1.2.3",
|
||||
"redux-thunk": "2.0.1",
|
||||
"sass-loader": "6.0.6",
|
||||
"scratch-gui": "0.1.0-prerelease.20210509040505",
|
||||
"scratch-gui": "0.1.0-prerelease.20210510170231",
|
||||
"scratch-l10n": "latest",
|
||||
"selenium-webdriver": "3.6.0",
|
||||
"slick-carousel": "1.6.0",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
|
|||
/* 3.0 colors */
|
||||
/* Using www naming convention for now, should be consistent with gui */
|
||||
$ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary
|
||||
$ui-aqua-dark: hsla(163, 85, 30, 1); // #0B8E69 Extension Aqua 3
|
||||
$ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary
|
||||
$ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary
|
||||
$ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
|
||||
|
|
|
|||
|
|
@ -6,21 +6,38 @@ const React = require('react');
|
|||
require('./button.scss');
|
||||
|
||||
const Button = props => {
|
||||
const classes = classNames('button', props.className);
|
||||
const classes = classNames('button', props.className, {'close-button': props.isCloseType});
|
||||
|
||||
return (
|
||||
<button
|
||||
className={classes}
|
||||
{...omit(props, ['className', 'children'])}
|
||||
{...omit(props, ['className', 'children', 'isCloseType'])}
|
||||
>
|
||||
{props.children}
|
||||
{
|
||||
props.isCloseType ? (
|
||||
<img
|
||||
alt="close-icon"
|
||||
className="modal-content-close-img"
|
||||
draggable="false"
|
||||
src="/svgs/modal/close-x.svg"
|
||||
/>
|
||||
) : [
|
||||
props.children
|
||||
]
|
||||
}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string
|
||||
className: PropTypes.string,
|
||||
isCloseType: PropTypes.bool
|
||||
};
|
||||
|
||||
Button.defaultProps = {
|
||||
className: '',
|
||||
isCloseType: false
|
||||
};
|
||||
|
||||
module.exports = Button;
|
||||
|
|
|
|||
|
|
@ -53,3 +53,22 @@ $pass-bg: $ui-aqua;
|
|||
margin-right: -.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
padding: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
background-color: $active-gray;
|
||||
cursor: pointer;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
text-align: center;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.close-button img {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -248,6 +248,7 @@
|
|||
"thumbnail.by": "by",
|
||||
"report.error": "Something went wrong when trying to send your message. Please try again.",
|
||||
"report.project": "Report Project",
|
||||
"report.studio": "Report Studio",
|
||||
"report.projectInstructions": "When you send a report, it lets the Scratch Team know about projects that break the {CommunityGuidelinesLink}. Does something in this project break the {CommunityGuidelinesLink}? If you think it does, please tell us more.",
|
||||
"report.CommunityGuidelinesLinkText": "Scratch Community Guidelines",
|
||||
"report.reasonPlaceHolder": "Select a reason",
|
||||
|
|
|
|||
|
|
@ -68,10 +68,11 @@ const InfiniteList = key => {
|
|||
...state,
|
||||
items: state.items.filter((_, i) => i !== action.index)
|
||||
};
|
||||
case `${key}_PREPEND`:
|
||||
case `${key}_CREATE`:
|
||||
return {
|
||||
...state,
|
||||
items: [action.item].concat(state.items)
|
||||
items: action.atEnd ? state.items.concat([action.item]) :
|
||||
[action.item].concat(state.items)
|
||||
};
|
||||
case `${key}_ERROR`:
|
||||
return {
|
||||
|
|
@ -86,7 +87,7 @@ const InfiniteList = key => {
|
|||
};
|
||||
|
||||
const actions = {
|
||||
create: item => ({type: `${key}_PREPEND`, item}),
|
||||
create: (item, atEnd = false) => ({type: `${key}_CREATE`, item, atEnd}),
|
||||
remove: index => ({type: `${key}_REMOVE`, index}),
|
||||
replace: (index, item) => ({type: `${key}_REPLACE`, index, item}),
|
||||
error: error => ({type: `${key}_ERROR`, error}),
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ const Errors = keyMirror({
|
|||
UNHANDLED: null
|
||||
});
|
||||
|
||||
const MAX_IMAGE_BYTES = 524288;
|
||||
|
||||
const getInitialState = () => ({
|
||||
mutationErrors: {}, // { [field]: <error>, ... }
|
||||
isMutating: {} // { [field]: <boolean>, ... }
|
||||
|
|
@ -171,10 +173,14 @@ const mutateFollowingStudio = shouldFollow => ((dispatch, getState) => {
|
|||
});
|
||||
|
||||
const mutateStudioImage = input => ((dispatch, getState) => {
|
||||
if (!input.files || !input.files[0]) return;
|
||||
const state = getState();
|
||||
const studioId = selectStudioId(state);
|
||||
const currentImage = selectStudioImage(state);
|
||||
dispatch(startMutation('image'));
|
||||
if (input.files[0].size && input.files[0].size > MAX_IMAGE_BYTES) {
|
||||
return dispatch(completeMutation('image', currentImage, Errors.THUMBNAIL_TOO_LARGE));
|
||||
}
|
||||
const formData = new FormData();
|
||||
formData.append('file', input.files[0]);
|
||||
api({
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ 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 selectStudioLoadFailed = state => state.studio.infoStatus === Status.ERROR;
|
||||
const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING;
|
||||
const selectIsFollowing = state => state.studio.following;
|
||||
const selectIsFetchingRoles = state => state.studio.rolesStatus === Status.FETCHING;
|
||||
|
|
@ -157,6 +158,7 @@ module.exports = {
|
|||
selectStudioImage,
|
||||
selectStudioOpenToAll,
|
||||
selectStudioCommentsAllowed,
|
||||
selectStudioLoadFailed,
|
||||
selectIsFetchingInfo,
|
||||
selectIsFetchingRoles,
|
||||
selectIsFollowing
|
||||
|
|
|
|||
|
|
@ -363,9 +363,9 @@ const Developers = () => (
|
|||
githubLink: (
|
||||
<a href="https://github.com/LLK/">GitHub</a>
|
||||
),
|
||||
emailLink: (
|
||||
<a href="mailto:help@scratch.mit.edu">
|
||||
help@scratch.mit.edu
|
||||
contactUsLink: (
|
||||
<a href="https://scratch.mit.edu/contact-us/">
|
||||
<FormattedMessage id="general.contactUs" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -56,5 +56,5 @@
|
|||
"developers.faqDifferencesTitle": "What’s the difference between Blockly and Scratch Blocks?",
|
||||
"developers.faqDifferencesBody": "Scratch Blocks builds upon the Blockly code base, and is specifically designed with our principles in mind to support creative learning experiences.",
|
||||
"developers.faqCollabTitle": "I’d like to collaborate. How do I get in touch?",
|
||||
"developers.faqCollabBody": "You can reach us over on {githubLink} or you can send an email to {emailLink}. We look forward to hearing from you!"
|
||||
"developers.faqCollabBody": "You can reach us over on {githubLink} or on our {contactUsLink} page. We look forward to hearing from you!"
|
||||
}
|
||||
|
|
|
|||
56
src/views/splash/donate/donate-banner.jsx
Normal file
56
src/views/splash/donate/donate-banner.jsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const injectIntl = require('react-intl').injectIntl;
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
|
||||
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
|
||||
const Button = require('../../../components/forms/button.jsx');
|
||||
|
||||
require('./donate-banner.scss');
|
||||
|
||||
const navigateToDonatePage = () => {
|
||||
window.location = 'https://secure.donationpay.org/scratchfoundation';
|
||||
};
|
||||
|
||||
const DonateTopBanner = ({
|
||||
onRequestClose
|
||||
}) => (
|
||||
<TitleBanner className="donate-banner">
|
||||
<div className="donate-container">
|
||||
<img
|
||||
className="donate-icon"
|
||||
src="/images/ideas/try-it-icon.svg"
|
||||
/>
|
||||
<div className="donate-central-items">
|
||||
<p className="donate-text">
|
||||
<FormattedMessage id="donatebanner.askSupport" />
|
||||
</p>
|
||||
<Button
|
||||
className="donate-button"
|
||||
key="add-to-studio-button"
|
||||
onClick={navigateToDonatePage}
|
||||
>
|
||||
<FormattedMessage id="general.donate" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
isCloseType
|
||||
className="donate-close-button"
|
||||
key="closeButton"
|
||||
name="closeButton"
|
||||
type="button"
|
||||
onClick={onRequestClose}
|
||||
>
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.close" />
|
||||
</div>
|
||||
</Button>
|
||||
</TitleBanner>
|
||||
);
|
||||
|
||||
DonateTopBanner.propTypes = {
|
||||
onRequestClose: PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = injectIntl(DonateTopBanner);
|
||||
77
src/views/splash/donate/donate-banner.scss
Normal file
77
src/views/splash/donate/donate-banner.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
|
||||
$tile-height: 244px;
|
||||
|
||||
.donate-banner {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 8;
|
||||
background-color: $ui-aqua-dark;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.donate-container {
|
||||
display: flex;
|
||||
margin: 0.375rem auto;
|
||||
align-items: center;
|
||||
|
||||
.donate-icon {
|
||||
margin: 0.6875rem;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.donate-central-items {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.donate-text {
|
||||
text-align: left;
|
||||
color: $ui-white;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
margin-right: 1rem;
|
||||
max-width: 70vw;
|
||||
}
|
||||
|
||||
.donate-button {
|
||||
margin: 0 7rem 0 .5rem;
|
||||
border-radius: 1.25rem;
|
||||
background-color: $ui-white;
|
||||
color: $ui-aqua-dark;
|
||||
padding: 0 1.75rem;
|
||||
height: 2.25rem;
|
||||
text-decoration: none;
|
||||
line-height: .875rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.donate-close-button {
|
||||
right: 1rem;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobileIntermediate) {
|
||||
.donate-banner .donate-container .donate-central-items {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.donate-banner .donate-container .donate-icon {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.donate-banner .donate-container .donate-button {
|
||||
margin-left: 0;
|
||||
margin-bottom: 1rem
|
||||
}
|
||||
.donate-banner .donate-close-button {
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -29,6 +29,8 @@
|
|||
"intro.watchVideo": "Watch Video",
|
||||
"news.scratchNews": "Scratch News",
|
||||
|
||||
"donatebanner.askSupport": "Scratch is the world's largest free coding community for kids. Your support makes a difference.",
|
||||
|
||||
"teacherbanner.greeting": "Hi",
|
||||
"teacherbanner.subgreeting": "Teacher Account",
|
||||
"teacherbanner.classesButton": "My Classes",
|
||||
|
|
|
|||
|
|
@ -32,12 +32,10 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx');
|
|||
const RemixProjectMessage = require('./activity-rows/remix-project.jsx');
|
||||
const ShareProjectMessage = require('./activity-rows/share-project.jsx');
|
||||
|
||||
// Hour of Code Banner Components
|
||||
const TopBanner = require('./hoc/top-banner.jsx');
|
||||
const MiddleBanner = require('./hoc/middle-banner.jsx');
|
||||
|
||||
const HOC_START_TIME = 1605484800000; // 2020-11-16 00:00:00
|
||||
const HOC_END_TIME = 1608681600000; // 2020-12-23 00:00:00
|
||||
// Banner Components
|
||||
const DonateBanner = require('./donate/donate-banner.jsx');
|
||||
const HOCTopBanner = require('./hoc/top-banner.jsx');
|
||||
const HOCMiddleBanner = require('./hoc/middle-banner.jsx');
|
||||
|
||||
require('./splash.scss');
|
||||
|
||||
|
|
@ -352,6 +350,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
|
|||
|
||||
const formatHTMLMessage = this.props.intl.formatHTMLMessage;
|
||||
const formatMessage = this.props.intl.formatMessage;
|
||||
|
||||
const messages = {
|
||||
'general.viewAll': formatMessage({id: 'general.viewAll'}),
|
||||
'news.scratchNews': formatMessage({id: 'news.scratchNews'}),
|
||||
|
|
@ -412,21 +411,28 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
|
|||
/>
|
||||
] : []}
|
||||
{
|
||||
this.props.sessionStatus === sessionActions.Status.FETCHED &&
|
||||
Object.keys(this.props.user).length === 0 && (// Only show top banner if user is not logged in
|
||||
(Date.now() >= HOC_START_TIME && Date.now() < HOC_END_TIME) ? (
|
||||
<MediaQuery
|
||||
key="frameless-tablet"
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<TopBanner />
|
||||
</MediaQuery>
|
||||
) : (
|
||||
<Intro
|
||||
key="intro"
|
||||
messages={messages}
|
||||
/>
|
||||
)
|
||||
this.props.shouldShowHOCTopBanner && (
|
||||
<MediaQuery
|
||||
key="frameless-tablet"
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<HOCTopBanner />
|
||||
</MediaQuery>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.props.shouldShowDonateBanner && (
|
||||
<DonateBanner
|
||||
onRequestClose={this.props.onCloseDonateBanner}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.props.shouldShowIntro && (
|
||||
<Intro
|
||||
key="intro"
|
||||
messages={messages}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div
|
||||
|
|
@ -464,17 +470,14 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
|
|||
{featured.shift()}
|
||||
</div>
|
||||
{
|
||||
this.props.sessionStatus === sessionActions.Status.FETCHED &&
|
||||
Object.keys(this.props.user).length !== 0 && // Only show if user is logged in
|
||||
Date.now() >= HOC_START_TIME && // Show middle banner on and after Dec 3
|
||||
Date.now() < HOC_END_TIME && // Hide middle banner after Dec 14
|
||||
false && // we did not use this middle banner in last HoC
|
||||
<MediaQuery
|
||||
key="frameless-desktop"
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<MiddleBanner />
|
||||
</MediaQuery>
|
||||
this.props.shouldShowHOCMiddleBanner && (
|
||||
<MediaQuery
|
||||
key="frameless-desktop"
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<HOCMiddleBanner />
|
||||
</MediaQuery>
|
||||
)
|
||||
}
|
||||
|
||||
<div
|
||||
|
|
@ -573,6 +576,7 @@ SplashPresentation.propTypes = {
|
|||
lovedByFollowing: PropTypes.arrayOf(PropTypes.object),
|
||||
news: PropTypes.arrayOf(PropTypes.object),
|
||||
onCloseAdminPanel: PropTypes.func.isRequired,
|
||||
onCloseDonateBanner: PropTypes.func.isRequired,
|
||||
onDismiss: PropTypes.func.isRequired,
|
||||
onHideEmailConfirmationModal: PropTypes.func.isRequired,
|
||||
onOpenAdminPanel: PropTypes.func.isRequired,
|
||||
|
|
@ -581,7 +585,11 @@ SplashPresentation.propTypes = {
|
|||
refreshCacheStatus: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||
sessionStatus: PropTypes.string.isRequired,
|
||||
sharedByFollowing: PropTypes.arrayOf(PropTypes.object),
|
||||
shouldShowDonateBanner: PropTypes.bool.isRequired,
|
||||
shouldShowEmailConfirmation: PropTypes.bool.isRequired,
|
||||
shouldShowHOCTopBanner: PropTypes.bool.isRequired,
|
||||
shouldShowIntro: PropTypes.bool.isRequired,
|
||||
shouldShowHOCMiddleBanner: PropTypes.bool.isRequired,
|
||||
shouldShowWelcome: PropTypes.bool.isRequired,
|
||||
user: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@ const splashActions = require('../../redux/splash.js');
|
|||
const Page = require('../../components/page/www/page.jsx');
|
||||
const SplashPresentation = require('./presentation.jsx');
|
||||
|
||||
const SCRATCH_WEEK_START_TIME = 1621224000000; // 2021-05-17 00:00:00
|
||||
const SCRATCH_WEEK_END_TIME = 1621828800000; // 2021-05-24 00:00:00
|
||||
const HOC_START_TIME = 1605484800000; // 2020-11-16 00:00:00
|
||||
const HOC_END_TIME = 1608681600000; // 2020-12-23 00:00:00
|
||||
|
||||
class Splash extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
|
@ -22,6 +27,7 @@ class Splash extends React.Component {
|
|||
'handleShowEmailConfirmationModal',
|
||||
'handleHideEmailConfirmationModal',
|
||||
'handleCloseAdminPanel',
|
||||
'handleCloseDonateBanner',
|
||||
'handleOpenAdminPanel',
|
||||
'handleDismiss',
|
||||
'shouldShowWelcome',
|
||||
|
|
@ -29,8 +35,9 @@ class Splash extends React.Component {
|
|||
]);
|
||||
this.state = {
|
||||
adminPanelOpen: false,
|
||||
dismissedDonateBanner: false,
|
||||
news: [], // gets news posts from the scratch Tumblr
|
||||
emailConfirmationModalOpen: false, // flag that determines whether to show banner to request email conf.
|
||||
emailConfirmationModalOpen: false,
|
||||
refreshCacheStatus: 'notrequested'
|
||||
};
|
||||
}
|
||||
|
|
@ -114,6 +121,9 @@ class Splash extends React.Component {
|
|||
handleOpenAdminPanel () {
|
||||
this.setState({adminPanelOpen: true});
|
||||
}
|
||||
handleCloseDonateBanner () {
|
||||
this.setState({dismissedDonateBanner: true});
|
||||
}
|
||||
handleShowEmailConfirmationModal () {
|
||||
this.setState({emailConfirmationModalOpen: true});
|
||||
}
|
||||
|
|
@ -144,8 +154,33 @@ class Splash extends React.Component {
|
|||
this.props.flags.confirm_email_banner
|
||||
);
|
||||
}
|
||||
shouldShowHOCTopBanner () {
|
||||
return (
|
||||
this.props.sessionStatus === sessionActions.Status.FETCHED && // done fetching session
|
||||
Object.keys(this.props.user).length === 0 && // no user session found
|
||||
Date.now() >= HOC_START_TIME &&
|
||||
Date.now() < HOC_END_TIME
|
||||
);
|
||||
}
|
||||
shouldShowHOCMiddleBanner () {
|
||||
return false; // we did not use this middle banner in last HoC
|
||||
}
|
||||
shouldShowDonateBanner () {
|
||||
return (
|
||||
this.state.dismissedDonateBanner === false &&
|
||||
this.props.sessionStatus === sessionActions.Status.FETCHED && // done fetching session
|
||||
Object.keys(this.props.user).length === 0 && // no user session found
|
||||
Date.now() >= SCRATCH_WEEK_START_TIME &&
|
||||
Date.now() < SCRATCH_WEEK_END_TIME &&
|
||||
this.shouldShowHOCTopBanner() !== true
|
||||
);
|
||||
}
|
||||
render () {
|
||||
const showEmailConfirmation = this.shouldShowEmailConfirmation() || false;
|
||||
const showDonateBanner = this.shouldShowDonateBanner() || false;
|
||||
const showHOCTopBanner = this.shouldShowHOCTopBanner() || false;
|
||||
const showHOCMiddleBanner = this.shouldShowHOCMiddleBanner() || false;
|
||||
const showIntro = showHOCTopBanner !== true;
|
||||
const showWelcome = this.shouldShowWelcome();
|
||||
const homepageRefreshStatus = this.getHomepageRefreshStatus();
|
||||
|
||||
|
|
@ -163,9 +198,14 @@ class Splash extends React.Component {
|
|||
refreshCacheStatus={homepageRefreshStatus}
|
||||
sessionStatus={this.props.sessionStatus}
|
||||
sharedByFollowing={this.props.shared}
|
||||
shouldShowDonateBanner={showDonateBanner}
|
||||
shouldShowEmailConfirmation={showEmailConfirmation}
|
||||
shouldShowHOCTopBanner={showHOCTopBanner}
|
||||
shouldShowIntro={showIntro}
|
||||
shouldShowHOCMiddleBanner={showHOCMiddleBanner}
|
||||
shouldShowWelcome={showWelcome}
|
||||
user={this.props.user}
|
||||
onCloseDonateBanner={this.handleCloseDonateBanner}
|
||||
onCloseAdminPanel={this.handleCloseAdminPanel}
|
||||
onDismiss={this.handleDismiss}
|
||||
onHideEmailConfirmationModal={this.handleHideEmailConfirmationModal}
|
||||
|
|
|
|||
35
src/views/studio/l10n.json
Normal file
35
src/views/studio/l10n.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"studio.tabNavProjects": "Projects",
|
||||
"studio.tabNavCurators": "Curators",
|
||||
"studio.tabNavComments": "Comments",
|
||||
"studio.tabNavActivity": "Activity",
|
||||
|
||||
"studio.title": "Title",
|
||||
"studio.description": "Description",
|
||||
"studio.thumbnail": "Thumbnail",
|
||||
|
||||
"studio.projectsHeader": "Projects",
|
||||
"studio.addProjectsHeader": "Add Projects",
|
||||
"studio.addProject": "Add",
|
||||
|
||||
"studio.creatorRole": "Studio Creator",
|
||||
|
||||
"studio.managersHeader": "Managers",
|
||||
|
||||
"studio.unfollowStudio": "Unfollow Studio",
|
||||
"studio.followStudio": "Follow Studio",
|
||||
|
||||
"studio.curatorsHeader": "Curators",
|
||||
"studio.inviteCuratorsHeader": "Invite Curators",
|
||||
"studio.inviteCurator": "Invite",
|
||||
"studio.curatorAcceptInvite": "Accept Invite",
|
||||
|
||||
"studio.commentsHeader": "Comments",
|
||||
|
||||
"studio.activityAddProjectToStudio": "{profileLink} added the project {projectLink}",
|
||||
"studio.activityRemoveProjectStudio": "{profileLink} removed the project {projectLink}",
|
||||
"studio.activityUpdateStudio": "{profileLink} made edits to the title, thumbnail, or description",
|
||||
"studio.activityBecomeCurator": "{newCuratorProfileLink} accepted an invitation from {inviterProfileLink} to curate this studio",
|
||||
"studio.activityRemoveCurator": "{removerProfileLink} removed the curator {removedProfileLink}",
|
||||
"studio.activityBecomeOwner": "{promotedProfileLink} was promoted to manager by {promotorProfileLink}"
|
||||
}
|
||||
|
|
@ -8,13 +8,24 @@ import {selectStudioId, setRoles} from '../../../redux/studio';
|
|||
const Errors = keyMirror({
|
||||
NETWORK: null,
|
||||
SERVER: null,
|
||||
PERMISSION: null
|
||||
PERMISSION: null,
|
||||
DUPLICATE: null,
|
||||
UNKNOWN_USERNAME: null,
|
||||
RATE_LIMIT: null
|
||||
});
|
||||
|
||||
const normalizeError = (err, body, res) => {
|
||||
if (err) return Errors.NETWORK;
|
||||
if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
|
||||
if (res.statusCode === 404) return Errors.UNKNOWN_USERNAME;
|
||||
if (res.statusCode === 429) return Errors.RATE_LIMIT;
|
||||
if (res.statusCode !== 200) return Errors.SERVER;
|
||||
if (body && body.status === 'error') {
|
||||
if (body.message.indexOf('already a curator') !== -1) {
|
||||
return Errors.DUPLICATE;
|
||||
}
|
||||
return Errors.UNHANDLED;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
|
|
@ -132,7 +143,7 @@ const promoteCurator = username => ((dispatch, getState) => new Promise((resolve
|
|||
const index = curatorList.findIndex(v => v.username === username);
|
||||
const curatorItem = curatorList[index];
|
||||
if (index !== -1) dispatch(curators.actions.remove(index));
|
||||
dispatch(managers.actions.create(curatorItem));
|
||||
dispatch(managers.actions.create(curatorItem, true));
|
||||
return resolve();
|
||||
});
|
||||
}));
|
||||
|
|
@ -156,7 +167,7 @@ const acceptInvitation = () => ((dispatch, getState) => new Promise((resolve, re
|
|||
if (userError) return reject(userError);
|
||||
// Note: this assumes that the user items from the curator endpoint
|
||||
// are the same structure as the single user data returned from /users/:username
|
||||
dispatch(curators.actions.create(userBody));
|
||||
dispatch(curators.actions.create(userBody, true));
|
||||
dispatch(setRoles({invited: false, curator: true}));
|
||||
return resolve();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,12 +9,16 @@ import {projects} from './redux-modules';
|
|||
const Errors = keyMirror({
|
||||
NETWORK: null,
|
||||
SERVER: null,
|
||||
PERMISSION: null
|
||||
PERMISSION: null,
|
||||
UNKNOWN_PROJECT: null,
|
||||
RATE_LIMIT: null
|
||||
});
|
||||
|
||||
const normalizeError = (err, body, res) => {
|
||||
if (err) return Errors.NETWORK;
|
||||
if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
|
||||
if (res.statusCode === 404) return Errors.UNKNOWN_PROJECT;
|
||||
if (res.statusCode === 429) return Errors.RATE_LIMIT;
|
||||
if (res.statusCode !== 200) return Errors.SERVER;
|
||||
return null;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,174 @@
|
|||
import React, {useEffect} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {connect} from 'react-redux';
|
||||
|
||||
import {activity} from './lib/redux-modules';
|
||||
import {loadActivity} from './lib/studio-activity-actions';
|
||||
import Debug from './debug.jsx';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import SocialMessage from '../../components/social-message/social-message.jsx';
|
||||
|
||||
import './studio.scss';
|
||||
|
||||
const getComponentForItem = item => {
|
||||
switch (item.type) {
|
||||
case 'addprojecttostudio':
|
||||
return (
|
||||
<SocialMessage
|
||||
datetime={item.datetime_created}
|
||||
iconSrc="/svgs/studio/activity-project.svg"
|
||||
iconAlt="project activity icon"
|
||||
imgClassName="studio-activity-icon"
|
||||
key={item.id}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="studio.activityAddProjectToStudio"
|
||||
values={{
|
||||
profileLink: (
|
||||
<a href={`/users/${item.actor_username}`}>
|
||||
{item.actor_username}
|
||||
</a>
|
||||
),
|
||||
projectLink: (
|
||||
<a href={`/projects/${item.project_id}`}>
|
||||
{item.project_title}
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</SocialMessage>
|
||||
);
|
||||
case 'removeprojectstudio':
|
||||
return (
|
||||
<SocialMessage
|
||||
datetime={item.datetime_created}
|
||||
iconSrc="/svgs/studio/activity-project.svg"
|
||||
iconAlt="project activity icon"
|
||||
imgClassName="studio-activity-icon"
|
||||
key={item.id}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="studio.activityRemoveProjectStudio"
|
||||
values={{
|
||||
profileLink: (
|
||||
<a href={`/users/${item.actor_username}`}>
|
||||
{item.actor_username}
|
||||
</a>
|
||||
),
|
||||
projectLink: (
|
||||
<a href={`/projects/${item.project_id}`}>
|
||||
{item.project_title}
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</SocialMessage>
|
||||
);
|
||||
case 'updatestudio':
|
||||
return (
|
||||
<SocialMessage
|
||||
datetime={item.datetime_created}
|
||||
iconSrc="/svgs/studio/activity-edit.svg"
|
||||
iconAlt="edit activity icon"
|
||||
imgClassName="studio-activity-icon"
|
||||
key={item.id}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="studio.activityUpdateStudio"
|
||||
values={{
|
||||
profileLink: (
|
||||
<a href={`/users/${item.actor_username}`}>
|
||||
{item.actor_username}
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</SocialMessage>
|
||||
);
|
||||
case 'becomecurator':
|
||||
return (
|
||||
<SocialMessage
|
||||
datetime={item.datetime_created}
|
||||
iconSrc="/svgs/studio/activity-curator.svg"
|
||||
iconAlt="curator activity icon"
|
||||
imgClassName="studio-activity-icon"
|
||||
key={item.id}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="studio.activityBecomeCurator"
|
||||
values={{
|
||||
// Beware, DB seems to think actor is new curator and username is inviter
|
||||
newCuratorProfileLink: (
|
||||
<a href={`/users/${item.actor_username}`}>
|
||||
{item.actor_username}
|
||||
</a>
|
||||
),
|
||||
inviterProfileLink: (
|
||||
<a href={`/users/${item.username}`}>
|
||||
{item.username}
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</SocialMessage>
|
||||
);
|
||||
case 'removecuratorstudio':
|
||||
return (
|
||||
<SocialMessage
|
||||
datetime={item.datetime_created}
|
||||
iconSrc="/svgs/studio/activity-curator.svg"
|
||||
iconAlt="curator activity icon"
|
||||
imgClassName="studio-activity-icon"
|
||||
key={item.id}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="studio.activityRemoveCurator"
|
||||
values={{
|
||||
removedProfileLink: (
|
||||
<a href={`/users/${item.username}`}>
|
||||
{item.username}
|
||||
</a>
|
||||
),
|
||||
removerProfileLink: (
|
||||
<a href={`/users/${item.actor_username}`}>
|
||||
{item.actor_username}
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</SocialMessage>
|
||||
);
|
||||
case 'becomeownerstudio':
|
||||
return (
|
||||
<SocialMessage
|
||||
datetime={item.datetime_created}
|
||||
iconSrc="/svgs/studio/activity-curator.svg"
|
||||
iconAlt="curator activity icon"
|
||||
imgClassName="studio-activity-icon"
|
||||
key={item.id}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="studio.activityBecomeOwner"
|
||||
values={{
|
||||
promotedProfileLink: (
|
||||
<a href={`/users/${item.recipient_username}`}>
|
||||
{item.recipient_username}
|
||||
</a>
|
||||
),
|
||||
promotorProfileLink: (
|
||||
<a href={`/users/${item.actor_username}`}>
|
||||
{item.actor_username}
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</SocialMessage>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const StudioActivity = ({items, loading, error, moreToLoad, onLoadMore}) => {
|
||||
useEffect(() => {
|
||||
|
|
@ -13,30 +176,31 @@ const StudioActivity = ({items, loading, error, moreToLoad, onLoadMore}) => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="studio-activity">
|
||||
<h2>Activity</h2>
|
||||
{loading && <div>Loading...</div>}
|
||||
{error && <Debug
|
||||
label="Error"
|
||||
data={error}
|
||||
/>}
|
||||
<div>
|
||||
{items.map((item, index) =>
|
||||
(<Debug
|
||||
label="Activity Item"
|
||||
data={item}
|
||||
key={index}
|
||||
/>)
|
||||
<ul
|
||||
className="studio-messages-list"
|
||||
>
|
||||
{items.map(item =>
|
||||
getComponentForItem(item)
|
||||
)}
|
||||
<div>
|
||||
{loading ? <small>Loading...</small> : (
|
||||
moreToLoad ?
|
||||
<button onClick={onLoadMore}>
|
||||
Load more
|
||||
</button> :
|
||||
<small>No more to load</small>
|
||||
)}
|
||||
</div>
|
||||
</ul>
|
||||
<div>
|
||||
{moreToLoad &&
|
||||
<button
|
||||
className={classNames('button', {
|
||||
'mod-mutating': loading
|
||||
})}
|
||||
onClick={onLoadMore}
|
||||
>
|
||||
<FormattedMessage id="general.loadMore" />
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const StudioComments = ({
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h2>Comments</h2>
|
||||
<h2><FormattedMessage id="studio.commentsHeader" /></h2>
|
||||
{canEditCommentsAllowed && <StudioCommentsAllowed />}
|
||||
<div>
|
||||
{shouldShowCommentComposer && commentsAllowed &&
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React, {useState} from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {acceptInvitation} from './lib/studio-member-actions';
|
||||
|
||||
|
|
@ -26,7 +27,7 @@ const StudioCuratorInvite = ({onSubmit}) => {
|
|||
setSubmitting(false);
|
||||
});
|
||||
}}
|
||||
>Accept invite</button>
|
||||
><FormattedMessage id="studio.curatorAcceptInvite" /></button>
|
||||
{error && <div>{error}</div>}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React, {useState} from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {inviteCurator} from './lib/studio-member-actions';
|
||||
|
||||
|
|
@ -10,15 +11,23 @@ const StudioCuratorInviter = ({onSubmit}) => {
|
|||
const [value, setValue] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const submit = () => {
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
onSubmit(value)
|
||||
.then(() => setValue(''))
|
||||
.catch(e => setError(e))
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
return (
|
||||
<div className="studio-adder-section">
|
||||
<h3>✦ Invite Curators</h3>
|
||||
<h3><FormattedMessage id="studio.inviteCuratorsHeader" /></h3>
|
||||
<input
|
||||
disabled={submitting}
|
||||
type="text"
|
||||
placeholder="<username>"
|
||||
value={value}
|
||||
onKeyDown={e => e.key === 'Enter' && submit()}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
|
|
@ -26,15 +35,8 @@ const StudioCuratorInviter = ({onSubmit}) => {
|
|||
'mod-mutating': submitting
|
||||
})}
|
||||
disabled={submitting}
|
||||
onClick={() => {
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
onSubmit(value)
|
||||
.then(() => setValue(''))
|
||||
.catch(e => setError(e))
|
||||
.then(() => setSubmitting(false));
|
||||
}}
|
||||
>Invite</button>
|
||||
onClick={submit}
|
||||
><FormattedMessage id="studio.inviteCurator" /></button>
|
||||
{error && <div>{error}</div>}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, {useEffect} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {curators} from './lib/redux-modules';
|
||||
import Debug from './debug.jsx';
|
||||
|
|
@ -18,7 +19,7 @@ const StudioCurators = ({
|
|||
}, []);
|
||||
|
||||
return (<div className="studio-members">
|
||||
<h2>Curators</h2>
|
||||
<h2><FormattedMessage id="studio.curatorsHeader" /></h2>
|
||||
{canInviteCurators && <CuratorInviter />}
|
||||
{showCuratorInvite && <CuratorInvite />}
|
||||
{error && <Debug
|
||||
|
|
@ -37,7 +38,7 @@ const StudioCurators = ({
|
|||
{loading ? <small>Loading...</small> : (
|
||||
moreToLoad ?
|
||||
<button onClick={onLoadMore}>
|
||||
Load more
|
||||
<FormattedMessage id="general.loadMore" />
|
||||
</button> :
|
||||
<small>No more to load</small>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {selectIsFollowing} from '../../redux/studio';
|
||||
import {selectCanFollowStudio} from '../../redux/studio-permissions';
|
||||
import {
|
||||
|
|
@ -28,7 +30,9 @@ const StudioFollow = ({
|
|||
onClick={() => handleFollow(!isFollowing)}
|
||||
>
|
||||
{isMutating ? '...' : (
|
||||
isFollowing ? 'Unfollow Studio' : 'Follow Studio'
|
||||
isFollowing ?
|
||||
<FormattedMessage id="studio.unfollowStudio" /> :
|
||||
<FormattedMessage id="studio.followStudio" />
|
||||
)}
|
||||
</button>
|
||||
{followingError && <div>Error mutating following: {followingError}</div>}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, {useEffect} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {managers} from './lib/redux-modules';
|
||||
import {loadManagers} from './lib/studio-member-actions';
|
||||
|
|
@ -15,7 +16,7 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
|
|||
|
||||
return (
|
||||
<div className="studio-members">
|
||||
<h2>Managers</h2>
|
||||
<h2><FormattedMessage id="studio.managersHeader" /></h2>
|
||||
{error && <Debug
|
||||
label="Error"
|
||||
data={error}
|
||||
|
|
@ -33,7 +34,7 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
|
|||
{loading ? <small>Loading...</small> : (
|
||||
moreToLoad ?
|
||||
<button onClick={onLoadMore}>
|
||||
Load more
|
||||
<FormattedMessage id="general.loadMore" />
|
||||
</button> :
|
||||
<small>No more to load</small>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React, {useState} from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {
|
||||
selectCanRemoveCurators, selectCanRemoveManager, selectCanPromoteCurators
|
||||
|
|
@ -33,7 +34,7 @@ const StudioMemberTile = ({
|
|||
href={userUrl}
|
||||
className="studio-member-name"
|
||||
>{username}</a>
|
||||
{isCreator && <div className="studio-member-role">Studio Creator</div>}
|
||||
{isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
|
||||
</div>
|
||||
{canRemove &&
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React, {useState} from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {addProject} from './lib/studio-project-actions';
|
||||
|
||||
|
|
@ -10,15 +11,23 @@ const StudioProjectAdder = ({onSubmit}) => {
|
|||
const [value, setValue] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const submit = () => {
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
onSubmit(value)
|
||||
.then(() => setValue(''))
|
||||
.catch(e => setError(e))
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
return (
|
||||
<div className="studio-adder-section">
|
||||
<h3>✦ Add Projects</h3>
|
||||
<h3><FormattedMessage id="studio.addProjectsHeader" /></h3>
|
||||
<input
|
||||
disabled={submitting}
|
||||
type="text"
|
||||
placeholder="<project id>"
|
||||
value={value}
|
||||
onKeyDown={e => e.key === 'Enter' && submit()}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
|
|
@ -26,15 +35,8 @@ const StudioProjectAdder = ({onSubmit}) => {
|
|||
'mod-mutating': submitting
|
||||
})}
|
||||
disabled={submitting}
|
||||
onClick={() => {
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
onSubmit(value)
|
||||
.then(() => setValue(''))
|
||||
.catch(e => setError(e))
|
||||
.then(() => setSubmitting(false));
|
||||
}}
|
||||
>Add</button>
|
||||
onClick={submit}
|
||||
><FormattedMessage id="studio.addProject" /></button>
|
||||
{error && <div>{error}</div>}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import StudioOpenToAll from './studio-open-to-all.jsx';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {projects} from './lib/redux-modules';
|
||||
import {selectCanAddProjects, selectCanEditOpenToAll} from '../../redux/studio-permissions';
|
||||
|
|
@ -19,7 +20,7 @@ const StudioProjects = ({
|
|||
|
||||
return (
|
||||
<div className="studio-projects">
|
||||
<h2>Projects</h2>
|
||||
<h2><FormattedMessage id="studio.projectsHeader" /></h2>
|
||||
{canEditOpenToAll && <StudioOpenToAll />}
|
||||
{canAddProjects && <StudioProjectAdder />}
|
||||
{error && <Debug
|
||||
|
|
@ -43,7 +44,7 @@ const StudioProjects = ({
|
|||
{loading ? <small>Loading...</small> : (
|
||||
moreToLoad ?
|
||||
<button onClick={onLoadMore}>
|
||||
Load more
|
||||
<FormattedMessage id="general.loadMore" />
|
||||
</button> :
|
||||
<small>No more to load</small>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {
|
||||
Fields,
|
||||
|
|
@ -24,15 +25,15 @@ const StudioReport = ({
|
|||
<div>
|
||||
<h3>Reporting</h3>
|
||||
{canReport && (
|
||||
<button onClick={handleOpen}>Report</button>
|
||||
<button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
|
||||
)}
|
||||
{isOpen && (
|
||||
<div style={{padding: '1rem', margin: '1rem', border: '1px solid green'}}>
|
||||
<div>Report Studio Modal</div>
|
||||
<div><FormattedMessage id="report.studio" /></div>
|
||||
{previouslyReported ? (
|
||||
<React.Fragment>
|
||||
<div>Submitted the report!</div>
|
||||
<button onClick={handleClose}>Close</button>
|
||||
<button onClick={handleClose}><FormattedMessage id="general.close" /></button>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
|
|
@ -40,9 +41,9 @@ const StudioReport = ({
|
|||
value={field}
|
||||
onChange={e => handleSetField(e.target.value)}
|
||||
>
|
||||
<option value={Fields.TITLE}>Title</option>
|
||||
<option value={Fields.DESCRIPTION}>Description</option>
|
||||
<option value={Fields.THUMBNAIL}>Thumbnail</option>
|
||||
<option value={Fields.TITLE}><FormattedMessage id="studio.title" /></option>
|
||||
<option value={Fields.DESCRIPTION}><FormattedMessage id="studio.description" /></option>
|
||||
<option value={Fields.THUMBNAIL}><FormattedMessage id="studio.thumbnail" /></option>
|
||||
</select>
|
||||
{error && (
|
||||
<div>
|
||||
|
|
@ -54,9 +55,9 @@ const StudioReport = ({
|
|||
disabled={isSubmitting}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
<FormattedMessage id="report.send" />
|
||||
</button>
|
||||
<button onClick={handleClose}>Cancel</button>
|
||||
<button onClick={handleClose}><FormattedMessage id="general.cancel" /></button>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react';
|
||||
import {useRouteMatch, NavLink} from 'react-router-dom';
|
||||
import SubNavigation from '../../components/subnavigation/subnavigation.jsx';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
const StudioTabNav = () => {
|
||||
const match = useRouteMatch();
|
||||
|
||||
const {params: {studioPath, studioId}} = useRouteMatch();
|
||||
const base = `/${studioPath}/${studioId}`;
|
||||
return (
|
||||
<SubNavigation
|
||||
align="left"
|
||||
|
|
@ -12,28 +13,28 @@ const StudioTabNav = () => {
|
|||
>
|
||||
<NavLink
|
||||
activeClassName="active"
|
||||
to={`${match.url}`}
|
||||
to={base}
|
||||
exact
|
||||
>
|
||||
<li>Projects</li>
|
||||
<li><FormattedMessage id="studio.tabNavProjects" /></li>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
activeClassName="active"
|
||||
to={`${match.url}/curators`}
|
||||
to={`${base}/comments`}
|
||||
>
|
||||
<li>Curators</li>
|
||||
<li><FormattedMessage id="studio.tabNavComments" /></li>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
activeClassName="active"
|
||||
to={`${match.url}/comments`}
|
||||
to={`${base}/curators`}
|
||||
>
|
||||
<li> Comments</li>
|
||||
<li><FormattedMessage id="studio.tabNavCurators" /></li>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
activeClassName="active"
|
||||
to={`${match.url}/activity`}
|
||||
to={`${base}/activity`}
|
||||
>
|
||||
<li>Activity</li>
|
||||
<li><FormattedMessage id="studio.tabNavActivity" /></li>
|
||||
</NavLink>
|
||||
</SubNavigation>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,9 +6,14 @@ import {
|
|||
Redirect,
|
||||
useRouteMatch
|
||||
} from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
|
||||
|
||||
import Page from '../../components/page/www/page.jsx';
|
||||
import render from '../../lib/render.jsx';
|
||||
import NotAvailable from '../../components/not-available/not-available.jsx';
|
||||
|
||||
|
||||
import StudioTabNav from './studio-tab-nav.jsx';
|
||||
import StudioProjects from './studio-projects.jsx';
|
||||
|
|
@ -25,56 +30,68 @@ import {
|
|||
activity
|
||||
} from './lib/redux-modules';
|
||||
|
||||
const {getInitialState, studioReducer} = require('../../redux/studio');
|
||||
const {getInitialState, studioReducer, selectStudioLoadFailed} = require('../../redux/studio');
|
||||
const {studioReportReducer} = require('../../redux/studio-report');
|
||||
const {commentsReducer} = require('../../redux/comments');
|
||||
const {studioMutationsReducer} = require('../../redux/studio-mutations');
|
||||
|
||||
import './studio.scss';
|
||||
|
||||
const StudioShell = () => {
|
||||
const StudioShell = ({studioLoadFailed}) => {
|
||||
const match = useRouteMatch();
|
||||
|
||||
return (
|
||||
<div className="studio-shell">
|
||||
<div className="studio-info">
|
||||
<StudioInfo />
|
||||
</div>
|
||||
<div className="studio-tabs">
|
||||
<StudioTabNav />
|
||||
<div>
|
||||
<Switch>
|
||||
<Route path={`${match.path}/curators`}>
|
||||
<StudioManagers />
|
||||
<StudioCurators />
|
||||
</Route>
|
||||
<Route path={`${match.path}/comments`}>
|
||||
<StudioComments />
|
||||
</Route>
|
||||
<Route path={`${match.path}/activity`}>
|
||||
<StudioActivity />
|
||||
</Route>
|
||||
<Route path={`${match.path}/projects`}>
|
||||
{/* We can force /projects back to / this way */}
|
||||
<Redirect to={match.url} />
|
||||
</Route>
|
||||
<Route path={match.path}>
|
||||
<StudioProjects />
|
||||
</Route>
|
||||
</Switch>
|
||||
studioLoadFailed ?
|
||||
<NotAvailable /> :
|
||||
<div className="studio-shell">
|
||||
<div className="studio-info">
|
||||
<StudioInfo />
|
||||
</div>
|
||||
<div className="studio-tabs">
|
||||
<StudioTabNav />
|
||||
<div>
|
||||
<Switch>
|
||||
<Route path={`${match.path}/curators`}>
|
||||
<StudioManagers />
|
||||
<StudioCurators />
|
||||
</Route>
|
||||
<Route path={`${match.path}/comments`}>
|
||||
<StudioComments />
|
||||
</Route>
|
||||
<Route path={`${match.path}/activity`}>
|
||||
<StudioActivity />
|
||||
</Route>
|
||||
<Route path={`${match.path}/projects`}>
|
||||
{/* We can force /projects back to / this way */}
|
||||
<Redirect to={match.url} />
|
||||
</Route>
|
||||
<Route path={match.path}>
|
||||
<StudioProjects />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
StudioShell.propTypes = {
|
||||
studioLoadFailed: PropTypes.bool
|
||||
};
|
||||
|
||||
const ConnectedStudioShell = connect(
|
||||
state => ({
|
||||
studioLoadFailed: selectStudioLoadFailed(state)
|
||||
}),
|
||||
)(StudioShell);
|
||||
|
||||
render(
|
||||
<Page className="studio-page">
|
||||
<Router>
|
||||
<Switch>
|
||||
{/* Use variable studioPath to support /studio-playground/ or future route */}
|
||||
<Route path="/:studioPath/:studioId">
|
||||
<StudioShell />
|
||||
<ConnectedStudioShell />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ $radius: 8px;
|
|||
.studio-info {
|
||||
justify-self: center;
|
||||
width: 300px;
|
||||
height: fit-content;
|
||||
height: max-content;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
|
|
@ -236,6 +236,26 @@ $radius: 8px;
|
|||
}
|
||||
}
|
||||
|
||||
.studio-activity {
|
||||
.studio-messages-list {
|
||||
border: 1px solid $ui-border;
|
||||
border-bottom-width: 0;
|
||||
border-radius: 5px;
|
||||
background-color: $ui-white;
|
||||
padding-left: 0px;
|
||||
}
|
||||
.studio-activity-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
/* Ensure that line breaks occur only the message text, not in the flex layout or date */
|
||||
.social-message-date {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.flex-row.mod-social-message {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modification classes for different interaction states */
|
||||
.mod-fetching { /* When a field has no content to display yet */
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -50,25 +50,6 @@ const TeacherFaq = props => (
|
|||
<dd><FormattedHTMLMessage id="teacherfaq.teacherSignUpBody" /></dd>
|
||||
<dt><FormattedMessage id="teacherfaq.classMultipleTeachersTitle" /></dt>
|
||||
<dd><FormattedMessage id="teacherfaq.classMultipleTeachersBody" /></dd>
|
||||
<dt><FormattedMessage id="teacherfaq.convertToTeacherTitle" /></dt>
|
||||
<dd>
|
||||
<FormattedMessage
|
||||
id="teacherfaq.convertToTeacherList"
|
||||
values={{
|
||||
helpEmail: (
|
||||
<a href="mailto:help@scratch.mit.edu">
|
||||
help@scratch.mit.edu
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</dd>
|
||||
<ul>
|
||||
<li><FormattedMessage id="teacherfaq.convertToTeacherUsername" /></li>
|
||||
<li><FormattedMessage id="teacherfaq.convertToTeacherEmail" /></li>
|
||||
<li><FormattedMessage id="teacherfaq.convertToTeacherBirth" /></li>
|
||||
</ul>
|
||||
|
||||
<dt><FormattedMessage id="teacherfaq.teacherPersonalTitle" /></dt>
|
||||
<dd><FormattedMessage id="teacherfaq.teacherPersonalBody" /></dd>
|
||||
<dt><FormattedMessage id="teacherfaq.teacherGoogleTitle" /></dt>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,6 @@
|
|||
"teacherfaq.teacherSignUpBody": "To request a Teacher Account, please go to the teacher account <a href=\"/educators/register\">request form</a>.",
|
||||
"teacherfaq.classMultipleTeachersTitle": "Can a class have multiple teachers?",
|
||||
"teacherfaq.classMultipleTeachersBody": "A class can only have one teacher account associated with it.",
|
||||
"teacherfaq.convertToTeacherTitle": "I already have a Scratch account, can you make it a Teacher account?",
|
||||
"teacherfaq.convertToTeacherList": "Please send an email to {helpEmail} and be sure to include the following information:",
|
||||
"teacherfaq.convertToTeacherUsername": "Your Scratch username (Please double check that you know your username by logging into it before contacting us!)",
|
||||
"teacherfaq.convertToTeacherEmail": "The email address associated with your Scratch account",
|
||||
"teacherfaq.convertToTeacherBirth": "The birth month and birth year associated with your Scratch account",
|
||||
"teacherfaq.teacherPersonalTitle": "Why do you need to know my personal information during registration?",
|
||||
"teacherfaq.teacherPersonalBody": "We use this information to verify the account creator is an educator. We will not share this information with anyone else, and it will not be shared publicly on the site.",
|
||||
"teacherfaq.teacherGoogleTitle": "Does Scratch connect with Google Classroom, Clever or any other classroom management service?",
|
||||
|
|
|
|||
4
static/svgs/studio/activity-curator.svg
Normal file
4
static/svgs/studio/activity-curator.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.2531 7.47107C5.2531 8.16594 5.51512 8.80522 5.9491 9.28437C4.50749 10.1253 3.54431 11.8131 3.54431 13.7407C3.54431 14.5562 4.19249 15.1128 5.00253 15.4536C5.82565 15.7998 6.90529 15.9673 7.97081 15.9673C9.03633 15.9673 10.116 15.7998 10.9391 15.4536C11.7491 15.1128 12.3973 14.5562 12.3973 13.7407V13.7342C12.3973 13.6496 12.3973 13.5472 12.3834 13.4418C12.3334 12.4083 12.0039 11.4543 11.4801 10.6824C11.0859 10.1059 10.5795 9.62615 9.99447 9.28522C10.4318 8.80663 10.6887 8.1706 10.6887 7.47107C10.6887 5.96646 9.47307 4.75 7.97416 4.75C6.46912 4.75 5.2531 5.96602 5.2531 7.47107Z" fill="#4C97FF"/>
|
||||
<path d="M15.0868 5.71516C14.0615 5.71516 13.2332 6.54343 13.2332 7.56872C13.2332 8.00598 13.385 8.40622 13.6373 8.72277C13.1654 9.02039 12.7758 9.45561 12.5108 9.97982C12.4698 10.0609 12.476 10.1578 12.527 10.233C13.0003 10.9304 13.3012 11.7992 13.3451 12.7461C13.3501 12.8539 13.4236 12.9463 13.5274 12.9753C14.3677 13.2105 15.4588 13.2317 16.3459 13.0414C16.7892 12.9463 17.2012 12.7943 17.5086 12.5735C17.8194 12.3501 18.0443 12.0384 18.0443 11.637C18.0443 10.393 17.4408 9.29929 16.5294 8.72307C16.7819 8.40648 16.9338 8.00612 16.9338 7.56872C16.9338 6.5441 16.1062 5.71516 15.0868 5.71516Z" fill="#4C97FF"/>
|
||||
</svg>
|
||||
|
After 
(image error) Size: 1.3 KiB |
3
static/svgs/studio/activity-edit.svg
Normal file
3
static/svgs/studio/activity-edit.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9577C9.96446 16.0524 9.85758 16.1132 9.72976 16.1709L7.56659 17.0793C7.48799 16.8113 7.29336 16.4707 6.93361 16.1109C6.58592 15.7633 6.25738 15.5807 5.99914 15.4901L6.89672 13.3378C6.94337 13.199 7.0271 13.0934 7.1208 12.9997C7.14262 12.9998 7.16333 12.9791 7.17418 12.9682L7.20476 12.9376C7.35075 12.7917 7.55585 12.7028 7.79617 12.6709C8.40705 12.5953 9.11521 12.8852 9.64935 13.4193C10.1835 13.9535 10.4734 14.6616 10.3857 15.2605C10.3505 15.458 10.2854 15.6613 10.1833 15.8116C10.1529 15.864 10.1114 15.9055 10.069 15.9479L10.0592 15.9577ZM13.6054 6.53701C13.9427 6.19967 14.4603 6.12739 14.9902 6.28635C15.2973 6.37845 15.4255 6.75916 15.2154 6.96926L10.177 12.0077C10.0566 12.128 9.86135 12.1478 9.70333 12.047C9.54003 11.9449 9.37127 11.857 9.20119 11.7836C8.92376 11.664 8.82736 11.315 9.02168 11.1207L13.6054 6.53701ZM16.5317 9.46328L11.9489 14.046C11.7586 14.2364 11.4084 14.1545 11.2923 13.8845C11.2173 13.705 11.1239 13.5307 11.0163 13.362C10.9099 13.1964 10.9364 12.99 11.0616 12.8648L16.0882 7.83815C16.2964 7.63003 16.677 7.75614 16.7711 8.06339C16.9356 8.59871 16.871 9.12397 16.5317 9.46328ZM18.5347 4.534C17.2459 3.24525 15.3869 3.01376 14.3838 4.01691L6.29247 12.1082C6.09421 12.3065 5.91898 12.5278 5.81284 12.7984L4.10642 16.8959C3.89183 17.4132 4.05796 18.0587 4.53397 18.5347C5.00998 19.0107 5.65549 19.1769 6.1728 18.9623L10.2703 17.2558C10.5398 17.1486 10.7611 16.9734 10.9594 16.7751L19.0507 8.68382C20.0538 7.68067 19.8234 5.82274 18.5347 4.534Z" fill="#4C97FF"/>
|
||||
</svg>
|
||||
|
After 
(image error) Size: 1.6 KiB |
4
static/svgs/studio/activity-project.svg
Normal file
4
static/svgs/studio/activity-project.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.79431 5C6.79431 4.44772 7.24203 4 7.79431 4H17.7943C18.3466 4 18.7943 4.44772 18.7943 5V12C18.7943 12.5523 18.3466 13 17.7943 13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V5Z" fill="#4C97FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.79431 7H4.79431C4.24203 7 3.79431 7.44772 3.79431 8V14C3.79431 15.1046 4.68974 16 5.79431 16H14.7943C15.3466 16 15.7943 15.5523 15.7943 15V14H7.79431C6.68974 14 5.79431 13.1046 5.79431 12V7ZM6.79431 7H14.7943C15.3466 7 15.7943 7.44772 15.7943 8V13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V7Z" fill="#4C97FF"/>
|
||||
</svg>
|
||||
|
After 
(image error) Size: 678 B |
|
|
@ -92,15 +92,18 @@ describe('Infinite List redux module', () => {
|
|||
});
|
||||
|
||||
describe('CREATE', () => {
|
||||
let action;
|
||||
beforeEach(() => {
|
||||
action = module.actions.create(7);
|
||||
});
|
||||
test('prepends the given item', () => {
|
||||
test('prepends the given item by default', () => {
|
||||
const action = module.actions.create(7);
|
||||
initialState.items = [8, 9, 10, 11];
|
||||
const newState = module.reducer(initialState, action);
|
||||
expect(newState.items).toEqual([7, 8, 9, 10, 11]);
|
||||
});
|
||||
test('appends the given item if given `atEnd` arg', () => {
|
||||
const action = module.actions.create(7, true);
|
||||
initialState.items = [8, 9, 10, 11];
|
||||
const newState = module.reducer(initialState, action);
|
||||
expect(newState.items).toEqual([8, 9, 10, 11, 7]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ERROR', () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue