Homepages: Use Community component in both DefaultHome and UserHome (#…

…6149) * import Community component into both DefaultHome and UserHome * remove prop-types warnings
zooniverse · Jul 5, 2024 · 968683c · 968683c
1 parent 5bcd1c8
commit 968683c
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 181 deletions.
diff --git a/packages/app-root/src/components/HomePageContainer.js b/packages/app-root/src/components/HomePageContainer.js
@@ -3,7 +3,7 @@
 import { useContext } from 'react'
 import { Box } from 'grommet'
 import { PanoptesAuthContext } from '../contexts'
-import { CommunityContainer, DefaultHome } from '@zooniverse/content'
+import { DefaultHome } from '@zooniverse/content'
 import { UserHome } from '@zooniverse/user'
 import { Loader } from '@zooniverse/react-components'
 
@@ -14,20 +14,27 @@ export default function HomePageContainer({
   const { isLoading, user } = useContext(PanoptesAuthContext)
 
   return (
-    <main>
+    <>
       {isLoading ? (
-        <Box height='100vh' align='center' justify='center'>
+        <Box as='main' height='100vh' align='center' justify='center'>
           <Loader />
         </Box>
       ) : (
         <Box height={{ min: '100vh' }}>
-          {user?.login ? <UserHome authUser={user} /> : <DefaultHome />}
+          {user?.login ? (
+            <UserHome
+              authUser={user}
+              dailyZooPosts={dailyZooPosts}
+              zooBlogPosts={zooBlogPosts}
+            />
+          ) : (
+            <DefaultHome
+              dailyZooPosts={dailyZooPosts}
+              zooBlogPosts={zooBlogPosts}
+            />
+          )}
         </Box>
       )}
-      <CommunityContainer
-        dailyZooPosts={dailyZooPosts}
-        zooBlogPosts={zooBlogPosts}
-      />
-    </main>
+    </>
   )
 }
diff --git a/packages/lib-content/src/screens/Home/Community/Community.js b/packages/lib-content/src/screens/Home/Community/Community.js
@@ -1,117 +1,87 @@
 import { Anchor, Box, Heading, ResponsiveContext } from 'grommet'
 import { useTranslation } from '../../../translations/i18n.js'
 import { SpacedHeading } from '@zooniverse/react-components'
-import styled from 'styled-components'
 import { useContext } from 'react'
 
 import Article from '../../../components/Article/Article.js'
 import SubHeading from '../../../components/HeadingForAboutNav/SubHeading.js'
 
-const ElevatedBox = styled(Box)`
-  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); // Grommet elevation = 'medium'
-  clip-path: inset(1px -30px 0px -30px); // don't put elevation top and bottom
-  padding: 60px 0;
-
-  // hides seam between DefaultHome or UserHome and this component
-  position: relative;
-  z-index: 99;
-  margin-top: -3px;
-
-  @media (width <= 90rem) {
-    padding: 30px;
-  }
-`
-
 export default function Community({ dailyZooPosts = [], zooBlogPosts = [] }) {
   const { t } = useTranslation()
   const size = useContext(ResponsiveContext)
 
   return (
     <Box
-      background={{
-        dark: 'dark-1',
-        light: 'light-1'
-      }}
-      align='center'
+      round='small'
+      pad={size === 'small' ? '0' : 'large'}
+      border={
+        size === 'small'
+          ? false
+          : {
+              color: { light: 'light-5', dark: 'black' },
+              size: 'xsmall'
+            }
+      }
+      width='min(100%, calc(90rem - 160px))' // Like 80px horizontal padding, matches lib-user Layout
     >
-      <ElevatedBox
-        align='center'
-        background={{ dark: 'dark-3', light: 'neutral-6' }}
-        width='min(100%, 90rem)'
+      <SpacedHeading
+        color={{ light: 'neutral-1', dark: 'accent-1' }}
+        level={2}
+        size='1.5rem'
+        alignSelf='center'
+        textAlign='center'
       >
-        <Box
-          round='small'
-          pad={size === 'small' ? '0' : 'large'}
-          border={
-            size === 'small'
-              ? false
-              : {
-                  color: { light: 'light-5', dark: 'black' },
-                  size: 'xsmall'
-                }
-          }
-          width='min(100%, calc(90rem - 160px))' // Like 80px horizontal padding, matches lib-user Layout
-        >
-          <SpacedHeading
-            color={{ light: 'neutral-1', dark: 'accent-1' }}
-            level={2}
-            size='1.5rem'
-            alignSelf='center'
-            textAlign='center'
-          >
-            {t('Home.Community.heading')}
-          </SpacedHeading>
-          <SubHeading>{t('Home.Community.subheading')}</SubHeading>
+        {t('Home.Community.heading')}
+      </SpacedHeading>
+      <SubHeading>{t('Home.Community.subheading')}</SubHeading>
 
-          {/* The Daily Zooniverse */}
-          <Box
-            border={{
-              side: 'bottom',
-              color: { light: 'light-4', dark: 'black' },
-              size: 'xsmall'
-            }}
-            direction='row'
-            justify='between'
-            align='center'
-            margin={{ vertical: 'small' }}
-          >
-            <Heading level={3} size='1rem'>
-              {t('Home.Community.feedOne')}
-            </Heading>
-            <Anchor href='https://daily.zooniverse.org' size='1rem'>
-              {t('Home.Community.seeAll')}
-            </Anchor>
-          </Box>
-          <Box gap='small' margin={{ bottom: 'medium' }}>
-            {dailyZooPosts.length
-              ? dailyZooPosts.map(item => <Article key={item.id} {...item} />)
-              : null}
-          </Box>
+      {/* The Daily Zooniverse */}
+      <Box
+        border={{
+          side: 'bottom',
+          color: { light: 'light-4', dark: 'black' },
+          size: 'xsmall'
+        }}
+        direction='row'
+        justify='between'
+        align='center'
+        margin={{ vertical: 'small' }}
+      >
+        <Heading level={3} size='1rem'>
+          {t('Home.Community.feedOne')}
+        </Heading>
+        <Anchor href='https://daily.zooniverse.org' size='1rem'>
+          {t('Home.Community.seeAll')}
+        </Anchor>
+      </Box>
+      <Box gap='small' margin={{ bottom: 'medium' }}>
+        {dailyZooPosts.length
+          ? dailyZooPosts.map(item => <Article key={item.id} {...item} />)
+          : null}
+      </Box>
 
-          {/* The Zooniverse Blog */}
-          <Box
-            direction='row'
-            justify='between'
-            align='center'
-            border={{
-              position: 'bottom',
-              color: { light: 'light-1', dark: 'dark-1' }
-            }}
-          >
-            <Heading level={3} size='1rem'>
-              {t('Home.Community.feedTwo')}
-            </Heading>
-            <Anchor href='https://blog.zooniverse.org' size='1rem'>
-              {t('Home.Community.seeAll')}
-            </Anchor>
-          </Box>
-          <Box gap='small'>
-            {zooBlogPosts.length
-              ? zooBlogPosts.map(item => <Article key={item.id} {...item} />)
-              : null}
-          </Box>
-        </Box>
-      </ElevatedBox>
+      {/* The Zooniverse Blog */}
+      <Box
+        direction='row'
+        justify='between'
+        align='center'
+        border={{
+          position: 'bottom',
+          color: { light: 'light-1', dark: 'dark-1' }
+        }}
+      >
+        <Heading level={3} size='1rem'>
+          {t('Home.Community.feedTwo')}
+        </Heading>
+        <Anchor href='https://blog.zooniverse.org' size='1rem'>
+          {t('Home.Community.seeAll')}
+        </Anchor>
+      </Box>
+      <Box gap='small'>
+        {zooBlogPosts.length
+          ? zooBlogPosts.map(item => <Article key={item.id} {...item} />)
+          : null}
+      </Box>
     </Box>
   )
 }
diff --git a/packages/lib-content/src/screens/Home/Community/CommunityContainer.js b/packages/lib-content/src/screens/Home/Community/CommunityContainer.js
@@ -38,3 +38,4 @@ export default function CommunityContainer({
     />
   )
 }
+
diff --git a/packages/lib-content/src/screens/Home/Community/blogPosts.mock.json b/packages/lib-content/src/screens/Home/Community/blogPosts.mock.json
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
@@ -5,6 +5,7 @@ import { SpacedHeading } from '@zooniverse/react-components'
 import { useTranslation } from '../../../translations/i18n.js'
 import styled from 'styled-components'
 
+import CommunityContainer from '../Community/CommunityContainer.js'
 import ContainerBox from '../../../components/PageLayout/ContainerBox.js'
 import MaxWidthContent from '../../../components/MaxWidthContent/MaxWidthContent.js'
 import Introduction from './components/Introduction.js'
@@ -22,11 +23,12 @@ const StyledContainerBox = styled(ContainerBox)`
   }
 `
 
-export default function DefaultHome() {
+export default function DefaultHome({ dailyZooPosts = [], zooBlogPosts = [] }) {
   const { t } = useTranslation()
 
   return (
     <Box
+      as='main'
       background={{
         dark: 'dark-1',
         light: 'light-1'
@@ -42,6 +44,7 @@ export default function DefaultHome() {
         <Box
           align='center'
           width='min(100%, calc(90rem - 160px))' // Like 80px horizontal padding, matches lib-user Layout
+          pad={{ bottom: '50px' }}
         >
           <MaxWidthContent>
             <Introduction />
@@ -59,6 +62,10 @@ export default function DefaultHome() {
           </SpacedHeading>
           <SubHeading>{t('Home.DefaultHome.subheadings.four')}</SubHeading>
           <Mobile />
+          <CommunityContainer
+            dailyZooPosts={dailyZooPosts}
+            zooBlogPosts={zooBlogPosts}
+          />
         </Box>
       </StyledContainerBox>
     </Box>

diff --git a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.stories.js b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.stories.js
@@ -1,8 +1,14 @@
+import dailyZooPosts from '../Community/dailyZooPosts.mock.json'
+import zooBlogPosts from '../Community/zooBlogPosts.mock.json'
 import DefaultHome from './DefaultHome.js'
 
 export default {
   title: 'Screens / Home / DefaultHome',
-  component: DefaultHome
+  component: DefaultHome,
+  args: {
+    dailyZooPosts,
+    zooBlogPosts
+  }
 }
 
 export const Default = {}
diff --git a/packages/lib-user/src/components/UserHome/UserHome.js b/packages/lib-user/src/components/UserHome/UserHome.js
@@ -1,14 +1,14 @@
-import { shape, string } from 'prop-types'
 import { useContext } from 'react'
-import { Grid, ResponsiveContext } from 'grommet'
+import { Box, Grid, ResponsiveContext } from 'grommet'
+import { CommunityContainer } from '@zooniverse/content'
 
 import { Layout } from '@components/shared'
 import DashboardContainer from './components/Dashboard/DashboardContainer.js'
 import RecentProjectsContainer from './components/RecentProjects/RecentProjectsContainer.js'
 import RecentSubjectsContainer from './components/RecentSubjects/RecentSubjectsContainer.js'
 import MyGroupsContainer from '../MyGroups/MyGroupsContainer.js'
 
-function UserHome({ authUser }) {
+function UserHome({ authUser, dailyZooPosts = [], zooBlogPosts = [] }) {
   const size = useContext(ResponsiveContext)
 
   return (
@@ -19,14 +19,15 @@ function UserHome({ authUser }) {
         <MyGroupsContainer previewLayout authUser={authUser} login={authUser.login} />
       </Grid>
       <RecentSubjectsContainer authUser={authUser} />
+      <Box pad={size !== 'small' ? '0' : { horizontal: '30px' }}>
+        <CommunityContainer
+          dailyZooPosts={dailyZooPosts}
+          zooBlogPosts={zooBlogPosts}
+        />
+      </Box>
     </Layout>
   )
 }
 
 export default UserHome
 
-UserHome.propTypes = {
-  authUser: shape({
-    id: string
-  })
-}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -38,3 +38,4 @@ export default function CommunityContainer({
		/>
		)
		}