@openneuro/app 4.4.10 → 4.6.0-alpha.0

package/src/scripts/{refactor_2021/containers/front-page-container.tsx → pages/front-page/front-page.tsx}

@@ -2,9 +2,9 @@ import { apm } from '../../apm'
 import React from 'react'
 import { gql, useQuery } from '@apollo/client'
 import { Mutation } from '@apollo/client/react/components'
+import styled from '@emotion/styled'
 
 import {
-  FrontPage,
   AffiliateBlock,
   ActivityHeader,
   Contributors,
@@ -154,37 +154,58 @@ export const FrontPageNewQuery = ({ query }) => {
     )
   }
 }
-const FrontPageContainer: React.FC = () => {
-  return (
-    <>
-      <FrontPage
-        className="front-page"
-        renderAffiliateBlock={() => <AffiliateBlock />}
-        renderInfographic={() => <Infographic />}
-        renderActivitySliderFront={() => (
-          <>
-            <ActivityHeader />
-            <FrontPageTopQuery query={TOP_VIEWED} />
-            <FrontPageNewQuery query={RECENTLY_PUBLISHED} />
-          </>
-        )}
-        renderGetUpdates={() => (
-          <Mutation mutation={SUBSCRIBE_TO_NEWSLETTER}>
-            {subscribeToNewsletter => (
-              <GetUpdates
-                subscribe={(email, cb) => {
-                  subscribeToNewsletter({ variables: { email } })
-                    .then(cb)
-                    .catch(cb)
-                }}
-              />
-            )}
-          </Mutation>
+
+const FrontPageSection = styled.section`
+  margin: 100px 0;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &.gray-bg {
+    margin: 0;
+    padding: 100px 0;
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+`
+
+const FrontPageContainer: React.FC = () => (
+  <div className="front-page page">
+    <FrontPageSection>
+      <AffiliateBlock />
+    </FrontPageSection>
+    <FrontPageSection>
+      <div className="container">
+        <Infographic />
+      </div>
+    </FrontPageSection>
+    <FrontPageSection className="front-page-activity">
+      <div className="activity-swoop">
+        <div></div>
+      </div>
+      <div className="swoop-content gray-bg">
+        <div className="container">
+          <ActivityHeader />
+          <FrontPageTopQuery query={TOP_VIEWED} />
+          <FrontPageNewQuery query={RECENTLY_PUBLISHED} />
+        </div>
+      </div>
+    </FrontPageSection>
+    <FrontPageSection className="gray-bg">
+      <Mutation mutation={SUBSCRIBE_TO_NEWSLETTER}>
+        {subscribeToNewsletter => (
+          <GetUpdates
+            subscribe={(email, cb) => {
+              subscribeToNewsletter({ variables: { email } }).then(cb).catch(cb)
+            }}
+          />
         )}
-        renderContributors={() => <Contributors />}
-      />
-    </>
-  )
-}
+      </Mutation>
+    </FrontPageSection>
+    <FrontPageSection className="gray-bg">
+      <Contributors />
+    </FrontPageSection>
+  </div>
+)
 
 export default FrontPageContainer

package/src/scripts/pages/front-page-comp.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styled from '@emotion/styled'
+
+const FrontPageSection = styled.section`
+  margin: 100px 0;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &.gray-bg {
+    margin: 0;
+    padding: 100px 0;
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+`
+
+export interface FrontPageProps {
+  renderAffiliateBlock: () => React.ReactNode
+  renderInfographic: () => React.ReactNode
+  renderActivitySliderFront: () => React.ReactNode
+  renderGetUpdates: () => React.ReactNode
+  renderContributors: () => React.ReactNode
+  className?: string
+}
+
+export const FrontPage: React.FC<FrontPageProps> = ({
+  renderAffiliateBlock,
+  renderInfographic,
+  renderActivitySliderFront,
+  renderGetUpdates,
+  renderContributors,
+  className,
+}) => (
+  <>
+    <div className={className + ' page'}>
+      <FrontPageSection>{renderAffiliateBlock()}</FrontPageSection>
+      <FrontPageSection>
+        <div className="container">{renderInfographic()}</div>
+      </FrontPageSection>
+      <FrontPageSection className="front-page-activity">
+        <div className="activity-swoop">
+          <div></div>
+        </div>
+        <div className="swoop-content gray-bg">
+          <div className="container">{renderActivitySliderFront()}</div>
+        </div>
+      </FrontPageSection>
+      <FrontPageSection className="gray-bg">
+        {renderGetUpdates()}
+      </FrontPageSection>
+      <FrontPageSection className="gray-bg">
+        {renderContributors()}
+      </FrontPageSection>
+    </div>
+  </>
+)

package/src/scripts/pages/import-dataset.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
-import { ImportDatasetMutation } from '../refactor_2021/dataset/mutations/import-dataset'
+import { ImportDatasetMutation } from '../dataset/mutations/import-dataset'
 import { useLocation } from 'react-router-dom'
-import LoggedIn from '../refactor_2021/authentication/logged-in'
-import LoggedOut from '../refactor_2021/authentication/logged-out'
-import { testAffirmed } from '../refactor_2021/uploader/upload-disclaimer'
-import { UploadDisclaimerInput } from '../refactor_2021/uploader/upload-disclaimer-input'
+import LoggedIn from '../authentication/logged-in'
+import LoggedOut from '../authentication/logged-out'
+import { testAffirmed } from '../uploader/upload-disclaimer'
+import { UploadDisclaimerInput } from '../uploader/upload-disclaimer-input'
 
 function useQuery() {
   const { search } = useLocation()

package/src/scripts/{refactor_2021/routes.tsx → routes.tsx}

@@ -6,15 +6,15 @@ import Dataset from './dataset/draft-snapshot-routes'
 //import PreRefactorDatasetProps from './dataset/dataset-pre-refactor-container'
 
 import { FAQS } from '@openneuro/components/faqs'
-import FrontPageContainer from './containers/front-page-container'
-import Admin from './admin/admin'
+import FrontPageContainer from './pages/front-page/front-page'
+import Admin from './pages/admin/admin'
 import SearchRoutes from './search/search-routes'
-import APIKey from './user/api'
-import ErrorRoute from '../errors/errorRoute'
-import { PETRedirect } from '../pet/redirect'
-import Citation from '../pages/citation-page'
-import FourOFourPage from '../errors/404page'
-import { ImportDataset } from '../pages/import-dataset'
+import APIKey from './pages/api'
+import ErrorRoute from './errors/errorRoute'
+import { PETRedirect } from './pages/pet-redirect'
+import Citation from './pages/citation-page'
+import FourOFourPage from './errors/404page'
+import { ImportDataset } from './pages/import-dataset'
 
 const Routes: React.VoidFunctionComponent = () => (
   <Switch>

package/src/scripts/{refactor_2021/search → search}/inputs/show-datasets-radios.tsx

@@ -35,8 +35,7 @@ const ShowDatasetsRadios: FC = () => {
         className={
           datasetType_selected.replace(/\s/g, '') +
           ' btn-group-wrapper facet-radio'
-        }
-      >
+        }>
         <RadioGroup
           radioArr={datasetType_available}
           layout="btn-group"
@@ -50,8 +49,7 @@ const ShowDatasetsRadios: FC = () => {
           <AccordionTab
             accordionStyle="plain"
             label="My Datasets Status"
-            startOpen={true}
-          >
+            startOpen={true}>
             <FacetSelect
               selected={datasetStatus_selected}
               setSelected={setShowMyUploadsSelected}

package/src/scripts/{refactor_2021/search → search}/search-container.tsx

@@ -33,7 +33,7 @@ import {
   SortBySelect,
 } from './inputs'
 import FiltersBlockContainer from './filters-block-container'
-import AggregateCountsContainer from '../aggregate-queries/aggregate-counts-container'
+import AggregateCountsContainer from '../pages/front-page/aggregate-queries/aggregate-counts-container'
 import { useCookies } from 'react-cookie'
 import { useSearchResults } from './use-search-results'
 import { SearchParamsCtx } from './search-params-ctx'

package/src/scripts/{refactor_2021/search → search}/use-search-results.tsx

@@ -59,6 +59,7 @@ const searchQuery = gql`
             ages
           }
           latestSnapshot {
+            size
             summary {
               modalities
               secondaryModalities

package/src/scripts/test-utils.js

@@ -1,4 +1,4 @@
-import cookies from './refactor_2021/utils/cookies.js'
+import cookies from './utils/cookies.js'
 
 /**
  * Sets a login cookie during a test run

package/src/scripts/{refactor_2021/uploader → uploader}/file-upload.js

@@ -1,4 +1,4 @@
-import { config } from '../../config'
+import { config } from '../config'
 import { uploads } from '@openneuro/client'
 
 /**

package/src/scripts/{refactor_2021/uploader → uploader}/upload-issues.jsx

@@ -4,7 +4,7 @@ import pluralize from 'pluralize'
 import { Loading } from '@openneuro/components/loading'
 import Results from '../validation/validation-results.jsx'
 import UploaderContext from './uploader-context.js'
-import validate from '../../workers/validate'
+import validate from '../workers/validate'
 
 const UploadValidatorStatus = ({ issues, next, reset }) => {
   const errorCount = issues.errors.length

package/src/scripts/{refactor_2021/uploader → uploader}/uploader-view.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import BlockNavigation from '../../common/partials/block-navigation.jsx'
+import BlockNavigation from '../common/partials/block-navigation.jsx'
 import UploaderContext from './uploader-context.js'
 import UploaderSetupRoutes from './uploader-setup-routes.jsx'
 import UploaderStatusRoutes from './uploader-status-routes.jsx'

package/src/scripts/{refactor_2021/uploader → uploader}/uploader.jsx

@@ -1,4 +1,4 @@
-import { apm } from '../../apm'
+import { apm } from '../apm'
 import { toast } from 'react-toastify'
 import ToastContent from '../common/partials/toast-content.jsx'
 import React from 'react'

package/src/scripts/{refactor_2021 → utils}/user-login-modal-ctx.tsx

@@ -1,7 +1,6 @@
 import React, { createContext, useState, FC, ReactNode } from 'react'
 import { UserLoginModal } from '@openneuro/components/modal'
-import loginUrls from './authentication/loginUrls'
-import { useLocation } from 'react-router-dom'
+import loginUrls from '../authentication/loginUrls'
 
 export const UserModalOpenCtx = createContext(null)
 

package/src/scripts/{refactor_2021/validation → validation}/validation.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ValidationStatus from './validation-status.jsx'
-import ErrorBoundary from '../../errors/errorBoundary.jsx'
+import ErrorBoundary from '../errors/errorBoundary.jsx'
 
 const Validation = ({ issues }) => (
   <>

package/src/scripts/mobile/collapsible-wrapper.tsx

@@ -1,93 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-interface IsOpenProps {
-  isOpen: boolean
-}
-
-// wrapper for collapsible content on mobile
-const Content = styled.div<IsOpenProps>`
-  height: 7em;
-  overflow: hidden;
-  text-align: left;
-  ${(props): string =>
-    props.isOpen &&
-    `
-      display: block;
-      height: auto;
-      overflow: auto;
-    `};
-`
-
-const Collapse = ({ children, isOpen }): React.ReactElement => {
-  return <Content isOpen={isOpen}>{children}</Content>
-}
-
-Collapse.propTypes = {
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool,
-}
-
-Collapse.defaultProps = {
-  isOpen: undefined,
-}
-
-const Item = styled.button`
-  background-color: transparent;
-  border: 0;
-  font-weight: 700;
-  padding: 0;
-  &,
-  &:hover {
-    text-decoration: none;
-  }
-  &:focus {
-    outline: 0;
-  }
-`
-
-const Wrapper = styled.span`
-  display: flex;
-  align-items: center;
-`
-
-const Title = styled.p`
-  padding-right: 0.5rem;
-  cursor: pointer;
-  color: #00505c;
-  text-decoration: none;
-  font-family: 'Cabin', sans-serif;
-  font-size: 12px;
-`
-
-const Collapsible = ({ children, ...otherProps }): React.ReactElement => {
-  const [isOpen, setOpen] = useState(false)
-  const toggleItem = (): void => {
-    setOpen(prevState => !prevState)
-  }
-  return (
-    <>
-      <div>
-        <Collapse isOpen={isOpen}>{children}</Collapse>
-      </div>
-      <Item onClick={toggleItem}>
-        <Wrapper>
-          <Title>{!isOpen ? otherProps.title[0] : otherProps.title[1]}</Title>
-        </Wrapper>
-      </Item>
-    </>
-  )
-}
-
-Collapsible.propTypes = {
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool,
-}
-
-Collapsible.defaultProps = {
-  icon: 'down-chevron',
-  isOpen: false,
-}
-
-export default Collapsible

package/src/scripts/refactor_2021/common/partials/toast-content.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const ToastContent = ({ title, body, children }) => (
-  <span>
-    <h3>{title}</h3>
-    <h4>{body}</h4>
-    {children}
-  </span>
-)
-
-ToastContent.propTypes = {
-  title: PropTypes.string,
-  body: PropTypes.string,
-  children: PropTypes.node,
-}
-
-export default ToastContent