Merge branch 'master' into homepage-groups-preview

packages/app-root/src/app/users/[login]/groups/MyGroupsContainer.js

@@ -4,7 +4,7 @@ import { MyGroups } from '@zooniverse/user'
 import { useContext } from 'react'
 
 import { PanoptesAuthContext } from '../../../../contexts'
-import AuthenticatedUsersPageContainer from '../components/AuthenticatedUsersPageContainer'
+import AuthenticatedUsersPageContainer from '../../../../components/AuthenticatedUsersPageContainer'
 
 function MyGroupsContainer({
   login

packages/app-root/src/app/users/[login]/stats/UserStatsContainer.js

@@ -3,13 +3,19 @@
 import { UserStats } from '@zooniverse/user'
 import { useContext } from 'react'
 
-import { PanoptesAuthContext } from '../../../../contexts'
-import AuthenticatedUsersPageContainer from '../components/AuthenticatedUsersPageContainer'
+import { PanoptesAuthContext, UserStatsContext } from '../../../../contexts'
+import AuthenticatedUsersPageContainer from '../../../../components/AuthenticatedUsersPageContainer'
 
 function UserStatsContainer({
   login
 }) {
   const { adminMode, isLoading, user } = useContext(PanoptesAuthContext)
+  const {
+    selectedDateRange,
+    selectedProject,
+    setSelectedDateRange,
+    setSelectedProject
+  } = useContext(UserStatsContext)
 
   return (
     <AuthenticatedUsersPageContainer
@@ -21,6 +27,10 @@ function UserStatsContainer({
       <UserStats
         authUser={user}
         login={login}
+        selectedDateRange={selectedDateRange}
+        selectedProject={selectedProject}
+        setSelectedDateRange={setSelectedDateRange}
+        setSelectedProject={setSelectedProject}
       />
     </AuthenticatedUsersPageContainer>
   )

packages/app-root/src/app/users/[login]/stats/certificate/CertificateContainer.js

@@ -0,0 +1,35 @@
+'use client'
+
+import { Certificate } from '@zooniverse/user'
+import { useContext } from 'react'
+
+import { PanoptesAuthContext, UserStatsContext } from '../../../../../contexts'
+import AuthenticatedUsersPageContainer from '../../../../../components/AuthenticatedUsersPageContainer'
+
+function CertificateContainer({
+  login
+}) {
+  const { adminMode, isLoading, user } = useContext(PanoptesAuthContext)
+  const {
+    selectedDateRange,
+    selectedProject
+  } = useContext(UserStatsContext)
+
+  return (
+    <AuthenticatedUsersPageContainer
+      adminMode={adminMode}
+      isLoading={isLoading}
+      login={login}
+      user={user}
+    >
+      <Certificate
+        authUser={user}
+        login={login}
+        selectedDateRange={selectedDateRange}
+        selectedProject={selectedProject}
+      />
+    </AuthenticatedUsersPageContainer>
+  )
+}
+
+export default CertificateContainer

packages/app-root/src/app/users/[login]/stats/certificate/page.js

@@ -0,0 +1,14 @@
+import CertificateContainer from './CertificateContainer'
+
+export const metadata = {
+  title: 'Certificate',
+  description: 'My Zooniverse certificate page'
+}
+
+export default function Certificate({ params }) {
+  return (
+    <CertificateContainer
+      login={params.login}
+    />
+  )
+}

packages/app-root/src/app/users/[login]/stats/layout.js

@@ -0,0 +1,9 @@
+import UserStatsContextProvider from '../../../../components/UserStatsContextProvider'
+
+export default function UserStatsLayout({ children }) {
+  return (
+    <UserStatsContextProvider>
+      {children}
+    </UserStatsContextProvider>
+  )
+}

packages/app-root/src/components/UserStatsContextProvider.js

@@ -0,0 +1,27 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { PanoptesAuthContext, UserStatsContext } from '../contexts'
+import { useStatsDateRange, useStatsProject } from '../hooks'
+
+function UserStatsContextProvider({ children }) {
+  const { isLoading, user } = useContext(PanoptesAuthContext)
+  const { selectedDateRange, setSelectedDateRange } = useStatsDateRange({ isLoading, user })
+  const { selectedProject, setSelectedProject } = useStatsProject({ isLoading, user })
+
+  const statsContext = {
+    selectedDateRange,
+    selectedProject,
+    setSelectedDateRange,
+    setSelectedProject
+  }
+
+  return (
+    <UserStatsContext.Provider value={statsContext}>
+      {children}
+    </UserStatsContext.Provider>
+  )
+}
+
+export default UserStatsContextProvider

packages/app-root/src/contexts/UserStatsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const UserStatsContext = createContext({})
+
+export default UserStatsContext

packages/app-root/src/contexts/index.js

@@ -1,2 +1,3 @@
 export { default as PanoptesAuthContext } from './PanoptesAuthContext.js'
 export { default as ThemeModeContext } from './ThemeModeContext.js'
+export { default as UserStatsContext } from './UserStatsContext.js'

packages/app-root/src/hooks/index.js

@@ -1,2 +1,4 @@
 export { default as useAdminMode } from './useAdminMode.js'
 export { default as usePreferredTheme } from './usePreferredTheme.js'
+export { default as useStatsDateRange } from './useStatsDateRange.js'
+export { default as useStatsProject } from './useStatsProject.js'

packages/app-root/src/hooks/useStatsDateRange.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+const isBrowser = typeof window !== 'undefined'
+const localStorage = isBrowser ? window.localStorage : null
+
+let initialDateRange = 'Last7Days'
+if (isBrowser) {
+  initialDateRange = localStorage?.getItem('selectedDateRange') || initialDateRange
+}
+
+export default function useStatsDateRange({ isLoading, user }) {
+  const [selectedDateRange, setSelectedDateRange] = useState(initialDateRange)
+
+  useEffect(function onDateRangeChange() {
+    localStorage?.setItem('selectedDateRange', selectedDateRange)
+  }, [selectedDateRange])
+
+  useEffect(function onUserChange() {
+    // when a user successfully logs out isLoading is false and user is undefined
+    if (!isLoading && !user?.login) {
+      setSelectedDateRange('Last7Days')
+    }
+  }, [isLoading, user?.login])
+
+  return { selectedDateRange, setSelectedDateRange }
+}

packages/app-root/src/hooks/useStatsProject.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+const isBrowser = typeof window !== 'undefined'
+const localStorage = isBrowser ? window.localStorage : null
+
+let initialProject = 'AllProjects'
+if (isBrowser) {
+  initialProject = localStorage?.getItem('selectedProject') || initialProject
+}
+
+export default function useStatsProject({ isLoading, user }) {
+  const [selectedProject, setSelectedProject] = useState(initialProject)
+
+  useEffect(function onProjectChange() {
+    localStorage?.setItem('selectedProject', selectedProject)
+  }, [selectedProject])
+
+  useEffect(function onUserChange() {
+    // when a user successfully logs out isLoading is false and user is undefined
+    if (!isLoading && !user?.login) {
+      setSelectedProject('AllProjects')
+    }
+  }, [isLoading, user?.login])
+
+  return { selectedProject, setSelectedProject }
+}

packages/lib-react-components/CHANGELOG.md

@@ -1,9 +1,16 @@
 # Change Log
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Changed
+
+- ZooFooter and ZooHeader styling to include `display: none;` when printing (`@media print`)
+
 ## [1.13.0] 2024-05-17
 
 ### Added

packages/lib-react-components/src/ProjectCard/ProjectCard.js

@@ -1,5 +1,5 @@
-import { Box } from 'grommet'
-import { string } from 'prop-types'
+import { Box, Text } from 'grommet'
+import { number, string } from 'prop-types'
 import styled from 'styled-components'
 import SpacedText from '../SpacedText'
 
@@ -42,42 +42,55 @@ const StyledProjectDescription = styled(SpacedText)`
   }
 `
 
-function cardWidth (size) {
+const StyledBadge = styled(Text)`
+  display: flex;
+  margin: 5px 5px 5px auto;
+  border-radius: 50%;
+  padding: 3px;
+  background: white;
+  aspect-ratio: 1 / 1;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+`
+
+function cardWidth(size) {
   switch (size) {
     case 'small':
-      return 157;
+      return 157
     case 'medium':
-      return 189;
+      return 189
     case 'large':
-      return 220;
+      return 220
     case 'xlarge':
-      return 252;
+      return 252
     default:
-      return 189;
+      return 189
   }
 }
 
-function cardFontSize (size) {
+function cardFontSize(size) {
   switch (size) {
     case 'small':
-      return '0.625rem';
+      return '0.625rem'
     case 'medium':
-      return '0.656rem';
+      return '0.656rem'
     case 'large':
-      return '0.688rem';
+      return '0.688rem'
     case 'xlarge':
-      return '0.8rem';
+      return '0.8rem'
     default:
-      return '0.656rem';
+      return '0.656rem'
   }
 }
 
-function ProjectCard ({
+function ProjectCard({
+  badge = undefined,
   description = '',
   displayName = '',
   href = '',
   imageSrc = '',
-  size = 'medium',
+  size = 'medium'
 }) {
   return (
     <StyledProjectCard
@@ -87,19 +100,22 @@ function ProjectCard ({
       href={href}
       round='8px'
       cardFontSize={cardFontSize(size)}
-      height={`${cardWidth(size) * 14 / 11}px`}
+      height={`${(cardWidth(size) * 14) / 11}px`}
       width={`${cardWidth(size)}px`}
     >
       <Box
         className='project-image'
         background={{
           image: `url(${imageSrc})`,
           position: 'top',
-          size: 'cover',
+          size: 'cover'
         }}
         height={`${cardWidth(size)}px`}
         round={{ corner: 'top', size: '8px' }}
       >
+        {badge ? <StyledBadge color='black' size='0.75rem' weight='bold'>
+          {badge}
+        </StyledBadge> : null}
       </Box>
       <StyledProjectContent
         flex='grow'
@@ -129,6 +145,7 @@ function ProjectCard ({
 }
 
 ProjectCard.propTypes = {
+  badge: number,
   description: string,
   displayName: string,
   href: string,

packages/lib-react-components/src/ProjectCard/ProjectCard.stories.js

@@ -8,6 +8,7 @@ export default {
 
 export const NfnCaliFlowers = {
   args: {
+    badge: 3,
     description: 'Using digital images to investigate ​phenological change in a biodiversity hotspot​',
     displayName: `Notes from Nature - Capturing California's Flowers`,
     imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',

packages/lib-react-components/src/ZooFooter/ZooFooter.js

@@ -1,6 +1,7 @@
 import { Box, Grid } from 'grommet'
 import { arrayOf, node, string } from 'prop-types'
 import { useEffect } from 'react'
+import styled from 'styled-components'
 import i18n, { useTranslation } from '../translations/i18n'
 import { useHasMounted } from '../hooks'
 
@@ -11,6 +12,13 @@ import {
   SocialAnchor
 } from './components'
 
+const StyledFooter = styled(Box)`
+  // hide the footer when printing, added for the user stats certificate, but applies generally
+  @media print {
+    display: none;
+  }
+`
+
 const defaultProps = {
   aboutNavListURLs: [
     'https://www.zooniverse.org/about',
@@ -112,8 +120,8 @@ export default function ZooFooter({
   const talkNavListLabels = [t('ZooFooter.talkLabels.talk')]
 
   return (
-    <Box
-      as='footer'
+    <StyledFooter
+      forwardedAs='footer'
       background={{
         dark: 'dark-1',
         light: 'white'
@@ -191,7 +199,7 @@ export default function ZooFooter({
         />
         <Box>{hasMounted && adminContainer}</Box>
       </Box>
-    </Box>
+    </StyledFooter>
   )
 }
 

packages/lib-react-components/src/ZooHeader/ZooHeader.js

@@ -15,6 +15,11 @@ import ZooniverseLogo from '../ZooniverseLogo'
 export const StyledHeader = styled(Box)`
   color: #b2b2b2;
   font-size: 1em;
+
+  // hide the header when printing, added for the user stats certificate, but applies generally
+  @media print {
+    display: none;
+  }
 `
 
 export const StyledLogoAnchor = styled(Anchor)`