app-root: Add login param as prop to lib-user UserStats and MyGroups …

…components (zooniverse#5980)

* Refactor to useStats hook

* Refactor with getActiveGroupsWithRoles

* Refactor formatting, Id use

* Refactor MyGroups with stats

* Add MyGroups styling

* lib-user: Add TopProjects section, refactor imports (zooniverse#5936)

* Init UserStats add ProfileHeader

* Refactor lib-user auth and user request

* Refactor useUserStats

* Refactor hooks for auth and oauth

* Move dateRanges

* Refactors for classifications and hours tabs

* Refactor stats query per date range select

* Add usePanoptesProjects hook

* Refactor BarChart data for complete series

* Add DEFAULT_DATA to BarChart

* Add TopProjects to UserStats

* Add MainContent component for ProfileHeader, BarChart, and related components

* Refactor getStatsQueryFromDateRange

* Rename getDateInterval

* Add TopProjects section

* Create "@shared" alias

* Refactor babel alias and imports

* Init UserStats tests

* Move mocks for stories and tests

* Move UserStats components

* Add TopProjects tests

* Refactor UserStats with mocks

* Increase timeout for UserStats tests

* Add MainContent story and tests

* Add timeout for UserStats tests

* Fix BarChart refactor per rebase mistake

* Refactor from ID to Id

* Revert module-resolver removal, proxyquire add

* Add production auth for local dev app

* Refactor app-root build for local prod dev work

* Refactor useUserStats auth

* Revert changes to webpack setup

* Update indexes

* Fix shared imports

* Refactor MyGroups with GroupCard

* Refactor hooks and authClient

* Refactor usePanoptesUser and usePanoptesUserGroup

* Refactor useStats authorization

* Refactor MyGroups and UserStats per auth changes

* Refactor app-root and lib-user dev App for login

* Refactor usePanoptesAuthUser and usePanoptesUser

* Refactor main components with containers

* Add TitledStat to index

* Revert app-root changes

* Revert component containers

* Refactor UserStats for usePanoptesAuthUser and useStats

* Refactor MyGroups for usePanoptesAuthUser

* Update GroupStats for usePanoptesAuthUser and useStats

* Add login prop to UserStats and MyGroups components

* Remove duplicate authUser hook

Co-authored-by: Delilah C. <[email protected]>

---------

Co-authored-by: Delilah C. <[email protected]>

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

@@ -3,10 +3,11 @@
 import { MyGroups } from '@zooniverse/user'
 import auth from 'panoptes-client/lib/auth'
 
-export default function MyGroupsPage() {
+export default function MyGroupsPage({ params }) {
   return (
     <MyGroups
       authClient={auth}
+      login={params.login}
     />
   )
 }

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

@@ -3,10 +3,11 @@
 import { UserStats } from '@zooniverse/user'
 import auth from 'panoptes-client/lib/auth'
 
-export default function UserStatsPage() {
+export default function UserStatsPage({ params }) {
   return (
     <UserStats
       authClient={auth}
+      login={params.login}
     />
   )
 }

packages/lib-user/dev/components/App/App.js

@@ -109,20 +109,24 @@ function App({
 
   if (users) {
     const subpaths = users.split('/')
+    const login = subpaths[0] || ''
 
-    if (subpaths[0] === '[login]') {
+    if (login === '[login]') {
       content = <p>In the url query param <code>?users=</code>, please replace <code>[login]</code> with a user login.</p>
     } else if (subpaths[1] === 'stats') {
-      const login = subpaths[0] || ''
-
       content = (
         <UserStats
           authClient={oauth}
           login={login}
         />
       )
     } else if (subpaths[1] === 'groups') {
-      content = <MyGroups authClient={oauth} />
+      content = (
+        <MyGroups
+          authClient={oauth}
+          login={login}
+        />
+      )
     } else {
       content = <p>User profile page goes here.</p>
     }

packages/lib-user/src/components/MyGroups/MyGroups.js

@@ -1,6 +1,7 @@
 'use client'
 
 // This component is a work in progress. It is not intended to be imported as-is, but is currently being used for initial MyGroups local development.
+import { object, string } from 'prop-types'
 
 import {
   usePanoptesAuthUser,
@@ -17,7 +18,11 @@ import { getActiveGroupsWithRoles } from './helpers/getActiveGroupsWithRoles.js'
 
 import CreateGroup from './CreateGroup.js'
 
-function MyGroups({ authClient }) {
+function MyGroups({
+  authClient,
+  login
+}) {
+
   const {
     data: authUser
   } = usePanoptesAuthUser(authClient)
@@ -30,7 +35,7 @@ function MyGroups({ authClient }) {
     authClient,
     authUser,
     authUserId: authUser?.id,
-    login: authUser?.login // will be changed per app-root login param in subsequent PR
+    login
   })
 
   const {
@@ -98,4 +103,9 @@ function MyGroups({ authClient }) {
   )
 }
 
+MyGroups.propTypes = {
+  authClient: object,
+  login: string
+}
+
 export default MyGroups

packages/lib-user/src/components/UserStats/UserStats.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { object } from 'prop-types'
+import { object, string } from 'prop-types'
 import { useState } from 'react'
 
 import {
@@ -24,7 +24,8 @@ import TopProjects from './components/TopProjects'
 const STATS_ENDPOINT = '/classifications/users'
 
 function UserStats ({
-  authClient
+  authClient,
+  login
 }) {
   const [selectedProject, setSelectedProject] = useState('AllProjects')
   const [selectedDateRange, setSelectedDateRange] = useState('Last7Days')
@@ -45,7 +46,7 @@ function UserStats ({
     authClient,
     authUser,
     authUserId: authUser?.id,
-    login: authUser?.login // will be changed per app-root login param in subsequent PR
+    login
   })
 
   // fetch all projects stats, used by projects select and top projects regardless of selected project
@@ -132,7 +133,8 @@ function UserStats ({
 }
 
 UserStats.propTypes = {
-  authClient: object
+  authClient: object,
+  login: string
 }
 
 export default UserStats