From 8db5216f17f0dd2e29a666c9f483cc33b72bff7d Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Fri, 5 Oct 2018 09:15:09 -0400
Subject: [PATCH] share date is passed as a prop to subactions

---
 src/views/preview/presentation.jsx | 477 +++++++++++++++--------------
 src/views/preview/subactions.jsx   | 114 ++++---
 2 files changed, 295 insertions(+), 296 deletions(-)

diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 85918defa..ee3dbab5a 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -76,82 +76,197 @@ const PreviewPresentation = ({
     onToggleStudio,
     onSeeInside,
     onUpdate
-}) => (
-    <div className="preview">
-        <ShareBanner shared={isShared} />
-        { projectInfo && projectInfo.author && projectInfo.author.id && (
-            <Formsy onKeyPress={onKeyPress}>
-                <div className="inner">
-                    <FlexRow className="preview-row force-row">
-                        <FlexRow className="project-header">
-                            <a href={`/users/${projectInfo.author.username}`}>
-                                <Avatar
-                                    alt={projectInfo.author.username}
-                                    src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo.author.id}_48x48.png`}
-                                />
-                            </a>
-                            <div className="title">
-                                {editable ?
-                                    <InplaceInput
-                                        className="project-title"
-                                        handleUpdate={onUpdate}
-                                        name="title"
-                                        validationErrors={{
-                                            maxLength: intl.formatMessage({
-                                                id: 'preview.titleMaxLength'
-                                            })
-                                        }}
-                                        validations={{
-                                            maxLength: 100
-                                        }}
-                                        value={projectInfo.title}
-                                    /> :
-                                    <React.Fragment>
-                                        <div
-                                            className="project-title no-edit"
-                                            title={projectInfo.title}
-                                        >{projectInfo.title}</div>
-                                        {'by '}
-                                        <a href={`/users/${projectInfo.author.username}`}>
-                                            {projectInfo.author.username}
-                                        </a>
-                                    </React.Fragment>
-                                }
-                            </div>
-                        </FlexRow>
-                        <MediaQuery minWidth={frameless.mobile}>
-                            <div className="project-buttons">
-                                {/* TODO: Hide Remix button for now until implemented */}
-                                {(!userOwnsProject && false) &&
-                                    <Button className="button remix-button">
-                                        Remix
+}) => {
+    const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
+    return (
+        <div className="preview">
+            <ShareBanner shared={isShared} />
+            { projectInfo && projectInfo.author && projectInfo.author.id && (
+                <Formsy onKeyPress={onKeyPress}>
+                    <div className="inner">
+                        <FlexRow className="preview-row force-row">
+                            <FlexRow className="project-header">
+                                <a href={`/users/${projectInfo.author.username}`}>
+                                    <Avatar
+                                        alt={projectInfo.author.username}
+                                        src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo.author.id}_48x48.png`}
+                                    />
+                                </a>
+                                <div className="title">
+                                    {editable ?
+                                        <InplaceInput
+                                            className="project-title"
+                                            handleUpdate={onUpdate}
+                                            name="title"
+                                            validationErrors={{
+                                                maxLength: intl.formatMessage({
+                                                    id: 'preview.titleMaxLength'
+                                                })
+                                            }}
+                                            validations={{
+                                                maxLength: 100
+                                            }}
+                                            value={projectInfo.title}
+                                        /> :
+                                        <React.Fragment>
+                                            <div
+                                                className="project-title no-edit"
+                                                title={projectInfo.title}
+                                            >{projectInfo.title}</div>
+                                            {'by '}
+                                            <a href={`/users/${projectInfo.author.username}`}>
+                                                {projectInfo.author.username}
+                                            </a>
+                                        </React.Fragment>
+                                    }
+                                </div>
+                            </FlexRow>
+                            <MediaQuery minWidth={frameless.mobile}>
+                                <div className="project-buttons">
+                                    {/* TODO: Hide Remix button for now until implemented */}
+                                    {(!userOwnsProject && false) &&
+                                        <Button className="button remix-button">
+                                            Remix
+                                        </Button>
+                                    }
+                                    <Button
+                                        className="button see-inside-button"
+                                        onClick={onSeeInside}
+                                    >
+                                        See Inside
                                     </Button>
-                                }
-                                <Button
-                                    className="button see-inside-button"
-                                    onClick={onSeeInside}
-                                >
-                                    See Inside
-                                </Button>
+                                </div>
+                            </MediaQuery>
+                        </FlexRow>
+                        <FlexRow className="preview-row">
+                            <div className="guiPlayer">
+                                <IntlGUI
+                                    isPlayerOnly
+                                    assetHost={assetHost}
+                                    backpackOptions={backpackOptions}
+                                    basePath="/"
+                                    className="guiPlayer"
+                                    isFullScreen={isFullScreen}
+                                    previewInfoVisible="false"
+                                    projectHost={projectHost}
+                                    projectId={projectId}
+                                />
                             </div>
-                        </MediaQuery>
-                    </FlexRow>
-                    <FlexRow className="preview-row">
-                        <div className="guiPlayer">
-                            <IntlGUI
-                                isPlayerOnly
-                                assetHost={assetHost}
-                                backpackOptions={backpackOptions}
-                                basePath="/"
-                                className="guiPlayer"
-                                isFullScreen={isFullScreen}
-                                previewInfoVisible="false"
-                                projectHost={projectHost}
-                                projectId={projectId}
-                            />
-                        </div>
-                        <MediaQuery maxWidth={frameless.tablet - 1}>
-                            <FlexRow className="preview-row force-center">
+                            <MediaQuery maxWidth={frameless.tablet - 1}>
+                                <FlexRow className="preview-row force-center">
+                                    <Stats
+                                        faved={faved}
+                                        favoriteCount={favoriteCount}
+                                        loveCount={loveCount}
+                                        loved={loved}
+                                        projectInfo={projectInfo}
+                                        onFavoriteClicked={onFavoriteClicked}
+                                        onLoveClicked={onLoveClicked}
+                                    />
+                                    <Subactions
+                                        addToStudioOpen={addToStudioOpen}
+                                        isLoggedIn={isLoggedIn}
+                                        projectInfo={projectInfo}
+                                        reportOpen={reportOpen}
+                                        shareDate={shareDate}
+                                        studios={studios}
+                                        userOwnsProject={userOwnsProject}
+                                        onAddToStudioClicked={onAddToStudioClicked}
+                                        onAddToStudioClosed={onAddToStudioClosed}
+                                        onReportClicked={onReportClicked}
+                                        onReportClose={onReportClose}
+                                        onReportSubmit={onReportSubmit}
+                                        onToggleStudio={onToggleStudio}
+                                    />
+                                </FlexRow>
+                            </MediaQuery>
+                            <FlexRow className="project-notes">
+                                <RemixCredit projectInfo={parentInfo} />
+                                <RemixCredit projectInfo={originalInfo} />
+                                {/*  eslint-disable max-len */}
+                                <MediaQuery maxWidth={frameless.tablet - 1}>
+                                    <FlexRow className="preview-row">
+                                        <FlexRow className="extension-list">
+                                            {extensions && extensions.map(extension => (
+                                                <ExtensionChip
+                                                    extensionL10n={extension.l10nId}
+                                                    extensionName={extension.name}
+                                                    hasStatus={extension.hasStatus}
+                                                    iconURI={extension.icon && `/svgs/project/${extension.icon}`}
+                                                    key={extension.name || extension.l10nId}
+                                                />
+                                            ))}
+                                        </FlexRow>
+                                    </FlexRow>
+                                </MediaQuery>
+                                <FlexRow className="description-block">
+                                    <div className="project-textlabel">
+                                        Instructions
+                                    </div>
+                                    {editable ?
+                                        <InplaceInput
+                                            className={classNames(
+                                                'project-description-edit',
+                                                {remixes: parentInfo && parentInfo.author}
+                                            )}
+                                            handleUpdate={onUpdate}
+                                            name="instructions"
+                                            placeholder="Tell people how to use your project (such as which keys to press)."
+                                            type="textarea"
+                                            validationErrors={{
+                                                maxLength: 'Sorry description is too long'
+                                                // maxLength: props.intl.formatMessage({
+                                                //     id: 'project.descriptionMaxLength'
+                                                // })
+                                            }}
+                                            validations={{
+                                                // TODO: actual 5000
+                                                maxLength: 1000
+                                            }}
+                                            value={projectInfo.instructions}
+                                        /> :
+                                        <div className="project-description">
+                                            {decorateText(projectInfo.instructions)}
+                                        </div>
+                                    }
+                                </FlexRow>
+                                <FlexRow className="description-block">
+                                    <div className="project-textlabel">
+                                        Notes and Credits
+                                    </div>
+                                    {editable ?
+                                        <InplaceInput
+                                            className={classNames(
+                                                'project-description-edit',
+                                                'last',
+                                                {remixes: parentInfo && parentInfo.author}
+                                            )}
+                                            handleUpdate={onUpdate}
+                                            name="description"
+                                            placeholder="How did you make this project? Did you use ideas scripts or artwork from other people? Thank them here."
+                                            type="textarea"
+                                            validationErrors={{
+                                                maxLength: 'Sorry description is too long'
+                                                // maxLength: props.intl.formatMessage({
+                                                //     id: 'project.descriptionMaxLength'
+                                                // })
+                                            }}
+                                            validations={{
+                                                // TODO: actual 5000
+                                                maxLength: 1000
+                                            }}
+                                            value={projectInfo.description}
+                                        /> :
+                                        <div className="project-description last">
+                                            {decorateText(projectInfo.description)}
+                                        </div>
+                                    }
+                                </FlexRow>
+                                {/*  eslint-enable max-len */}
+                            </FlexRow>
+                        </FlexRow>
+                        <MediaQuery minWidth={frameless.tablet}>
+                            <FlexRow className="preview-row">
                                 <Stats
                                     faved={faved}
                                     favoriteCount={favoriteCount}
@@ -166,6 +281,7 @@ const PreviewPresentation = ({
                                     isLoggedIn={isLoggedIn}
                                     projectInfo={projectInfo}
                                     reportOpen={reportOpen}
+                                    shareDate={shareDate}
                                     studios={studios}
                                     userOwnsProject={userOwnsProject}
                                     onAddToStudioClicked={onAddToStudioClicked}
@@ -177,179 +293,68 @@ const PreviewPresentation = ({
                                 />
                             </FlexRow>
                         </MediaQuery>
-                        <FlexRow className="project-notes">
-                            <RemixCredit projectInfo={parentInfo} />
-                            <RemixCredit projectInfo={originalInfo} />
-                            {/*  eslint-disable max-len */}
-                            <MediaQuery maxWidth={frameless.tablet - 1}>
-                                <FlexRow className="preview-row">
-                                    <FlexRow className="extension-list">
-                                        {extensions && extensions.map(extension => (
-                                            <ExtensionChip
-                                                extensionL10n={extension.l10nId}
-                                                extensionName={extension.name}
-                                                hasStatus={extension.hasStatus}
-                                                iconURI={extension.icon && `/svgs/project/${extension.icon}`}
-                                                key={extension.name || extension.l10nId}
-                                            />
-                                        ))}
-                                    </FlexRow>
-                                </FlexRow>
-                            </MediaQuery>
-                            <FlexRow className="description-block">
-                                <div className="project-textlabel">
-                                    Instructions
-                                </div>
-                                {editable ?
-                                    <InplaceInput
-                                        className={classNames(
-                                            'project-description-edit',
-                                            {remixes: parentInfo && parentInfo.author}
-                                        )}
-                                        handleUpdate={onUpdate}
-                                        name="instructions"
-                                        placeholder="Tell people how to use your project (such as which keys to press)."
-                                        type="textarea"
-                                        validationErrors={{
-                                            maxLength: 'Sorry description is too long'
-                                            // maxLength: props.intl.formatMessage({
-                                            //     id: 'project.descriptionMaxLength'
-                                            // })
-                                        }}
-                                        validations={{
-                                            // TODO: actual 5000
-                                            maxLength: 1000
-                                        }}
-                                        value={projectInfo.instructions}
-                                    /> :
-                                    <div className="project-description">
-                                        {decorateText(projectInfo.instructions)}
-                                    </div>
-                                }
-                            </FlexRow>
-                            <FlexRow className="description-block">
-                                <div className="project-textlabel">
-                                    Notes and Credits
-                                </div>
-                                {editable ?
-                                    <InplaceInput
-                                        className={classNames(
-                                            'project-description-edit',
-                                            'last',
-                                            {remixes: parentInfo && parentInfo.author}
-                                        )}
-                                        handleUpdate={onUpdate}
-                                        name="description"
-                                        placeholder="How did you make this project? Did you use ideas scripts or artwork from other people? Thank them here."
-                                        type="textarea"
-                                        validationErrors={{
-                                            maxLength: 'Sorry description is too long'
-                                            // maxLength: props.intl.formatMessage({
-                                            //     id: 'project.descriptionMaxLength'
-                                            // })
-                                        }}
-                                        validations={{
-                                            // TODO: actual 5000
-                                            maxLength: 1000
-                                        }}
-                                        value={projectInfo.description}
-                                    /> :
-                                    <div className="project-description last">
-                                        {decorateText(projectInfo.description)}
-                                    </div>
-                                }
-                            </FlexRow>
-                            {/*  eslint-enable max-len */}
-                        </FlexRow>
-                    </FlexRow>
-                    <MediaQuery minWidth={frameless.tablet}>
-                        <FlexRow className="preview-row">
-                            <Stats
-                                faved={faved}
-                                favoriteCount={favoriteCount}
-                                loveCount={loveCount}
-                                loved={loved}
-                                projectInfo={projectInfo}
-                                onFavoriteClicked={onFavoriteClicked}
-                                onLoveClicked={onLoveClicked}
-                            />
-                            <Subactions
-                                addToStudioOpen={addToStudioOpen}
-                                isLoggedIn={isLoggedIn}
-                                projectInfo={projectInfo}
-                                reportOpen={reportOpen}
-                                studios={studios}
-                                userOwnsProject={userOwnsProject}
-                                onAddToStudioClicked={onAddToStudioClicked}
-                                onAddToStudioClosed={onAddToStudioClosed}
-                                onReportClicked={onReportClicked}
-                                onReportClose={onReportClose}
-                                onReportSubmit={onReportSubmit}
-                                onToggleStudio={onToggleStudio}
-                            />
-                        </FlexRow>
-                    </MediaQuery>
-                    <MediaQuery minWidth={frameless.tablet}>
-                        <FlexRow className="preview-row">
-                            <FlexRow className="extension-list">
-                                {extensions && extensions.map(extension => (
-                                    <ExtensionChip
-                                        extensionL10n={extension.l10nId}
-                                        extensionName={extension.name}
-                                        hasStatus={extension.hasStatus}
-                                        iconURI={extension.icon && `/svgs/project/${extension.icon}`}
-                                        key={extension.name || extension.l10nId}
-                                    />
-                                ))}
-                            </FlexRow>
-                        </FlexRow>
-                    </MediaQuery>
-                </div>
-                <div className="project-lower-container">
-                    <div className="inner">
-                        <FlexRow className="preview-row">
-                            <div className="comments-container">
-                                <FlexRow className="comments-header">
-                                    <h4>Comments</h4>
-                                    {/* TODO: Add toggle comments component and logic*/}
-                                </FlexRow>
-                                <FlexRow className="comments-list">
-                                    {comments.map(comment => (
-                                        <TopLevelComment
-                                            author={comment.author}
-                                            content={comment.content}
-                                            datetimeCreated={comment.datetime_created}
-                                            deletable={userOwnsProject}
-                                            deleted={comment.deleted}
-                                            id={comment.id}
-                                            key={comment.id}
-                                            parentId={comment.parent_id}
-                                            projectId={projectId}
-                                            replies={replies && replies[comment.id] ? replies[comment.id] : []}
-                                            onDelete={onDeleteComment}
+                        <MediaQuery minWidth={frameless.tablet}>
+                            <FlexRow className="preview-row">
+                                <FlexRow className="extension-list">
+                                    {extensions && extensions.map(extension => (
+                                        <ExtensionChip
+                                            extensionL10n={extension.l10nId}
+                                            extensionName={extension.name}
+                                            hasStatus={extension.hasStatus}
+                                            iconURI={extension.icon && `/svgs/project/${extension.icon}`}
+                                            key={extension.name || extension.l10nId}
                                         />
                                     ))}
-                                    {comments.length < projectInfo.stats.comments &&
+                                </FlexRow>
+                            </FlexRow>
+                        </MediaQuery>
+                    </div>
+                    <div className="project-lower-container">
+                        <div className="inner">
+                            <FlexRow className="preview-row">
+                                <div className="comments-container">
+                                    <FlexRow className="comments-header">
+                                        <h4>Comments</h4>
+                                        {/* TODO: Add toggle comments component and logic*/}
+                                    </FlexRow>
+                                    <FlexRow className="comments-list">
+                                        {comments.map(comment => (
+                                            <TopLevelComment
+                                                author={comment.author}
+                                                content={comment.content}
+                                                datetimeCreated={comment.datetime_created}
+                                                deletable={userOwnsProject}
+                                                deleted={comment.deleted}
+                                                id={comment.id}
+                                                key={comment.id}
+                                                parentId={comment.parent_id}
+                                                projectId={projectId}
+                                                replies={replies && replies[comment.id] ? replies[comment.id] : []}
+                                                onDelete={onDeleteComment}
+                                            />
+                                        ))}
+                                        {comments.length < projectInfo.stats.comments &&
                                         <Button
                                             className="button load-more-button"
                                             onClick={onLoadMore}
                                         >
                                             Load More
                                         </Button>
-                                    }
+                                        }
+                                    </FlexRow>
+                                </div>
+                                <FlexRow className="column">
+                                    <RemixList remixes={remixes} />
+                                    <StudioList studios={projectStudios} />
                                 </FlexRow>
-                            </div>
-                            <FlexRow className="column">
-                                <RemixList remixes={remixes} />
-                                <StudioList studios={projectStudios} />
                             </FlexRow>
-                        </FlexRow>
+                        </div>
                     </div>
-                </div>
-            </Formsy>
-        )}
-    </div>
-);
+                </Formsy>
+            )}
+        </div>
+    );
+};
 
 PreviewPresentation.propTypes = {
     addToStudioOpen: PropTypes.bool,
diff --git a/src/views/preview/subactions.jsx b/src/views/preview/subactions.jsx
index 145703883..15acbb27b 100644
--- a/src/views/preview/subactions.jsx
+++ b/src/views/preview/subactions.jsx
@@ -7,74 +7,68 @@ const Button = require('../../components/forms/button.jsx');
 const AddToStudioModal = require('../../components/modal/addtostudio/container.jsx');
 const ReportModal = require('../../components/modal/report/modal.jsx');
 
-const projectShape = require('./projectshape.jsx').projectShape;
-
 require('./subactions.scss');
 
-const Subactions = props => {
-    const shareDate = ((props.projectInfo.history && props.projectInfo.history.shared)) ?
-        props.projectInfo.history.shared : '';
-    return (
-        <FlexRow className="subactions">
-            <div className="share-date">
-                <div className="copyleft">&copy;</div>
-                {' '}
-                {/*  eslint-disable react/jsx-sort-props */}
-                {shareDate === null ?
-                    'Unshared' :
-                    <FormattedDate
-                        value={Date.parse(shareDate)}
-                        day="2-digit"
-                        month="short"
-                        year="numeric"
-                    />
-                }
-                {/*  eslint-enable react/jsx-sort-props */}
-            </div>
-            <FlexRow className="action-buttons">
-                {(props.isLoggedIn && props.userOwnsProject) &&
-                    <React.Fragment>
-                        <Button
-                            className="action-button studio-button"
-                            key="add-to-studio-button"
-                            onClick={props.onAddToStudioClicked}
-                        >
-                            Add to Studio
-                        </Button>,
-                        <AddToStudioModal
-                            isOpen={props.addToStudioOpen}
-                            key="add-to-studio-modal"
-                            studios={props.studios}
-                            onRequestClose={props.onAddToStudioClosed}
-                            onToggleStudio={props.onToggleStudio}
-                        />
-                    </React.Fragment>
-                }
-                <Button className="action-button copy-link-button">
-                  Copy Link
-                </Button>
-                {(props.isLoggedIn && !props.userOwnsProject) &&
+const Subactions = props => (
+    <FlexRow className="subactions">
+        <div className="share-date">
+            <div className="copyleft">&copy;</div>
+            {' '}
+            {/*  eslint-disable react/jsx-sort-props */}
+            {props.shareDate === null ?
+                'Unshared' :
+                <FormattedDate
+                    value={Date.parse(props.shareDate)}
+                    day="2-digit"
+                    month="short"
+                    year="numeric"
+                />
+            }
+            {/*  eslint-enable react/jsx-sort-props */}
+        </div>
+        <FlexRow className="action-buttons">
+            {(props.isLoggedIn && props.userOwnsProject) &&
                 <React.Fragment>
                     <Button
-                        className="action-button report-button"
-                        key="report-button"
-                        onClick={props.onReportClicked}
+                        className="action-button studio-button"
+                        key="add-to-studio-button"
+                        onClick={props.onAddToStudioClicked}
                     >
-                        Report
+                        Add to Studio
                     </Button>,
-                    <ReportModal
-                        isOpen={props.reportOpen}
-                        key="report-modal"
-                        type="project"
-                        onReport={props.onReportSubmit}
-                        onRequestClose={props.onReportClose}
+                    <AddToStudioModal
+                        isOpen={props.addToStudioOpen}
+                        key="add-to-studio-modal"
+                        studios={props.studios}
+                        onRequestClose={props.onAddToStudioClosed}
+                        onToggleStudio={props.onToggleStudio}
                     />
                 </React.Fragment>
-                }
-            </FlexRow>
+            }
+            <Button className="action-button copy-link-button">
+              Copy Link
+            </Button>
+            {(props.isLoggedIn && !props.userOwnsProject) &&
+            <React.Fragment>
+                <Button
+                    className="action-button report-button"
+                    key="report-button"
+                    onClick={props.onReportClicked}
+                >
+                    Report
+                </Button>,
+                <ReportModal
+                    isOpen={props.reportOpen}
+                    key="report-modal"
+                    type="project"
+                    onReport={props.onReportSubmit}
+                    onRequestClose={props.onReportClose}
+                />
+            </React.Fragment>
+            }
         </FlexRow>
-    );
-};
+    </FlexRow>
+);
 
 Subactions.propTypes = {
     addToStudioOpen: PropTypes.bool,
@@ -85,8 +79,8 @@ Subactions.propTypes = {
     onReportClose: PropTypes.func.isRequired,
     onReportSubmit: PropTypes.func.isRequired,
     onToggleStudio: PropTypes.func,
-    projectInfo: projectShape,
     reportOpen: PropTypes.bool,
+    shareDate: PropTypes.string,
     studios: PropTypes.arrayOf(PropTypes.object),
     userOwnsProject: PropTypes.bool